feat: handle image uploads

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;