Add meme-adding logic

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

src/screens/editTag.tsx

@@ -1,19 +1,12 @@
 import React, { useState } from 'react';
 import { ScrollView, View } from 'react-native';
-import {
-  TextInput,
-  Appbar,
-  HelperText,
-  Button,
-  useTheme,
-} from 'react-native-paper';
+import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { BSON, UpdateMode } from 'realm';
+import { BSON } from 'realm';
 import { useRealm } from '@realm/react';
-import { TagPreview } from '../components';
+import { TagEditor } from '../components';
 import styles from '../styles';
-import { generateRandomColor, isValidColor } from '../utilities';
 import { useDimensions } from '../contexts';
 import { ROUTE, RootStackParamList } from '../types';
 import { Tag } from '../database';
@@ -26,62 +19,41 @@ const EditTag = ({
   const { orientation } = useDimensions();
   const realm = useRealm();
 
-  const tagId = route.params?.id;
-  const tag = tagId
-    ? realm.objectForPrimaryKey(Tag, BSON.UUID.createFromHexString(tagId))
-    : undefined;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const tag = realm.objectForPrimaryKey(
+    Tag,
+    BSON.UUID.createFromHexString(route.params.id),
+  )!;
 
-  const [tagName, setTagName] = useState(tag?.name ?? 'newTag');
-  const [tagColor, setTagColor] = useState(tag?.color ?? generateRandomColor());
+  const [tagName, setTagName] = useState(tag.name);
+  const [tagColor, setTagColor] = useState(tag.color);
   const [validatedTagColor, setValidatedTagColor] = useState(tagColor);
 
   const [tagNameError, setTagNameError] = useState<string | undefined>();
   const [tagColorError, setTagColorError] = useState<string | undefined>();
 
-  const handleTagNameChange = (name: string) => {
-    setTagName(name);
-
-    if (name.length === 0) {
-      setTagNameError('Tag name cannot be empty');
-    } else if (name.includes(' ')) {
-      setTagNameError('Tag name cannot contain spaces');
-    } else {
-      // eslint-disable-next-line unicorn/no-useless-undefined
-      setTagNameError(undefined);
-    }
-  };
-
-  const handleTagColorChange = (color: string) => {
-    setTagColor(color);
-
-    if (isValidColor(color)) {
-      setValidatedTagColor(color);
-      // eslint-disable-next-line unicorn/no-useless-undefined
-      setTagColorError(undefined);
-    } else {
-      setTagColorError('Color must be a valid hex or rgb value');
-    }
-  };
-
   const handleSave = () => {
     realm.write(() => {
-      realm.create(
-        Tag,
-        {
-          id: tag?.id,
-          name: tagName,
-          color: tagColor,
-        },
-        UpdateMode.Modified,
-      );
+      tag.name = tagName;
+      tag.color = tagColor;
+      tag.dateModified = new Date();
     });
+
     navigation.goBack();
   };
 
   const handleDelete = () => {
     realm.write(() => {
+      for (const meme of tag.memes) {
+        meme.dateModified = new Date();
+        const tags = meme.tags as Set<Tag>;
+        tags.delete(tag);
+        meme.tagsLength = tags.size;
+      }
+
       realm.delete(tag);
     });
+
     navigation.goBack();
   };
 
@@ -89,50 +61,32 @@ const EditTag = ({
     <>
       <Appbar.Header>
         <Appbar.BackAction onPress={() => navigation.goBack()} />
-        <Appbar.Content title={tag ? 'Edit Tag' : 'Add Tag'} />
-        {tag && <Appbar.Action icon="delete" onPress={handleDelete} />}
+        <Appbar.Content title={'Edit Tag'} />
+        <Appbar.Action icon="delete" onPress={handleDelete} />
       </Appbar.Header>
       <ScrollView
         contentContainerStyle={[
           orientation == 'portrait' && styles.paddingVertical,
           orientation == 'landscape' && styles.smallPaddingVertical,
           styles.paddingHorizontal,
-          styles.fullSize,
           styles.flexGrow,
           styles.flexColumnSpaceBetween,
           { backgroundColor: colors.background },
-        ]}>
+        ]}
+        nestedScrollEnabled>
         <View style={[styles.flex, styles.justifyStart]}>
-          <TagPreview name={tagName} color={validatedTagColor} />
-          <TextInput
-            mode="outlined"
-            label="Tag Name"
-            value={tagName}
-            onChangeText={handleTagNameChange}
-            error={!!tagNameError}
-            autoCapitalize="none"
-            selectTextOnFocus
+          <TagEditor
+            tagName={tagName}
+            setTagName={setTagName}
+            tagColor={tagColor}
+            setTagColor={setTagColor}
+            validatedTagColor={validatedTagColor}
+            setValidatedTagColor={setValidatedTagColor}
+            tagNameError={tagNameError}
+            setTagNameError={setTagNameError}
+            tagColorError={tagColorError}
+            setTagColorError={setTagColorError}
           />
-          <HelperText type="error" visible={!!tagNameError}>
-            {tagNameError}
-          </HelperText>
-          <TextInput
-            mode="outlined"
-            label="Tag Color"
-            value={tagColor}
-            onChangeText={handleTagColorChange}
-            error={!!tagColorError}
-            autoCorrect={false}
-            right={
-              <TextInput.Icon
-                icon="palette"
-                onPress={() => handleTagColorChange(generateRandomColor())}
-              />
-            }
-          />
-          <HelperText type="error" visible={!!tagColorError}>
-            {tagColorError}
-          </HelperText>
         </View>
         <View style={[styles.flex, styles.justifyEnd]}>
           <Button