From 5d3adc23d0e9c2bd1455cbd1bf78318c9a8bcd3c Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Tue, 14 Jan 2025 09:46:28 -0800
Subject: [PATCH 1/6] Beginning of migrating from vuex to pinia

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 src/App.vue                                   |   5 +-
 src/components/contact/ContactForm.vue        |  13 +-
 src/components/entity/CredentialItem.vue      |   4 +-
 src/components/entity/EntityResult.vue        | 911 ++++++++----------
 .../credentialDetail/CredentialDetail.vue     |  15 +-
 .../entity/filter/EntityFilterChips.vue       |   5 +-
 .../entity/filter/EntityFilterDialog.vue      |   5 +-
 src/components/layout/footer/Feedback.vue     |   6 +-
 src/components/search/SearchBar.vue           |   5 +-
 .../search/filter/SearchFilterDialog.vue      |   4 +-
 src/main.ts                                   |   5 +
 src/store/index.ts                            |  14 -
 src/store/modules/app.ts                      |  35 -
 src/store/modules/contact.ts                  |  45 -
 src/store/modules/credential-detail.ts        |  62 --
 src/store/modules/entity.ts                   |   2 +
 src/store/modules/topic.ts                    |  93 --
 src/views/About.vue                           |   6 +-
 src/views/Contact.vue                         |   5 +-
 src/views/Search.vue                          |   7 +-
 20 files changed, 485 insertions(+), 762 deletions(-)
 delete mode 100644 src/store/modules/app.ts
 delete mode 100644 src/store/modules/contact.ts
 delete mode 100644 src/store/modules/credential-detail.ts
 delete mode 100644 src/store/modules/topic.ts

diff --git a/src/App.vue b/src/App.vue
index e3ec333..206096a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,8 @@ import { Component, Vue } from "vue-property-decorator";
 import Header from "@/components/layout/header/Header.vue";
 import Footer from "@/components/layout/footer/Footer.vue";
 import Loading from "@/components/shared/Loading.vue";
-import { mapGetters } from "vuex";
+import { useAppState } from "@/stores/app"
+import { mapState } from "pinia";
 
 @Component({
   components: {
@@ -23,7 +24,7 @@ import { mapGetters } from "vuex";
     Loading,
   },
   computed: {
-    ...mapGetters(["loading"]),
+    ...mapState(useAppState, {loading: "getLoading"}),
   },
 })
 export default class App extends Vue {}
diff --git a/src/components/contact/ContactForm.vue b/src/components/contact/ContactForm.vue
index c359a1a..7839d85 100644
--- a/src/components/contact/ContactForm.vue
+++ b/src/components/contact/ContactForm.vue
@@ -122,10 +122,13 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
+import { useAppState, useContactState } from "@/stores"
+import { mapActions as pmapActions, mapState } from "pinia";
+
 import router from "@/router";
 import { ICredentialType } from "@/interfaces/api/v2/credential-type.interface";
 import { IContactRequest } from "@/interfaces/api/v4/contact.interface";
-import { contactReason } from "@/store/modules/contact";
+import { contactReason } from "@/stores/contact";
 import { unwrapTranslations } from "@/utils/entity";
 
 interface Data {
@@ -158,10 +161,8 @@ export default {
     };
   },
   methods: {
-    ...mapActions({
-      setLoading: "setLoading",
-      sendContact: "sendContact"
-    }),
+    ...pmapActions(useAppState, ["setLoading"]),
+    ...pmapActions(useContactState, ["sendContact"]),
     async submit(e: Event): Promise<void> {
       e.preventDefault();
       const isFormValid = (
@@ -188,10 +189,10 @@ export default {
   },
   computed: {
     ...mapGetters({
-      loading: "loading",
       credentialTypes: "credentialTypes",
       getLikeStatus: "getLikeStatus"
     }),
+    ...mapState(useAppState, {loading: "getLoading"}),
     requestTypes: function(): Array<{ text: string; value: string }> {
       return Object.keys(contactReason).map((key) => ({
         text: contactReason[key],
diff --git a/src/components/entity/CredentialItem.vue b/src/components/entity/CredentialItem.vue
index 4016165..87f6a95 100644
--- a/src/components/entity/CredentialItem.vue
+++ b/src/components/entity/CredentialItem.vue
@@ -100,6 +100,8 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import "@/filters/date.filter";
 import { mapGetters } from "vuex";
+import { mapState } from "pinia";
+import { useTopicState } from "@/stores";
 import { ICredentialDisplayType } from "@/interfaces/api/v4/credential.interface";
 import { selectFirstAttrItem } from "@/utils/attribute";
 import i18n from "@/i18n/index";
@@ -115,9 +117,9 @@ import { isExpired, toTranslationFormat } from "@/utils/entity";
     ...mapGetters([
       "mdiOpenInNew",
       "mdiShieldCheckOutline",
-      "selectedTopic",
       "credentialTypes",
     ]),
+    ...mapState(useTopicState, ["selectedTopic"])
   },
 })
 export default class CredentialItem extends Vue {
diff --git a/src/components/entity/EntityResult.vue b/src/components/entity/EntityResult.vue
index 9e4fafa..692e5b3 100644
--- a/src/components/entity/EntityResult.vue
+++ b/src/components/entity/EntityResult.vue
@@ -439,6 +439,8 @@
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { VuetifyGoToTarget } from "vuetify/types/services/goto";
 import { mapActions, mapGetters } from "vuex";
+import { mapActions as pmapActions, mapState } from "pinia";
+import { useAppState, useTopicState } from "@/stores";
 import moment from "moment";
 
 import {
@@ -483,103 +485,7 @@ interface Data {
   credentialsExpanded: boolean;
 }
 
-@Component({
-  components: {
-    BackTo,
-    CredentialItem,
-    Dialog,
-    EntityCard,
-    EntityHeader,
-    EntityFilterChips,
-    EntityFilterFacetPanels,
-    EntityFilterDialog,
-  },
-  computed: {
-    ...mapGetters([
-      "credentialTypes",
-      "entityDesc",
-      "selectedTopic",
-      "selectedTopicFullCredentialSet",
-      "getEntityFilters",
-      "getRelationships",
-      "getScrollY",
-      "mdiArrowUp",
-      "mdiArrowDown",
-      "mdiArrowLeft",
-      "mdiMapMarker",
-      "mdiChevronLeft",
-      "mdiChevronRight",
-      "mdiCircleMedium",
-      "mdiInformationOutline",
-      "loading",
-    ]),
-  },
-  methods: {
-    ...mapActions([
-      "setLoading",
-      "fetchCredentialTypes",
-      "fetchFormattedIdentifiedTopic",
-      "fetchTopicFullCredentialSet",
-      "setCredentialType",
-      "setEntityDesc",
-      "setRegistrationType",
-      "setIssuers",
-      "fetchRelationships",
-    ]),
-  },
-  directives: {
-    translate,
-  },
-})
-export default class EntityResult extends Vue {
-  setLoading!: (loading: boolean) => void;
-  currentTab!: string;
-  entityDesc!: IEntityDesc;
-  setEntityDesc!: (params: {
-    code: string;
-    fileName: string;
-    displayName: string | undefined;
-  }) => void;
-  setIssuers!: (creds: ICredentialDisplayType[]) => void;
-  setCredentialType!: (creds: ICredentialDisplayType[]) => void;
-  setRegistrationType!: (creds: ICredentialDisplayType[]) => void;
-  fetchRelationships!: (id: number) => Promise<void>;
-  fetchCredentialTypes!: (paging: boolean) => Promise<void>;
-
-  fetchFormattedIdentifiedTopic!: ({
-    sourceId,
-    type,
-  }: {
-    sourceId: string;
-    type: string;
-  }) => Promise<void>;
-  fetchTopicFullCredentialSet!: (id: number) => Promise<void>;
-  credOrRelationshipToDisplay = credOrRelationshipToDisplay;
-  selectedTopicFullCredentialSet!: Array<ICredentialSet>;
-  selectedTopic!: IFormattedTopic;
-  credentialTimeOrder!: number;
-  getEntityFilters!: IEntityFilter;
-  getRelationships!: IRelationship[];
-  getScrollY!: number;
-  relationshipStartIndex!: number;
-  itemsDisplayed!: number;
-  loading!: boolean;
-  credentialsExpanded!: boolean;
-
-  credentialFilters: {
-    (creds: Array<ICredentialDisplayType>): Array<ICredentialDisplayType>;
-  }[] = [
-    this.applyDateFilter,
-    this.applyExpiredFilter,
-    this.applyCredentialTypeFilter,
-    this.applyIssuerFilter,
-    this.applyRegistrationTypeFilter,
-  ];
-  getRelationshipName = getRelationshipName;
-  getCredentialLabel = getCredentialLabel;
-  toTranslationFormat = toTranslationFormat;
-  isExpired = isExpired;
-
+export default {
   data(): Data {
     return {
       currentTab: "",
@@ -588,417 +494,452 @@ export default class EntityResult extends Vue {
       relationshipStartIndex: 0,
       credentialsExpanded: false,
     };
-  }
-
-  loadingCallBack(): void {
-    if (
-      this.selectedTopicFullCredentialSet &&
-      this.entityCredentials !== undefined
-    ) {
-      this.setCredentialType(this.entityCredentials);
-      this.setRegistrationType(this.entityCredentials);
-      this.setIssuers(this.entityCredentials);
-    }
-    if (this.entityJurisdiction) {
-      //convert entity type to file name
-      let fileName = this.$t(this.entityJurisdiction) as string;
-      let displayName = undefined;
-      if (fileName !== this.entityJurisdiction) {
-        // translation success
-        displayName = fileName;
+  },
+  computed: {
+    ...mapGetters({
+      credentialTypes: "credentialTypes",
+      entityDesc: "entityDesc",
+      getEntityFilters: "getEntityFilters",
+      getRelationships: "getRelationships",
+      getScrollY: "getScrollY",
+      mdiArrowUp: "mdiArrowUp",
+      mdiArrowDown: "mdiArrowDown",
+      mdiArrowLeft: "mdiArrowLeft",
+      mdiMapMarker: "mdiMapMarker",
+      mdiChevronLeft: "mdiChevronLeft",
+      mdiChevronRight: "mdiChevronRight",
+      mdiCircleMedium: "mdiCircleMedium",
+      mdiInformationOutline: "mdiInformationOutline",
+    }),
+    ...mapState(useAppState, { loading: "getLoading" }),
+    ...mapState(useTopicState, ["selectedTopic", "selectedTopicFullCredentialSet"]),
+    hasAnyRelationships: function (): boolean {
+      return (
+        this.businessAsRelationship?.length > 0 ||
+          this.ownedByRelationship?.length > 0
+      );
+    },
+
+    tabItems: function (): { text: string; refname: string }[] {
+      let baseTabItems = [
+        { text: "Registration", refname: "registration" },
+        { text: "Credentials", refname: "credentials" },
+      ];
+      if (this.hasAnyRelationships) {
+        baseTabItems.splice(1, 0, {
+          text: "Relationships",
+          refname: "relationships",
+        });
+      }
+      return baseTabItems;
+    },
+
+    businessAsRelationship: function (): IRelationship[] {
+      return this.getRelationships.filter(
+        (relationship) =>
+          selectFirstAttrItem(
+            { key: "value", value: "Does Business As" },
+            relationship.attributes
+          ) !== undefined
+      );
+    },
+    ownedByRelationship: function (): IRelationship[] {
+      return this.getRelationships.filter(
+        (relationship) =>
+          selectFirstAttrItem(
+            { key: "value", value: "IsOwned" },
+            relationship.attributes
+          ) !== undefined
+      );
+    },
+    entityName: function (): string | undefined {
+      return selectFirstAttrItem(
+        { key: "type", value: "entity_name" },
+        this.selectedTopic?.names as ITopicName[]
+      )?.text;
+    },
+    entityNameCredId: function (): number | undefined {
+      const ret = selectFirstAttrItem(
+        { key: "type", value: "entity_name" },
+        this.selectedTopic?.names as ITopicName[]
+      )?.credential_id;
+      return ret;
+    },
+    entityBusinessNumber: function (): string | undefined {
+      return selectFirstAttrItem(
+        { key: "type", value: "business_number" },
+        // find the latest business number
+        this.entityCredentials
+          ?.filter((cred) => cred.latest)
+          ?.map((cred) => {
+            return {
+              type: cred.type,
+              text: cred.value,
+            };
+          })
+      )?.text as string;
+    },
+    entityIncorporationNumber: function (): string | undefined {
+      return this.selectedTopic?.source_id;
+    },
+    filteredEntityCredentials: function (): Array<ICraedentialDisplayType> | undefined {
+      var filteredCreds = this.entityCredentialsSorted;
+      if (filteredCreds === undefined) {
+        return undefined;
       }
 
-      // get the entity code, ex: BC, A, SP, etc
-      const codeSplit = this.entityJurisdiction.split(".");
-      const code = codeSplit[codeSplit.length - 1];
-
-      // convert to markdown file name
-      fileName = fileName.toLowerCase().replace(" ", "-");
-
-      this.setEntityDesc({ code, fileName, displayName });
-    }
-    if (this.getScrollY) {
-      this.$vuetify.goTo(this.getScrollY, { duration: 0 });
-    }
-  }
-
-  toggleCredentialsExpanded(): void {
-    this.credentialsExpanded = !this.credentialsExpanded;
-  }
-
-  private applyIssuerFilter(creds: Array<ICredentialDisplayType>) {
-    var filteredCreds = [...creds];
-    if ((this.getEntityFilters.authorities as string[]).length <= 0) {
-      return filteredCreds;
-    }
-    return filteredCreds.filter((cred) =>
-      (this.getEntityFilters.authorities as string[]).includes(cred.authority)
-    );
-  }
-
-  private applyCredentialTypeFilter(
-    creds: Array<ICredentialDisplayType>
-  ): Array<ICredentialDisplayType> {
-    var filteredCreds = [...creds];
-    if ((this.getEntityFilters.credential_type as string[]).length <= 0) {
-      return filteredCreds;
-    }
-    return filteredCreds.filter((cred) =>
-      (this.getEntityFilters.credential_type as string[]).includes(
-        getCredentialLabel(cred)
-      )
-    );
-  }
+      this.credentialFilters.forEach((filterFunc) => {
+        filteredCreds = filterFunc(filteredCreds as ICredentialDisplayType[]);
+      });
 
-  private applyRegistrationTypeFilter(
-    creds: Array<ICredentialDisplayType>
-  ): Array<ICredentialDisplayType> {
-    var filteredCreds = [...creds];
-    if ((this.getEntityFilters.registration_type as string[]).length <= 0) {
       return filteredCreds;
-    }
-    return filteredCreds.filter(
-      (cred) =>
-        cred.registration_reason !== undefined &&
-        (this.getEntityFilters.registration_type as string[]).includes(
-          cred.registration_reason
-        )
-    );
-  }
+    },
+    credSet: function (): ICredential[] | undefined {
+      if (!this.selectedTopicFullCredentialSet) {
+        return undefined;
+      }
+      var credentialSet: ICredential[] = [];
+      this.selectedTopicFullCredentialSet.forEach((credSet) =>
+        credentialSet.push(...credSet.credentials)
+      );
+      return credentialSet;
+    },
 
-  private applyDateFilter(
-    creds: Array<ICredentialDisplayType>
-  ): Array<ICredentialDisplayType> {
-    var filteredCreds = [...creds];
+    entityCredentials: function (): Array<ICredentialDisplayType> | undefined {
+      if (!this.selectedTopicFullCredentialSet) {
+        return undefined;
+      }
 
-    if (this.getEntityFilters.date_min !== "") {
-      filteredCreds = filteredCreds.filter((cred) => {
-        //take the negative condition so we don't have to do another check with isSame
-        return !moment(this.getEntityFilters.date_min as string).isAfter(
-          cred.date_effective
+      var fullCredentials: ICredentialDisplayType[] = [];
+      this.selectedTopicFullCredentialSet.forEach((credSet) => {
+        //filter out all the relationship credentials
+        fullCredentials.push(
+          ...credSet.credentials
+            .filter((cred) => !this.isRelationshipCred(cred))
+            .map((cred) => credOrRelationshipToDisplay(cred))
         );
       });
-    }
-
-    if (this.getEntityFilters.date_max !== "") {
-      filteredCreds = filteredCreds.filter((cred) => {
-        return !moment(this.getEntityFilters.date_max as string).isBefore(
-          cred.date_effective
-        );
+      this.getRelationships.forEach((rel) => {
+        fullCredentials.push(credOrRelationshipToDisplay(rel, this.credSet));
       });
-    }
-    return filteredCreds;
-  }
-
-  private applyExpiredFilter(
-    creds: Array<ICredentialDisplayType>
-  ): Array<ICredentialDisplayType> {
-    var filteredCreds = [...creds];
-    if (!this.getEntityFilters.show_expired) {
-      filteredCreds = creds.filter(
-        (cred) => !cred.revoked && !this.isExpired(cred.attributes)
-      );
-    }
-    return filteredCreds;
-  }
-
-  tabClick(refname: string): void {
-    this.$vuetify.goTo(this.$refs[refname] as VuetifyGoToTarget, {
-      duration: 500,
-      easing: "easeInOutCubic",
-    });
-  }
-
-  incRelationshipStartIndex(num: number): void {
-    const interval = Math.min(
-      this.businessAsRelationship.length,
-      this.itemsDisplayed
-    );
-    if (
-      this.relationshipStartIndex + num * interval >= 0 &&
-      this.relationshipStartIndex + num * interval <
-        this.businessAsRelationship.length
-    )
-      this.relationshipStartIndex += num * interval;
-  }
-
-  correctRelDisplay(): void {
-    // deal with issue of switching display intervals in the middle of a set
-    if (this.relationshipStartIndex % this.itemsDisplayed) {
-      this.relationshipStartIndex =
-        Math.floor(this.relationshipStartIndex / this.itemsDisplayed) *
-        this.itemsDisplayed;
-    }
-    //refocus relationships on selection change
-    this.$vuetify.goTo(this.$refs["relationships"] as VuetifyGoToTarget, {
-      duration: 500,
-      easing: "easeInOutCubic",
-    });
-  }
-
-  switchCredentialTimeOrder(): void {
-    this.credentialTimeOrder *= -1;
-  }
-
-  isRelationshipCred(cred: ICredential): boolean {
-    return cred.credential_type.description === "relationship.registries.ca";
-  }
-
-  entityTypeToRegValue(entityType: string): string {
-    const entityTypeTable: Record<string, string> = {
-      "BC Company": "Incorporation number",
-      "BC Corporation": "Incorporation number",
-      Society: "Incorporation number",
-      Cooperative: "Incorporation number",
-      "Sole Proprietorship": "Registration number",
-      "General Partnership": "Registration number",
-      "Limited Partnership": "Registration number",
-      "Extraprovincial Limited Partnership": "Registration number",
-      "Limited Liability Partnership": "Registration number",
-      "Extrapro Limited Liability Partnership": "Registration number",
-      "Miscellaneous Firm": "Registration number",
-    };
-    return entityTypeTable[entityType] !== undefined
-      ? entityTypeTable[entityType]
-      : entityType;
-  }
-
-  get hasAnyRelationships(): boolean {
-    return (
-      this.businessAsRelationship?.length > 0 ||
-      this.ownedByRelationship?.length > 0
-    );
-  }
-
-  get tabItems(): { text: string; refname: string }[] {
-    let baseTabItems = [
-      { text: "Registration", refname: "registration" },
-      { text: "Credentials", refname: "credentials" },
-    ];
-    if (this.hasAnyRelationships) {
-      baseTabItems.splice(1, 0, {
-        text: "Relationships",
-        refname: "relationships",
+      return fullCredentials;
+    },
+
+    entityCredentialsSorted: function (): Array<ICredentialDisplayType> | undefined {
+      const cpa = (
+        item1: ICredentialDisplayType,
+        item2: ICredentialDisplayType
+      ) => {
+        return (
+          (moment(item1.date_effective).isBefore(item2.date_effective) ? -1 : 1) *
+            this.credentialTimeOrder
+        );
+      };
+      return this.entityCredentials?.sort((cred1, cred2) => {
+        return cpa(cred1, cred2);
       });
-    }
-    return baseTabItems;
-  }
-
-  get businessAsRelationship(): IRelationship[] {
-    return this.getRelationships.filter(
-      (relationship) =>
-        selectFirstAttrItem(
-          { key: "value", value: "Does Business As" },
-          relationship.attributes
-        ) !== undefined
-    );
-  }
-
-  get ownedByRelationship(): IRelationship[] {
-    return this.getRelationships.filter(
-      (relationship) =>
-        selectFirstAttrItem(
-          { key: "value", value: "IsOwned" },
-          relationship.attributes
-        ) !== undefined
-    );
-  }
-
-  get entityName(): string | undefined {
-    return selectFirstAttrItem(
-      { key: "type", value: "entity_name" },
-      this.selectedTopic?.names as ITopicName[]
-    )?.text;
-  }
+    },
 
-  get entityNameCredId(): number | undefined {
-    const ret = selectFirstAttrItem(
-      { key: "type", value: "entity_name" },
-      this.selectedTopic?.names as ITopicName[]
-    )?.credential_id;
-    return ret;
-  }
-
-  get entityBusinessNumber(): string | undefined {
-    return selectFirstAttrItem(
-      { key: "type", value: "business_number" },
-      // find the latest business number
-      this.entityCredentials
-        ?.filter((cred) => cred.latest)
-        ?.map((cred) => {
-          return {
-            type: cred.type,
-            text: cred.value,
-          };
-        })
-    )?.text as string;
-  }
-
-  get entityIncorporationNumber(): string | undefined {
-    return this.selectedTopic?.source_id;
-  }
-
-  get filteredEntityCredentials(): Array<ICredentialDisplayType> | undefined {
-    var filteredCreds = this.entityCredentialsSorted;
-    if (filteredCreds === undefined) {
-      return undefined;
-    }
-
-    this.credentialFilters.forEach((filterFunc) => {
-      filteredCreds = filterFunc(filteredCreds as ICredentialDisplayType[]);
-    });
-
-    return filteredCreds;
-  }
-
-  get credSet(): ICredential[] | undefined {
-    if (!this.selectedTopicFullCredentialSet) {
-      return undefined;
-    }
-    var credentialSet: ICredential[] = [];
-    this.selectedTopicFullCredentialSet.forEach((credSet) =>
-      credentialSet.push(...credSet.credentials)
-    );
-    return credentialSet;
-  }
-
-  get entityCredentials(): Array<ICredentialDisplayType> | undefined {
-    if (!this.selectedTopicFullCredentialSet) {
-      return undefined;
-    }
+    entityState: function (): string | undefined {
+      if (this.selectedTopic === undefined) {
+        return undefined;
+      }
 
-    var fullCredentials: ICredentialDisplayType[] = [];
-    this.selectedTopicFullCredentialSet.forEach((credSet) => {
-      //filter out all the relationship credentials
-      fullCredentials.push(
-        ...credSet.credentials
-          .filter((cred) => !this.isRelationshipCred(cred))
-          .map((cred) => credOrRelationshipToDisplay(cred))
+      const state = selectFirstAttrItem(
+        { key: "type", value: "entity_status" },
+        this.selectedTopic?.attributes
       );
-    });
-    this.getRelationships.forEach((rel) => {
-      fullCredentials.push(credOrRelationshipToDisplay(rel, this.credSet));
-    });
-    return fullCredentials;
-  }
 
-  get entityCredentialsSorted(): Array<ICredentialDisplayType> | undefined {
-    const cpa = (
-      item1: ICredentialDisplayType,
-      item2: ICredentialDisplayType
-    ) => {
-      return (
-        (moment(item1.date_effective).isBefore(item2.date_effective) ? -1 : 1) *
-        this.credentialTimeOrder
+      const ret = state?.type + "." + state?.value;
+      if (ret.includes("undefined")) {
+        return undefined;
+      }
+      return ret;
+    },
+
+    entityRegistrationDate: function (): string | undefined {
+      return selectFirstAttrItem(
+        { key: "type", value: "registration_date" },
+        this.selectedTopic?.attributes
+      )?.value;
+    },
+
+    entityNameEffectiveDate: function (): string | undefined {
+      return selectFirstAttrItem(
+        { key: "type", value: "entity_name_effective" },
+        this.selectedTopic?.attributes
+      )?.value;
+    },
+
+    entityStatusEffectiveDate: function (): string | undefined {
+      return selectFirstAttrItem(
+        { key: "type", value: "entity_status_effective" },
+        this.selectedTopic?.attributes
+      )?.value;
+    },
+
+    entityJurisdiction: function (): string | undefined {
+      const state = selectFirstAttrItem(
+        { key: "type", value: "entity_type" },
+        this.selectedTopic?.attributes
       );
-    };
-    return this.entityCredentials?.sort((cred1, cred2) => {
-      return cpa(cred1, cred2);
-    });
-  }
-
-  get entityState(): string | undefined {
-    if (this.selectedTopic === undefined) {
-      return undefined;
-    }
-
-    const state = selectFirstAttrItem(
-      { key: "type", value: "entity_status" },
-      this.selectedTopic?.attributes
-    );
-
-    const ret = state?.type + "." + state?.value;
-    if (ret.includes("undefined")) {
-      return undefined;
-    }
-    return ret;
-  }
-
-  get entityRegistrationDate(): string | undefined {
-    return selectFirstAttrItem(
-      { key: "type", value: "registration_date" },
-      this.selectedTopic?.attributes
-    )?.value;
-  }
-
-  get entityNameEffectiveDate(): string | undefined {
-    return selectFirstAttrItem(
-      { key: "type", value: "entity_name_effective" },
-      this.selectedTopic?.attributes
-    )?.value;
-  }
-
-  get entityStatusEffectiveDate(): string | undefined {
-    return selectFirstAttrItem(
-      { key: "type", value: "entity_status_effective" },
-      this.selectedTopic?.attributes
-    )?.value;
-  }
-
-  get entityJurisdiction(): string | undefined {
-    const state = selectFirstAttrItem(
-      { key: "type", value: "entity_type" },
-      this.selectedTopic?.attributes
-    );
-    const ret = "entity_type." + state?.value;
-    if (ret.includes("undefined")) {
-      return undefined;
-    }
-    return ret;
-  }
-
-  get entityRegistrationIssuer(): string | undefined {
-    return selectFirstAttrItem(
-      { key: "type", value: "entity_name" },
-      this.selectedTopic?.names
-    )?.issuer?.name;
-  }
+      const ret = "entity_type." + state?.value;
+      if (ret.includes("undefined")) {
+        return undefined;
+      }
+      return ret;
+    },
+
+    entityRegistrationIssuer: function (): string | undefined {
+      return selectFirstAttrItem(
+        { key: "type", value: "entity_name" },
+        this.selectedTopic?.names
+      )?.issuer?.name;
+    },
+
+    entityRegistrationIssuerUrl: function (): string | URL | undefined {
+      const ret = selectFirstAttrItem(
+        { key: "type", value: "entity_name" },
+        this.selectedTopic?.names
+      )?.issuer?.url;
+      return ret;
+    },
+    credentialFilters: function (): {
+      (creds: Array<ICredentialDisplayType>): Array<ICredentialDisplayType>;
+    }[] {
+      return [
+        this.applyDateFilter,
+        this.applyExpiredFilter,
+        this.applyCredentialTypeFilter,
+        this.applyIssuerFilter,
+        this.applyRegistrationTypeFilter,
+      ]
+    },
 
-  get entityRegistrationIssuerUrl(): string | URL | undefined {
-    const ret = selectFirstAttrItem(
-      { key: "type", value: "entity_name" },
-      this.selectedTopic?.names
-    )?.issuer?.url;
-    return ret;
-  }
+  },
+  methods: {
+    ...mapActions({
+      fetchCredentialTypes: "fetchCredentialTypes",
+      setCredentialType: "setCredentialType",
+      setEntityDesc: "setEntityDesc",
+      setRegistrationType: "setRegistrationType",
+      setIssuers: "setIssuers",
+      fetchRelationships: "fetchRelationships",
+    }),
+    ...pmapActions(useAppState, ["setLoading"]),
+    ...pmapActions(useTopicState, ["fetchFormattedIdentifiedTopic", "fetchTopicFullCredentialSet"]),
+    credOrRelationshipToDisplay,
+    getRelationshipName,
+    getCredentialLabel,
+    toTranslationFormat,
+    isExpired,
+    loadingCallBack(): void {
+      if (
+        this.selectedTopicFullCredentialSet &&
+          this.entityCredentials !== undefined
+      ) {
+        this.setCredentialType(this.entityCredentials);
+        this.setRegistrationType(this.entityCredentials);
+        this.setIssuers(this.entityCredentials);
+      }
+      if (this.entityJurisdiction) {
+        //convert entity type to file name
+        let fileName = this.$t(this.entityJurisdiction) as string;
+        let displayName = undefined;
+        if (fileName !== this.entityJurisdiction) {
+          // translation success
+          displayName = fileName;
+        }
+
+        // get the entity code, ex: BC, A, SP, etc
+        const codeSplit = this.entityJurisdiction.split(".");
+        const code = codeSplit[codeSplit.length - 1];
+
+        // convert to markdown file name
+        fileName = fileName.toLowerCase().replace(" ", "-");
+
+        this.setEntityDesc({ code, fileName, displayName });
+      }
+      if (this.getScrollY) {
+        this.$vuetify.goTo(this.getScrollY, { duration: 0 });
+      }
+    },
+    toggleCredentialsExpanded(): void {
+      this.credentialsExpanded = !this.credentialsExpanded;
+    },
+    applyIssuerFilter(creds: Array<ICredentialDisplayType>) {
+      let filteredCreds = [...creds];
+      if ((this.getEntityFilters.authorities as string[]).length <= 0) {
+        return filteredCreds;
+      }
+      return filteredCreds.filter((cred) =>
+        (this.getEntityFilters.authorities as string[]).includes(cred.authority)
+      );
+    },
+    applyCredentialTypeFilter(
+      creds: Array<ICredentialDisplayType>
+    ): Array<ICredentialDisplayType> {
+      let filteredCreds = [...creds];
+      if ((this.getEntityFilters.credential_type as string[]).length <= 0) {
+        return filteredCreds;
+      }
+      return filteredCreds.filter((cred) =>
+        (this.getEntityFilters.credential_type as string[]).includes(
+          getCredentialLabel(cred)
+        )
+      );
+    },
+    applyRegistrationTypeFilter(
+      creds: Array<ICredentialDisplayType>
+    ): Array<ICredentialDisplayType> {
+      let filteredCreds = [...creds];
+      if ((this.getEntityFilters.registration_type as string[]).length <= 0) {
+        return filteredCreds;
+      }
+      return filteredCreds.filter(
+        (cred) =>
+          cred.registration_reason !== undefined &&
+            (this.getEntityFilters.registration_type as string[]).includes(
+              cred.registration_reason
+            )
+      );
+    },
+    applyDateFilter(
+      creds: Array<ICredentialDisplayType>
+    ): Array<ICredentialDisplayType> {
+      let filteredCreds = [...creds];
+
+      if (this.getEntityFilters.date_min !== "") {
+        filteredCreds = filteredCreds.filter((cred) => {
+          //take the negative condition so we don't have to do another check with isSame
+          return !moment(this.getEntityFilters.date_min as string).isAfter(
+            cred.date_effective
+          );
+        });
+      }
 
-  async created(): Promise<void> {
-    await this.reload();
-  }
+      if (this.getEntityFilters.date_max !== "") {
+        filteredCreds = filteredCreds.filter((cred) => {
+          return !moment(this.getEntityFilters.date_max as string).isBefore(
+            cred.date_effective
+          );
+        });
+      }
+      return filteredCreds;
+    },
+    applyExpiredFilter(
+      creds: Array<ICredentialDisplayType>
+    ): Array<ICredentialDisplayType> {
+      let filteredCreds = [...creds];
+      if (!this.getEntityFilters.show_expired) {
+        filteredCreds = creds.filter(
+          (cred) => !cred.revoked && !this.isExpired(cred.attributes)
+        );
+      }
+      return filteredCreds;
+    },
 
-  async reload(): Promise<void> {
-    this.setLoading(true);
-    const { sourceId, type } = this.$route.params;
+    tabClick(refname: string): void {
+      this.$vuetify.goTo(this.$refs[refname] as VuetifyGoToTarget, {
+        duration: 500,
+        easing: "easeInOutCubic",
+      });
+    },
 
-    if (sourceId && type) {
-      await this.fetchFormattedIdentifiedTopic({
-        sourceId,
-        type,
+    incRelationshipStartIndex(num: number): void {
+      const interval = Math.min(
+        this.businessAsRelationship.length,
+        this.itemsDisplayed
+      );
+      if (
+        this.relationshipStartIndex + num * interval >= 0 &&
+          this.relationshipStartIndex + num * interval <
+            this.businessAsRelationship.length
+      )
+        this.relationshipStartIndex += num * interval;
+    },
+
+    correctRelDisplay(): void {
+      // deal with issue of switching display intervals in the middle of a set
+      if (this.relationshipStartIndex % this.itemsDisplayed) {
+        this.relationshipStartIndex =
+                                Math.floor(this.relationshipStartIndex / this.itemsDisplayed) *
+                                  this.itemsDisplayed;
+      }
+      //refocus relationships on selection change
+      this.$vuetify.goTo(this.$refs["relationships"] as VuetifyGoToTarget, {
+        duration: 500,
+        easing: "easeInOutCubic",
       });
-      if (!this.selectedTopic) {
-        //sourceid is invalid, go back to search
-        console.error("Failed to fetch topic. Invalid source id");
-        this.$router.push("/");
+    },
+
+    switchCredentialTimeOrder(): void {
+      this.credentialTimeOrder *= -1;
+    },
+
+    isRelationshipCred(cred: ICredential): boolean {
+      return cred.credential_type.description === "relationship.registries.ca";
+    },
+
+    entityTypeToRegValue(entityType: string): string {
+      const entityTypeTable: Record<string, string> = {
+        "BC Company": "Incorporation number",
+        "BC Corporation": "Incorporation number",
+        Society: "Incorporation number",
+        Cooperative: "Incorporation number",
+        "Sole Proprietorship": "Registration number",
+        "General Partnership": "Registration number",
+        "Limited Partnership": "Registration number",
+        "Extraprovincial Limited Partnership": "Registration number",
+        "Limited Liability Partnership": "Registration number",
+        "Extrapro Limited Liability Partnership": "Registration number",
+        "Miscellaneous Firm": "Registration number",
+      };
+      return entityTypeTable[entityType] !== undefined
+        ? entityTypeTable[entityType]
+        : entityType;
+    },
+    async reload(): Promise<void> {
+      this.setLoading(true);
+      const { sourceId, type } = this.$route.params;
+
+      if (sourceId && type) {
+        await this.fetchFormattedIdentifiedTopic({
+          sourceId,
+          type,
+        });
+        if (!this.selectedTopic) {
+          //sourceid is invalid, go back to search
+          console.error("Failed to fetch topic. Invalid source id");
+          this.$router.push("/");
+        }
+        const topic: ITopic = this.$store.getters.selectedTopic;
+        if (topic?.id) {
+          console.log("relationships")
+          await Promise.all([
+            this.fetchRelationships(topic.id),
+            this.fetchTopicFullCredentialSet(topic.id),
+            this.fetchCredentialTypes(false),
+          ]);
+        }
       }
-      const topic: ITopic = this.$store.getters.selectedTopic;
-      if (topic?.id) {
-        await Promise.all([
-          this.fetchRelationships(topic.id),
-          this.fetchTopicFullCredentialSet(topic.id),
-          this.fetchCredentialTypes(false),
-        ]);
+      this.setLoading(false);
+      this.loadingCallBack();
+    },
+  },
+  async created(): Promise<void> {
+    await this.reload();
+  },
+  directives: {
+    translate,
+  },
+  watch: {
+    async onRouteParamsChanged(params: any): Promise<void> {
+      if (params.sourceId) {
+        this.reload();
       }
     }
-    this.setLoading(false);
-    this.loadingCallBack();
-  }
-
-  @Watch("$route.params")
-  async onRouteParamsChanged(params: any): Promise<void> {
-    if (params.sourceId) {
-      this.reload();
-    }
-  }
+  },
 }
 </script>
 
diff --git a/src/components/entity/credentialDetail/CredentialDetail.vue b/src/components/entity/credentialDetail/CredentialDetail.vue
index d2de6dd..6d928c2 100644
--- a/src/components/entity/credentialDetail/CredentialDetail.vue
+++ b/src/components/entity/credentialDetail/CredentialDetail.vue
@@ -121,6 +121,8 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
+import { mapActions as pmapActions, mapState } from "pinia"
+import { useCredentialState, useTopicState, useAppState } from "@/stores";
 import { ICredentialSet } from "@/interfaces/api/v2/credential-set.interface";
 import { ICredentialProof } from "@/interfaces/api/v3/credential-verified.interface";
 import { IFormattedTopic } from "@/interfaces/api/v2/topic.interface";
@@ -145,16 +147,17 @@ interface Data {
       "mdiArrowLeft",
       "mdiShieldCheckOutline",
       "mdiCheckBold",
-      "selectedTopic",
-      "selectedTopicFullCredentialSet",
-      "getSelectedCredential",
-      "loading",
     ]),
+    ...mapState(useTopicState, ["selectedTopic", "selectedTopicFullCredentialSet"]),
+    ...mapState(useCredentialState, ["getSelectedCredential"]),
+    ...mapState(useAppState, { loading: "getLoading"})
   },
   methods: {
-    ...mapActions([
+    ...pmapActions(useAppState, ["setLoading"]),
+    ...pmapActions(useCredentialState, [
       "fetchSelectedCredential",
-      "setLoading",
+    ]),
+    ...pmapActions(useTopicState, [
       "fetchFormattedIdentifiedTopic",
     ]),
   },
diff --git a/src/components/entity/filter/EntityFilterChips.vue b/src/components/entity/filter/EntityFilterChips.vue
index ccc645a..af2ba49 100644
--- a/src/components/entity/filter/EntityFilterChips.vue
+++ b/src/components/entity/filter/EntityFilterChips.vue
@@ -22,7 +22,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
 import { IEntityFilter } from "@/interfaces/entity-filter.interface";
 
@@ -36,8 +35,8 @@ export default {
       getEntityFilters: "getEntityFilters",
       mdiClose: "mdiClose"
     }),
-    get activeEntityFilters(): EntityChips[] {
-      var chips: EntityChips[] = [];
+    activeEntityFilters(): EntityChips[] {
+      let chips: EntityChips[] = [];
       Object.keys(this.getEntityFilters).forEach((key) => {
         if (Array.isArray(this.getEntityFilters[key])) {
           chips.push(
diff --git a/src/components/entity/filter/EntityFilterDialog.vue b/src/components/entity/filter/EntityFilterDialog.vue
index 2e24f2c..920c437 100644
--- a/src/components/entity/filter/EntityFilterDialog.vue
+++ b/src/components/entity/filter/EntityFilterDialog.vue
@@ -41,6 +41,8 @@
 <script lang="ts">
 import { mapGetters } from "vuex";
 import EntityFilterFacetPanels from "@/components/entity/filter/EntityFilterFacetPanels.vue";
+import { useAppState } from "@/stores/app"
+import { mapState } from "pinia";
 
 interface Data {
   dialog: boolean;
@@ -52,7 +54,8 @@ export default {
                 };
         },
         computed: {
-                ...mapGetters(["loading", "mdiFilterOutline", "mdiClose"]),
+                ...mapGetters(["mdiFilterOutline", "mdiClose"]),
+                ...mapState(useAppState, {loading: "getLoading"})
         }
 }
 </script>
diff --git a/src/components/layout/footer/Feedback.vue b/src/components/layout/footer/Feedback.vue
index 4614d24..9207452 100644
--- a/src/components/layout/footer/Feedback.vue
+++ b/src/components/layout/footer/Feedback.vue
@@ -42,9 +42,10 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
+import { mapActions as pmapActions } from "pinia"
+import { useAppState } from "@/stores/app"
 import { IFeedback } from "@/interfaces/api/v4/feedback.interface";
 import { trackStructEvent } from "@snowplow/browser-tracker";
-
 interface Data {
   reason: string;
   comments: string;
@@ -57,7 +58,8 @@ interface Data {
     ...mapGetters(["mdiThumbDown", "mdiThumbUp", "getLikeStatus"]),
   },
   methods: {
-    ...mapActions(["sendFeedback", "setLoading", "setLike"]),
+    ...mapActions(["sendFeedback", "setLike"]),
+    ...pmapActions(useAppState, ["setLoading"])
   },
 })
 export default class Feedback extends Vue {
diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index bdb629a..988cf91 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -96,6 +96,8 @@ import { ISearchAutocomplete } from "@/interfaces/api/v3/search-autocomplete.int
 import { ISearchQuery } from "@/interfaces/api/v4/search-topic.interface";
 import { defaultQuery } from "@/utils/search";
 import SearchHelpPopup from "./SearchHelpPopup.vue";
+import { useAppState } from "@/stores/app"
+import { mapState } from "pinia";
 
 interface Data {
   index: number;
@@ -109,7 +111,8 @@ interface Data {
     SearchHelpPopup,
   },
   computed: {
-    ...mapGetters(["loading", "mdiMagnify", "mdiClose", "mdiHelpCircle"]),
+    ...mapGetters(["mdiMagnify", "mdiClose", "mdiHelpCircle"]),
+    ...mapState(useAppState, {loading: "getLoading"})
   },
   methods: {
     ...mapActions(["fetchAutocomplete", "fetchSearch"]),
diff --git a/src/components/search/filter/SearchFilterDialog.vue b/src/components/search/filter/SearchFilterDialog.vue
index 0a12cf4..249c0b5 100644
--- a/src/components/search/filter/SearchFilterDialog.vue
+++ b/src/components/search/filter/SearchFilterDialog.vue
@@ -46,6 +46,8 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { mapGetters } from "vuex";
+import { mapState } from "pinia";
+import { useAppState } from "@/stores";
 import SearchFilterFacetPanels from "./SearchFilterFacetPanels.vue";
 
 interface Data {
@@ -58,11 +60,11 @@ interface Data {
   },
   computed: {
     ...mapGetters([
-      "loading",
       "pagedSearchTopics",
       "mdiClose",
       "mdiFilterOutline",
     ]),
+    ...mapState(useAppState, { loading: "getLoading" })
   },
 })
 export default class SearchFilterDialog extends Vue {
diff --git a/src/main.ts b/src/main.ts
index fe13958..f63758f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,6 +10,10 @@ import { claimFormat } from "@/filters/claim.filter";
 import docs from "@/assets/docs.json";
 import { defaultDoc, processDocRoute } from "./utils/doc";
 import { newTracker, trackPageView } from "@snowplow/browser-tracker";
+import { createPinia, PiniaVuePlugin } from "pinia";
+
+Vue.use(PiniaVuePlugin);
+const pinia = createPinia();
 
 Vue.config.productionTip = false;
 Vue.filter("formatDate", dateFilter);
@@ -30,6 +34,7 @@ async function init() {
       store.dispatch("setDocRoutes", docRoutes);
     },
     render: (h) => h(App),
+    pinia,
   }).$mount("#app");
 
   // Snowplow tracking
diff --git a/src/store/index.ts b/src/store/index.ts
index 2ebc344..86ba824 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,10 +1,5 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import app, { State as AppState } from "./modules/app";
-import contact, { State as ContactState } from "./modules/contact";
-import credentialDetail, {
-  State as CredentialDetailState,
-} from "./modules/credential-detail";
 import credentialType, {
   State as CredentialTypeState,
 } from "./modules/credential-type";
@@ -15,15 +10,11 @@ import feedback from "./modules/feedback";
 import icon, { State as IconState } from "./modules/icon";
 import search, { State as SearchState } from "./modules/search";
 import stats, { State as StatsState } from "./modules/statistics";
-import topic, { State as TopicState } from "./modules/topic";
 import like, { State as LikeState } from "./modules/like";
 
 Vue.use(Vuex);
 
 export interface State {
-  app: AppState;
-  contact: ContactState;
-  credentialDetail: CredentialDetailState;
   credentialType: CredentialTypeState;
   doc: DocState;
   entity: EntityState;
@@ -31,15 +22,11 @@ export interface State {
   icon: IconState;
   search: SearchState;
   stats: StatsState;
-  topic: TopicState;
   like: LikeState;
 }
 
 export default new Vuex.Store({
   modules: {
-    app,
-    contact,
-    credentialDetail,
     credentialType,
     doc,
     entity,
@@ -48,7 +35,6 @@ export default new Vuex.Store({
     icon,
     search,
     stats,
-    topic,
     like,
   },
 });
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
deleted file mode 100644
index c880f2f..0000000
--- a/src/store/modules/app.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ActionContext } from "vuex";
-import { State as RootState } from "@/store/index";
-export interface State {
-  loading: boolean;
-}
-
-const state: State = {
-  loading: false,
-};
-
-const getters = {
-  loading: (state: State): boolean => state.loading,
-};
-
-const actions = {
-  setLoading(
-    { commit }: ActionContext<State, RootState>,
-    loading: boolean
-  ): void {
-    commit("setLoading", loading);
-  },
-};
-
-const mutations = {
-  setLoading(state: State, loading: boolean): void {
-    state.loading = loading;
-  },
-};
-
-export default {
-  state,
-  getters,
-  actions,
-  mutations,
-};
diff --git a/src/store/modules/contact.ts b/src/store/modules/contact.ts
deleted file mode 100644
index 11526f0..0000000
--- a/src/store/modules/contact.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ActionContext } from "vuex";
-import { State as RootState } from "@/store/index";
-import Contact from "@/services/api/v4/contact.service";
-import { IContactRequest } from "@/interfaces/api/v4/contact.interface";
-
-const contactService = new Contact();
-
-export const contactReason: { [key: string]: string } = {
-  FEEDBACK: "Submit a comment/suggestion about Orgbook",
-  INCORRECT_INFO: "My organization's information is incorrect",
-  REGISTER_ORGANIZATION: "I want my organization listed on OrgBook BC",
-  REGISTER_ISSUER: "I want to become an OrgBook BC issuer",
-  API_INFO: "I want more information about APIs",
-  OTHER: "Other",
-};
-
-export interface State {
-  requestTypes: Array<string>;
-}
-
-const state: State = {
-  requestTypes: [],
-};
-
-const getters = {
-  requestTypes: (state: State): Array<string> => state.requestTypes,
-};
-
-const actions = {
-  async sendContact(
-    _: ActionContext<State, RootState>,
-    contact: IContactRequest
-  ): Promise<void> {
-    await contactService.postContact(contact);
-  },
-};
-
-const mutations = {};
-
-export default {
-  state,
-  getters,
-  actions,
-  mutations,
-};
diff --git a/src/store/modules/credential-detail.ts b/src/store/modules/credential-detail.ts
deleted file mode 100644
index 47730e5..0000000
--- a/src/store/modules/credential-detail.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ActionContext } from "vuex";
-import { State as RootState } from "@/store/index";
-import Credential from "@/services/api/v2/credential.service";
-import CredentialVerifier from "@/services/api/v3/credential-verify.service";
-import { ICredentialFormatted } from "@/interfaces/api/v4/credential.interface";
-import { ICredentialProof } from "@/interfaces/api/v3/credential-verified.interface";
-
-export type Filter = { [key: string]: string | Array<string> | boolean };
-
-const credentialService = new Credential();
-const credVerificationService = new CredentialVerifier();
-
-export interface State {
-  selectedCredential: ICredentialFormatted | undefined;
-  presentationId: string;
-  presentationEX: ICredentialProof | undefined;
-}
-
-const state: State = {
-  selectedCredential: undefined,
-  presentationId: "",
-  presentationEX: undefined,
-};
-
-const getters = {
-  getSelectedCredential: (state: State): ICredentialFormatted | undefined =>
-    state.selectedCredential,
-};
-
-const actions = {
-  async fetchSelectedCredential(
-    { commit }: ActionContext<State, RootState>,
-    id: string
-  ): Promise<void> {
-    try {
-      const res = await credentialService.getFormattedCredential(id);
-      commit("setSelectedCredential", res.data);
-    } catch (e) {
-      console.error(e);
-    }
-  },
-};
-
-const mutations = {
-  setSelectedCredential: (state: State, cred: ICredentialFormatted): void => {
-    state.selectedCredential = cred;
-  },
-  setPresId: (state: State, presId: string): void => {
-    state.presentationId = presId;
-  },
-
-  setPresEX: (state: State, presEX: ICredentialProof): void => {
-    state.presentationEX = presEX;
-  },
-};
-
-export default {
-  state,
-  getters,
-  actions,
-  mutations,
-};
diff --git a/src/store/modules/entity.ts b/src/store/modules/entity.ts
index e736fc1..484fb9b 100644
--- a/src/store/modules/entity.ts
+++ b/src/store/modules/entity.ts
@@ -74,7 +74,9 @@ const actions = {
     topic_id: number
   ): Promise<void> {
     try {
+      console.log("fetching relationships");
       const res = await relationshipService.getRelatedTo(topic_id);
+      console.log(res);
       commit("setRelationships", res.data);
     } catch (e) {
       console.error(e);
diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts
deleted file mode 100644
index d7996ba..0000000
--- a/src/store/modules/topic.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { ActionContext } from "vuex";
-import { State as RootState } from "@/store";
-import { ITopic } from "@/interfaces/api/v2/topic.interface";
-import Topic from "@/services/api/v2/topic.service";
-import V4Topic from "@/services/api/v4/topic.service";
-import { ICredentialSet } from "@/interfaces/api/v2/credential-set.interface";
-
-const topicService = new Topic();
-const v4topicService = new V4Topic();
-
-export interface State {
-  selected: {
-    topic: ITopic | null;
-    credentialSet: ICredentialSet | null;
-  };
-}
-
-const state: State = {
-  selected: {
-    topic: null,
-    credentialSet: null,
-  },
-};
-
-const getters = {
-  selectedTopic: (state: State): ITopic | null => state?.selected?.topic,
-  selectedTopicCredentialSet: (state: State): ICredentialSet | null =>
-    state?.selected?.credentialSet,
-  selectedTopicFullCredentialSet: (state: State): ICredentialSet | null =>
-    state?.selected?.credentialSet,
-};
-
-const actions = {
-  async fetchFormattedIdentifiedTopic(
-    { commit }: ActionContext<State, RootState>,
-    { sourceId, type }: { sourceId: string; type: string }
-  ): Promise<void> {
-    try {
-      const res = await topicService.getFormattedIdentifiedTopic(
-        sourceId,
-        type
-      );
-      commit("setSelectedTopic", res.data);
-    } catch (e) {
-      console.error(e);
-      commit("setSelectedTopic", null);
-    }
-  },
-  async fetchTopicCredentialSet(
-    { commit }: ActionContext<State, RootState>,
-    id: number
-  ): Promise<void> {
-    try {
-      const res = await topicService.getTopicCredentialSet(id);
-      commit("setSelectedCredentialSet", res.data);
-    } catch (e) {
-      console.error(e);
-      commit("setSelectedCredentialSet", null);
-    }
-  },
-
-  async fetchTopicFullCredentialSet(
-    { commit }: ActionContext<State, RootState>,
-    id: number
-  ): Promise<void> {
-    try {
-      const res = await v4topicService.getTopicCredentialSet(id);
-      commit("setSelectedCredentialSet", res.data);
-    } catch (e) {
-      console.error(e);
-      commit("setSelectedCredentialSet", null);
-    }
-  },
-};
-
-const mutations = {
-  setSelectedTopic(state: State, topic: ITopic): void {
-    state.selected = { ...state.selected, topic };
-  },
-  setSelectedCredentialSet(state: State, credentialSet: ICredentialSet): void {
-    state.selected = {
-      ...state.selected,
-      credentialSet,
-    };
-  },
-};
-
-export default {
-  state,
-  getters,
-  actions,
-  mutations,
-};
diff --git a/src/views/About.vue b/src/views/About.vue
index 794916b..6bf3881 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -21,6 +21,8 @@ import OrgBookData from "@/components/about/OrgBookData.vue";
 import SubHeader from "@/components/layout/header/SubHeader.vue";
 import ShowcaseLinks from "@/components/about/ShowcaseLinks.vue";
 import { mapActions, mapGetters } from "vuex";
+import { useAppState } from "@/stores/app"
+import { mapActions as pmapActions } from "pinia";
 import { IDocRoute, IDocRouteData } from "@/interfaces/doc.interface";
 
 export default {
@@ -42,9 +44,9 @@ export default {
   },
   methods: {
     ...mapActions({
-      setLoading: "setLoading",
       fetchCredentialTypes:  "fetchCredentialTypes"
-    })
+    }),
+    ...pmapActions(useAppState, ["setLoading"])
   },
   async created(): Promise<void> {
     this.setLoading(true);
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
index 6115247..10aa83e 100644
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -17,10 +17,13 @@
 import BackTo from "@/components/shared/BackTo.vue";
 import ContactForm from "@/components/contact/ContactForm.vue";
 import { mapActions } from "vuex";
+import { mapActions as pmapActions } from "pinia"
+import { useAppState } from "@/stores/app"
 
 export default {
   methods: {
-    ...mapActions({ setLoading: "setLoading", fetchCredentialTypes: "fetchCredentialTypes"}),
+    ...mapActions({ fetchCredentialTypes: "fetchCredentialTypes" }),
+    ...pmapActions(useAppState, ["setLoading"])
   },
   async created(): Promise<void> {
     this.setLoading(true);
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 505b1ac..96eae70 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -36,6 +36,8 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
+import { mapActions as pmapActions, mapState } from "pinia";
+import { useAppState } from "@/stores/app"
 import SearchBar from "@/components/search/SearchBar.vue";
 import SearchDescription from "@/components/search/SearchDescription.vue";
 import SearchHelp from "@/components/search/SearchHelp.vue";
@@ -59,15 +61,16 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["loading", "searchQuery", "pagedSearchTopics"]),
+    ...mapGetters(["searchQuery", "pagedSearchTopics"]),
+    ...mapState(useAppState, {loading:  "getLoading"})
   },
   methods: {
     ...mapActions([
-      "setLoading",
       "fetchCredentialTypes",
       "fetchSearchFacetedTopics",
       "resetSearch",
     ]),
+    ...pmapActions(useAppState, ["setLoading"]),
     async extractQueryAndDispatchSearch(query: ISearchQuery): Promise<void> {
       this.q = query?.q || null;
       const newQuery = { ...defaultQuery, ...query };

From 3448de935997975e6bf1d76fc7ec28e78d56d4cd Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Wed, 15 Jan 2025 13:36:27 -0800
Subject: [PATCH 2/6] Fix error with EntityResults not properly displaying
 credentials

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 src/components/entity/EntityResult.vue | 10 ++-
 src/store/index.ts                     |  3 +
 src/store/modules/topic.ts             | 93 ++++++++++++++++++++++++++
 3 files changed, 103 insertions(+), 3 deletions(-)
 create mode 100644 src/store/modules/topic.ts

diff --git a/src/components/entity/EntityResult.vue b/src/components/entity/EntityResult.vue
index 692e5b3..d9b0de5 100644
--- a/src/components/entity/EntityResult.vue
+++ b/src/components/entity/EntityResult.vue
@@ -510,9 +510,11 @@ export default {
       mdiChevronRight: "mdiChevronRight",
       mdiCircleMedium: "mdiCircleMedium",
       mdiInformationOutline: "mdiInformationOutline",
+      selectedTopic: "selectedTopic",
+      selectedTopicFullCredentialSet: "selectedTopicFullCredentialSet"
     }),
     ...mapState(useAppState, { loading: "getLoading" }),
-    ...mapState(useTopicState, ["selectedTopic", "selectedTopicFullCredentialSet"]),
+    // ...mapState(useTopicState, ["selectedTopic", "selectedTopicFullCredentialSet"]),
     hasAnyRelationships: function (): boolean {
       return (
         this.businessAsRelationship?.length > 0 ||
@@ -582,7 +584,7 @@ export default {
     entityIncorporationNumber: function (): string | undefined {
       return this.selectedTopic?.source_id;
     },
-    filteredEntityCredentials: function (): Array<ICraedentialDisplayType> | undefined {
+    filteredEntityCredentials: function (): Array<ICredentialDisplayType> | undefined {
       var filteredCreds = this.entityCredentialsSorted;
       if (filteredCreds === undefined) {
         return undefined;
@@ -725,9 +727,11 @@ export default {
       setRegistrationType: "setRegistrationType",
       setIssuers: "setIssuers",
       fetchRelationships: "fetchRelationships",
+      fetchFormattedIdentifiedTopic: "fetchFormattedIdentifiedTopic",
+      fetchTopicFullCredentialSet: "fetchTopicFullCredentialSet",
     }),
     ...pmapActions(useAppState, ["setLoading"]),
-    ...pmapActions(useTopicState, ["fetchFormattedIdentifiedTopic", "fetchTopicFullCredentialSet"]),
+    // ...pmapActions(useTopicState, ["fetchFormattedIdentifiedTopic", "fetchTopicFullCredentialSet"]),
     credOrRelationshipToDisplay,
     getRelationshipName,
     getCredentialLabel,
diff --git a/src/store/index.ts b/src/store/index.ts
index 86ba824..2983afb 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -10,6 +10,7 @@ import feedback from "./modules/feedback";
 import icon, { State as IconState } from "./modules/icon";
 import search, { State as SearchState } from "./modules/search";
 import stats, { State as StatsState } from "./modules/statistics";
+import topic, { State as TopicState } from "./modules/topic";
 import like, { State as LikeState } from "./modules/like";
 
 Vue.use(Vuex);
@@ -22,6 +23,7 @@ export interface State {
   icon: IconState;
   search: SearchState;
   stats: StatsState;
+  topic: TopicState;
   like: LikeState;
 }
 
@@ -35,6 +37,7 @@ export default new Vuex.Store({
     icon,
     search,
     stats,
+    topic,
     like,
   },
 });
diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts
new file mode 100644
index 0000000..32bac37
--- /dev/null
+++ b/src/store/modules/topic.ts
@@ -0,0 +1,93 @@
+import { ActionContext } from "vuex";
+import { State as RootState } from "@/store";
+import { ITopic } from "@/interfaces/api/v2/topic.interface";
+import Topic from "@/services/api/v2/topic.service";
+import V4Topic from "@/services/api/v4/topic.service";
+import { ICredentialSet } from "@/interfaces/api/v2/credential-set.interface";
+
+const topicService = new Topic();
+const v4topicService = new V4Topic();
+
+export interface State {
+	selected: {
+		topic: ITopic | null;
+		credentialSet: ICredentialSet | null;
+	};
+}
+
+const state: State = {
+	selected: {
+		topic: null,
+		credentialSet: null,
+	},
+};
+
+const getters = {
+	selectedTopic: (state: State): ITopic | null => state?.selected?.topic,
+	selectedTopicCredentialSet: (state: State): ICredentialSet | null =>
+		state?.selected?.credentialSet,
+	selectedTopicFullCredentialSet: (state: State): ICredentialSet | null =>
+		state?.selected?.credentialSet,
+};
+
+const actions = {
+	async fetchFormattedIdentifiedTopic(
+		{ commit }: ActionContext<State, RootState>,
+		{ sourceId, type }: { sourceId: string; type: string }
+	): Promise<void> {
+		try {
+			const res = await topicService.getFormattedIdentifiedTopic(
+				sourceId,
+				type
+			);
+			commit("setSelectedTopic", res.data);
+		} catch (e) {
+			console.error(e);
+			commit("setSelectedTopic", null);
+		}
+	},
+	async fetchTopicCredentialSet(
+		{ commit }: ActionContext<State, RootState>,
+		id: number
+	): Promise<void> {
+		try {
+			const res = await topicService.getTopicCredentialSet(id);
+			commit("setSelectedCredentialSet", res.data);
+		} catch (e) {
+			console.error(e);
+			commit("setSelectedCredentialSet", null);
+		}
+	},
+
+	async fetchTopicFullCredentialSet(
+		{ commit }: ActionContext<State, RootState>,
+		id: number
+	): Promise<void> {
+		try {
+			const res = await v4topicService.getTopicCredentialSet(id);
+			commit("setSelectedCredentialSet", res.data);
+		} catch (e) {
+			console.error(e);
+			commit("setSelectedCredentialSet", null);
+		}
+	},
+};
+
+const mutations = {
+	setSelectedTopic(state: State, topic: ITopic): void {
+		state.selected = { ...state.selected, topic };
+	},
+	setSelectedCredentialSet(state: State, credentialSet: ICredentialSet): void {
+		state.selected = {
+			...state.selected,
+			credentialSet,
+		};
+	},
+};
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations,
+};

From 345f1b0af155d78addec7507fba87ec43aad99b0 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Wed, 15 Jan 2025 13:52:33 -0800
Subject: [PATCH 3/6] Added missing pinia stores

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 src/stores/app.ts               | 18 ++++++++
 src/stores/contact.ts           | 32 +++++++++++++
 src/stores/credential-detail.ts | 47 +++++++++++++++++++
 src/stores/credential-type.ts   | 81 +++++++++++++++++++++++++++++++++
 src/stores/doc.ts               | 34 ++++++++++++++
 src/stores/index.ts             |  7 +++
 src/stores/statistics.ts        | 33 ++++++++++++++
 src/stores/topic.ts             | 81 +++++++++++++++++++++++++++++++++
 8 files changed, 333 insertions(+)
 create mode 100644 src/stores/app.ts
 create mode 100644 src/stores/contact.ts
 create mode 100644 src/stores/credential-detail.ts
 create mode 100644 src/stores/credential-type.ts
 create mode 100644 src/stores/doc.ts
 create mode 100644 src/stores/index.ts
 create mode 100644 src/stores/statistics.ts
 create mode 100644 src/stores/topic.ts

diff --git a/src/stores/app.ts b/src/stores/app.ts
new file mode 100644
index 0000000..4d3154f
--- /dev/null
+++ b/src/stores/app.ts
@@ -0,0 +1,18 @@
+import { defineStore } from "pinia";
+interface AppState {
+	loading: boolean;
+}
+
+export const useAppState = defineStore("appState", {
+	state: (): AppState => ({
+		loading: false,
+	}),
+	getters: {
+		getLoading: (state: AppState): boolean => state.loading,
+	},
+	actions: {
+		setLoading(loading: boolean): void {
+			this.loading = loading;
+		},
+	},
+});
diff --git a/src/stores/contact.ts b/src/stores/contact.ts
new file mode 100644
index 0000000..0ec61ec
--- /dev/null
+++ b/src/stores/contact.ts
@@ -0,0 +1,32 @@
+import { defineStore } from "pinia";
+import Contact from "@/services/api/v4/contact.service";
+import { IContactRequest } from "@/interfaces/api/v4/contact.interface";
+
+const contactService = new Contact();
+
+export const contactReason: { [key: string]: string } = {
+	FEEDBACK: "Submit a comment/suggestion about Orgbook",
+	INCORRECT_INFO: "My organization's information is incorrect",
+	REGISTER_ORGANIZATION: "I want my organization listed on OrgBook BC",
+	REGISTER_ISSUER: "I want to become an OrgBook BC issuer",
+	API_INFO: "I want more information about APIs",
+	OTHER: "Other",
+};
+
+interface ContactState {
+	requestTypes: Array<string>;
+}
+
+export const useContactState = defineStore("contactState", {
+	state: (): ContactState => ({
+		requestTypes: [],
+	}),
+	getters: {
+		getRequestTypes: (state: ContactState): Array<string> => state.requestTypes,
+	},
+	actions: {
+		async sendContact(contact: IContactRequest): Promise<void> {
+			await contactService.postContact(contact);
+		},
+	},
+});
diff --git a/src/stores/credential-detail.ts b/src/stores/credential-detail.ts
new file mode 100644
index 0000000..5b240bb
--- /dev/null
+++ b/src/stores/credential-detail.ts
@@ -0,0 +1,47 @@
+import { defineStore } from "pinia";
+import Credential from "@/services/api/v2/credential.service";
+import CredentialVerifier from "@/services/api/v3/credential-verify.service";
+import { ICredentialFormatted } from "@/interfaces/api/v4/credential.interface";
+import { ICredentialProof } from "@/interfaces/api/v3/credential-verified.interface";
+
+export type Filter = { [key: string]: string | Array<string> | boolean };
+
+const credentialService = new Credential();
+const credVerificationService = new CredentialVerifier();
+
+export interface CredentialState {
+	selectedCredential: ICredentialFormatted | undefined;
+	presentationId: string;
+	presentationEX: ICredentialProof | undefined;
+}
+export const useCredentialState = defineStore("credentialState", {
+	state: (): CredentialState => ({
+		selectedCredential: undefined,
+		presentationId: "",
+		presentationEX: undefined,
+	}),
+	getters: {
+		getSelectedCredential: (
+			state: CredentialState
+		): ICredentialFormatted | undefined => state.selectedCredential,
+	},
+	actions: {
+		async fetchSelectedCredential(id: string): Promise<void> {
+			try {
+				const res = await credentialService.getFormattedCredential(id);
+				this.setSelectedCredential(res.data);
+			} catch (e) {
+				console.error(e);
+			}
+		},
+		setSelectedCredential(cred: ICredentialFormatted): void {
+			this.selectedCredential = cred;
+		},
+		setPresId(presId: string): void {
+			this.presentationId = presId;
+		},
+		setPresEX(presEX: ICredentialProof): void {
+			this.presentationEX = presEX;
+		},
+	},
+});
diff --git a/src/stores/credential-type.ts b/src/stores/credential-type.ts
new file mode 100644
index 0000000..c4d2e8c
--- /dev/null
+++ b/src/stores/credential-type.ts
@@ -0,0 +1,81 @@
+import { defineStore } from "pinia";
+import {
+	ICredentialType,
+	ICredentialTypeByIssuer,
+} from "@/interfaces/api/v2/credential-type.interface";
+import CredentialType from "@/services/api/v4/credential-type.service";
+import Schema from "@/services/api/v4/schema.service";
+
+const credentialTypeSerivice = new CredentialType();
+const schemaService = new Schema();
+
+interface CredentialTypeState {
+	schemas: Record<string, ICredentialType[]>;
+	credentialTypes: ICredentialType[];
+	selected: ICredentialType | null;
+}
+
+export const useCredentialTypeState = defineStore("credentialTypeState", {
+	state: (): CredentialTypeState => ({
+		schemas: {},
+		credentialTypes: [],
+		selected: null,
+	}),
+	getters: {
+		credentialType: (state: CredentialTypeState): ICredentialType | null =>
+			state.selected,
+		getCredentialTypes: (state: CredentialTypeState): ICredentialType[] =>
+			state.credentialTypes,
+		getSchemas: (
+			state: CredentialTypeState
+		): Record<string, ICredentialType[]> => state.schemas,
+		credentialTypesByIssuer: (
+			state: CredentialTypeState
+		): ICredentialTypeByIssuer[] =>
+			Object.values(
+				state.credentialTypes.reduce(
+					(
+						acc: Record<number | string, ICredentialTypeByIssuer>,
+						type: ICredentialType
+					) => {
+						if (!acc[type.issuer.id]) {
+							acc[type.issuer.id] = {
+								issuer: type.issuer,
+								credentialTypes: [type],
+							};
+						} else {
+							acc[type.issuer.id].credentialTypes.push(type);
+						}
+						return acc;
+					},
+					{}
+				)
+			),
+	},
+	actions: {
+		async fetchCredentialTypes(paging = true): Promise<void> {
+			try {
+				const res = await credentialTypeSerivice.getCredentialTypes(paging);
+				this.setCredentialTypes(res.data);
+			} catch (e) {
+				console.error(e);
+				this.setCredentialTypes([]);
+			}
+		},
+		async fetchSchemas(): Promise<void> {
+			try {
+				const res = await schemaService.getSchemas();
+				this.setSchemas(res.data);
+			} catch (e) {
+				console.error(e);
+				this.setSchemas({});
+			}
+		},
+		setSchemas(schemas: Record<string, ICredentialType[]>): void {
+			this.schemas = { ...schemas };
+		},
+		setCredentialTypes(credentialTypes: ICredentialType[]): void {
+			this.credentialTypes = [...credentialTypes];
+		},
+	},
+});
diff --git a/src/stores/doc.ts b/src/stores/doc.ts
new file mode 100644
index 0000000..cb9edea
--- /dev/null
+++ b/src/stores/doc.ts
@@ -0,0 +1,34 @@
+import { defineStore } from "pinia";
+import { State as RootState } from "@/store/index";
+import { IDocRoute } from "@/interfaces/doc.interface";
+
+interface DocState {
+	docRoutes: IDocRoute[];
+}
+
+export const useDocState = defineStore("docState", {
+	state: (): DocState => ({
+		docRoutes: [],
+	}),
+	getters: {
+		docLinks: (state: DocState): IDocRoute[] => {
+			return state.docRoutes.filter((docRoute) => !docRoute?.data?.index);
+		},
+		showcaseLinks: (state: DocState): IDocRoute[] => {
+			return state.docRoutes.filter((docRoute) => docRoute?.data?.showcase);
+		},
+		getDocRoutes: (state: DocState): IDocRoute[] => {
+			return state.docRoutes;
+		},
+		getDocRoute:
+			(state: DocState) =>
+			(name: string): IDocRoute => {
+				return state.docRoutes.filter((docRoute) => docRoute.name === name)[0];
+			},
+	},
+	actions: {
+		setDocRoutes(docRoutes: IDocRoute[]): void {
+			this.setDocRoutes(docRoutes);
+		},
+	},
+});
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..78a4e49
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,7 @@
+export { useAppState } from "./app";
+export { useContactState } from "./contact";
+export { useCredentialState } from "./credential-detail";
+export { useCredentialTypeState } from "./credential-type";
+export { useDocState } from "./doc";
+export { useTopicState } from "./topic";
+export { useStatisticsState } from "./statistics";
diff --git a/src/stores/statistics.ts b/src/stores/statistics.ts
new file mode 100644
index 0000000..dc2afa0
--- /dev/null
+++ b/src/stores/statistics.ts
@@ -0,0 +1,33 @@
+import { defineStore } from "pinia";
+import { State as RootState } from "@/store/index";
+import { IStatistics } from "@/interfaces/api/v2/statistics.interface";
+import Statistics from "@/services/api/v2/statistics.service";
+
+const statisticsService = new Statistics();
+
+interface State {
+	statistics: IStatistics | null;
+}
+
+export const useStatisticsState = defineStore("appState", {
+	state: (): State => ({
+		statistics: null,
+	}),
+	getters: {
+		getStatistics: (state: State): IStatistics | null => state.statistics,
+	},
+	actions: {
+		async fetchStatistics(): Promise<void> {
+			try {
+				const res = await statisticsService.getStats();
+				this.setStatistics(res.data);
+			} catch (e) {
+				console.error(e);
+				this.setStatistics(null);
+			}
+		},
+		setStatistics(statistics: IStatistics): void {
+			this.statistics = { ...statistics };
+		},
+	},
+});
diff --git a/src/stores/topic.ts b/src/stores/topic.ts
new file mode 100644
index 0000000..2524193
--- /dev/null
+++ b/src/stores/topic.ts
@@ -0,0 +1,81 @@
+import { defineStore } from "pinia";
+import { ITopic } from "@/interfaces/api/v2/topic.interface";
+import Topic from "@/services/api/v2/topic.service";
+import V4Topic from "@/services/api/v4/topic.service";
+import { ICredentialSet } from "@/interfaces/api/v2/credential-set.interface";
+
+const topicService = new Topic();
+const v4topicService = new V4Topic();
+
+export interface TopicState {
+	selected: {
+		topic: ITopic | null;
+		credentialSet: ICredentialSet | null;
+	};
+}
+
+export const useTopicState = defineStore("topicState", {
+	state: (): TopicState => ({
+		selected: {
+			topic: null,
+			credentialSet: null,
+		},
+	}),
+	getters: {
+		selectedTopic: (state: TopicState): ITopic | null => state?.selected?.topic,
+		selectedTopicCredentialSet: (state: TopicState): ICredentialSet | null =>
+			state?.selected?.credentialSet,
+		selectedTopicFullCredentialSet: (
+			state: TopicState
+		): ICredentialSet | null => state?.selected?.credentialSet,
+	},
+	actions: {
+		async fetchFormattedIdentifiedTopic({
+			sourceId,
+			type,
+		}: {
+			sourceId: string;
+			type: string;
+		}): Promise<void> {
+			try {
+				const res = await topicService.getFormattedIdentifiedTopic(
+					sourceId,
+					type
+				);
+				console.log(res.data);
+				this.setSelectedTopic(res.data);
+			} catch (e) {
+				console.error(e);
+				this.setSelectedTopic(null);
+			}
+		},
+		async fetchTopicCredentialSet(id: number): Promise<void> {
+			try {
+				const res = await topicService.getTopicCredentialSet(id);
+				this.setSelectedCredentialSet(res.data);
+			} catch (e) {
+				console.error(e);
+				this.setSelectedCredentialSet(null);
+			}
+		},
+
+		async fetchTopicFullCredentialSet(id: number): Promise<void> {
+			try {
+				const res = await v4topicService.getTopicCredentialSet(id);
+				this.setSelectedCredentialSet(res.data);
+			} catch (e) {
+				console.error(e);
+				this.setSelectedCredentialSet(null);
+			}
+		},
+		setSelectedTopic(topic: ITopic): void {
+			this.selected = { ...this.selected, topic };
+		},
+		setSelectedCredentialSet(credentialSet: ICredentialSet): void {
+			this.selected = {
+				...this.selected,
+				credentialSet,
+			};
+		},
+	},
+});

From 2e362a69fa81b277e3d361cf35c8b41de0d827af Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Thu, 16 Jan 2025 13:08:19 -0800
Subject: [PATCH 4/6] Fix entity results now using pinia properly

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 src/components/entity/EntityResult.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/entity/EntityResult.vue b/src/components/entity/EntityResult.vue
index d9b0de5..301c59c 100644
--- a/src/components/entity/EntityResult.vue
+++ b/src/components/entity/EntityResult.vue
@@ -510,11 +510,9 @@ export default {
       mdiChevronRight: "mdiChevronRight",
       mdiCircleMedium: "mdiCircleMedium",
       mdiInformationOutline: "mdiInformationOutline",
-      selectedTopic: "selectedTopic",
-      selectedTopicFullCredentialSet: "selectedTopicFullCredentialSet"
     }),
     ...mapState(useAppState, { loading: "getLoading" }),
-    // ...mapState(useTopicState, ["selectedTopic", "selectedTopicFullCredentialSet"]),
+    ...mapState(useTopicState, ["selectedTopic", "selectedTopicFullCredentialSet"]),
     hasAnyRelationships: function (): boolean {
       return (
         this.businessAsRelationship?.length > 0 ||
@@ -727,11 +725,9 @@ export default {
       setRegistrationType: "setRegistrationType",
       setIssuers: "setIssuers",
       fetchRelationships: "fetchRelationships",
-      fetchFormattedIdentifiedTopic: "fetchFormattedIdentifiedTopic",
-      fetchTopicFullCredentialSet: "fetchTopicFullCredentialSet",
     }),
     ...pmapActions(useAppState, ["setLoading"]),
-    // ...pmapActions(useTopicState, ["fetchFormattedIdentifiedTopic", "fetchTopicFullCredentialSet"]),
+    ...pmapActions(useTopicState, ["fetchFormattedIdentifiedTopic", "fetchTopicFullCredentialSet"]),
     credOrRelationshipToDisplay,
     getRelationshipName,
     getCredentialLabel,
@@ -917,7 +913,7 @@ export default {
           console.error("Failed to fetch topic. Invalid source id");
           this.$router.push("/");
         }
-        const topic: ITopic = this.$store.getters.selectedTopic;
+        const topic: ITopic | null = this.selectedTopic;
         if (topic?.id) {
           console.log("relationships")
           await Promise.all([

From e7988774fea0fb498f318c5a7fad575b6d436847 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Mon, 20 Jan 2025 12:06:30 -0800
Subject: [PATCH 5/6] migrate statistics from vuex to pinia

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 src/components/search/SearchHome.vue | 9 ++++++---
 src/stores/statistics.ts             | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/search/SearchHome.vue b/src/components/search/SearchHome.vue
index 0896b09..5b92f04 100644
--- a/src/components/search/SearchHome.vue
+++ b/src/components/search/SearchHome.vue
@@ -94,7 +94,10 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
+import { mapActions as pmapActions, mapState } from "pinia";
+import { useStatisticsState } from "@/stores";
 import ShowcaseLinks from "@/components/about/ShowcaseLinks.vue";
+import { IStatistics } from "@/interfaces/api/v2/statistics.interface";
 
 interface Data {
   descriptions: string[];
@@ -106,19 +109,19 @@ interface Data {
   },
   computed: {
     ...mapGetters([
-      "statistics",
       "showcaseLinks",
       "mdiCheckBold",
       "mdiShieldCheckOutline",
     ]),
+    ...mapState(useStatisticsState, { statistics: "getStatistics"})
   },
   methods: {
-    ...mapActions(["fetchStatistics"]),
+    ...pmapActions(useStatisticsState, ["fetchStatistics"]),
   },
 })
 export default class SearchHome extends Vue {
   fetchStatistics!: () => Promise<void>;
-
+  statistics!: IStatistics | null
   data(): Data {
     return {
       descriptions: [
diff --git a/src/stores/statistics.ts b/src/stores/statistics.ts
index dc2afa0..ed7b890 100644
--- a/src/stores/statistics.ts
+++ b/src/stores/statistics.ts
@@ -9,7 +9,7 @@ interface State {
 	statistics: IStatistics | null;
 }
 
-export const useStatisticsState = defineStore("appState", {
+export const useStatisticsState = defineStore("StatisticsState", {
 	state: (): State => ({
 		statistics: null,
 	}),

From 4dbfd1bb473612f8ce3d77a5476b9b28126057b1 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Tue, 21 Jan 2025 10:50:07 -0800
Subject: [PATCH 6/6] Migrate entity store to pinia

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 src/components/entity/EntityResult.vue        |  11 +-
 .../entity/filter/EntityFilterChips.vue       |   8 +-
 .../entity/filter/EntityFilterFacetPanels.vue |  16 +-
 .../entity/filter/EntityFilterFacets.vue      |   6 +-
 src/store/index.ts                            |   3 -
 src/store/modules/entity.ts                   | 233 ------------------
 src/stores/index.ts                           |   8 +-
 src/views/Entity.vue                          |   4 +-
 8 files changed, 30 insertions(+), 259 deletions(-)
 delete mode 100644 src/store/modules/entity.ts

diff --git a/src/components/entity/EntityResult.vue b/src/components/entity/EntityResult.vue
index 301c59c..e7e10fd 100644
--- a/src/components/entity/EntityResult.vue
+++ b/src/components/entity/EntityResult.vue
@@ -440,7 +440,7 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 import { VuetifyGoToTarget } from "vuetify/types/services/goto";
 import { mapActions, mapGetters } from "vuex";
 import { mapActions as pmapActions, mapState } from "pinia";
-import { useAppState, useTopicState } from "@/stores";
+import { useAppState, useTopicState, useEntityState } from "@/stores";
 import moment from "moment";
 
 import {
@@ -499,9 +499,6 @@ export default {
     ...mapGetters({
       credentialTypes: "credentialTypes",
       entityDesc: "entityDesc",
-      getEntityFilters: "getEntityFilters",
-      getRelationships: "getRelationships",
-      getScrollY: "getScrollY",
       mdiArrowUp: "mdiArrowUp",
       mdiArrowDown: "mdiArrowDown",
       mdiArrowLeft: "mdiArrowLeft",
@@ -513,6 +510,7 @@ export default {
     }),
     ...mapState(useAppState, { loading: "getLoading" }),
     ...mapState(useTopicState, ["selectedTopic", "selectedTopicFullCredentialSet"]),
+    ...mapState(useEntityState, ["getScrollY","getRelationships", "getEntityFilters"]),
     hasAnyRelationships: function (): boolean {
       return (
         this.businessAsRelationship?.length > 0 ||
@@ -720,14 +718,11 @@ export default {
   methods: {
     ...mapActions({
       fetchCredentialTypes: "fetchCredentialTypes",
-      setCredentialType: "setCredentialType",
       setEntityDesc: "setEntityDesc",
-      setRegistrationType: "setRegistrationType",
-      setIssuers: "setIssuers",
-      fetchRelationships: "fetchRelationships",
     }),
     ...pmapActions(useAppState, ["setLoading"]),
     ...pmapActions(useTopicState, ["fetchFormattedIdentifiedTopic", "fetchTopicFullCredentialSet"]),
+    ...pmapActions(useEntityState, ["fetchRelationships", "setIssuers", "setCredentialType", "setRegistrationType",]),
     credOrRelationshipToDisplay,
     getRelationshipName,
     getCredentialLabel,
diff --git a/src/components/entity/filter/EntityFilterChips.vue b/src/components/entity/filter/EntityFilterChips.vue
index af2ba49..0277d19 100644
--- a/src/components/entity/filter/EntityFilterChips.vue
+++ b/src/components/entity/filter/EntityFilterChips.vue
@@ -23,6 +23,8 @@
 
 <script lang="ts">
 import { mapActions, mapGetters } from "vuex";
+import { mapState, mapActions as pmapActions } from "pinia";
+import { useEntityState } from "@/stores";
 import { IEntityFilter } from "@/interfaces/entity-filter.interface";
 
 export interface EntityChips {
@@ -32,9 +34,9 @@ export interface EntityChips {
 export default {
   computed: {
     ...mapGetters({
-      getEntityFilters: "getEntityFilters",
       mdiClose: "mdiClose"
     }),
+    ...mapState(useEntityState, ["getEntityFilters"]),
     activeEntityFilters(): EntityChips[] {
       let chips: EntityChips[] = [];
       Object.keys(this.getEntityFilters).forEach((key) => {
@@ -70,9 +72,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions({
-      toggleEntityFilter: "toggleEntityFilter"
-    }),
+    ...pmapActions(useEntityState, ["toggleEntityFilter"]),
   }
 }
 </script>
diff --git a/src/components/entity/filter/EntityFilterFacetPanels.vue b/src/components/entity/filter/EntityFilterFacetPanels.vue
index c80b437..51589ab 100644
--- a/src/components/entity/filter/EntityFilterFacetPanels.vue
+++ b/src/components/entity/filter/EntityFilterFacetPanels.vue
@@ -236,6 +236,8 @@
 
 <script lang="ts">
 import { mapActions, mapGetters } from "vuex";
+import { mapState, mapActions as pmapActions } from "pinia";
+import { useEntityState } from "@/stores";
 
 import {
   IEntityFacetField,
@@ -275,19 +277,19 @@ export default {
         computed: {
                 ...mapGetters({
                         searchTopicFacets: "searchTopicFacets",
-                        getAuthorities: "getAuthorities",
-                        getCredentialTypes: "getCredentialTypes",
-                        getRegistrationTypes: "getRegistrationTypes",
-                        getEntityFilters: "getEntityFilters",
                         mdiCalendar: "mdiCalendar",
                         mdiInformationOutline: "mdiInformationOutline",
                 }),
+                ...mapState(useEntityState, [
+                        "getAuthorities",
+                        "getCredentialTypes",
+                        "getRegistrationTypes",
+                        "getEntityFilters",
+                ])
         },
         methods: {
                 isEntityFilterActive,
-                ...mapActions({
-                        setFilter: "setFilter"
-                }),
+                ...pmapActions(useEntityState, ["setFilter"]),
                 toggleShowExpired(newVal: boolean): void {
                         var currFilters = { ...this.getEntityFilters };
                         currFilters.show_expired = !newVal;
diff --git a/src/components/entity/filter/EntityFilterFacets.vue b/src/components/entity/filter/EntityFilterFacets.vue
index 00cce6d..8781abf 100644
--- a/src/components/entity/filter/EntityFilterFacets.vue
+++ b/src/components/entity/filter/EntityFilterFacets.vue
@@ -47,6 +47,8 @@
 
 <script lang="ts">
 import { mapGetters, mapActions } from "vuex";
+import { mapState, mapActions as pmapActions} from "pinia";
+import { useEntityState } from "@/stores";
 import {
   IEntityFacetField,
   IEntityFilter,
@@ -56,10 +58,10 @@ import { isEntityFilterActive, toTranslationFormat } from "@/utils/entity";
 
 export default {
         computed: {
-                ...mapGetters(["getEntityFilters"]),
+                ...mapState(useEntityState, ["getEntityFilters"]),
         },
         methods: {
-                ...mapActions(["toggleEntityFilter"]),
+                ...pmapActions(useEntityState, ["toggleEntityFilter"]),
                 isEntityFilterActive,
                 toTranslationFormat
         },
diff --git a/src/store/index.ts b/src/store/index.ts
index 2983afb..0c6e4d8 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -4,7 +4,6 @@ import credentialType, {
   State as CredentialTypeState,
 } from "./modules/credential-type";
 import doc, { State as DocState } from "./modules/doc";
-import entity, { State as EntityState } from "./modules/entity";
 import entityDesc, { State as EntityDescState } from "./modules/entity-desc";
 import feedback from "./modules/feedback";
 import icon, { State as IconState } from "./modules/icon";
@@ -18,7 +17,6 @@ Vue.use(Vuex);
 export interface State {
   credentialType: CredentialTypeState;
   doc: DocState;
-  entity: EntityState;
   entityDesc: EntityDescState;
   icon: IconState;
   search: SearchState;
@@ -31,7 +29,6 @@ export default new Vuex.Store({
   modules: {
     credentialType,
     doc,
-    entity,
     entityDesc,
     feedback,
     icon,
diff --git a/src/store/modules/entity.ts b/src/store/modules/entity.ts
deleted file mode 100644
index 484fb9b..0000000
--- a/src/store/modules/entity.ts
+++ /dev/null
@@ -1,233 +0,0 @@
-import { ActionContext } from "vuex";
-import { State as RootState } from "@/store/index";
-import Relationship from "@/services/api/v2/relationship.service";
-import { ITopic } from "@/interfaces/api/v2/topic.interface";
-import {
-  IEntityFacetField,
-  IEntityFilter,
-} from "@/interfaces/entity-filter.interface";
-import { ICredentialSet } from "@/interfaces/api/v2/credential-set.interface";
-import { ICredentialDisplayType } from "@/interfaces/api/v4/credential.interface";
-import { isRegType } from "@/utils/entity";
-import i18n from "@/i18n/index";
-
-const relationshipService = new Relationship();
-
-export interface State {
-  relationships: Relationship[];
-  top: number;
-  selected: {
-    topic: ITopic | null;
-    credentialSet: ICredentialSet | null;
-  };
-  entityFilter: IEntityFilter | null;
-  filterValues: {
-    authorities: Array<IEntityFacetField>;
-    credentialType: Array<IEntityFacetField>;
-    registrationType: Array<IEntityFacetField>;
-  };
-}
-
-const state: State = {
-  relationships: [],
-  top: 0,
-  selected: {
-    topic: null,
-    credentialSet: null,
-  },
-  entityFilter: null,
-  filterValues: {
-    authorities: [],
-    credentialType: [],
-    registrationType: [],
-  },
-};
-
-const getters = {
-  getScrollY: (state: State): number => state.top,
-  getRelationships: (state: State): Relationship[] => state.relationships,
-  getAuthorities: (state: State): Array<IEntityFacetField> =>
-    state.filterValues.authorities,
-  getCredentialTypes: (state: State): Array<IEntityFacetField> =>
-    state.filterValues.credentialType,
-  getRegistrationTypes: (state: State): Array<IEntityFacetField> =>
-    state.filterValues.registrationType,
-  getEntityFilters: (state: State): IEntityFilter => {
-    if (!state.entityFilter) {
-      return {
-        authorities: [],
-        credential_type: [],
-        registration_type: [],
-        date_min: "",
-        date_max: "",
-        show_expired: true,
-      };
-    } else {
-      return state.entityFilter;
-    }
-  },
-};
-
-const actions = {
-  async fetchRelationships(
-    { commit }: ActionContext<State, RootState>,
-    topic_id: number
-  ): Promise<void> {
-    try {
-      console.log("fetching relationships");
-      const res = await relationshipService.getRelatedTo(topic_id);
-      console.log(res);
-      commit("setRelationships", res.data);
-    } catch (e) {
-      console.error(e);
-    }
-  },
-
-  setScrollY({ commit }: ActionContext<State, RootState>, top: number): void {
-    commit("setScrollY", top);
-  },
-  //issuer filters
-  setIssuers(
-    { commit }: ActionContext<State, RootState>,
-    creds: Array<ICredentialDisplayType>
-  ): void {
-    const filterFields: IEntityFacetField[] = [];
-
-    creds.forEach((cred) => {
-      const idx = filterFields
-        .map((field) => field.value)
-        .indexOf(cred.authority);
-      if (idx >= 0) {
-        (filterFields[idx].count as number) += 1;
-      } else {
-        filterFields.push({
-          text: cred.authority,
-          value: cred.authority,
-          count: 1,
-        });
-      }
-    });
-    commit("setIssuers", filterFields);
-  },
-  // credential type filters
-  setCredentialType(
-    { commit }: ActionContext<State, RootState>,
-    creds: Array<ICredentialDisplayType>
-  ): void {
-    const filterFields: IEntityFacetField[] = [];
-    creds.forEach((cred) => {
-      let credDesc = cred.credential_type;
-      if (cred.schema_label?.[i18n.locale]?.label) {
-        credDesc = cred.schema_label[i18n.locale].label;
-      }
-      const idx = filterFields.map((field) => field.value).indexOf(credDesc);
-      if (idx >= 0) {
-        (filterFields[idx].count as number) += 1;
-      } else {
-        // The text and value fields are backwards here
-        filterFields.push({
-          text: cred.credential_type,
-          value: credDesc,
-          count: 1,
-        });
-      }
-    });
-    commit("setCredTypes", filterFields);
-  },
-  // registration type filters
-  setRegistrationType(
-    { commit }: ActionContext<State, RootState>,
-    creds: Array<ICredentialDisplayType>
-  ): void {
-    const filterFields: IEntityFacetField[] = [];
-
-    creds.forEach((cred) => {
-      if (isRegType(cred)) {
-        const regDesc = cred.registration_reason;
-        if (regDesc !== undefined) {
-          const idx = filterFields.map((field) => field.value).indexOf(regDesc);
-          if (idx >= 0) {
-            (filterFields[idx].count as number) += 1;
-          } else {
-            filterFields.push({
-              text: regDesc,
-              value: regDesc,
-              count: 1,
-            });
-          }
-        }
-      }
-    });
-
-    commit("setRegTypes", filterFields);
-  },
-
-  setFilter(
-    { commit }: ActionContext<State, RootState>,
-    filter: IEntityFilter
-  ): void {
-    commit("setFilter", filter);
-  },
-  toggleEntityFilter(
-    { commit }: ActionContext<State, RootState>,
-    params: { filterString: string; filterField: string }
-  ): void {
-    const baseFilter = getters.getEntityFilters(state);
-    let currFilters: string[] | string | boolean =
-      baseFilter[params.filterField] === undefined
-        ? []
-        : baseFilter[params.filterField];
-    if (typeof currFilters === "string" && currFilters !== "") {
-      //we should only support clearing strings, adding strings should be done through setFilter
-      currFilters = "";
-    } else if (typeof currFilters === "boolean") {
-      currFilters = !currFilters;
-    } else {
-      currFilters = currFilters as string[];
-      if (!currFilters.includes(params.filterString)) {
-        currFilters.push(params.filterString);
-      } else {
-        const idx = currFilters.indexOf(params.filterString);
-        currFilters.splice(idx, 1);
-      }
-    }
-    baseFilter[params.filterField] = currFilters;
-    commit("setFilter", baseFilter);
-  },
-  clearFilter({ commit }: ActionContext<State, RootState>): void {
-    commit("clearFilter");
-  },
-};
-
-const mutations = {
-  setRelationships: (state: State, relationships: Relationship[]): void => {
-    state.relationships = relationships;
-  },
-  setScrollY(state: State, top: number): void {
-    state.top = top;
-  },
-  //entity filter mutations
-  setCredTypes(state: State, credTypes: IEntityFacetField[]): void {
-    state.filterValues.credentialType = credTypes;
-  },
-  setIssuers(state: State, issuers: IEntityFacetField[]): void {
-    state.filterValues.authorities = issuers;
-  },
-  setRegTypes(state: State, regTypes: IEntityFacetField[]): void {
-    state.filterValues.registrationType = regTypes;
-  },
-  setFilter: (state: State, filter: IEntityFilter): IEntityFilter | null => {
-    state.entityFilter = { ...filter };
-    return state.entityFilter;
-  },
-  clearFilter: (state: State): void => {
-    state.entityFilter = null;
-  },
-};
-
-export default {
-  state,
-  getters,
-  actions,
-  mutations,
-};
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 78a4e49..b5e7144 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -3,5 +3,11 @@ export { useContactState } from "./contact";
 export { useCredentialState } from "./credential-detail";
 export { useCredentialTypeState } from "./credential-type";
 export { useDocState } from "./doc";
-export { useTopicState } from "./topic";
+export { useEntityState } from "./entity";
+// export { useEntityDescState } from "./entity-desc";
+// export { useFeedbackState } from "./feedback";
+// export { useIconState } from "./icon";
+// export { useSearch } from "./search";
 export { useStatisticsState } from "./statistics";
+export { useTopicState } from "./topic";
+// export { useLikeState } from "./like";
diff --git a/src/views/Entity.vue b/src/views/Entity.vue
index 1b3eed0..6ea8cf2 100644
--- a/src/views/Entity.vue
+++ b/src/views/Entity.vue
@@ -9,12 +9,14 @@ import { Component, Vue } from "vue-property-decorator";
 import EntityResult from "@/components/entity/EntityResult.vue";
 import { NavigationGuardNext, Route } from "vue-router";
 import { mapActions } from "vuex";
+import { mapActions as pmapActions } from "pinia";
+import { useEntityState } from "@/stores";
 
 Component.registerHooks(["beforeRouteLeave"]);
 
 export default {
   methods: {
-    ...mapActions({ clearFilter: "clearFilter", setScrollY: "setScrollY"}),
+    ...pmapActions(useEntityState, ["setScrollY", "clearFilter"]),
   },
   async beforeRouteLeave(
     to: Route,