Merge pull request #670 from stakwork/feature/617

feat: add save graphstyle to localstorage

src/components/SettingsModal/SettingsView/Appearance/index.tsx

@@ -0,0 +1,44 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+import { GraphViewControl } from '~/components/App/ActionsToolbar/GraphViewControl'
+import { Button } from '~/components/Button'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { useDataStore } from '~/stores/useDataStore'
+
+type Props = {
+  onClose: () => void
+}
+
+export const Appearance: FC<Props> = ({ onClose }) => {
+  const [graphStyle] = useDataStore((s) => [s.graphStyle])
+
+  const handleSave = () => {
+    localStorage.setItem('graphStyle', graphStyle)
+    onClose()
+  }
+
+  return (
+    <Wrapper direction="column">
+      <StyledText>Default graph view:</StyledText>
+      <GraphViewControl />
+      <Flex mt={308}>
+        <Button kind="big" onClick={handleSave}>
+          Save changes
+        </Button>
+      </Flex>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled(Flex)`
+  display: flex;
+  gap: 10px;
+  padding: 36px;
+`
+
+const StyledText = styled(Text)`
+  font-family: Barlow;
+  font-size: 13px;
+  font-weight: 400;
+`

src/components/SettingsModal/SourceView/index.tsx → src/components/SettingsModal/SettingsView/index.tsx

@@ -11,8 +11,8 @@ import { TAboutParams, getAboutData } from '~/network/fetchSourcesData'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
 import { executeIfProd } from '~/utils/tests'
-import { Appearance } from '../Appearance'
-import { General } from '../General'
+import { Appearance } from './Appearance'
+import { General } from './General'
 
 interface TabPanelProps {
   children?: React.ReactNode
@@ -58,7 +58,11 @@ function a11yProps(index: number) {
   }
 }
 
-export const SourcesView = () => {
+type Props = {
+  onClose: () => void
+}
+
+export const SettingsView: React.FC<Props> = ({ onClose }) => {
   const [value, setValue] = useState(0)
   const [setIsAdmin, isAdmin, setPubKey, pubKey] = useUserStore((s) => [s.setIsAdmin, s.isAdmin, s.setPubKey, s.pubKey])
   const [loading, setLoading] = useState(false)
@@ -148,7 +152,7 @@ export const SourcesView = () => {
         </TabPanel>
       )}
       <TabPanel index={isAdmin ? 1 : 0} value={value}>
-        <Appearance />
+        <Appearance onClose={onClose} />
       </TabPanel>
     </Wrapper>
   )

src/components/SettingsModal/index.tsx

@@ -1,13 +1,13 @@
 import { BaseModal } from '~/components/Modal'
 import { useModal } from '~/stores/useModalStore'
-import { SourcesView } from './SourceView'
+import { SettingsView } from './SettingsView'
 
 export const SettingsModal = () => {
   const { close } = useModal('settings')
 
   return (
     <BaseModal background="BG1" id="settings" noWrap onClose={close}>
-      <SourcesView />
+      <SettingsView onClose={close} />
     </BaseModal>
   )
 }

src/stores/useDataStore/index.ts

@@ -90,7 +90,7 @@ const defaultData: Omit<
   scrollEventsDisabled: false,
   disableCameraRotation: false,
   graphRadius: isChileGraph ? 1600 : 3056, // calculated from initial load
-  graphStyle: 'split',
+  graphStyle: (localStorage.getItem('graphStyle') as GraphStyle) || 'split',
   isFetching: false,
   isTimestampLoaded: false,
   queuedSources: null,