diff --git a/.eslintrc.json b/.eslintrc.json index 4e54e11..b8bf3bb 100644 --- a/.eslintrc.json +++ b/.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"] } diff --git a/src/components/floatingActionButton.tsx b/src/components/floatingActionButton.tsx index fcd315f..92dfc4e 100644 --- a/src/components/floatingActionButton.tsx +++ b/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), diff --git a/src/database/meme.ts b/src/database/meme.ts index 3785200..e58e604 100644 --- a/src/database/meme.ts +++ b/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 { - id!: Realm.BSON.UUID; + id!: BSON.UUID; type!: MEME_TYPE; uri!: Realm.List; size!: number; @@ -38,7 +39,7 @@ class Meme extends Realm.Object { 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 { 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 }, }, diff --git a/src/database/tag.ts b/src/database/tag.ts index ab4da00..7612a7f 100644 --- a/src/database/tag.ts +++ b/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 { - id!: Realm.BSON.UUID; + id!: BSON.UUID; name!: string; color!: string; memes!: Realm.List; @@ -15,13 +16,13 @@ class Tag extends Realm.Object { 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 }, }, }; diff --git a/src/navigation.tsx b/src/navigation.tsx index 8033f53..23e5bfe 100644 --- a/src/navigation.tsx +++ b/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(); return ( { animation: 'slide_from_bottom', }}> - - + + ); diff --git a/src/screens/addMeme.tsx b/src/screens/editMeme.tsx similarity index 95% rename from src/screens/addMeme.tsx rename to src/screens/editMeme.tsx index 7c5a9eb..0df1f83 100644 --- a/src/screens/addMeme.tsx +++ b/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; diff --git a/src/screens/addTag.tsx b/src/screens/editTag.tsx similarity index 77% rename from src/screens/addTag.tsx rename to src/screens/editTag.tsx index 809d200..bf152f3 100644 --- a/src/screens/addTag.tsx +++ b/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) => { 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(); @@ -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 = () => { <> navigation.goBack()} /> - + + {tag && } { ); }; -export default AddTag; +export default EditTag; diff --git a/src/screens/index.ts b/src/screens/index.ts index a0ef6f1..021dc23 100644 --- a/src/screens/index.ts +++ b/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'; diff --git a/src/screens/tags.tsx b/src/screens/tags.tsx index da352b0..86e696e 100644 --- a/src/screens/tags.tsx +++ b/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>(); 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 }) => ( - deleteTag(realm, tag)}> + + navigation.navigate(ROUTE.EDIT_TAG, { id: tag.id.toHexString() }) + }> diff --git a/src/types/index.ts b/src/types/index.ts index a7d5446..45cfb75 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,4 +1,4 @@ -export { ROUTE } from './route'; +export { ROUTE, type RootStackParamList } from './route'; export { MEME_SORT, homeSortQuery, diff --git a/src/types/route.ts b/src/types/route.ts index 92ca206..67c6277 100644 --- a/src/types/route.ts +++ b/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 };