Add tag editing

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

src/screens/editMeme.tsx

@@ -5,7 +5,7 @@ import { useDimensions } from '../contexts';
 import { ScrollView } from 'react-native';
 import styles from '../styles';
 
-const AddMeme = () => {
+const EditMeme = () => {
   const navigation = useNavigation();
   const { colors } = useTheme();
   const { orientation } = useDimensions();
@@ -32,4 +32,4 @@ const AddMeme = () => {
   );
 };
 
-export default AddMeme;
+export default EditMeme;

src/screens/editTag.tsx

@@ -8,21 +8,31 @@ import {
   useTheme,
 } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
-import { BSON } from 'realm';
+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 AddTag = () => {
+const EditTag = ({
+  route,
+}: NativeStackScreenProps<RootStackParamList, ROUTE.EDIT_TAG>) => {
   const navigation = useNavigation();
   const { colors } = useTheme();
   const { orientation } = useDimensions();
   const realm = useRealm();
 
-  const [tagName, setTagName] = useState('newTag');
-  const [tagColor, setTagColor] = useState(generateRandomColor());
+  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>();
@@ -55,11 +65,22 @@ const AddTag = () => {
 
   const handleSave = () => {
     realm.write(() => {
-      realm.create('Tag', {
-        id: new BSON.UUID(),
-        name: tagName,
-        color: tagColor,
-      });
+      realm.create(
+        Tag,
+        {
+          id: tag?.id,
+          name: tagName,
+          color: tagColor,
+        },
+        UpdateMode.Modified,
+      );
+    });
+    navigation.goBack();
+  };
+
+  const handleDelete = () => {
+    realm.write(() => {
+      realm.delete(tag);
     });
     navigation.goBack();
   };
@@ -68,7 +89,8 @@ const AddTag = () => {
     <>
       <Appbar.Header>
         <Appbar.BackAction onPress={() => navigation.goBack()} />
-        <Appbar.Content title="Add Tag" />
+        <Appbar.Content title={tag ? 'Edit Tag' : 'Add Tag'} />
+        {tag && <Appbar.Action icon="delete" onPress={handleDelete} />}
       </Appbar.Header>
       <ScrollView
         contentContainerStyle={[
@@ -126,4 +148,4 @@ const AddTag = () => {
   );
 };
 
-export default AddTag;
+export default EditTag;

src/screens/index.ts

@@ -1,5 +1,5 @@
-export { default as AddMeme } from './addMeme';
-export { default as AddTag } from './addTag';
+export { default as EditMeme } from './editMeme';
+export { default as EditTag } from './editTag';
 export { default as Home } from './home';
 export { default as Settings } from './settings';
 export { default as Tags } from './tags';

src/screens/tags.tsx

@@ -16,11 +16,11 @@ import {
   TouchableRipple,
   useTheme,
 } from 'react-native-paper';
-import { useQuery, useRealm } from '@realm/react';
+import { useQuery } from '@realm/react';
 import { useDispatch, useSelector } from 'react-redux';
 import { FlashList } from '@shopify/flash-list';
 import { TagChip } from '../components';
-import { Tag, deleteTag } from '../database';
+import { Tag } from '../database';
 import styles from '../styles';
 import {
   RootState,
@@ -29,9 +29,16 @@ import {
   setTagsSortDirection,
   toggleTagsSortDirection,
 } from '../state';
-import { SORT_DIRECTION, TAG_SORT, tagSortQuery } from '../types';
+import {
+  ROUTE,
+  RootStackParamList,
+  SORT_DIRECTION,
+  TAG_SORT,
+  tagSortQuery,
+} from '../types';
 import { getSortIcon } from '../utilities';
 import { useDimensions } from '../contexts';
+import { NavigationProp, useNavigation } from '@react-navigation/native';
 
 const tagsStyles = StyleSheet.create({
   headerView: {
@@ -68,7 +75,7 @@ const tagsStyles = StyleSheet.create({
 const Tags = () => {
   const { colors } = useTheme();
   const { orientation } = useDimensions();
-  const realm = useRealm();
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const sort = useSelector((state: RootState) => state.tags.sort);
   const sortDirection = useSelector(
     (state: RootState) => state.tags.sortDirection,
@@ -208,7 +215,10 @@ const Tags = () => {
         estimatedItemSize={52}
         showsVerticalScrollIndicator={false}
         renderItem={({ item: tag }) => (
-          <TouchableRipple onPress={() => deleteTag(realm, tag)}>
+          <TouchableRipple
+            onPress={() =>
+              navigation.navigate(ROUTE.EDIT_TAG, { id: tag.id.toHexString() })
+            }>
             <View style={tagsStyles.tagRow}>
               <View style={tagsStyles.tagView}>
                 <TagChip tag={tag} />