Add home screen state persistence

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/screens/home.tsx

@@ -7,37 +7,46 @@ import {
   Divider,
   useTheme,
 } from 'react-native-paper';
+import { useDispatch, useSelector } from 'react-redux';
 import { PaddedView } from '../components';
 import styles, { verticalScale } from '../styles';
-import { SORT, SORT_DIRECTION, VIEW } from '../types';
-import { getNextView, getSortIcon, getViewIcon } from '../utilities';
+import { SORT, SORT_DIRECTION } from '../types';
+import { getSortIcon, getViewIcon } from '../utilities';
+import {
+  RootState,
+  cycleView,
+  toggleSortDirection,
+  setSortDirection,
+  toggleFavoritesOnly,
+  setSort,
+} from '../state';
 
 const Home = () => {
   const theme = useTheme();
 
+  const sort = useSelector((state: RootState) => state.home.sort);
+  const sortDirection = useSelector(
+    (state: RootState) => state.home.sortDirection,
+  );
+  const view = useSelector((state: RootState) => state.home.view);
+  const favoritesOnly = useSelector(
+    (state: RootState) => state.home.favoritesOnly,
+  );
+  const dispatch = useDispatch();
+
   const [sortMenuVisible, setSortMenuVisible] = useState(false);
-  const [sort, setSort] = useState(SORT.TITLE);
-  const [sortDirection, setSortDirection] = useState(SORT_DIRECTION.ASCENDING);
-  const [viewType, setViewType] = useState(VIEW.MASONRY);
-  const [favoritesOnly, setFavoritesOnly] = useState(false);
 
   const handleSortModeChange = (newSort: SORT) => {
     if (newSort === sort) {
-      setSortDirection(
-        sortDirection === SORT_DIRECTION.ASCENDING
-          ? SORT_DIRECTION.DESCENDING
-          : SORT_DIRECTION.ASCENDING,
-      );
+      dispatch(toggleSortDirection());
     } else {
-      setSort(newSort);
-
+      dispatch(setSort(newSort));
       if (newSort === SORT.TITLE) {
-        setSortDirection(SORT_DIRECTION.ASCENDING);
+        dispatch(setSortDirection(SORT_DIRECTION.ASCENDING));
       } else {
-        setSortDirection(SORT_DIRECTION.DESCENDING);
+        dispatch(setSortDirection(SORT_DIRECTION.DESCENDING));
       }
     }
-
     setSortMenuVisible(false);
   };
 
@@ -72,13 +81,13 @@ const Home = () => {
             icon={favoritesOnly ? 'heart' : 'heart-outline'}
             iconColor={theme.colors.primary}
             size={verticalScale(16)}
-            onPress={() => setFavoritesOnly(!favoritesOnly)}
+            onPress={() => dispatch(toggleFavoritesOnly())}
           />
           <IconButton
-            icon={getViewIcon(viewType)}
+            icon={getViewIcon(view)}
             iconColor={theme.colors.primary}
             size={verticalScale(16)}
-            onPress={() => setViewType(getNextView(viewType))}
+            onPress={() => dispatch(cycleView())}
           />
         </View>
       </View>