Skip to content

Commit

Permalink
feat: add save graphstyle to localstorage
Browse files Browse the repository at this point in the history
  • Loading branch information
Расул authored and Расул committed Dec 9, 2023
1 parent da5a424 commit 5832014
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 34 deletions.
27 changes: 0 additions & 27 deletions src/components/SettingsModal/Appearance/index.tsx

This file was deleted.

44 changes: 44 additions & 0 deletions src/components/SettingsModal/SettingsView/Appearance/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
`
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -148,7 +152,7 @@ export const SourcesView = () => {
</TabPanel>
)}
<TabPanel index={isAdmin ? 1 : 0} value={value}>
<Appearance />
<Appearance onClose={onClose} />
</TabPanel>
</Wrapper>
)
Expand Down
4 changes: 2 additions & 2 deletions src/components/SettingsModal/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
2 changes: 1 addition & 1 deletion src/stores/useDataStore/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 5832014

Please sign in to comment.