Refactor editor architecture

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

src/screens/editors/editMeme.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { Appbar, Banner, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
@@ -6,14 +6,13 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useObject, useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
 import { BSON } from 'realm';
-import { RootStackParamList, ROUTE } from '../../types';
+import { RootStackParamList, ROUTE, StagingMeme } from '../../types';
 import { pickSingle } from 'react-native-document-picker';
 import { AndroidScoped, FileSystem } from 'react-native-file-access';
 import { extension } from 'react-native-mime-types';
 import { useSelector } from 'react-redux';
-import { Tag, Meme } from '../../database';
+import { Meme } from '../../database';
 import {
-  StringValidationResult,
   allowedMimeTypes,
   deleteMeme,
   favoriteMeme,
@@ -43,42 +42,67 @@ const EditMeme = ({
     Meme.schema.name,
     BSON.UUID.createFromHexString(route.params.id),
   )!;
-  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
-
-  const [hasChanges, setHasChanges] = useState(false);
-
-  const [memeError, setMemeError] = useState<Error>();
-
-  const [memeTitle, setMemeTitle] = useState(validateMemeTitle(meme.title));
-  const [memeTags, setMemeTags] = useState(
-    new Map<string, Tag>(meme.tags.map(tag => [tag.id.toHexString(), tag])),
-  );
-
-  const handleMemeTitleChange = useCallback((title: StringValidationResult) => {
-    setMemeTitle(title);
-    setHasChanges(true);
-  }, []);
-
-  const handleMemeTagsChange = useCallback((tags: Map<string, Tag>) => {
-    setMemeTags(tags);
-    setHasChanges(true);
-  }, []);
 
   const [isSaving, setIsSaving] = useState(false);
 
+  const [uri, setUri] = useState<string>();
+  const [mimeType, setMimeType] = useState<string>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error>();
+  const [staging, setStaging] = useState<StagingMeme>();
+  const originalStaging = useRef<StagingMeme>();
+
+  const resetState = useCallback(
+    async (newUri: string) => {
+      setLoading(true);
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      setError(undefined);
+
+      setUri(newUri);
+
+      const guessedMimeType = await guessMimeType(newUri);
+      if (!guessedMimeType) {
+        setError(
+          new Error('Could not determine MIME type or file is not supported.'),
+        );
+        return;
+      }
+      setMimeType(guessedMimeType);
+
+      const stagingMeme = {
+        title: validateMemeTitle(meme.title),
+        isFavorite: meme.isFavorite,
+        tags: new Map(meme.tags.map(tag => [tag.id.toHexString(), tag])),
+      };
+
+      setStaging(stagingMeme);
+      originalStaging.current = stagingMeme;
+
+      setLoading(false);
+    },
+    [meme.isFavorite, meme.tags, meme.title],
+  );
+
+  useEffect(
+    () => void resetState(AndroidScoped.appendPath(storageUri, meme.filename)),
+    [meme.filename, resetState, storageUri],
+  );
+
   const handleSave = useCallback(() => {
+    if (!mimeType || !staging) return;
+
     setIsSaving(true);
 
     realm.write(() => {
       meme.tags.forEach(tag => {
-        if (!memeTags.has(tag.id.toHexString())) {
+        if (!staging.tags.has(tag.id.toHexString())) {
           tag.memes.slice(tag.memes.indexOf(meme), 1);
           tag.memesLength -= 1;
           tag.dateModified = new Date();
         }
       });
 
-      memeTags.forEach(tag => {
+      staging.tags.forEach(tag => {
         if (!meme.tags.some(memeTag => memeTag.id.equals(tag.id))) {
           tag.memes.push(meme);
           tag.memesLength = tag.memes.length;
@@ -86,15 +110,15 @@ const EditMeme = ({
         }
       });
 
-      meme.title = memeTitle.parsed;
+      meme.title = staging.title.parsed;
       // @ts-expect-error - Realm is a fuck
-      meme.tags = [...memeTags.values()];
-      meme.tagsLength = memeTags.size;
+      meme.tags = [...staging.tags.values()];
+      meme.tagsLength = staging.tags.size;
       meme.dateModified = new Date();
     });
 
     goBack();
-  }, [goBack, meme, memeTags, memeTitle.parsed, realm]);
+  }, [goBack, meme, mimeType, realm, staging]);
 
   const handleDelete = useCallback(async () => {
     setIsSaving(true);
@@ -106,18 +130,18 @@ const EditMeme = ({
     const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
     if (!file) return;
 
-    const mimeType = await guessMimeType(file.uri, file.type);
-    if (!mimeType) {
-      setMemeError(
+    const guessedMimeType = await guessMimeType(file.uri, file.type);
+    if (!guessedMimeType) {
+      setError(
         new Error('Could not determine MIME type or file is not supported.'),
       );
       return;
     }
 
-    const memeType = getMemeTypeFromMimeType(mimeType);
+    const memeType = getMemeTypeFromMimeType(guessedMimeType);
     if (!memeType) return;
 
-    const fileExtension = extension(mimeType) as string;
+    const fileExtension = extension(guessedMimeType);
     if (!fileExtension) return;
 
     const filename = `${meme.id.toHexString()}-${
@@ -131,10 +155,12 @@ const EditMeme = ({
     realm.write(() => {
       meme.filename = filename;
       meme.memeType = memeType;
-      meme.mimeType = mimeType;
+      meme.mimeType = guessedMimeType;
       meme.size = size;
     });
-  }, [meme, realm, storageUri]);
+
+    void resetState(newUri);
+  }, [meme, realm, resetState, storageUri]);
 
   return (
     <>
@@ -148,7 +174,7 @@ const EditMeme = ({
         <Appbar.Action icon="delete" onPress={handleDelete} />
       </Appbar.Header>
       <Banner
-        visible={!!memeError}
+        visible={!!error}
         actions={[
           {
             label: 'Fix URI',
@@ -159,8 +185,7 @@ const EditMeme = ({
             onPress: handleDelete,
           },
         ]}>
-        The URI for this meme appears to be broken. This may have been caused by
-        the file being moved or deleted.
+        {error?.message}
       </Banner>
       <ScrollView
         contentContainerStyle={[
@@ -172,14 +197,14 @@ const EditMeme = ({
         ]}>
         <View style={editorStyles.editorView}>
           <MemeEditor
-            memeUri={uri}
-            memeFilename={meme.filename}
-            memeError={memeError}
-            setMemeError={setMemeError}
-            memeTitle={memeTitle}
-            setMemeTitle={handleMemeTitleChange}
-            memeTags={memeTags}
-            setMemeTags={handleMemeTagsChange}
+            uri={uri}
+            mimeType={mimeType}
+            loading={loading}
+            setLoading={setLoading}
+            error={error}
+            setError={setError}
+            staging={staging}
+            setStaging={setStaging}
           />
         </View>
         <View style={editorStyles.saveButtonView}>
@@ -188,7 +213,11 @@ const EditMeme = ({
             icon="floppy"
             onPress={handleSave}
             disabled={
-              !memeTitle.valid || !hasChanges || isSaving || !!memeError
+              loading ||
+              !!error ||
+              isSaving ||
+              !staging?.title.valid ||
+              originalStaging.current === staging
             }
             loading={isSaving}
             style={editorStyles.soloSaveButton}>