prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #879 from omnivore-app/fix/librarylayout-persistence

Browse source 
Use persisted state instead of preferences data for library layout
This commit is contained in:
Jackson Harper 2022-06-24 16:14:17 -07:00 committed by GitHub
commit 06cb18869b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View file

@ -22,8 +22,6 @@ import {
} from '../../../lib/keyboardShortcuts/navigationShortcuts'
import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { ShareArticleModal } from '../article/ShareArticleModal'
import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
import { webBaseURL } from '../../../lib/appConfig'
import { Toaster } from 'react-hot-toast'
import { SnoozeLinkModal } from '../article/SnoozeLinkModal'
@ -44,6 +42,7 @@ import {
PageType,
} from '../../../lib/networking/fragments/articleFragment'
import { EditTitleModal } from './EditTitleModal'
import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
@ -62,6 +61,8 @@ const SAVED_SEARCHES: Record<string, string> = {
}
export function HomeFeedContainer(): JSX.Element {
useGetUserPreferences()
const { viewerData } = useGetViewerQuery()
const router = useRouter()
const defaultQuery = {
@ -499,12 +500,7 @@ type HomeFeedContentProps = {
function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
const { viewerData } = useGetViewerQuery()
const { preferencesData, isValidating: isValidatingPreferences } =
useGetUserPreferences()
const [layout, setLayout] = useState<LayoutType>(
(preferencesData?.libraryLayoutType as LayoutType) || 'GRID_LAYOUT'
)
const [layout, setLayout] = usePersistedState<LayoutType>({ key: 'libraryLayout', initialValue: 'GRID_LAYOUT' })
const [showRemoveLinkConfirmation, setShowRemoveLinkConfirmation] =
useState(false)
const [linkToRemove, setLinkToRemove] = useState<LibraryItem>()
@ -514,7 +510,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
async (newLayout: LayoutType) => {
if (layout === newLayout) return
setLayout(newLayout)
userPersonalizationMutation({ libraryLayoutType: newLayout })
},
[layout, setLayout]
)
@ -580,26 +575,22 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
justifyContent: 'center',
}}
>
{!isValidatingPreferences && (
<>
<StyledToggleButton
data-state={layout === 'GRID_LAYOUT' ? 'on' : 'off'}
onClick={() => {
updateLayout('GRID_LAYOUT')
}}
>
<GridLayoutIcon color={'rgb(211, 211, 213)'} />
</StyledToggleButton>
<StyledToggleButton
data-state={layout === 'LIST_LAYOUT' ? 'on' : 'off'}
onClick={() => {
updateLayout('LIST_LAYOUT')
}}
>
<ListLayoutIcon color={'rgb(211, 211, 213)'} />
</StyledToggleButton>
</>
)}
<StyledToggleButton
data-state={layout === 'GRID_LAYOUT' ? 'on' : 'off'}
onClick={() => {
updateLayout('GRID_LAYOUT')
}}
>
<GridLayoutIcon color={'rgb(211, 211, 213)'} />
</StyledToggleButton>
<StyledToggleButton
data-state={layout === 'LIST_LAYOUT' ? 'on' : 'off'}
onClick={() => {
updateLayout('LIST_LAYOUT')
}}
>
<ListLayoutIcon color={'rgb(211, 211, 213)'} />
</StyledToggleButton>
</Box>
<Button
style="ctaDarkYellow"