Add meme-adding logic

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

src/components/memes/memeEditor.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { HelperText, TextInput } from 'react-native-paper';
+import { Image } from 'react-native';
+import { useDimensions } from '../../contexts';
+import LoadingView from '../loadingView';
+import { MemeTagSelector } from '.';
+import { Tag } from '../../database';
+
+const MemeEditor = ({
+  imageUri,
+  memeTitle,
+  setMemeTitle,
+  memeDescription,
+  setMemeDescription,
+  memeTags,
+  setMemeTags,
+  memeTitleError,
+  setMemeTitleError,
+}: {
+  imageUri: string[];
+  memeTitle: string;
+  setMemeTitle: (name: string) => void;
+  memeDescription: string;
+  setMemeDescription: (description: string) => void;
+  memeTags: Map<string, Tag>;
+  setMemeTags: (tags: Map<string, Tag>) => void;
+  memeTitleError: string | undefined;
+  setMemeTitleError: (error: string | undefined) => void;
+}) => {
+  const { dimensions, fixed, responsive } = useDimensions();
+
+  const [imageWidth, setImageWidth] = useState<number>();
+  const [imageHeight, setImageHeight] = useState<number>();
+
+  useEffect(() => {
+    Image.getSize(imageUri[0], (width, height) => {
+      const paddedWidth = dimensions.width - dimensions.width * 0.08;
+      setImageWidth(paddedWidth);
+      setImageHeight((paddedWidth / width) * height);
+    });
+  }, [dimensions.width, imageUri]);
+
+  const handleMemeTitleChange = (name: string) => {
+    setMemeTitle(name);
+    if (name.length === 0) {
+      setMemeTitleError('Meme title cannot be empty');
+    } else {
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      setMemeTitleError(undefined);
+    }
+  };
+
+  if (!imageWidth || !imageHeight) return <LoadingView />;
+
+  return (
+    <>
+      <TextInput
+        mode="outlined"
+        label="Title"
+        value={memeTitle}
+        onChangeText={handleMemeTitleChange}
+        error={!!memeTitleError}
+        selectTextOnFocus
+      />
+      <HelperText type="error" visible={!!memeTitleError}>
+        {memeTitleError}
+      </HelperText>
+      <Image
+        source={{ uri: imageUri[0] }}
+        style={{
+          width: imageWidth,
+          height: imageHeight,
+          marginBottom: fixed.verticalScale(10),
+          borderRadius: fixed.verticalScale(5),
+        }}
+      />
+      <MemeTagSelector
+        memeTags={memeTags}
+        setMemeTags={setMemeTags}
+        style={{
+          marginBottom: responsive.verticalScale(10),
+        }}
+      />
+      <TextInput
+        mode="outlined"
+        label="Description"
+        multiline
+        numberOfLines={6}
+        style={{
+          marginBottom: responsive.verticalScale(15),
+        }}
+        value={memeDescription}
+        onChangeText={setMemeDescription}
+      />
+    </>
+  );
+};
+
+export default MemeEditor;