fix: settings menu now should use store

digidem · Aug 23, 2023 · d195f55 · d195f55
1 parent 6e0a7a6
commit d195f55
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/src/renderer/components/SettingsView/ExperimentsMenu.js b/src/renderer/components/SettingsView/ExperimentsMenu.js
@@ -2,23 +2,19 @@ import React from 'react'
 import { defineMessages } from 'react-intl'
 import { Map as MapIcon } from '@material-ui/icons'
 import { SettingsList } from './SettingsList'
+import { useExperimentsFlagsStore } from '../../hooks/store'
 
 const m = defineMessages({
-  backgroundMaps: 'Background Maps',
+  backgroundMaps: 'Background Maps'
 })
 
-/**
- * @typedef ExperiementsMenuProps
- * @prop {boolean} backgroundMaps
- * @prop {(e: React.Dispatch<boolean>) => number} setBackgroundMaps
- */
+export const ExperiementsMenu = () => {
+  const [backgroundMaps, setBackgroundMaps] = useExperimentsFlagsStore(
+    store => [store.backgroundMaps, store.setBackgroundMapsFlag]
+  )
 
-/** @param {ExperiementsMenuProps} props */
-export const ExperiementsMenu = ({ backgroundMaps, setBackgroundMaps }) => {
   const toggleBackgroundMaps = () => {
-    setBackgroundMaps(prevState => {
-      return !prevState
-    })
+    setBackgroundMaps(!backgroundMaps)
   }
 
   /** @type {import('./SettingsList').option[]} */
@@ -29,8 +25,8 @@ export const ExperiementsMenu = ({ backgroundMaps, setBackgroundMaps }) => {
       label: m.backgroundMaps,
       checked: backgroundMaps,
       onClick: toggleBackgroundMaps,
-      type: 'toggle',
-    },
+      type: 'toggle'
+    }
   ]
 
   return <SettingsList options={options} />

diff --git a/src/renderer/components/SettingsView/index.js b/src/renderer/components/SettingsView/index.js
@@ -7,8 +7,8 @@ import { defineMessages } from 'react-intl'
 import { AboutMapeoMenu } from './AboutMapeo'
 import styled from 'styled-components'
 import { ExperiementsMenu } from './ExperimentsMenu'
-import createPersistedState from '../../hooks/createPersistedState'
 import { BackgroundMaps } from './BackgroundMaps'
+import { useExperimentsFlagsStore } from '../../hooks/store'
 
 const m = defineMessages({
   aboutMapeo: 'About Mapeo',
@@ -18,10 +18,10 @@ const m = defineMessages({
   backgroundMaps: 'Background maps'
 })
 
-const useExperimentsFlagsState = createPersistedState('experimentsFlags')
-
 export const SettingsView = () => {
-  const [backgroundMaps, setBackgroundMaps] = useExperimentsFlagsState(false)
+  const [backgroundMaps, setBackgroundMaps] = useExperimentsFlagsStore(
+    store => [store.backgroundMaps, store.backgroundMaps]
+  )
   const tabs = /** @type {import('./SettingsMenu').tabs} */ [
     {
       tabId: 'AboutMapeo',