Refactor editor architecture

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2023-08-01 08:58:35 +03:00
parent 880c20661e
commit f1f969c8ea
10 changed files with 265 additions and 224 deletions
--- a/src/components/memes/memeEditor.tsx
+++ b/src/components/memes/memeEditor.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
-import { Image } from 'react-native';
+import { Image, LayoutAnimation } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { MemeFail, MemeTagSelector } from '..';
-import { Tag } from '../../database';
-import { StringValidationResult, validateMemeTitle } from '../../utilities';
-import { Dimensions } from '../../types';
+import { LoadingView, MemeFail, MemeTagSelector } from '..';
+import { getFilenameFromUri, validateMemeTitle } from '../../utilities';
+import { Dimensions, StagingMeme } from '../../types';

 const memeEditorStyles = {
  image: {
@@ -25,43 +24,46 @@ const memeEditorStyles = {
 };

 const MemeEditor = ({
-  memeUri,
-  memeFilename,
-  memeError,
-  setMemeError,
-  memeTitle,
-  setMemeTitle,
-  memeTags,
-  setMemeTags,
+  uri,
+  mimeType,
+  setLoading,
+  error,
+  setError,
+  staging,
+  setStaging,
 }: {
-  memeUri: string;
-  memeFilename?: string;
-  memeError: Error | undefined;
-  setMemeError: (error: Error | undefined) => void;
-  memeTitle: StringValidationResult;
-  setMemeTitle: (name: StringValidationResult) => void;
-  memeTags: Map<string, Tag>;
-  setMemeTags: (tags: Map<string, Tag>) => void;
+  uri?: string;
+  mimeType?: string;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  error: Error | undefined;
+  setError: (error: Error | undefined) => void;
+  staging?: StagingMeme;
+  setStaging: (staging: StagingMeme) => void;
 }) => {
  const { width } = useSafeAreaFrame();
  const { colors } = useTheme();

  const [dimensions, setDimensions] = useState<Dimensions>();

+  if (!uri || !mimeType || !staging) return <LoadingView />;
+
  return (
    <>
      <TextInput
        mode="outlined"
        label="Title"
-        value={memeTitle.raw}
-        onChangeText={title => setMemeTitle(validateMemeTitle(title))}
-        error={!memeTitle.valid}
+        value={staging.title.raw}
+        onChangeText={title =>
+          setStaging({ ...staging, title: validateMemeTitle(title) })
+        }
+        error={!staging.title.valid}
        selectTextOnFocus
      />
-      <HelperText type="error" visible={!memeTitle.valid}>
-        {memeTitle.error}
+      <HelperText type="error" visible={!staging.title.valid}>
+        {staging.title.error}
      </HelperText>
-      {memeError ? (
+      {error ? (
        <MemeFail
          style={[
            {
@@ -74,7 +76,7 @@ const MemeEditor = ({
        />
      ) : (
        <Image
-          source={{ uri: memeUri }}
+          source={{ uri }}
          style={[
            dimensions
              ? {
@@ -87,9 +89,10 @@ const MemeEditor = ({
                    100,
                  ),
                }
-              : {
+              : // eslint-disable-next-line react-native/no-inline-styles
+                {
                  width: width * 0.92,
-                  height: width * 0.92,
+                  height: 1,
                },
            memeEditorStyles.image,
          ]}
@@ -99,19 +102,29 @@ const MemeEditor = ({
              width: event.nativeEvent.source.width,
              height: event.nativeEvent.source.height,
            });
+            setLoading(false);
+            LayoutAnimation.configureNext(
+              LayoutAnimation.Presets.easeInEaseOut,
+            );
          }}
-          onError={event => setMemeError(event.nativeEvent.error as Error)}
+          onError={() =>
+            setError(
+              new Error(
+                'The URI for this meme appears to be broken. This may have been caused by the file being moved or deleted.',
+              ),
+            )
+          }
        />
      )}
      <Text
        variant="bodySmall"
        style={[memeEditorStyles.uri, { color: colors.onSurfaceDisabled }]}
        numberOfLines={1}>
-        {memeFilename}
+        {getFilenameFromUri(uri)}
      </Text>
      <MemeTagSelector
-        memeTags={memeTags}
-        setMemeTags={setMemeTags}
+        memeTags={staging.tags}
+        setMemeTags={tags => setStaging({ ...staging, tags })}
        style={memeEditorStyles.memeTagSelector}
      />
    </>
--- a/src/components/tags/tagEditor.tsx
+++ b/src/components/tags/tagEditor.tsx
@@ -2,62 +2,69 @@ import React, { useEffect, useRef } from 'react';
 import { HelperText, TextInput } from 'react-native-paper';
 import TagPreview from './tagPreview';
 import {
-  StringValidationResult,
  generateRandomColor,
  validateColor,
  validateTagName,
 } from '../../utilities';
+import { StagingTag } from '../../types';

 const TagEditor = ({
-  tagName,
-  setTagName,
-  tagColor,
-  setTagColor,
+  staging,
+  setStaging,
 }: {
-  tagName: StringValidationResult;
-  setTagName: (name: StringValidationResult) => void;
-  tagColor: StringValidationResult;
-  setTagColor: (color: StringValidationResult) => void;
+  staging: StagingTag;
+  setStaging: (staging: StagingTag) => void;
 }) => {
-  const lastValidTagColor = useRef(tagColor.parsed);
+  const lastValidColor = useRef(staging.color.parsed);

  useEffect(() => {
-    if (tagColor.valid) lastValidTagColor.current = tagColor.parsed;
-  }, [tagColor]);
+    if (staging.color.valid) lastValidColor.current = staging.color.parsed;
+  }, [staging.color.parsed, staging.color.valid]);

  return (
    <>
      <TagPreview
-        name={tagName.parsed}
-        color={tagColor.valid ? tagColor.parsed : lastValidTagColor.current}
+        name={staging.name.parsed}
+        color={
+          staging.color.valid ? staging.color.parsed : lastValidColor.current
+        }
      />
      <TextInput
        mode="outlined"
        label="Name"
-        value={tagName.raw}
-        onChangeText={name => setTagName(validateTagName(name))}
-        error={!tagName.valid}
+        value={staging.name.raw}
+        onChangeText={name =>
+          setStaging({ ...staging, name: validateTagName(name) })
+        }
+        error={!staging.name.valid}
        selectTextOnFocus
      />
-      <HelperText type="error" visible={!tagName.valid}>
-        {tagName.error}
+      <HelperText type="error" visible={!staging.name.valid}>
+        {staging.name.error}
      </HelperText>
      <TextInput
        mode="outlined"
        label="Color"
-        value={tagColor.raw}
-        onChangeText={color => setTagColor(validateColor(color))}
-        error={!tagColor.valid}
+        value={staging.color.raw}
+        onChangeText={color =>
+          setStaging({ ...staging, color: validateColor(color) })
+        }
+        error={!staging.color.valid}
        autoCorrect={false}
        right={
          <TextInput.Icon
            icon="palette"
-            onPress={() => setTagColor(validateColor(generateRandomColor()))}
+            onPress={() =>
+              setStaging({
+                ...staging,
+                color: validateColor(generateRandomColor()),
+              })
+            }
          />
        }
      />
-      <HelperText type="error" visible={!tagColor.valid}>
-        {tagColor.error}
+      <HelperText type="error" visible={!staging.color.valid}>
+        {staging.color.error}
      </HelperText>
    </>
  );
--- a/src/database/meme.ts
+++ b/src/database/meme.ts
@@ -19,8 +19,8 @@ const memeTypePlural = {

 class Meme extends Object<Meme> {
  id!: BSON.UUID;
-  memeType!: MEME_TYPE;
  filename!: string;
+  memeType!: MEME_TYPE;
  mimeType!: string;
  size!: number;
  title!: string;
@@ -37,8 +37,8 @@ class Meme extends Object<Meme> {
    primaryKey: 'id',
    properties: {
      id: { type: 'uuid', default: () => new BSON.UUID() },
-      memeType: { type: 'string', indexed: true },
      filename: 'string',
+      memeType: { type: 'string', indexed: true },
      mimeType: 'string',
      size: 'int',
      title: 'string',
--- a/src/screens/editors/addMeme.tsx
+++ b/src/screens/editors/addMeme.tsx
@@ -14,6 +14,7 @@ import {
  documentPickerResponseToAddMemeFile,
  ROUTE,
  RootStackParamList,
+  StagingMeme,
 } from '../../types';
 import { Meme, Tag } from '../../database';
 import { RootState } from '../../state';
@@ -43,92 +44,83 @@ const AddMeme = ({
  const file = useRef(files.current[index]);
  const isLastFile = index === files.current.length - 1;

-  const [memeLoading, setMemeLoading] = useState(true);
-  const [memeError, setMemeError] = useState<Error>();
-
  const [isSaving, setIsSaving] = useState(false);
  const [isSavingAndAddingMore, setIsSavingAndAddingMore] = useState(false);

-  const [memeUri, setMemeUri] = useState(file.current.uri);
-  const [memeFilename, setMemeFilename] = useState(file.current.filename);
-  const [memeMimeType, setMemeMimeType] = useState<string>();
-  const [memeTitle, setMemeTitle] = useState(validateMemeTitle('New Meme'));
-  const [memeIsFavorite, setMemeIsFavorite] = useState(false);
-  const [memeTags, setMemeTags] = useState(new Map<string, Tag>());
+  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 resetState = useCallback(async (newIndex = 0) => {
-    setMemeLoading(true);
+  const resetState = useCallback(async (newIndex: number) => {
+    setLoading(true);
    // eslint-disable-next-line unicorn/no-useless-undefined
-    setMemeError(undefined);
+    setError(undefined);

    setIndex(newIndex);
    file.current = files.current[newIndex];

-    setMemeUri(file.current.uri);
-    setMemeFilename(file.current.filename);
-    setMemeTitle(validateMemeTitle('New Meme'));
-    setMemeIsFavorite(false);
-    setMemeTags(new Map<string, Tag>());
+    setUri(file.current.uri);

-    const mimeType = await guessMimeType(file.current.uri);
-    if (!mimeType) {
-      setMemeError(
+    const guessedMimeType = await guessMimeType(file.current.uri);
+    if (!guessedMimeType) {
+      setError(
        new Error('Could not determine MIME type or file is not supported.'),
      );
      return;
    }
-    setMemeMimeType(mimeType);
+    setMimeType(guessedMimeType);

-    setMemeLoading(false);
+    setStaging({
+      title: validateMemeTitle('New Meme'),
+      isFavorite: false,
+      tags: new Map<string, Tag>(),
+    });
+
+    setLoading(false);
  }, []);

-  useEffect(() => void resetState(), [resetState]);
+  useEffect(() => void resetState(0), [resetState]);

  const saveMeme = useCallback(async () => {
-    if (!memeMimeType) return;
+    if (!mimeType || !staging) return;
    const uuid = new BSON.UUID();

-    const memeType = getMemeTypeFromMimeType(memeMimeType);
+    const memeType = getMemeTypeFromMimeType(mimeType);
    if (!memeType) return;

-    const fileExtension = extension(memeMimeType);
+    const fileExtension = extension(mimeType);
    if (!fileExtension) return;

    const filename = `${uuid.toHexString()}-${Math.round(
      Date.now() / 1000,
    )}.${fileExtension}`;
-    const uri = AndroidScoped.appendPath(storageUri, filename);
+    const finalUri = AndroidScoped.appendPath(storageUri, filename);

-    await FileSystem.cp(file.current.uri, uri);
-    const { size } = await FileSystem.stat(uri);
+    await FileSystem.cp(file.current.uri, finalUri);
+    const { size } = await FileSystem.stat(finalUri);

    realm.write(() => {
      const meme: Meme | undefined = realm.create<Meme>(Meme.schema.name, {
        id: uuid,
        memeType,
        filename,
-        mimeType: memeMimeType,
+        mimeType: mimeType,
        size,
-        title: memeTitle.parsed,
-        isFavorite: memeIsFavorite,
-        tags: [...memeTags.values()],
-        tagsLength: memeTags.size,
+        title: staging.title.parsed,
+        isFavorite: staging.isFavorite,
+        tags: [...staging.tags.values()],
+        tagsLength: staging.tags.size,
      });

-      memeTags.forEach(tag => {
+      staging.tags.forEach(tag => {
        tag.dateModified = new Date();
        tag.memes.push(meme);
        tag.memesLength = tag.memes.length;
      });
    });
-  }, [
-    memeIsFavorite,
-    memeMimeType,
-    memeTags,
-    memeTitle.parsed,
-    realm,
-    storageUri,
-  ]);
+  }, [mimeType, realm, staging, storageUri]);

  const handleSave = useCallback(async () => {
    setIsSaving(true);
@@ -162,20 +154,23 @@ const AddMeme = ({
        <Appbar.BackAction onPress={() => goBack()} />
        <Appbar.Content title={'Add Meme'} />
        <Appbar.Action
-          icon={memeIsFavorite ? 'heart' : 'heart-outline'}
-          onPress={() => setMemeIsFavorite(!memeIsFavorite)}
+          icon={staging?.isFavorite ? 'heart' : 'heart-outline'}
+          disabled={!staging}
+          onPress={() =>
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            setStaging({ ...staging!, isFavorite: !staging!.isFavorite })
+          }
        />
      </Appbar.Header>
      <Banner
-        visible={!!memeError}
+        visible={!!error}
        actions={[
          {
            label: 'Cancel',
            onPress: goBack,
          },
        ]}>
-        The selected URI appears to be broken. This may have been caused by the
-        file being corrupted or unsupported.
+        {error?.message}
      </Banner>
      <ScrollView
        contentContainerStyle={[
@@ -187,14 +182,14 @@ const AddMeme = ({
        ]}>
        <View style={editorStyles.editorView}>
          <MemeEditor
-            memeUri={memeUri}
-            memeFilename={memeFilename}
-            memeError={memeError}
-            setMemeError={setMemeError}
-            memeTitle={memeTitle}
-            setMemeTitle={setMemeTitle}
-            memeTags={memeTags}
-            setMemeTags={setMemeTags}
+            uri={uri}
+            mimeType={mimeType}
+            loading={loading}
+            setLoading={setLoading}
+            error={error}
+            setError={setError}
+            staging={staging}
+            setStaging={setStaging}
          />
        </View>
        <View style={editorStyles.saveButtonView}>
@@ -203,11 +198,11 @@ const AddMeme = ({
            icon="plus"
            onPress={handleSaveAndAddMore}
            disabled={
-              memeLoading ||
-              !!memeError ||
+              loading ||
+              !!error ||
              isSaving ||
              isSavingAndAddingMore ||
-              !memeTitle.valid ||
+              !staging?.title.valid ||
              !isLastFile
            }
            loading={isSavingAndAddingMore}
@@ -219,11 +214,11 @@ const AddMeme = ({
            icon="floppy"
            onPress={isLastFile ? handleSave : handleSaveAndNext}
            disabled={
-              memeLoading ||
-              !!memeError ||
+              loading ||
+              !!error ||
              isSaving ||
              isSavingAndAddingMore ||
-              !memeTitle.valid
+              !staging?.title.valid
            }
            loading={isSaving}
            style={editorStyles.saveButton}>
--- a/src/screens/editors/addTag.tsx
+++ b/src/screens/editors/addTag.tsx
@@ -12,6 +12,7 @@ import {
 import { Tag } from '../../database';
 import { TagEditor } from '../../components';
 import editorStyles from './editorStyles';
+import { StagingTag } from '../../types';

 const AddTag = () => {
  const { goBack } = useNavigation();
@@ -19,10 +20,10 @@ const AddTag = () => {
  const orientation = useDeviceOrientation();
  const realm = useRealm();

-  const [tagName, setTagName] = useState(validateTagName('newTag'));
-  const [tagColor, setTagColor] = useState(
-    validateColor(generateRandomColor()),
-  );
+  const [staging, setStaging] = useState<StagingTag>({
+    name: validateTagName('newTag'),
+    color: validateColor(generateRandomColor()),
+  });

  // Although saving tags is instantaneous, we still want to show a loading
  // indicator to prevent the user from spamming the save button.
@@ -31,11 +32,11 @@ const AddTag = () => {
  const saveTag = useCallback(() => {
    realm.write(() => {
      realm.create(Tag.schema.name, {
-        name: tagName.parsed,
-        color: tagColor.parsed,
+        name: staging.name.parsed,
+        color: staging.color.parsed,
      });
    });
-  }, [realm, tagColor.parsed, tagName.parsed]);
+  }, [realm, staging.color.parsed, staging.name.parsed]);

  const handleSave = useCallback(() => {
    saveTag();
@@ -46,8 +47,10 @@ const AddTag = () => {
    setIsSavingAndAddingMore(true);
    saveTag();
    setTimeout(() => setIsSavingAndAddingMore(false), 250);
-    setTagName(validateTagName('newTag'));
-    setTagColor(validateColor(generateRandomColor()));
+    setStaging({
+      name: validateTagName('newTag'),
+      color: validateColor(generateRandomColor()),
+    });
  }, [saveTag]);

  return (
@@ -65,19 +68,14 @@ const AddTag = () => {
          { backgroundColor: colors.background },
        ]}>
        <View style={editorStyles.editorView}>
-          <TagEditor
-            tagName={tagName}
-            setTagName={setTagName}
-            tagColor={tagColor}
-            setTagColor={setTagColor}
-          />
+          <TagEditor staging={staging} setStaging={setStaging} />
        </View>
        <View style={editorStyles.saveButtonView}>
          <Button
            mode="contained-tonal"
            icon="plus"
            onPress={handleSaveAndAddMore}
-            disabled={!tagName.valid || isSavingAndAddingMore}
+            disabled={!staging.name.valid || isSavingAndAddingMore}
            loading={isSavingAndAddingMore}
            style={editorStyles.saveAndAddButton}>
            Save & Add
@@ -86,7 +84,7 @@ const AddTag = () => {
            mode="contained"
            icon="floppy"
            onPress={handleSave}
-            disabled={!tagName.valid || isSavingAndAddingMore}
+            disabled={!staging.name.valid || isSavingAndAddingMore}
            style={editorStyles.saveButton}>
            Save
          </Button>
--- a/src/screens/editors/editMeme.tsx
+++ b/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}>
--- a/src/screens/editors/editTag.tsx
+++ b/src/screens/editors/editTag.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
@@ -7,14 +7,9 @@ import { BSON } from 'realm';
 import { useObject, useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
 import { TagEditor } from '../../components';
-import { ROUTE, RootStackParamList } from '../../types';
+import { ROUTE, RootStackParamList, StagingTag } from '../../types';
 import { Tag } from '../../database';
-import {
-  StringValidationResult,
-  deleteTag,
-  validateColor,
-  validateTagName,
-} from '../../utilities';
+import { deleteTag, validateColor, validateTagName } from '../../utilities';
 import editorStyles from './editorStyles';

 const EditTag = ({
@@ -31,29 +26,21 @@ const EditTag = ({
    BSON.UUID.createFromHexString(route.params.id),
  )!;

-  const [hasChanges, setHasChanges] = useState(false);
-  const [tagName, setTagName] = useState(validateTagName(tag.name));
-  const [tagColor, setTagColor] = useState(validateColor(tag.color));
-
-  const handleTagNameChange = useCallback((name: StringValidationResult) => {
-    setTagName(name);
-    setHasChanges(true);
-  }, []);
-
-  const handleTagColorChange = useCallback((color: StringValidationResult) => {
-    setTagColor(color);
-    setHasChanges(true);
-  }, []);
+  const [staging, setStaging] = useState<StagingTag>({
+    name: validateTagName(tag.name),
+    color: validateColor(tag.color),
+  });
+  const originalStaging = useRef<StagingTag>(staging);

  const handleSave = useCallback(() => {
    realm.write(() => {
-      tag.name = tagName.parsed;
-      tag.color = tagColor.parsed;
+      tag.name = staging.name.parsed;
+      tag.color = staging.color.parsed;
      tag.dateModified = new Date();
    });

    goBack();
-  }, [goBack, realm, tag, tagColor.parsed, tagName.parsed]);
+  }, [goBack, realm, staging.color.parsed, staging.name.parsed, tag]);

  return (
    <>
@@ -78,19 +65,18 @@ const EditTag = ({
        ]}
        nestedScrollEnabled>
        <View style={editorStyles.editorView}>
-          <TagEditor
-            tagName={tagName}
-            setTagName={handleTagNameChange}
-            tagColor={tagColor}
-            setTagColor={handleTagColorChange}
-          />
+          <TagEditor staging={staging} setStaging={setStaging} />
        </View>
        <View style={editorStyles.saveButtonView}>
          <Button
            mode="contained"
            icon="floppy"
            onPress={handleSave}
-            disabled={!tagName.valid || !tagColor.valid || !hasChanges}
+            disabled={
+              !staging.name.valid ||
+              !staging.color.valid ||
+              originalStaging.current === staging
+            }
            style={editorStyles.soloSaveButton}>
            Save
          </Button>
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -13,4 +13,5 @@ export {
  tagSortQuery,
  SORT_DIRECTION,
 } from './sort';
+export { type StagingMeme, type StagingTag } from './staging';
 export { VIEW } from './view';
--- a/src/types/staging.ts
+++ b/src/types/staging.ts
@@ -0,0 +1,15 @@
+import { Tag } from '../database';
+import { StringValidationResult } from '../utilities';
+
+interface StagingMeme {
+  title: StringValidationResult;
+  isFavorite: boolean;
+  tags: Map<string, Tag>;
+}
+
+interface StagingTag {
+  name: StringValidationResult;
+  color: StringValidationResult;
+}
+
+export { type StagingMeme, type StagingTag };
--- a/src/utilities/filesystem.ts
+++ b/src/utilities/filesystem.ts
@@ -64,10 +64,7 @@ const guessMimeType = async (
  uri: string,
  hint?: string | null,
 ): Promise<string | undefined> => {
-  if (hint) {
-    if (allowedMimeTypes.includes(hint)) return hint;
-    if (!hint.startsWith('image/')) return undefined;
-  }
+  if (hint && allowedMimeTypes.includes(hint)) return hint;

  const guessedMimeType = guessMimeTypeFromExtension(uri);
  if (guessedMimeType) return guessedMimeType;