chore(code): code refactor

Satellite-im · Feb 4, 2022 · 384462b · 384462b
1 parent 6d29289
commit 384462b
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 36 deletions.
diff --git a/components/interactables/QuickProfile/QuickProfile.html b/components/interactables/QuickProfile/QuickProfile.html
@@ -8,14 +8,14 @@
     <InteractablesClose :action="close" />
   </div>
   <div class="header">
-    <div class="avatar-wrapper" @click="openProfile">
-      <UiCircle
-        :type="src ? 'image' : 'random'"
-        :seed="user.address"
-        :size="45"
-        :source="src"
-      />
-    </div>
+    <UiCircle
+      :type="src ? 'image' : 'random'"
+      :seed="user.address"
+      :size="45"
+      :source="src"
+      class="avatar-wrapper"
+      @click="openProfile"
+    />
   </div>
   <TypographyTitle :text="user.name" :size="6" />
   <TypographyText

diff --git a/components/interactables/QuickProfile/QuickProfile.vue b/components/interactables/QuickProfile/QuickProfile.vue
@@ -93,20 +93,21 @@ export default Vue.extend({
     },
     openProfile() {
       if (this.user) {
-        const isMe = this.user.address === this.$store.state.accounts.active
+        const isMe = this.user.address === this.accounts.active
 
         if (isMe) {
           this.$store.commit('ui/toggleSettings', {
             show: true,
             defaultRoute: 'profile',
           })
-        } else {
-          this.$store.commit('ui/toggleModal', {
-            name: 'userProfile',
-            state: true,
-          })
-          this.$store.commit('ui/setUserProfile', this.user)
+          return
         }
+
+        this.$store.commit('ui/toggleModal', {
+          name: 'userProfile',
+          state: true,
+        })
+        this.$store.commit('ui/setUserProfile', this.user)
       }
     },
   },

diff --git a/components/views/settings/Sidebar.vue b/components/views/settings/Sidebar.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      route: this.$store.state.ui.settingsDefaultRoute,
+      route: this.$store.state.ui.settingsRoute,
       sidebarLayout: [
         {
           title: 'General',

diff --git a/components/views/settings/modal/Modal.html b/components/views/settings/modal/Modal.html
@@ -25,18 +25,24 @@
           />
           <UiBreadcrumbs />
           <InteractablesClose :action="closeModal" />
-          <SettingsPagesPersonalize v-if="page === 'personalize'" />
-          <SettingsPagesAccounts v-if="page === 'accounts'" />
-          <SettingsPagesAudio v-if="page === 'audio'" />
-          <SettingsPagesDeveloper v-if="page === 'developer'" />
-          <SettingsPagesInfo v-if="page === 'info'" />
-          <SettingsPagesKeybinds v-if="page === 'keybinds'" />
-          <SettingsPagesNotifications v-if="page === 'notifications'" />
-          <SettingsPagesProfile v-if="page === 'profile'" />
-          <SettingsPagesStorage v-if="page === 'storage'" />
-          <SettingsPagesNetwork v-if="page === 'network'" />
-          <SettingsPagesRealms v-if="page === 'realms'" />
-          <SettingsPagesPrivacy v-if="page === 'privacy'" />
+          <SettingsPagesPersonalize
+            v-if="this.ui.settingsRoute === 'personalize'"
+          />
+          <SettingsPagesAccounts v-if="this.ui.settingsRoute === 'accounts'" />
+          <SettingsPagesAudio v-if="this.ui.settingsRoute === 'audio'" />
+          <SettingsPagesDeveloper
+            v-if="this.ui.settingsRoute === 'developer'"
+          />
+          <SettingsPagesInfo v-if="this.ui.settingsRoute === 'info'" />
+          <SettingsPagesKeybinds v-if="this.ui.settingsRoute === 'keybinds'" />
+          <SettingsPagesNotifications
+            v-if="this.ui.settingsRoute === 'notifications'"
+          />
+          <SettingsPagesProfile v-if="this.ui.settingsRoute === 'profile'" />
+          <SettingsPagesStorage v-if="this.ui.settingsRoute === 'storage'" />
+          <SettingsPagesNetwork v-if="this.ui.settingsRoute === 'network'" />
+          <SettingsPagesRealms v-if="this.ui.settingsRoute === 'realms'" />
+          <SettingsPagesPrivacy v-if="this.ui.settingsRoute === 'privacy'" />
         </UiScroll>
       </swiper-slide>
     </swiper>

diff --git a/components/views/settings/modal/Modal.vue b/components/views/settings/modal/Modal.vue
@@ -18,7 +18,6 @@ export default Vue.extend({
   },
   data() {
     return {
-      page: this.$store.state.ui.settingsDefaultRoute,
       settingSwiperOption: {
         initialSlide: 0,
         resistanceRatio: 0,
@@ -65,7 +64,7 @@ export default Vue.extend({
      * @example
      */
     changeRoute(route: string) {
-      this.$data.page = route
+      this.$store.commit('ui/setSettingsRoute', route)
       if (this.$device.isMobile) {
         this.showSidebar(true)
       }

diff --git a/store/ui/__snapshots__/state.test.ts.snap b/store/ui/__snapshots__/state.test.ts.snap
@@ -73,7 +73,7 @@ Object {
     "messageID": null,
     "status": false,
   },
-  "settingsDefaultRoute": "personalize",
+  "settingsRoute": "personalize",
   "settingsSideBar": true,
   "showPinned": false,
   "showSearchResult": false,

diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
@@ -1,5 +1,12 @@
 import { without } from 'lodash'
-import { EnhancerInfo, Flair, Theme, UIState, RecentGlyph } from './types'
+import {
+  EnhancerInfo,
+  Flair,
+  Theme,
+  UIState,
+  RecentGlyph,
+  SettingsRoutes,
+} from './types'
 import { MessageGroup } from '~/types/messaging'
 import { Channel } from '~/types/ui/server'
 
@@ -65,12 +72,15 @@ export default {
   },
   toggleSettings(
     state: UIState,
-    options: { show: boolean; defaultRoute?: string },
+    options: { show: boolean; defaultRoute?: SettingsRoutes },
   ) {
     const { show, defaultRoute } = options
 
     state.showSettings = show
-    state.settingsDefaultRoute = defaultRoute || 'personalize'
+    state.settingsRoute = defaultRoute || 'personalize'
+  },
+  setSettingsRoute(state: UIState, route: SettingsRoutes) {
+    state.settingsRoute = route
   },
   toggleSettingsSidebar(state: UIState, show: boolean) {
     state.settingsSideBar = show

diff --git a/store/ui/state.ts b/store/ui/state.ts
@@ -7,7 +7,7 @@ const InitialUIState = (): UIState => ({
   showSearchResult: false,
   showSettings: false,
   settingsSideBar: true,
-  settingsDefaultRoute: 'personalize',
+  settingsRoute: 'personalize',
   quickProfile: false,
   userProfile: {},
   contextMenuValues: [],

diff --git a/store/ui/types.ts b/store/ui/types.ts
@@ -123,6 +123,20 @@ export interface RecentGlyph {
   count: number
 }
 
+export type SettingsRoutes =
+  | 'personalize'
+  | 'profile'
+  | 'audio'
+  | 'keybinds'
+  | 'accounts'
+  | 'privacy'
+  | 'developer'
+  | 'info'
+  | 'notifications'
+  | 'storage'
+  | 'network'
+  | 'realms'
+
 export interface UIState {
   contextMenuStatus: boolean
   contextMenuValues: object[]
@@ -132,7 +146,7 @@ export interface UIState {
   quickProfilePosition: object
   showSettings: boolean
   settingsSideBar: boolean
-  settingsDefaultRoute: string
+  settingsRoute: SettingsRoutes
   showSidebarUsers: boolean
   showSearchResult: boolean
   showSidebar: boolean