Add tag-adding logic

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2023-07-12 23:47:39 +03:00
parent 5bf066ac98
commit 703155232d
15 changed files with 322 additions and 28 deletions
--- a/src/screens/addTag.tsx
+++ b/src/screens/addTag.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import {
+  Chip,
+  TextInput,
+  Appbar,
+  HelperText,
+  Button,
+} from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { BSON } from 'realm';
+import { useRealm } from '@realm/react';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { PaddedView } from '../components';
+import styles, { horizontalScale, verticalScale } from '../styles';
+import {
+  generateRandomColor,
+  getContrastColor,
+  isValidColor,
+} from '../utilities';
+
+const tagStyles = StyleSheet.create({
+  preview: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+    marginVertical: verticalScale(75),
+  },
+  chip: {
+    padding: horizontalScale(5),
+  },
+  chipText: {
+    fontSize: horizontalScale(15),
+  },
+});
+
+const AddTag = () => {
+  const navigation = useNavigation();
+  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 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: new BSON.UUID(),
+        name: tagName,
+        color: tagColor,
+        memes: [],
+      });
+    });
+    navigation.goBack();
+  };
+
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => navigation.goBack()} />
+        <Appbar.Content title="Add Tag" />
+      </Appbar.Header>
+      <PaddedView style={[styles.flex, styles.flexColumnSpaceBetween]}>
+        <View>
+          <View style={[tagStyles.preview]}>
+            <Chip
+              icon={() => {
+                return (
+                  <FontAwesome5
+                    name="tag"
+                    size={horizontalScale(12)}
+                    color={getContrastColor(validatedTagColor)}
+                  />
+                );
+              }}
+              elevated
+              style={[tagStyles.chip, { backgroundColor: validatedTagColor }]}
+              textStyle={[
+                tagStyles.chipText,
+                { color: getContrastColor(validatedTagColor) },
+              ]}>
+              {'#' + tagName}
+            </Chip>
+          </View>
+          <TextInput
+            mode="outlined"
+            label="Tag Name"
+            value={tagName}
+            onChangeText={handleTagNameChange}
+            error={!!tagNameError}
+          />
+          <HelperText type="error" visible={!!tagNameError}>
+            {tagNameError}
+          </HelperText>
+          <TextInput
+            mode="outlined"
+            label="Tag Color"
+            value={tagColor}
+            onChangeText={handleTagColorChange}
+            error={!!tagColorError}
+            right={
+              <TextInput.Icon
+                icon="palette"
+                onPress={() => handleTagColorChange(generateRandomColor())}
+              />
+            }
+          />
+          <HelperText type="error" visible={!!tagColorError}>
+            {tagColorError}
+          </HelperText>
+        </View>
+        <Button
+          mode="contained"
+          icon="floppy"
+          onPress={handleSave}
+          disabled={!!tagNameError || !!tagColorError}>
+          Save
+        </Button>
+      </PaddedView>
+    </>
+  );
+};
+
+export default AddTag;