Add tag editing

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

.eslintrc.json

@@ -107,7 +107,8 @@
     "unicorn/expiring-todo-comments": "off",
     "unicorn/no-array-for-each": "off",
     "unicorn/filename-case": ["error", { "case": "camelCase" }],
-    "unicorn/numeric-separators-style": "off"
+    "unicorn/numeric-separators-style": "off",
+    "unicorn/prevent-abbreviations": "off"
   },
   "ignorePatterns": ["*.config.js"]
 }

src/components/floatingActionButton.tsx

@@ -4,6 +4,7 @@ import { FAB } from 'react-native-paper';
 import { ParamListBase, useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useDimensions } from '../contexts';
+import { ROUTE } from '../types';
 
 const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
   const { navigate } =
@@ -38,22 +39,22 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
         {
           icon: 'tag',
           label: 'Tag',
-          onPress: () => navigate('Add Tag'),
+          onPress: () => navigate(ROUTE.EDIT_TAG),
         },
         {
           icon: 'note-text',
           label: 'Text',
-          onPress: () => navigate('Add Meme'),
+          onPress: () => navigate(ROUTE.EDIT_MEME),
         },
         {
           icon: 'image-album',
           label: 'Album',
-          onPress: () => navigate('Add Meme'),
+          onPress: () => navigate(ROUTE.EDIT_MEME),
         },
       ]}
       onStateChange={({ open }) => setState(open)}
       onPress={() => {
-        if (state) navigate('Add Meme');
+        if (state) navigate(ROUTE.EDIT_MEME);
       }}
       style={{
         paddingBottom: responsive.verticalScale(75),

src/database/meme.ts

@@ -1,4 +1,5 @@
 import { Realm } from '@realm/react';
+import { BSON } from 'realm';
 import { Tag } from './tag';
 
 enum MEME_TYPE {
@@ -20,7 +21,7 @@ const memeTypePlural = {
 };
 
 class Meme extends Realm.Object<Meme> {
-  id!: Realm.BSON.UUID;
+  id!: BSON.UUID;
   type!: MEME_TYPE;
   uri!: Realm.List<string>;
   size!: number;
@@ -38,7 +39,7 @@ class Meme extends Realm.Object<Meme> {
     name: 'Meme',
     primaryKey: 'id',
     properties: {
-      id: 'uuid',
+      id: { type: 'uuid', default: () => new BSON.UUID() },
       type: { type: 'string', indexed: true },
       uri: 'string[]',
       size: 'int',
@@ -47,8 +48,8 @@ class Meme extends Realm.Object<Meme> {
       isFavorite: { type: 'bool', indexed: true, default: false },
       tags: { type: 'list', objectType: 'Tag', default: [] },
       tagsLength: { type: 'int', default: 0 },
-      dateCreated: { type: 'date', default: new Date() },
-      dateModified: { type: 'date', default: new Date() },
+      dateCreated: { type: 'date', default: () => new Date() },
+      dateModified: { type: 'date', default: () => new Date() },
       dateUsed: 'date?',
       timesUsed: { type: 'int', default: 0 },
     },

src/database/tag.ts

@@ -1,8 +1,9 @@
 import { Realm } from '@realm/react';
+import { BSON } from 'realm';
 import { Meme } from './meme';
 
 class Tag extends Realm.Object<Tag> {
-  id!: Realm.BSON.UUID;
+  id!: BSON.UUID;
   name!: string;
   color!: string;
   memes!: Realm.List<Meme>;
@@ -15,13 +16,13 @@ class Tag extends Realm.Object<Tag> {
     name: 'Tag',
     primaryKey: 'id',
     properties: {
-      id: 'uuid',
+      id: { type: 'uuid', default: () => new BSON.UUID() },
       name: { type: 'string', indexed: true },
       color: 'string',
       memes: { type: 'list', objectType: 'Meme', default: [] },
       memesLength: { type: 'int', default: 0 },
-      dateCreated: { type: 'date', default: new Date() },
-      dateModified: { type: 'date', default: new Date() },
+      dateCreated: { type: 'date', default: () => new Date() },
+      dateModified: { type: 'date', default: () => new Date() },
       timesUsed: { type: 'int', default: 0 },
     },
   };

src/navigation.tsx

@@ -5,13 +5,13 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useTheme } from 'react-native-paper';
 import { useSelector } from 'react-redux';
-import { Home, Tags, Settings, AddMeme, AddTag } from './screens';
+import { Home, Tags, Settings, EditMeme, EditTag } from './screens';
 import { darkNavigationTheme, lightNavigationTheme } from './theme';
 import {
   FloatingActionButton,
   HideableBottomNavigationBar,
 } from './components';
-import { ROUTE } from './types';
+import { ROUTE, RootStackParamList } from './types';
 import { RootState } from './state';
 
 const TabNavigator = () => {
@@ -73,7 +73,7 @@ const TabNavigator = () => {
 
 const NavigationContainer = () => {
   const theme = useTheme();
-  const StackNavigatorBase = createNativeStackNavigator();
+  const StackNavigatorBase = createNativeStackNavigator<RootStackParamList>();
 
   return (
     <NavigationContainerBase
@@ -85,8 +85,11 @@ const NavigationContainer = () => {
           animation: 'slide_from_bottom',
         }}>
         <StackNavigatorBase.Screen name={ROUTE.MAIN} component={TabNavigator} />
-        <StackNavigatorBase.Screen name={ROUTE.ADD_MEME} component={AddMeme} />
-        <StackNavigatorBase.Screen name={ROUTE.ADD_TAG} component={AddTag} />
+        <StackNavigatorBase.Screen
+          name={ROUTE.EDIT_MEME}
+          component={EditMeme}
+        />
+        <StackNavigatorBase.Screen name={ROUTE.EDIT_TAG} component={EditTag} />
       </StackNavigatorBase.Navigator>
     </NavigationContainerBase>
   );

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} />

src/types/index.ts

@@ -1,4 +1,4 @@
-export { ROUTE } from './route';
+export { ROUTE, type RootStackParamList } from './route';
 export {
   MEME_SORT,
   homeSortQuery,

src/types/route.ts

@@ -3,7 +3,19 @@ enum ROUTE {
   HOME = 'Home',
   TAGS = 'Tags',
   SETTINGS = 'Settings',
-  ADD_MEME = 'Add Meme',
-  ADD_TAG = 'Add Tag',
+  EDIT_MEME = 'Edit Meme',
+  EDIT_TAG = 'Edit Tag',
 }
-export { ROUTE };
+
+interface EditTagRouteParams {
+  id: string;
+}
+
+interface RootStackParamList {
+  [key: string]: undefined | EditTagRouteParams;
+  [ROUTE.MAIN]: undefined;
+  [ROUTE.EDIT_MEME]: undefined;
+  [ROUTE.EDIT_TAG]: EditTagRouteParams | undefined;
+}
+
+export { ROUTE, type RootStackParamList };