Refactor validation

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

src/components/memes/memeEditor.tsx

@@ -5,6 +5,11 @@ import { useDimensions } from '../../contexts';
 import LoadingView from '../loadingView';
 import { MemeTagSelector } from '.';
 import { Tag } from '../../database';
+import {
+  StringValidationResult,
+  validateMemeDescription,
+  validateMemeTitle,
+} from '../../utilities';
 
 const MemeEditor = ({
   imageUri,
@@ -14,18 +19,14 @@ const MemeEditor = ({
   setMemeDescription,
   memeTags,
   setMemeTags,
-  memeTitleError,
-  setMemeTitleError,
 }: {
   imageUri: string[];
-  memeTitle: string;
-  setMemeTitle: (name: string) => void;
-  memeDescription: string;
-  setMemeDescription: (description: string) => void;
+  memeTitle: StringValidationResult;
+  setMemeTitle: (name: StringValidationResult) => void;
+  memeDescription: StringValidationResult;
+  setMemeDescription: (description: StringValidationResult) => void;
   memeTags: Map<string, Tag>;
   setMemeTags: (tags: Map<string, Tag>) => void;
-  memeTitleError: string | undefined;
-  setMemeTitleError: (error: string | undefined) => void;
 }) => {
   const { dimensions, fixed, responsive } = useDimensions();
 
@@ -40,16 +41,6 @@ const MemeEditor = ({
     });
   }, [dimensions.width, imageUri]);
 
-  const handleMemeTitleChange = (name: string) => {
-    setMemeTitle(name);
-    if (name.length === 0) {
-      setMemeTitleError('Meme title cannot be empty');
-    } else {
-      // eslint-disable-next-line unicorn/no-useless-undefined
-      setMemeTitleError(undefined);
-    }
-  };
-
   if (!imageWidth || !imageHeight) return <LoadingView />;
 
   return (
@@ -57,13 +48,13 @@ const MemeEditor = ({
       <TextInput
         mode="outlined"
         label="Title"
-        value={memeTitle}
-        onChangeText={handleMemeTitleChange}
-        error={!!memeTitleError}
+        value={memeTitle.raw}
+        onChangeText={title => setMemeTitle(validateMemeTitle(title))}
+        error={!memeTitle.valid}
         selectTextOnFocus
       />
-      <HelperText type="error" visible={!!memeTitleError}>
-        {memeTitleError}
+      <HelperText type="error" visible={!memeTitle.valid}>
+        {memeTitle.error}
       </HelperText>
       <Image
         source={{ uri: imageUri[0] }}
@@ -89,8 +80,10 @@ const MemeEditor = ({
         style={{
           marginBottom: responsive.verticalScale(15),
         }}
-        value={memeDescription}
-        onChangeText={setMemeDescription}
+        value={memeDescription.raw}
+        onChangeText={description =>
+          setMemeDescription(validateMemeDescription(description))
+        }
       />
     </>
   );