Refactor styles

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

src/screens/editors/editMeme.tsx

@@ -0,0 +1,118 @@
+import React, { useCallback, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { Appbar, Button, useTheme } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+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 { Tag, Meme } from '../../database';
+import { deleteMeme, favoriteMeme, validateMemeTitle } from '../../utilities';
+import { MemeEditor } from '../../components';
+import editorStyles from './editorStyles';
+
+const EditMeme = ({
+  route,
+}: NativeStackScreenProps<RootStackParamList, ROUTE.EDIT_MEME>) => {
+  const { goBack } = useNavigation();
+  const { colors } = useTheme();
+  const orientation = useDeviceOrientation();
+  const realm = useRealm();
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const meme = useObject<Meme>(
+    Meme.schema.name,
+    BSON.UUID.createFromHexString(route.params.id),
+  )!;
+
+  const [memeTitle, setMemeTitle] = useState(validateMemeTitle(meme.title));
+  const [memeTags, setMemeTags] = useState(
+    new Map<string, Tag>(meme.tags.map(tag => [tag.id.toHexString(), tag])),
+  );
+
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleSave = useCallback(() => {
+    realm.write(() => {
+      meme.tags.forEach(tag => {
+        if (!memeTags.has(tag.id.toHexString())) {
+          tag.memes.slice(tag.memes.indexOf(meme), 1);
+          tag.memesLength -= 1;
+          tag.dateModified = new Date();
+        }
+      });
+
+      memeTags.forEach(tag => {
+        if (!meme.tags.some(memeTag => memeTag.id.equals(tag.id))) {
+          tag.memes.push(meme);
+          tag.memesLength = tag.memes.length;
+          tag.dateModified = new Date();
+        }
+      });
+
+      meme.title = memeTitle.parsed;
+      // @ts-expect-error - Realm is a fuck
+      meme.tags = [...memeTags.values()];
+      meme.tagsLength = memeTags.size;
+      meme.dateModified = new Date();
+    });
+  }, [meme, memeTags, memeTitle.parsed, realm]);
+
+  return (
+    <>
+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => goBack()} />
+        <Appbar.Content title={'Edit Meme'} />
+        <Appbar.Action
+          icon={meme.isFavorite ? 'heart' : 'heart-outline'}
+          onPress={() => favoriteMeme(realm, meme)}
+        />
+        <Appbar.Action
+          icon="delete"
+          onPress={async () => {
+            setIsSaving(true);
+            await deleteMeme(realm, meme);
+            setIsSaving(false);
+            goBack();
+          }}
+        />
+      </Appbar.Header>
+      <ScrollView
+        contentContainerStyle={[
+          editorStyles.scrollView,
+          orientation === 'portrait'
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
+          { backgroundColor: colors.background },
+        ]}>
+        <View style={editorStyles.editorView}>
+          <MemeEditor
+            memeUri={meme.uri}
+            memeTitle={memeTitle}
+            setMemeTitle={setMemeTitle}
+            memeTags={memeTags}
+            setMemeTags={setMemeTags}
+          />
+        </View>
+        <View style={editorStyles.saveButtonView}>
+          <Button
+            mode="contained"
+            icon="floppy"
+            onPress={() => {
+              setIsSaving(true);
+              handleSave();
+              setIsSaving(false);
+              goBack();
+            }}
+            disabled={!memeTitle.valid || isSaving}
+            loading={isSaving}>
+            Save
+          </Button>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+export default EditMeme;