Add tag editing

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

src/screens/editTag.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import {
+  TextInput,
+  Appbar,
+  HelperText,
+  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 { useRealm } from '@realm/react';
+import { TagPreview } from '../components';
+import styles from '../styles';
+import { generateRandomColor, isValidColor } from '../utilities';
+import { useDimensions } from '../contexts';
+import { ROUTE, RootStackParamList } from '../types';
+import { Tag } from '../database';
+
+const EditTag = ({
+  route,
+}: NativeStackScreenProps<RootStackParamList, ROUTE.EDIT_TAG>) => {
+  const navigation = useNavigation();
+  const { colors } = useTheme();
+  const { orientation } = useDimensions();
+  const realm = useRealm();
+
+  const tagId = route.params?.id;
+  const tag = tagId
+    ? realm.objectForPrimaryKey(Tag, BSON.UUID.createFromHexString(tagId))
+    : undefined;
+
+  const [tagName, setTagName] = useState(tag?.name ?? 'newTag');
+  const [tagColor, setTagColor] = useState(tag?.color ?? 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: tag?.id,
+          name: tagName,
+          color: tagColor,
+        },
+        UpdateMode.Modified,
+      );
+    });
+    navigation.goBack();
+  };
+
+  const handleDelete = () => {
+    realm.write(() => {
+      realm.delete(tag);
+    });
+    navigation.goBack();
+  };
+
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => navigation.goBack()} />
+        <Appbar.Content title={tag ? 'Edit Tag' : 'Add Tag'} />
+        {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 },
+        ]}>
+        <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
+          />
+          <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
+            mode="contained"
+            icon="floppy"
+            onPress={handleSave}
+            disabled={!!tagNameError || !!tagColorError}>
+            Save
+          </Button>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+export default EditTag;