Add home screen view options

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

src/screens/home.tsx

@@ -1,12 +1,88 @@
-import React from 'react';
-
-import { Text } from 'react-native-paper';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import {
+  Button,
+  Menu,
+  IconButton,
+  Divider,
+  useTheme,
+} from 'react-native-paper';
 import { PaddedView } from '../components';
+import styles, { verticalScale } from '../styles';
+import { SORT, SORT_DIRECTION, VIEW } from '../types';
+import { getNextView, getSortIcon, getViewIcon } from '../utilities';
 
 const Home = () => {
+  const theme = useTheme();
+
+  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,
+      );
+    } else {
+      setSort(newSort);
+
+      if (newSort === SORT.TITLE) {
+        setSortDirection(SORT_DIRECTION.ASCENDING);
+      } else {
+        setSortDirection(SORT_DIRECTION.DESCENDING);
+      }
+    }
+
+    setSortMenuVisible(false);
+  };
+
   return (
-    <PaddedView centered>
-      <Text>Home</Text>
+    <PaddedView>
+      <View style={[styles.flexRowSpaceBetween, styles.centeredVertical]}>
+        <Menu
+          visible={sortMenuVisible}
+          onDismiss={() => setSortMenuVisible(false)}
+          anchor={
+            <Button
+              onPress={() => setSortMenuVisible(true)}
+              icon={getSortIcon(sort, sortDirection)}
+              contentStyle={styles.flexRowReverse}>
+              Sort By: {sort}
+            </Button>
+          }>
+          {Object.keys(SORT).map(key => {
+            return (
+              <Menu.Item
+                key={key}
+                onPress={() =>
+                  handleSortModeChange(SORT[key as keyof typeof SORT])
+                }
+                title={SORT[key as keyof typeof SORT]}
+              />
+            );
+          })}
+        </Menu>
+        <View style={styles.flexRow}>
+          <IconButton
+            icon={favoritesOnly ? 'heart' : 'heart-outline'}
+            iconColor={theme.colors.primary}
+            size={verticalScale(16)}
+            onPress={() => setFavoritesOnly(!favoritesOnly)}
+          />
+          <IconButton
+            icon={getViewIcon(viewType)}
+            iconColor={theme.colors.primary}
+            size={verticalScale(16)}
+            onPress={() => setViewType(getNextView(viewType))}
+          />
+        </View>
+      </View>
+      <Divider />
     </PaddedView>
   );
 };