store view mode in localStorage (#1051)

commafeed-client/src/components/content/FeedEntries.tsx

@@ -21,6 +21,7 @@ import throttle from "lodash/throttle"
 import { useEffect } from "react"
 import InfiniteScroll from "react-infinite-scroller"
 import { FeedEntry } from "./FeedEntry"
+import { useViewMode } from "../../hooks/useViewMode"
 
 export function FeedEntries() {
     const source = useAppSelector(state => state.entries.source)
@@ -28,7 +29,7 @@ export function FeedEntries() {
     const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
     const selectedEntryId = useAppSelector(state => state.entries.selectedEntryId)
     const hasMore = useAppSelector(state => state.entries.hasMore)
-    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
+    const { viewMode } = useViewMode()
     const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
     const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
     const dispatch = useAppDispatch()

commafeed-client/src/components/content/FeedEntry.tsx

@@ -1,7 +1,7 @@
 import { Anchor, Box, createStyles, Divider, Paper } from "@mantine/core"
 import { Constants } from "app/constants"
 import { markEntry } from "app/slices/entries"
-import { useAppDispatch, useAppSelector } from "app/store"
+import { useAppDispatch } from "app/store"
 import { Entry, ViewMode } from "app/types"
 import React from "react"
 import { useSwipeable } from "react-swipeable"
@@ -11,6 +11,7 @@ import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
 import { FeedEntryContextMenu, useFeedEntryContextMenu } from "./FeedEntryContextMenu"
 import { FeedEntryFooter } from "./FeedEntryFooter"
 import { FeedEntryHeader } from "./FeedEntryHeader"
+import { useViewMode } from "../../hooks/useViewMode"
 
 interface FeedEntryProps {
     entry: Entry
@@ -63,7 +64,7 @@ const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: View
 })
 
 export function FeedEntry(props: FeedEntryProps) {
-    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
+    const { viewMode } = useViewMode()
     const { classes } = useStyles({ ...props, viewMode })
 
     const dispatch = useAppDispatch()

commafeed-client/src/components/header/ProfileMenu.tsx

@@ -3,7 +3,6 @@ import { Box, Divider, Group, Menu, SegmentedControl, SegmentedControlItem, useM
 import { showNotification } from "@mantine/notifications"
 import { client } from "app/client"
 import { redirectToAbout, redirectToAdminUsers, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
-import { changeViewMode } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ViewMode } from "app/types"
 import { useState } from "react"
@@ -21,6 +20,7 @@ import {
     TbUsers,
     TbWorldDownload,
 } from "react-icons/tb"
+import { useViewMode } from "../../hooks/useViewMode"
 
 interface ProfileMenuProps {
     control: React.ReactElement
@@ -81,7 +81,7 @@ const viewModeData: ViewModeControlItem[] = [
 
 export function ProfileMenu(props: ProfileMenuProps) {
     const [opened, setOpened] = useState(false)
-    const viewMode = useAppSelector(state => state.user.settings?.viewMode)
+    const { viewMode, setViewMode } = useViewMode()
     const profile = useAppSelector(state => state.user.profile)
     const admin = useAppSelector(state => state.user.profile?.admin)
     const dispatch = useAppDispatch()
@@ -139,7 +139,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
                     orientation="vertical"
                     data={viewModeData}
                     value={viewMode}
-                    onChange={e => dispatch(changeViewMode(e as ViewMode))}
+                    onChange={e => setViewMode(e as ViewMode)}
                     mb="xs"
                 />