Add meme view & sharing

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2023-07-24 21:55:36 +03:00
parent 04661ca356
commit e479e3c0ad
33 changed files with 724 additions and 482 deletions
--- a/src/components/memes/memesList/memesList.tsx
+++ b/src/components/memes/memesList/memesList.tsx
@@ -0,0 +1,167 @@
+import React, { RefObject } from 'react';
+import { FlashList, MasonryFlashList } from '@shopify/flash-list';
+import {
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  StyleSheet,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+import { Divider, HelperText } from 'react-native-paper';
+import { useDimensions, ORIENTATION } from '../../../contexts';
+import { Meme } from '../../../database';
+import { RootState } from '../../../state';
+import { VIEW } from '../../../types';
+import { getFlashListItemHeight } from '../../../utilities';
+import styles from '../../../styles';
+import MemesMasonryItem from './memesMasonryItem';
+import MemesGridItem from './memesGridItem';
+import MemesListItem from './memesListItem';
+
+const memesMasonryListStyles = StyleSheet.create({
+  flashList: {
+    paddingBottom: 100,
+    // Needed to prevent fucky MasonryFlashList, see https://github.com/Shopify/flash-list/issues/876
+    paddingHorizontal: 0.1,
+  },
+  helperText: {
+    marginVertical: 15,
+  },
+});
+
+const memesGridListStyles = StyleSheet.create({
+  flashList: {
+    paddingBottom: 100,
+    paddingHorizontal: 2.5,
+  },
+  helperText: {
+    marginVertical: 12.5,
+  },
+});
+
+const memesListListStyles = StyleSheet.create({
+  flashList: {
+    paddingBottom: 100,
+    paddingHorizontal: 5,
+  },
+  helperText: {
+    marginVertical: 15,
+  },
+});
+
+const MemesList = ({
+  memes,
+  flashListRef,
+  flashListPadding,
+  handleScroll,
+  focusMeme,
+}: {
+  memes: Realm.Results<Meme & Realm.Object<Meme>>;
+  flashListRef: RefObject<FlashList<Meme>>;
+  flashListPadding: number;
+  handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  focusMeme: (index: number) => void;
+}) => {
+  const { dimensions, orientation } = useDimensions();
+  const view = useSelector((state: RootState) => state.memes.view);
+  const masonryColumns = useSelector(
+    (state: RootState) => state.settings.masonryColumns,
+  );
+  const gridColumns = useSelector(
+    (state: RootState) => state.settings.gridColumns,
+  );
+
+  const extraFlashListPadding =
+    flashListPadding +
+    dimensions.height * (orientation === ORIENTATION.PORTRAIT ? 0.02 : 0.04);
+
+  return (
+    <>
+      {view === VIEW.MASONRY && (
+        <MasonryFlashList
+          ref={flashListRef}
+          data={memes}
+          estimatedItemSize={getFlashListItemHeight(masonryColumns)}
+          estimatedListSize={{
+            height: dimensions.height,
+            width: dimensions.width * 0.92,
+          }}
+          numColumns={masonryColumns}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item: meme, index }) => (
+            <MemesMasonryItem meme={meme} index={index} focusMeme={focusMeme} />
+          )}
+          contentContainerStyle={{
+            paddingTop: extraFlashListPadding,
+            ...memesMasonryListStyles.flashList,
+          }}
+          ListEmptyComponent={() => (
+            <HelperText
+              type={'info'}
+              style={[memesMasonryListStyles.helperText, styles.centerText]}>
+              No memes found
+            </HelperText>
+          )}
+          onScroll={handleScroll}
+        />
+      )}
+      {view === VIEW.GRID && (
+        <FlashList
+          ref={flashListRef}
+          data={memes}
+          estimatedItemSize={getFlashListItemHeight(gridColumns)}
+          estimatedListSize={{
+            height: dimensions.height,
+            width: dimensions.width * 0.92,
+          }}
+          numColumns={gridColumns}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item: meme, index }) => (
+            <MemesGridItem meme={meme} index={index} focusMeme={focusMeme} />
+          )}
+          contentContainerStyle={{
+            paddingTop: extraFlashListPadding + 2.5,
+            ...memesGridListStyles.flashList,
+          }}
+          ListEmptyComponent={() => (
+            <HelperText
+              type={'info'}
+              style={[memesGridListStyles.helperText, styles.centerText]}>
+              No memes found
+            </HelperText>
+          )}
+          onScroll={handleScroll}
+        />
+      )}
+      {view === VIEW.LIST && (
+        <FlashList
+          ref={flashListRef}
+          data={memes}
+          estimatedItemSize={50}
+          estimatedListSize={{
+            height: dimensions.height,
+            width: dimensions.width * 0.92,
+          }}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item: meme, index }) => (
+            <MemesListItem meme={meme} index={index} focusMeme={focusMeme} />
+          )}
+          ItemSeparatorComponent={() => <Divider />}
+          contentContainerStyle={{
+            paddingTop: extraFlashListPadding,
+            ...memesListListStyles.flashList,
+          }}
+          ListEmptyComponent={() => (
+            <HelperText
+              type={'info'}
+              style={[memesListListStyles.helperText, styles.centerText]}>
+              No memes found
+            </HelperText>
+          )}
+          onScroll={handleScroll}
+        />
+      )}
+    </>
+  );
+};
+
+export default MemesList;