Reorganize files

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

src/screens/memes/memesList/memesGridItem.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+import { Image, TouchableHighlight } from 'react-native';
+import { useSelector } from 'react-redux';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { AndroidScoped } from 'react-native-file-access';
+import { MEME_TYPE, Meme } from '../../../database';
+import { RootState } from '../../../state';
+import { MemeFail } from '../../../components';
+import { getFontAwesome5IconSize } from '../../../utilities';
+import { useMemeDimensions } from '../../../hooks';
+
+const MemesGridItem = ({
+  meme,
+  index,
+  focusMeme,
+}: {
+  meme: Meme;
+  index: number;
+  focusMeme: (index: number) => void;
+}) => {
+  const { width } = useSafeAreaFrame();
+  const gridColumns = useSelector(
+    (state: RootState) => state.settings.gridColumns,
+  );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
+
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useMemeDimensions(uri, meme.mimeType);
+
+  const itemWidth = (width * 0.92 - 5) / gridColumns;
+
+  const mediaComponent = useMemo(() => {
+    switch (meme.memeType) {
+      case MEME_TYPE.IMAGE:
+      case MEME_TYPE.GIF:
+      case MEME_TYPE.VIDEO: {
+        return (
+          <Image
+            source={{ uri }}
+            style={[
+              {
+                width: itemWidth,
+                height: itemWidth,
+              },
+            ]}
+          />
+        );
+      }
+      default: {
+        return <></>;
+      }
+    }
+  }, [itemWidth, meme.memeType, uri]);
+
+  if (!error && (loading || !dimensions)) return <></>;
+
+  return (
+    <TouchableHighlight onPress={() => focusMeme(index)}>
+      {error ? (
+        <MemeFail
+          style={{
+            width: (width * 0.92 - 5) / gridColumns,
+            height: (width * 0.92 - 5) / gridColumns,
+          }}
+          iconSize={getFontAwesome5IconSize(gridColumns)}
+        />
+      ) : (
+        mediaComponent
+      )}
+    </TouchableHighlight>
+  );
+};
+
+export default MemesGridItem;