From 5832014107bd1a4408b4c87dbd6ea8c8b10db668 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= <rasul@MacBook-Air.local>
Date: Sun, 10 Dec 2023 00:20:46 +0300
Subject: [PATCH] feat: add save graphstyle to localstorage

---
 .../SettingsModal/Appearance/index.tsx        | 27 ------------
 .../SettingsView/Appearance/index.tsx         | 44 +++++++++++++++++++
 .../{ => SettingsView}/General/index.tsx      |  0
 .../{SourceView => SettingsView}/index.tsx    | 12 +++--
 src/components/SettingsModal/index.tsx        |  4 +-
 src/stores/useDataStore/index.ts              |  2 +-
 6 files changed, 55 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/SettingsModal/Appearance/index.tsx
 create mode 100644 src/components/SettingsModal/SettingsView/Appearance/index.tsx
 rename src/components/SettingsModal/{ => SettingsView}/General/index.tsx (100%)
 rename src/components/SettingsModal/{SourceView => SettingsView}/index.tsx (95%)

diff --git a/src/components/SettingsModal/Appearance/index.tsx b/src/components/SettingsModal/Appearance/index.tsx
deleted file mode 100644
index 47e51d337..000000000
--- a/src/components/SettingsModal/Appearance/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-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'
-
-export const Appearance = () => (
-  <Wrapper direction="column">
-    <StyledText>Default graph view:</StyledText>
-    <GraphViewControl />
-    <Flex mt={308}>
-      <Button kind="big">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;
-`
diff --git a/src/components/SettingsModal/SettingsView/Appearance/index.tsx b/src/components/SettingsModal/SettingsView/Appearance/index.tsx
new file mode 100644
index 000000000..ffad9b741
--- /dev/null
+++ b/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;
+`
diff --git a/src/components/SettingsModal/General/index.tsx b/src/components/SettingsModal/SettingsView/General/index.tsx
similarity index 100%
rename from src/components/SettingsModal/General/index.tsx
rename to src/components/SettingsModal/SettingsView/General/index.tsx
diff --git a/src/components/SettingsModal/SourceView/index.tsx b/src/components/SettingsModal/SettingsView/index.tsx
similarity index 95%
rename from src/components/SettingsModal/SourceView/index.tsx
rename to src/components/SettingsModal/SettingsView/index.tsx
index 5b74d40db..5741c1188 100644
--- a/src/components/SettingsModal/SourceView/index.tsx
+++ b/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>
   )
diff --git a/src/components/SettingsModal/index.tsx b/src/components/SettingsModal/index.tsx
index 4e7720a04..d40f862d9 100644
--- a/src/components/SettingsModal/index.tsx
+++ b/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>
   )
 }
diff --git a/src/stores/useDataStore/index.ts b/src/stores/useDataStore/index.ts
index 36d35a2c4..c09fde312 100644
--- a/src/stores/useDataStore/index.ts
+++ b/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,