From 27005af74c23151286a463f1749aaff6e5ffe50c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 19 Sep 2022 20:51:29 +0200
Subject: [PATCH] refactor(nc-gui): simplify useSidebar and update comments

---
 .../nc-gui/components/tabs/Smartsheet.vue     |  6 ++--
 .../nc-gui/composables/useSidebar/index.ts    | 35 +++++--------------
 packages/nc-gui/layouts/default.vue           |  4 +--
 3 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index ed1a4da11c..a9115c0f53 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -11,9 +11,9 @@ import {
   ReloadViewDataHookInj,
   ReloadViewMetaHookInj,
   computed,
+  createEventHook,
   inject,
   provide,
-  provideSidebar,
   useMetas,
   useProvideSmartsheetStore,
   watch,
@@ -35,14 +35,14 @@ const fields = ref<ColumnType[]>([])
 provide(TabMetaInj, ref(activeTab))
 const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 
-const reloadEventHook = createEventHook<void>()
+const reloadEventHook = createEventHook()
 const reloadViewMetaEventHook = createEventHook<void>()
 const openNewRecordFormHook = createEventHook<void>()
 
 const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
 
 // provide the sidebar injection state
-provideSidebar('nc-right-sidebar', { useStorage: true, isOpen: true })
+useSidebar('nc-right-sidebar', { useStorage: true, isOpen: true })
 
 // todo: move to store
 provide(MetaInj, meta)
diff --git a/packages/nc-gui/composables/useSidebar/index.ts b/packages/nc-gui/composables/useSidebar/index.ts
index b4ecb5ba48..344dc90f3e 100644
--- a/packages/nc-gui/composables/useSidebar/index.ts
+++ b/packages/nc-gui/composables/useSidebar/index.ts
@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { MemStorage, onScopeDispose, watch } from '#imports'
+import { MemStorage, onScopeDispose, ref, syncRef, toRefs, watch } from '#imports'
 
 interface UseSidebarProps {
   hasSidebar?: boolean
@@ -10,12 +10,8 @@ interface UseSidebarProps {
 /**
  * States for sidebars
  *
- * Use `provideSidebar` to provide the state and save to memory or local storage
- * Use `useSidebar` to use the state
- *
- * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no state can be found
- *
  * Requires an id to work, id should correspond to the sidebar state you want to create or fetch
+ * If `useSidebar` was not called before it will create a new state if no state can be found for the specified id
  */
 const sidebarStorage = new MemStorage()
 
@@ -61,40 +57,25 @@ const createSidebar = (id: string, props: UseSidebarProps = {}) => {
   }
 }
 
-export const provideSidebar = (id: string, props: UseSidebarProps = {}) => {
-  if (!id) throw new Error('provideSidebar requires an id')
-
-  onScopeDispose(() => {
-    sidebarStorage.remove(id)
-  })
+export function useSidebar(id: string, props: UseSidebarProps = {}) {
+  if (!id) throw new Error('useSidebar requires an id')
 
   if (!sidebarStorage.has(id)) {
     const sidebar = createSidebar(id, props)
 
     sidebarStorage.set(id, sidebar)
 
-    return sidebar
-  } else {
-    const sidebar = sidebarStorage.get(id)
-
-    if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen
-    if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar
+    onScopeDispose(() => {
+      sidebarStorage.remove(id)
+    })
 
     return sidebar
-  }
-}
-
-export function useSidebar(id: string, props: UseSidebarProps = {}) {
-  if (!id) throw new Error('useSidebar requires an id')
-
-  if (sidebarStorage.has(id)) {
+  } else {
     const sidebar = sidebarStorage.get(id)
 
     if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen
     if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar
 
     return sidebar
-  } else {
-    return provideSidebar(id, props)
   }
 }
diff --git a/packages/nc-gui/layouts/default.vue b/packages/nc-gui/layouts/default.vue
index cb45473340..cc836efafa 100644
--- a/packages/nc-gui/layouts/default.vue
+++ b/packages/nc-gui/layouts/default.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useTitle } from '@vueuse/core'
-import { provideSidebar, useI18n, useRoute } from '#imports'
+import { useI18n, useRoute, useSidebar } from '#imports'
 
 const route = useRoute()
 
 const { te, t } = useI18n()
 
-const { hasSidebar } = provideSidebar('nc-left-sidebar')
+const { hasSidebar } = useSidebar('nc-left-sidebar')
 
 useTitle(route.meta?.title && te(route.meta.title) ? `${t(route.meta.title)} | NocoDB` : 'NocoDB')
 </script>