From 1f6cee1d2d02c1ea688ff0152aca1d9269e144f7 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Fri, 5 May 2023 00:28:27 +0800
Subject: [PATCH] feat: favorite localstorage

---
 src/components/ChainSummary.vue |  11 +-
 src/stores/useBlockchain.ts     | 194 +++++++++++++++++---------------
 2 files changed, 111 insertions(+), 94 deletions(-)

diff --git a/src/components/ChainSummary.vue b/src/components/ChainSummary.vue
index 0e481a55..19d0dd67 100644
--- a/src/components/ChainSummary.vue
+++ b/src/components/ChainSummary.vue
@@ -13,6 +13,13 @@ const props = defineProps({
 const dashboardStore = useDashboard()
 const conf = computed(() => dashboardStore.chains[props.name] || {})
 
+const addFavor = (e: Event) => {
+  e.stopPropagation();
+  e.preventDefault();
+  dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
+  window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap))
+}
+
 </script>
 <template>
   <RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer">
@@ -22,9 +29,7 @@ const conf = computed(() => dashboardStore.chains[props.name] || {})
     <div class="font-semibold ml-4 text-base flex-1">
       {{ conf?.prettyName || props.name }}
     </div>
-    <div
-      @click="(e: Event) => { e.stopPropagation(); e.preventDefault(); dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name] }"
-      class="pl-4 text-xl"
+    <div @click="addFavor" class="pl-4 text-xl"
       :class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
       <Icon icon="mdi-star" />
     </div>
diff --git a/src/stores/useBlockchain.ts b/src/stores/useBlockchain.ts
index b61a368f..e41dbe80 100644
--- a/src/stores/useBlockchain.ts
+++ b/src/stores/useBlockchain.ts
@@ -1,121 +1,133 @@
-import { defineStore } from "pinia";
-import { useDashboard, type ChainConfig, type Endpoint, EndpointType } from "./useDashboard";
-import type { VerticalNavItems } from '@/@layouts/types'
-import { useRouter } from "vue-router";
-import { CosmosRestClient } from "@/libs/client";
-import { useBankStore, useBaseStore, useGovStore, useMintStore, useStakingStore } from ".";
-import { useBlockModule } from "@/modules/[chain]/block/block";
-import { DEFAULT } from "@/libs";
+import { defineStore } from 'pinia';
+import {
+  useDashboard,
+  type ChainConfig,
+  type Endpoint,
+  EndpointType,
+} from './useDashboard';
+import type { VerticalNavItems } from '@/@layouts/types';
+import { useRouter } from 'vue-router';
+import { CosmosRestClient } from '@/libs/client';
+import {
+  useBankStore,
+  useBaseStore,
+  useGovStore,
+  useMintStore,
+  useStakingStore,
+} from '.';
+import { useBlockModule } from '@/modules/[chain]/block/block';
+import { DEFAULT } from '@/libs';
 
-export const useBlockchain = defineStore("blockchain", {
+export const useBlockchain = defineStore('blockchain', {
   state: () => {
     return {
       status: {} as Record<string, string>,
       rest: '',
-      chainName: "",
+      chainName: '',
       endpoint: {} as {
-        type?: EndpointType,
-        address: string
-        provider: string       
+        type?: EndpointType;
+        address: string;
+        provider: string;
       },
-      connErr: ""
-    }
+      connErr: '',
+    };
   },
   getters: {
-    current() : ChainConfig | undefined {
-      return this.dashboard.chains[this.chainName]
+    current(): ChainConfig | undefined {
+      return this.dashboard.chains[this.chainName];
     },
     logo(): string {
-      return this.current?.logo || ''
+      return this.current?.logo || '';
     },
     dashboard() {
-      return useDashboard()
+      return useDashboard();
     },
     computedChainMenu() {
+      let currNavItem: VerticalNavItems = [];
 
-      let currNavItem: VerticalNavItems = []
-
-      const router = useRouter()
-      const routes = router?.getRoutes()||[]
-      if(this.current && routes) {
-        currNavItem = [{
-          title: this.current?.prettyName || this.chainName || '',
-          icon: {image: this.current.logo, size: '22'},
-          i18n: false,
-          children: routes
-                    .filter(x=> x.meta.i18n)
-                    .map(x => ({
-                      title: `module.${x.meta.i18n}`, 
-                      to: {path: x.path.replace(':chain',this.chainName)}, 
-                      icon: { icon: 'mdi-chevron-right', size: '22'},
-                      i18n: true
-                    }))
-                    .sort((a,b)=>a.to.path.length - b.to.path.length)
-        }]
+      const router = useRouter();
+      const routes = router?.getRoutes() || [];
+      if (this.current && routes) {
+        currNavItem = [
+          {
+            title: this.current?.prettyName || this.chainName || '',
+            icon: { image: this.current.logo, size: '22' },
+            i18n: false,
+            children: routes
+              .filter((x) => x.meta.i18n)
+              .map((x) => ({
+                title: `module.${x.meta.i18n}`,
+                to: { path: x.path.replace(':chain', this.chainName) },
+                icon: { icon: 'mdi-chevron-right', size: '22' },
+                i18n: true,
+              }))
+              .sort((a, b) => a.to.path.length - b.to.path.length),
+          },
+        ];
       }
       // compute favorite menu
-      const favNavItems: VerticalNavItems = []
-      this.dashboard.favorite.forEach(name => {
-        const ch = this.dashboard.chains[name]
-        if(ch) {
+      const favNavItems: VerticalNavItems = [];
+      Object.keys(this.dashboard.favoriteMap).forEach((name) => {
+        const ch = this.dashboard.chains[name];
+        if (ch && this.dashboard.favoriteMap?.[name]) {
           favNavItems.push({
-            title: ch.prettyName || ch.chainName || name, 
-            to: { path: `/${ch.chainName || name}`}, 
-            icon: {image: ch.logo, size: '22'}
-          } )
-        } 
-      })    
+            title: ch.prettyName || ch.chainName || name,
+            to: { path: `/${ch.chainName || name}` },
+            icon: { image: ch.logo, size: '22' },
+          });
+        }
+      });
 
       // combine all together
-      return [...currNavItem,
-          { heading: 'Ecosystem' },
-          {
-            title: 'Favorite', 
-            children: favNavItems, 
-            badgeContent: favNavItems.length,
-            badgeClass: 'bg-primary',
-            i18n: true,
-            icon: { icon: 'mdi-star', size: '22'}
-          },
-          {
-            title: 'All Blockchains',
-            to: { path : '/'},
-            badgeContent: this.dashboard.length,
-            badgeClass: 'bg-primary',
-            i18n: true,
-            icon: { icon: 'mdi-grid', size: '22'}
-          }
-        ]
+      return [
+        ...currNavItem,
+        { heading: 'Ecosystem' },
+        {
+          title: 'Favorite',
+          children: favNavItems,
+          badgeContent: favNavItems.length,
+          badgeClass: 'bg-primary',
+          i18n: true,
+          icon: { icon: 'mdi-star', size: '22' },
+        },
+        {
+          title: 'All Blockchains',
+          to: { path: '/' },
+          badgeContent: this.dashboard.length,
+          badgeClass: 'bg-primary',
+          i18n: true,
+          icon: { icon: 'mdi-grid', size: '22' },
+        },
+      ];
     },
   },
   actions: {
     async initial() {
-      await this.randomSetupEndpoint()
-      await useStakingStore().init()
-      useBankStore().initial()
-      useBaseStore().initial()
-      useGovStore().initial()
-      useMintStore().initial()
-      useBlockModule().initial()      
+      await this.randomSetupEndpoint();
+      await useStakingStore().init();
+      useBankStore().initial();
+      useBaseStore().initial();
+      useGovStore().initial();
+      useMintStore().initial();
+      useBlockModule().initial();
     },
 
     async randomSetupEndpoint() {
-      const all = this.current?.endpoints?.rest
-      if(all) {    
-          const rn = Math.random()
-          const endpoint = all[Math.floor(rn * all.length)]
-          await this.setRestEndpoint(endpoint)
-      } 
-    },
-    
-    async setRestEndpoint(endpoint: Endpoint) {
-      this.connErr = ''
-      this.endpoint = endpoint
-      this.rpc = new CosmosRestClient(endpoint.address, DEFAULT)
-    },
-    setCurrent(name: string) {
-      this.chainName = name
+      const all = this.current?.endpoints?.rest;
+      if (all) {
+        const rn = Math.random();
+        const endpoint = all[Math.floor(rn * all.length)];
+        await this.setRestEndpoint(endpoint);
+      }
     },
 
-  }
-})
+    async setRestEndpoint(endpoint: Endpoint) {
+      this.connErr = '';
+      this.endpoint = endpoint;
+      this.rpc = new CosmosRestClient(endpoint.address, DEFAULT);
+    },
+    setCurrent(name: string) {
+      this.chainName = name;
+    },
+  },
+});