Create new gallery & delete gallery

apps/mobile/src/components/Gallery/DeleteGalleryBottomSheet.tsx

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { View } from 'react-native';
+import { graphql, useFragment } from 'react-relay';
+import useDeleteGallery from 'shared/hooks/useDeleteGallery';
+
+import { Button } from '~/components/Button';
+import { Typography } from '~/components/Typography';
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
+import { DeleteGalleryBottomSheet$key } from '~/generated/DeleteGalleryBottomSheet.graphql';
+import { contexts } from '~/shared/analytics/constants';
+
+type Props = {
+  galleryRef: DeleteGalleryBottomSheet$key;
+};
+
+export default function DeleteGalleryBottomSheet({ galleryRef }: Props) {
+  const gallery = useFragment(
+    graphql`
+      fragment DeleteGalleryBottomSheet on Gallery {
+        dbid
+      }
+    `,
+    galleryRef
+  );
+  const deleteGallery = useDeleteGallery();
+  const { hideBottomSheetModal } = useBottomSheetModalActions();
+
+  const handleBack = useCallback(() => {
+    hideBottomSheetModal();
+  }, [hideBottomSheetModal]);
+
+  const handleDelete = useCallback(() => {
+    deleteGallery(gallery.dbid);
+    hideBottomSheetModal();
+  }, [deleteGallery, gallery, hideBottomSheetModal]);
+
+  return (
+    <View className="flex flex-col space-y-6">
+      <View className="flex flex-col space-y-4">
+        <Typography
+          className="text-lg text-black-900 dark:text-offWhite"
+          font={{ family: 'ABCDiatype', weight: 'Bold' }}
+        >
+          Delete gallery
+        </Typography>
+        <Typography
+          className="text-lg text-black-900 dark:text-offWhite"
+          font={{ family: 'ABCDiatype', weight: 'Regular' }}
+        >
+          Are you sure you want to delete this gallery?
+        </Typography>
+      </View>
+
+      <View className="space-y-2">
+        <Button
+          onPress={handleDelete}
+          text="DELETE"
+          eventElementId="Delete Gallery Button"
+          eventName="Delete Gallery"
+          eventContext={contexts.UserGallery}
+        />
+        <Button
+          onPress={handleBack}
+          variant="secondary"
+          text="CANCEL"
+          eventElementId="Cancel Delete Gallery Button"
+          eventName="Cancel Delete Gallery"
+          eventContext={contexts.UserGallery}
+        />
+      </View>
+    </View>
+  );
+}

apps/mobile/src/components/Gallery/PublishGallery/PublishGallery.tsx

@@ -0,0 +1,108 @@
+import { useNavigation } from '@react-navigation/native';
+import { useCallback } from 'react';
+import { TextInput, View } from 'react-native';
+import { graphql, useFragment } from 'react-relay';
+
+import { BackButton } from '~/components/BackButton';
+import { Button } from '~/components/Button';
+import { BaseM } from '~/components/Text';
+import { Typography } from '~/components/Typography';
+import { useBottomSheetModalActions } from '~/contexts/BottomSheetModalContext';
+import { useGalleryEditorActions } from '~/contexts/GalleryEditor/GalleryEditorContext';
+import { PublishGalleryFragment$key } from '~/generated/PublishGalleryFragment.graphql';
+import { RootStackNavigatorProp } from '~/navigation/types';
+
+import { PublishGalleryBottomSheet } from './PublishGalleryBottomSheet';
+import { PublishGalleryPreview } from './PublishGalleryPreview';
+
+type Props = {
+  galleryRef: PublishGalleryFragment$key;
+};
+
+export function PublishGallery({ galleryRef }: Props) {
+  const gallery = useFragment(
+    graphql`
+      fragment PublishGalleryFragment on Gallery {
+        ...PublishGalleryPreviewFragment
+      }
+    `,
+    galleryRef
+  );
+
+  const { galleryName, setGalleryName, galleryDescription, setGalleryDescription, saveGallery } =
+    useGalleryEditorActions();
+  const { showBottomSheetModal, hideBottomSheetModal } = useBottomSheetModalActions();
+  const navigation = useNavigation<RootStackNavigatorProp>();
+
+  const handleSaveGallery = useCallback(async () => {
+    hideBottomSheetModal();
+    await saveGallery();
+    navigation.navigate('MainTabs', {
+      screen: 'HomeTab',
+      params: { screen: 'Home', params: { screen: 'For You', params: {} } },
+    });
+  }, [hideBottomSheetModal, navigation, saveGallery]);
+
+  const handlePublish = useCallback(() => {
+    showBottomSheetModal({
+      content: <PublishGalleryBottomSheet onPublish={handleSaveGallery} />,
+    });
+  }, [handleSaveGallery, showBottomSheetModal]);
+
+  return (
+    <>
+      <View className="p-4 flex-row items-center justify-between">
+        <BackButton />
+
+        <View className="flex-row gap-2">
+          <Button
+            onPress={handlePublish}
+            text="Publish"
+            eventElementId={null}
+            eventName={null}
+            eventContext={null}
+            size="xs"
+            fontWeight="Bold"
+          />
+        </View>
+      </View>
+      <View className="space-y-6">
+        <View className="flex-col items-center">
+          <TextInput
+            className="text-[32px] leading-[36px] text-metal dark:text-white"
+            onChangeText={setGalleryName}
+            placeholder="My Gallery"
+            style={{
+              fontFamily: 'GTAlpinaLight',
+            }}
+            autoCorrect={false}
+            spellCheck={false}
+          >
+            <Typography
+              font={{
+                family: 'GTAlpina',
+                weight: 'Light',
+              }}
+              className="text-[32px] leading-[36px] text-black-900 dark:text-white"
+            >
+              {galleryName}
+            </Typography>
+          </TextInput>
+        </View>
+        <View className="w-[300] mx-auto">
+          <PublishGalleryPreview galleryRef={gallery} />
+        </View>
+        <View className="items-center">
+          <TextInput
+            onChangeText={setGalleryDescription}
+            placeholder="Add a description (optional)"
+            className="text-metal"
+            multiline
+          >
+            <BaseM classNameOverride="text-metal leading-1">{galleryDescription}</BaseM>
+          </TextInput>
+        </View>
+      </View>
+    </>
+  );
+}

apps/mobile/src/components/Gallery/PublishGallery/PublishGalleryBottomSheet.tsx

@@ -0,0 +1,98 @@
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import clsx from 'clsx';
+import { useColorScheme } from 'nativewind';
+import { useCallback, useState } from 'react';
+import { KeyboardAvoidingView, View } from 'react-native';
+import { contexts } from 'shared/analytics/constants';
+import colors from 'shared/theme/colors';
+
+import { Button } from '~/components/Button';
+import { Typography } from '~/components/Typography';
+import { useToastActions } from '~/contexts/ToastContext';
+
+type Props = {
+  onPublish: () => void;
+};
+
+export function PublishGalleryBottomSheet({ onPublish }: Props) {
+  const { colorScheme } = useColorScheme();
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const { pushToast } = useToastActions();
+
+  const handlePostAndPublish = useCallback(() => {
+    // handle post and publish
+    pushToast({
+      message: 'Post in progress',
+    });
+  }, [pushToast]);
+
+  return (
+    <KeyboardAvoidingView
+      behavior="padding"
+      style={{
+        backgroundColor: colorScheme === 'dark' ? colors.black['900'] : colors.white,
+      }}
+    >
+      <View className="flex flex-col space-y-6">
+        <View className="flex flex-col space-y-6">
+          <Typography
+            className="text-lg text-black-900 dark:text-offWhite"
+            font={{ family: 'ABCDiatype', weight: 'Bold' }}
+          >
+            Publish
+          </Typography>
+          <Typography
+            className="text-black-900 dark:text-offWhite"
+            font={{ family: 'ABCDiatype', weight: 'Regular' }}
+          >
+            Share your Gallery in a post to showcase your collection to collectors and creators.
+          </Typography>
+
+          <View
+            className={clsx(
+              'relative border bg-faint dark:bg-black-900 p-3',
+              isInputFocused
+                ? 'border-porcelain dark:border-black-500'
+                : 'border-transparent dark:border-transparent'
+            )}
+            style={{
+              minHeight: 117,
+              height: 'auto',
+            }}
+          >
+            <BottomSheetTextInput
+              className="p-3 text-sm"
+              selectionColor={colorScheme === 'dark' ? colors.white : colors.black['800']}
+              placeholderTextColor={colorScheme === 'dark' ? colors.metal : colors.shadow}
+              multiline
+              style={{
+                color: colorScheme === 'dark' ? colors.white : colors.black['800'],
+              }}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+              placeholder="Add an optional caption"
+            />
+          </View>
+        </View>
+
+        <View className="space-y-2">
+          <Button
+            onPress={handlePostAndPublish}
+            text="Post + publish"
+            eventElementId="Post and Publish Gallery Button"
+            eventName="Post and Publish Gallery"
+            eventContext={contexts.UserGallery}
+          />
+          <Button
+            onPress={onPublish}
+            variant="secondary"
+            text="just publish"
+            eventElementId="Publish Gallery Button"
+            eventName="Publish Gallery"
+            eventContext={contexts.UserGallery}
+          />
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}