Add memes & meme-editing views

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

src/components/floatingActionButton.tsx

@@ -3,7 +3,7 @@ import { Keyboard, StyleSheet } from 'react-native';
 import { FAB } from 'react-native-paper';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { pick } from 'react-native-document-picker';
+import { pickSingle } from 'react-native-document-picker';
 import { ORIENTATION, useDimensions } from '../contexts';
 import { ROUTE } from '../types';
 import { allowedMimeTypes, noOp } from '../utilities';
@@ -65,9 +65,9 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
       onStateChange={({ open }) => setState(open)}
       onPress={async () => {
         if (!state) return;
-        const res = await pick({ type: allowedMimeTypes }).catch(noOp);
-        if (!res) return;
-        navigate(ROUTE.ADD_MEME, { uri: res });
+        const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
+        if (!file) return;
+        navigate(ROUTE.ADD_MEME, { file });
       }}
       style={
         orientation === ORIENTATION.PORTRAIT

src/components/memes/memeCard.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { useNavigation, NavigationProp } from '@react-navigation/native';
+import { Meme } from '../../database';
+import { ROUTE, RootStackParamList } from '../../types';
+import { Card } from 'react-native-paper';
+import { Image, StyleSheet } from 'react-native';
+import { useDimensions } from '../../contexts';
+
+const memeCardStyles = StyleSheet.create({
+  card: {
+    margin: 5,
+  },
+});
+
+const MemeCard = ({ meme }: { meme: Meme }) => {
+  const { navigate } = useNavigation<NavigationProp<RootStackParamList>>();
+  const { dimensions } = useDimensions();
+
+  const [imageWidth, setImageWidth] = useState<number>();
+  const [imageHeight, setImageHeight] = useState<number>();
+
+  Image.getSize(meme.uri, (width, height) => {
+    const paddedWidth = (dimensions.width * 0.92) / 2 - 10;
+    setImageWidth(paddedWidth);
+    setImageHeight((paddedWidth / width) * height);
+  });
+
+  return (
+    <>
+      {imageWidth && imageHeight && (
+        <Card
+          onPress={() =>
+            navigate(ROUTE.EDIT_MEME, { id: meme.id.toHexString() })
+          }
+          style={memeCardStyles.card}>
+          <Card.Cover
+            source={{ uri: meme.uri }}
+            style={{ width: imageWidth, height: imageHeight }}
+          />
+          <Card.Title
+            title={meme.title}
+            titleVariant="titleSmall"
+            titleNumberOfLines={3}
+          />
+        </Card>
+      )}
+    </>
+  );
+};
+
+export default MemeCard;

src/components/memes/memeEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { HelperText, TextInput } from 'react-native-paper';
 import { Image } from 'react-native';
 import { useDimensions } from '../../contexts';
@@ -46,13 +46,11 @@ const MemeEditor = ({
   const [imageWidth, setImageWidth] = useState<number>();
   const [imageHeight, setImageHeight] = useState<number>();
 
-  useEffect(() => {
-    Image.getSize(imageUri, (width, height) => {
-      const paddedWidth = dimensions.width * 0.92;
-      setImageWidth(paddedWidth);
-      setImageHeight((paddedWidth / width) * height);
-    });
-  }, [dimensions.width, imageUri]);
+  Image.getSize(imageUri, (width, height) => {
+    const paddedWidth = dimensions.width * 0.92;
+    setImageWidth(paddedWidth);
+    setImageHeight((paddedWidth / width) * height);
+  });
 
   if (!imageWidth || !imageHeight) return <LoadingView />;
 

src/components/memes/memeTagSearchModal.tsx

@@ -59,7 +59,7 @@ const MemeTagSearchModal = ({
       let collection = collectionIn;
 
       if (search) {
-        collection = collection.filtered('name CONTAINS[c] $0', search);
+        collection = collection.filtered('name CONTAINS[c] $0', tagName.parsed);
       }
 
       collection = collection.sorted(
@@ -88,7 +88,6 @@ const MemeTagSearchModal = ({
     if (!tag) return;
     memeTags.set(tag.id.toHexString(), tag);
     setMemeTags(new Map(memeTags));
-    setSearch(tag.name);
   };
 
   return (

src/components/tags/tagEditor.tsx

@@ -22,8 +22,9 @@ const TagEditor = ({
   const lastValidTagColor = useRef(tagColor.parsed);
 
   const handleTagColorChange = (color: string) => {
-    setTagColor(validateColor(color));
-    if (tagColor.valid) lastValidTagColor.current = tagColor.parsed;
+    const result = validateColor(color);
+    setTagColor(result);
+    if (result.valid) lastValidTagColor.current = result.parsed;
   };
 
   return (