Add variable storage locations & batch adding

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

src/components/memes/memeEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { HelperText, TextInput } from 'react-native-paper';
+import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
 import { Image } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks/lib/useImageDimensions';
@@ -13,6 +13,10 @@ const memeEditorStyles = {
     marginBottom: 15,
     borderRadius: 5,
   },
+  uri: {
+    marginBottom: 15,
+    marginHorizontal: 5,
+  },
   memeTagSelector: {
     marginBottom: 10,
   },
@@ -23,27 +27,30 @@ const memeEditorStyles = {
 
 const MemeEditor = ({
   memeUri,
-  memeUriError,
-  setMemeUriError,
+  memeFilename,
+  memeError,
+  setMemeError,
   memeTitle,
   setMemeTitle,
   memeTags,
   setMemeTags,
 }: {
   memeUri: string;
-  memeUriError: Error | undefined;
-  setMemeUriError: (error: Error | undefined) => void;
+  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;
 }) => {
   const { width } = useSafeAreaFrame();
+  const { colors } = useTheme();
 
   const { dimensions, loading, error } = useImageDimensions({ uri: memeUri });
-  useEffect(() => setMemeUriError(error), [error, setMemeUriError]);
+  useEffect(() => setMemeError(error), [error, setMemeError]);
 
-  if (!memeUriError && (loading || !dimensions)) return <LoadingView />;
+  if (!memeError && (loading || !dimensions)) return <LoadingView />;
 
   return (
     <>
@@ -58,7 +65,7 @@ const MemeEditor = ({
       <HelperText type="error" visible={!memeTitle.valid}>
         {memeTitle.error}
       </HelperText>
-      {memeUriError || !dimensions ? (
+      {memeError || !dimensions ? (
         <MemeFail
           style={[
             {
@@ -88,6 +95,12 @@ const MemeEditor = ({
           resizeMode="contain"
         />
       )}
+      <Text
+        variant="bodySmall"
+        style={[memeEditorStyles.uri, { color: colors.onSurfaceDisabled }]}
+        numberOfLines={1}>
+        {memeFilename}
+      </Text>
       <MemeTagSelector
         memeTags={memeTags}
         setMemeTags={setMemeTags}

src/components/memes/memeViewItem.tsx

@@ -3,9 +3,12 @@ import { ImageZoom } from '@likashefqet/react-native-image-zoom';
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
+import { AndroidScoped } from 'react-native-file-access';
 import LoadingView from '../loadingView';
 import { Meme } from '../../database';
 import MemeFail from './memeFail';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../state';
 
 const memeViewItemStyles = StyleSheet.create({
   view: {
@@ -16,8 +19,14 @@ const memeViewItemStyles = StyleSheet.create({
 
 const MemeViewItem = ({ meme }: { meme: Meme }) => {
   const { height, width } = useSafeAreaFrame();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useImageDimensions({ uri });
 
   if (!error && (loading || !dimensions)) {
     return (
@@ -39,7 +48,7 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
         />
       ) : (
         <ImageZoom
-          source={{ uri: meme.uri }}
+          source={{ uri }}
           style={
             dimensions.aspectRatio > width / (height - 128)
               ? {

src/components/memes/memesList/memesGridItem.tsx

@@ -3,6 +3,7 @@ import { Image, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
+import { AndroidScoped } from 'react-native-file-access';
 import { Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { MemeFail } from '..';
@@ -21,8 +22,14 @@ const MemesGridItem = ({
   const gridColumns = useSelector(
     (state: RootState) => state.settings.gridColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useImageDimensions({ uri });
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -38,7 +45,7 @@ const MemesGridItem = ({
         />
       ) : (
         <Image
-          source={{ uri: meme.uri }}
+          source={{ uri }}
           style={[
             {
               width: (width * 0.92 - 5) / gridColumns,

src/components/memes/memesList/memesListItem.tsx

@@ -3,8 +3,11 @@ import { Image, StyleSheet, View } from 'react-native';
 import { Text, TouchableRipple } from 'react-native-paper';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
+import { AndroidScoped } from 'react-native-file-access';
+import { useSelector } from 'react-redux';
 import { Meme } from '../../../database';
 import { MemeFail } from '..';
+import { RootState } from '../../../state';
 
 const memesListItemStyles = StyleSheet.create({
   view: {
@@ -40,8 +43,14 @@ const MemesListItem = ({
   focusMeme: (index: number) => void;
 }) => {
   const { width } = useSafeAreaFrame();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useImageDimensions({ uri });
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -53,7 +62,7 @@ const MemesListItem = ({
         {error ? (
           <MemeFail style={memesListItemStyles.image} />
         ) : (
-          <Image source={{ uri: meme.uri }} style={memesListItemStyles.image} />
+          <Image source={{ uri }} style={memesListItemStyles.image} />
         )}
         <View
           style={[

src/components/memes/memesList/memesMasonryItem.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { Image, StyleSheet, TouchableHighlight } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { AndroidScoped } from 'react-native-file-access';
+import { useImageDimensions } from '@react-native-community/hooks';
 import { Meme } from '../../../database';
 import { RootState } from '../../../state';
-import { useImageDimensions } from '@react-native-community/hooks';
 import { MemeFail } from '..';
 import { getFontAwesome5IconSize } from '../../../utilities';
 
@@ -31,8 +32,14 @@ const MemesMasonryItem = ({
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
   );
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const storageUri = useSelector(
+    (state: RootState) => state.settings.storageUri,
+  )!;
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });
+  const uri = AndroidScoped.appendPath(storageUri, meme.filename);
+
+  const { dimensions, loading, error } = useImageDimensions({ uri });
 
   if (!error && (loading || !dimensions)) return <></>;
 
@@ -53,7 +60,7 @@ const MemesMasonryItem = ({
         />
       ) : (
         <Image
-          source={{ uri: meme.uri }}
+          source={{ uri }}
           style={[
             memeMasonryItemStyles.image,
             {