Use store for preserv facetsOpen status

Author: yzhoubk

src/components/Facets.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
+import { computed, ref, onMounted, onUnmounted} from 'vue'
 import { useFacetStore } from '../stores/facets'
 import { useSessionStore } from '../stores/session'
 import { useSearchStore } from '../stores/search'
@@ -16,41 +16,12 @@ const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
 
 const search = useSearchStore()
-
-const isMobile = ref(window.innerWidth <= 700)
-const savedStatus = loadFacetsOpen()
-const facetsOpen = ref(
-  savedStatus !== null ? savedStatus : !isMobile.value // first time or localStorage not availabe: mobile close, desktop open
-)
-
-watch(facetsOpen, (val) => {
-  saveFacetsOpen(val)
-})
-
-function saveFacetsOpen(value: boolean) {
-  try {
-    localStorage.setItem('facetsOpen', String(value))
-  } catch (e) {
-    console.warn('Could not save facetsOpen to localStorage.', e)
-  }
-}
-
-function loadFacetsOpen(): boolean | null {
-  try {
-    const status = localStorage.getItem('facetsOpen')
-    return status !== null ? status === 'true' : null
-  } catch (e) {
-    console.warn('Could not read facetsOpen from localStorage', e)
-    return null
-  }
-}
-
-function toggleFacets() {
-  facetsOpen.value = !facetsOpen.value
-}
+const { facetsOpen } = storeToRefs(useFacetStore())
+const { toggleFacets } = useFacetStore()
+const isMobile = ref(typeof window !== 'undefined' && window.innerWidth <= 700)
 
 function handleWindowResize() {
-  isMobile.value = window.innerWidth <= 700
+  isMobile.value = typeof window !== 'undefined' && window.innerWidth <= 700
 }
 
 onMounted(() => {

src/stores/facets.ts

@@ -11,14 +11,20 @@ export const useFacetStore = defineStore('facets', () => {
 
   const facets: Ref<Facet[]> = ref([])
   const facetExpanded: Ref<{ [key: string]: boolean | undefined }> = ref({})
-  const computedExpansionState: {[key: string]: WritableComputedRef<boolean> } = {}
+  const computedExpansionState: { [key: string]: WritableComputedRef<boolean> } = {}
+  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 700
+  const facetsOpen = ref(!isMobile)
 
   // ------------------------------
   // Computed properties
 
   const facetNames = computed(() => { return facets.value.map(f => f.name) })
 
-  function expanded (facetName: string) {
+  function toggleFacets() {
+    facetsOpen.value = !facetsOpen.value
+  }
+
+  function expanded(facetName: string) {
     let expansionState = computedExpansionState[facetName]
     if (!expansionState) {
       expansionState = computed({
@@ -37,24 +43,24 @@ export const useFacetStore = defineStore('facets', () => {
   // ------------------------------
   // Actions
 
-  function expandAll (expandedNames = facetNames.value) {
+  function expandAll(expandedNames = facetNames.value) {
     const expanded = { ...facetExpanded.value }
     for (const facetName of expandedNames) {
       expanded[facetName] = true
     }
     facetExpanded.value = expanded
   }
 
-  function collapseAll () {
+  function collapseAll() {
     facetExpanded.value = {}
   }
 
-  function facetForName (name: string): Facet | undefined {
+  function facetForName(name: string): Facet | undefined {
     return facets.value.find((f) => f.name === name)
   }
 
   // ------------------------------
   // Store
 
-  return { facets, expanded, facetNames, facetForName, expandAll, collapseAll }
+  return { facets, expanded, facetNames, facetForName, expandAll, collapseAll, facetsOpen, toggleFacets }
 })