Add meme-adding logic

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

src/screens/addTag.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { Appbar, Button, useTheme } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { useRealm } from '@realm/react';
+import styles from '../styles';
+import { generateRandomColor } from '../utilities';
+import { useDimensions } from '../contexts';
+import { Tag } from '../database';
+import { TagEditor } from '../components';
+
+const AddTag = () => {
+  const navigation = useNavigation();
+  const { colors } = useTheme();
+  const { orientation } = useDimensions();
+  const realm = useRealm();
+
+  const [tagName, setTagName] = useState('newTag');
+  const [tagColor, setTagColor] = useState(generateRandomColor());
+  const [validatedTagColor, setValidatedTagColor] = useState(tagColor);
+
+  const [tagNameError, setTagNameError] = useState<string | undefined>();
+  const [tagColorError, setTagColorError] = useState<string | undefined>();
+
+  const handleSave = () => {
+    realm.write(() => {
+      realm.create(Tag.schema.name, {
+        name: tagName,
+        color: tagColor,
+      });
+    });
+
+    navigation.goBack();
+  };
+
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => navigation.goBack()} />
+        <Appbar.Content title={'Add Tag'} />
+      </Appbar.Header>
+      <ScrollView
+        contentContainerStyle={[
+          orientation == 'portrait' && styles.paddingVertical,
+          orientation == 'landscape' && styles.smallPaddingVertical,
+          styles.paddingHorizontal,
+          styles.flexGrow,
+          styles.flexColumnSpaceBetween,
+          { backgroundColor: colors.background },
+        ]}>
+        <View style={[styles.flex, styles.justifyStart]}>
+          <TagEditor
+            tagName={tagName}
+            setTagName={setTagName}
+            tagColor={tagColor}
+            setTagColor={setTagColor}
+            validatedTagColor={validatedTagColor}
+            setValidatedTagColor={setValidatedTagColor}
+            tagNameError={tagNameError}
+            setTagNameError={setTagNameError}
+            tagColorError={tagColorError}
+            setTagColorError={setTagColorError}
+          />
+        </View>
+        <View style={[styles.flex, styles.justifyEnd]}>
+          <Button
+            mode="contained"
+            icon="floppy"
+            onPress={handleSave}
+            disabled={!!tagNameError || !!tagColorError}>
+            Save
+          </Button>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+export default AddTag;