feat: handle image uploads (#4)

## Demo

https://github.com/user-attachments/assets/9ccab570-ed6e-4223-92a0-ac039cb373ee

## Description

In the demo video, there's an issue where updates are not happening
immediately. In reality, there's an intermittent issue on iOS where the
Postgres subscription set up in Supabase gets disconnected.

Additionally, please add the functionality to upload multiple images in
posts and replies. For posts, ensure that the images are recognized
correctly and allow users to change images if needed.

app/(app)/post/[id]/index.tsx

@@ -24,6 +24,8 @@ import {useAppLogic} from '../../../../src/providers/AppLogicProvider';
 import {fetchDeletePost, fetchPostById} from '../../../../src/apis/postQueries';
 import {supabase} from '../../../../src/supabase';
 import {toggleLike} from '../../../../src/apis/likeQueries';
+import ParsedText from 'react-native-parsed-text';
+import ImageCarousel from '../../../../src/components/uis/ImageCarousel';
 
 const Container = styled.View`
   background-color: ${({theme}) => theme.bg.basic};
@@ -220,7 +222,30 @@ export default function PostDetails(): JSX.Element {
                   </View>
                 </Pressable>
               ) : null}
-              <Typography.Body1>{post.content}</Typography.Body1>
+              <ParsedText
+                parse={[
+                  {
+                    type: 'url',
+                    onPress: (url) => openURL(url),
+                    style: css`
+                      color: ${theme.role.link};
+                    `,
+                  },
+                ]}
+                selectable
+                style={css`
+                  color: ${theme.text.basic};
+                  font-size: 16px;
+                  line-height: 22.8px;
+                `}
+              >
+                {post.content}
+              </ParsedText>
+
+              {post.images && post.images.length > 0 ? (
+                <ImageCarousel borderRadius={8} images={post.images} />
+              ) : null}
+
               <ControlItem
                 hasLiked={hasLiked}
                 likeCnt={postLikes}

app/(app)/post/[id]/replies.tsx

@@ -9,7 +9,11 @@ import {t} from '../../../../src/STRINGS';
 import ReplyItem from '../../../../src/components/uis/ReplyItem';
 import ReplyInput from '../../../../src/components/uis/ReplyInput';
 import {ImagePickerAsset} from 'expo-image-picker';
-import {supabase} from '../../../../src/supabase';
+import {
+  getPublicUrlFromPath,
+  supabase,
+  uploadFileToSupabase,
+} from '../../../../src/supabase';
 import {
   fetchCreateReply,
   fetchReplyById,
@@ -40,6 +44,7 @@ export default function Replies({
   const [page, setPage] = useState(0);
   const [replies, setReplies] = useState<ReplyWithJoins[]>([]);
   const [loadingMore, setLoadingMore] = useState(false);
+  const [isCreateReplyInFlight, setIsCreateReplyInFlight] = useState(false);
 
   const {error, isValidating, mutate} = useSWR<ReplyWithJoins[]>(
     ['replies', postId, page],
@@ -115,16 +120,37 @@ export default function Replies({
   const handleCreateReply = async () => {
     if (!authId || !postId) return;
 
+    setIsCreateReplyInFlight(true);
+
     try {
+      const imageUploadPromises = assets.map(async (asset) => {
+        const destPath = `${asset.type === 'video' ? 'videos' : 'images'}/${Date.now()}_${asset.fileName}`;
+        const file = asset.uri;
+
+        return await uploadFileToSupabase({
+          uri: file,
+          fileType: asset.type === 'video' ? 'Video' : 'Image',
+          bucket: 'images',
+          destPath,
+        });
+      });
+
+      const images = await Promise.all(imageUploadPromises);
+
       const newReply = await fetchCreateReply({
         reply: {
           message: reply,
           user_id: authId,
           post_id: postId,
         },
-        images: assets.map((asset) => ({
-          url: asset.uri,
-        })),
+        images: images
+          .filter((el) => !!el)
+          .map((el) => ({
+            ...el,
+            image_url: el?.image_url
+              ? getPublicUrlFromPath(el.image_url)
+              : undefined,
+          })),
       });
 
       mutate(newReply ? [newReply, ...replies] : replies, false);
@@ -133,6 +159,7 @@ export default function Replies({
     } finally {
       setReply('');
       setAssets([]);
+      setIsCreateReplyInFlight(false);
     }
   };
 
@@ -144,7 +171,7 @@ export default function Replies({
 
   const handleRefresh = () => {
     setReplies([]);
-    setPage(1);
+    setPage(0);
     mutate();
   };
 
@@ -264,6 +291,7 @@ export default function Replies({
           style={css`
             padding: 0;
           `}
+          loading={isCreateReplyInFlight}
           styles={{
             container: css`
               border-radius: 0;