Add meme view & sharing

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

src/screens/memes.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject, useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import {
   BackHandler,
   NativeScrollEvent,
@@ -9,71 +9,22 @@ import { useQuery } from '@realm/react';
 import { useTheme } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 import { FlashList } from '@shopify/flash-list';
-import { useFocusEffect } from '@react-navigation/native';
+import {
+  ParamListBase,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import styles from '../styles';
-import { SORT_DIRECTION, VIEW, memesSortQuery } from '../types';
+import { ROUTE, SORT_DIRECTION, memesSortQuery } from '../types';
 import { RootState, setNavVisible } from '../state';
 import { Meme } from '../database';
-import {
-  HideableHeader,
-  MemesHeader,
-  MemesMasonryView,
-  MemesGridView,
-  MemesListView,
-} from '../components';
-
-const MemesView = ({
-  memes,
-  flashListRef,
-  flashListPadding,
-  handleScroll,
-}: {
-  memes: Realm.Results<Meme & Realm.Object<Meme>>;
-  flashListRef: RefObject<FlashList<Meme>>;
-  flashListPadding: number;
-  handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-}) => {
-  const view = useSelector((state: RootState) => state.memes.view);
-
-  switch (view) {
-    case VIEW.MASONRY: {
-      return (
-        <MemesMasonryView
-          memes={memes}
-          flashListRef={flashListRef}
-          flashListPadding={flashListPadding}
-          handleScroll={handleScroll}
-        />
-      );
-    }
-    case VIEW.GRID: {
-      return (
-        <MemesGridView
-          memes={memes}
-          flashListRef={flashListRef}
-          flashListPadding={flashListPadding}
-          handleScroll={handleScroll}
-        />
-      );
-    }
-    case VIEW.LIST: {
-      return (
-        <MemesListView
-          memes={memes}
-          flashListRef={flashListRef}
-          flashListPadding={flashListPadding}
-          handleScroll={handleScroll}
-        />
-      );
-    }
-    default: {
-      return <></>;
-    }
-  }
-};
+import { HideableHeader, MemesHeader, MemesList } from '../components';
 
 const Memes = () => {
   const { colors } = useTheme();
+  const { navigate } =
+    useNavigation<NativeStackNavigationProp<ParamListBase>>();
   const sort = useSelector((state: RootState) => state.memes.sort);
   const sortDirection = useSelector(
     (state: RootState) => state.memes.sortDirection,
@@ -154,11 +105,9 @@ const Memes = () => {
   useFocusEffect(
     useCallback(() => {
       const handleBackPress = () => {
-        if (scrollOffset > 0) {
-          flashListRef.current?.scrollToOffset({ offset: 0, animated: true });
-          return true;
-        }
-        return false;
+        if (scrollOffset <= 0) return false;
+        flashListRef.current?.scrollToOffset({ offset: 0, animated: true });
+        return true;
       };
 
       BackHandler.addEventListener('hardwareBackPress', handleBackPress);
@@ -190,11 +139,17 @@ const Memes = () => {
           }}
         />
       </HideableHeader>
-      <MemesView
+      <MemesList
         memes={memes}
         flashListRef={flashListRef}
         flashListPadding={flashListPadding}
         handleScroll={handleScroll}
+        focusMeme={(index: number) => {
+          navigate(ROUTE.MEME_VIEW, {
+            ids: memes.map(meme => meme.id.toHexString()),
+            index,
+          });
+        }}
       />
     </View>
   );