Add meme-adding logic

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

src/components/memes/index.ts

@@ -0,0 +1,3 @@
+export { default as MemeEditor } from './memeEditor';
+export { default as MemeTagSearchModal } from './memeTagSearchModal';
+export { default as MemeTagSelector } from './memeTagSelector';

src/components/memes/memeEditor.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { HelperText, TextInput } from 'react-native-paper';
+import { Image } from 'react-native';
+import { useDimensions } from '../../contexts';
+import LoadingView from '../loadingView';
+import { MemeTagSelector } from '.';
+import { Tag } from '../../database';
+
+const MemeEditor = ({
+  imageUri,
+  memeTitle,
+  setMemeTitle,
+  memeDescription,
+  setMemeDescription,
+  memeTags,
+  setMemeTags,
+  memeTitleError,
+  setMemeTitleError,
+}: {
+  imageUri: string[];
+  memeTitle: string;
+  setMemeTitle: (name: string) => void;
+  memeDescription: string;
+  setMemeDescription: (description: string) => void;
+  memeTags: Map<string, Tag>;
+  setMemeTags: (tags: Map<string, Tag>) => void;
+  memeTitleError: string | undefined;
+  setMemeTitleError: (error: string | undefined) => void;
+}) => {
+  const { dimensions, fixed, responsive } = useDimensions();
+
+  const [imageWidth, setImageWidth] = useState<number>();
+  const [imageHeight, setImageHeight] = useState<number>();
+
+  useEffect(() => {
+    Image.getSize(imageUri[0], (width, height) => {
+      const paddedWidth = dimensions.width - dimensions.width * 0.08;
+      setImageWidth(paddedWidth);
+      setImageHeight((paddedWidth / width) * height);
+    });
+  }, [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 (
+    <>
+      <TextInput
+        mode="outlined"
+        label="Title"
+        value={memeTitle}
+        onChangeText={handleMemeTitleChange}
+        error={!!memeTitleError}
+        selectTextOnFocus
+      />
+      <HelperText type="error" visible={!!memeTitleError}>
+        {memeTitleError}
+      </HelperText>
+      <Image
+        source={{ uri: imageUri[0] }}
+        style={{
+          width: imageWidth,
+          height: imageHeight,
+          marginBottom: fixed.verticalScale(10),
+          borderRadius: fixed.verticalScale(5),
+        }}
+      />
+      <MemeTagSelector
+        memeTags={memeTags}
+        setMemeTags={setMemeTags}
+        style={{
+          marginBottom: responsive.verticalScale(10),
+        }}
+      />
+      <TextInput
+        mode="outlined"
+        label="Description"
+        multiline
+        numberOfLines={6}
+        style={{
+          marginBottom: responsive.verticalScale(15),
+        }}
+        value={memeDescription}
+        onChangeText={setMemeDescription}
+      />
+    </>
+  );
+};
+
+export default MemeEditor;

src/components/memes/memeTagSearchModal.tsx

@@ -0,0 +1,128 @@
+import React, { useRef, useState } from 'react';
+import { TagChip } from '../tags';
+import { Tag } from '../../database';
+import { useQuery, useRealm } from '@realm/react';
+import { TAG_SORT, tagSortQuery } from '../../types';
+import { Chip, Modal, Portal, Searchbar, useTheme } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+import { useDimensions } from '../../contexts';
+import styles from '../../styles';
+import { FlashList } from '@shopify/flash-list';
+
+const memeTagSearchModalStyles = StyleSheet.create({
+  modal: {
+    position: 'absolute',
+    bottom: 0,
+  },
+});
+
+const MemeTagSearchModal = ({
+  visible,
+  setVisible,
+  memeTags,
+  setMemeTags,
+}: {
+  visible: boolean;
+  setVisible: (visible: boolean) => void;
+  memeTags: Map<string, Tag>;
+  setMemeTags: (tags: Map<string, Tag>) => void;
+}) => {
+  const { colors } = useTheme();
+  const { fixed, responsive } = useDimensions();
+  const realm = useRealm();
+
+  const flashListRef = useRef<FlashList<Tag>>(null);
+
+  const [search, setSearch] = useState('');
+
+  const handleSearch = (newSearch: string) => {
+    flashListRef.current?.scrollToOffset({ offset: 0 });
+    setSearch(newSearch);
+  };
+
+  const tags = useQuery<Tag>(
+    Tag.schema.name,
+    collection =>
+      collection
+        .filtered(`name CONTAINS[c] "${search}"`)
+        .sorted(tagSortQuery(TAG_SORT.DATE_MODIFIED), true),
+    [search],
+  );
+
+  const handleTagPress = (tag: Tag) => {
+    const id = tag.id.toHexString();
+    memeTags.delete(id) || memeTags.set(id, tag);
+    setMemeTags(new Map(memeTags));
+  };
+
+  const handleCreateTag = (name: string) => {
+    let tag: Tag | undefined;
+    realm.write(() => {
+      tag = realm.create<Tag>(Tag.schema.name, {
+        name,
+      });
+    });
+    if (!tag) return;
+    memeTags.set(tag.id.toHexString(), tag);
+    setMemeTags(new Map(memeTags));
+    setSearch(tag.name);
+  };
+
+  return (
+    <Portal>
+      <Modal
+        visible={visible}
+        contentContainerStyle={[
+          {
+            padding: fixed.horizontalScale(10),
+            borderTopLeftRadius: fixed.verticalScale(20),
+            borderTopRightRadius: fixed.verticalScale(20),
+            backgroundColor: colors.surface,
+          },
+          styles.fullWidth,
+          memeTagSearchModalStyles.modal,
+        ]}
+        onDismiss={() => setVisible(false)}>
+        <Searchbar
+          placeholder="Search or Create Tags"
+          onChangeText={handleSearch}
+          value={search}
+          style={{
+            marginBottom: responsive.verticalScale(10),
+          }}
+          autoFocus
+        />
+        <FlashList
+          ref={flashListRef}
+          data={tags}
+          extraData={memeTags}
+          keyExtractor={tag => tag.id.toHexString()}
+          horizontal
+          estimatedItemSize={120}
+          showsHorizontalScrollIndicator={false}
+          keyboardShouldPersistTaps={'always'}
+          renderItem={({ item: tag }) => (
+            <TagChip
+              tag={tag}
+              style={{
+                marginRight: fixed.horizontalScale(8),
+              }}
+              onPress={() => handleTagPress(tag)}
+              active={memeTags.has(tag.id.toHexString())}
+            />
+          )}
+          ListEmptyComponent={() => (
+            <Chip
+              icon="plus"
+              mode="outlined"
+              onPress={() => handleCreateTag(search.replaceAll(/\s+/g, ''))}>
+              Create Tag #{search.replaceAll(/\s+/g, '')}
+            </Chip>
+          )}
+        />
+      </Modal>
+    </Portal>
+  );
+};
+
+export default MemeTagSearchModal;

src/components/memes/memeTagSelector.tsx

@@ -0,0 +1,70 @@
+import React, { ComponentProps, useState } from 'react';
+import { View } from 'react-native';
+import { Chip } from 'react-native-paper';
+import { TagChip } from '../tags';
+import { Tag } from '../../database';
+import { useDimensions } from '../../contexts';
+import { MemeTagSearchModal } from '.';
+import { FlashList } from '@shopify/flash-list';
+
+const MemeTagSelector = ({
+  memeTags,
+  setMemeTags,
+  ...props
+}: {
+  memeTags: Map<string, Tag>;
+  setMemeTags: (tags: Map<string, Tag>) => void;
+} & ComponentProps<typeof View>) => {
+  const { fixed, dimensions } = useDimensions();
+
+  const [tagSearchModalVisible, setTagSearchModalVisible] = useState(false);
+
+  const handleTagPress = (tag: Tag) => {
+    const id = tag.id.toHexString();
+    memeTags.delete(id) || memeTags.set(id, tag);
+    setMemeTags(new Map(memeTags));
+  };
+
+  return (
+    <>
+      <View {...props}>
+        <FlashList
+          data={[...memeTags.values()]}
+          extraData={memeTags}
+          keyExtractor={tag => tag.id.toHexString()}
+          horizontal
+          estimatedItemSize={120}
+          showsHorizontalScrollIndicator={false}
+          renderItem={({ item: tag }) => (
+            <TagChip
+              tag={tag}
+              onPress={() => handleTagPress(tag)}
+              style={{
+                marginRight: fixed.horizontalScale(4),
+              }}
+            />
+          )}
+          ListFooterComponent={() => (
+            <Chip
+              icon="plus"
+              mode="outlined"
+              onPress={() => setTagSearchModalVisible(true)}
+              style={{
+                marginRight: dimensions.width * 0.92 - 105.8,
+              }}>
+              Add Tag
+            </Chip>
+          )}
+        />
+      </View>
+      <MemeTagSearchModal
+        visible={tagSearchModalVisible}
+        setVisible={setTagSearchModalVisible}
+        memeTags={memeTags}
+        setMemeTags={setMemeTags}
+      />
+    </>
+  );
+};
+
+export default MemeTagSelector;