fix: user page

crossplatformkorea · Sep 27, 2024 · 89e3c36 · 89e3c36
1 parent e0401fd
commit 89e3c36
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 54 deletions.
diff --git a/app/(home)/(tabs)/my.tsx b/app/(home)/(tabs)/my.tsx
@@ -27,7 +27,7 @@ const ProfileHeader = styled.View`
 `;
 
 const Content = styled.View`
-  padding: 24px;
+  padding: 16px;
 `;
 
 const UserAvatar = styled.Image`

diff --git a/app/[displayName].tsx → app/(home)/[displayName].tsx b/app/[displayName].tsx → app/(home)/[displayName].tsx
@@ -1,26 +1,26 @@
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import styled from '@emotion/native';
 import {Stack, useLocalSearchParams} from 'expo-router';
 import {Button, Icon, Typography, useDooboo} from 'dooboo-ui';
 import {css} from '@emotion/native';
-import {Pressable} from 'react-native';
+import {Pressable, RefreshControl} from 'react-native';
 import ErrorBoundary from 'react-native-error-boundary';
-import FallbackComponent from '../src/components/uis/FallbackComponent';
-import CustomScrollView from '../src/components/uis/CustomScrollView';
-import {IC_ICON} from '../src/icons';
-import {openURL, removeLeadingAt} from '../src/utils/common';
-import DoobooStats from '../src/components/fragments/DoobooStats';
-import {t} from '../src/STRINGS';
-import {fetchUserWithDisplayName} from '../src/apis/profileQueries';
-import CustomLoadingIndicator from '../src/components/uis/CustomLoadingIndicator';
+import FallbackComponent from '../../src/components/uis/FallbackComponent';
+import CustomScrollView from '../../src/components/uis/CustomScrollView';
+import {IC_ICON} from '../../src/icons';
+import {openURL, removeLeadingAt} from '../../src/utils/common';
+import DoobooStats from '../../src/components/fragments/DoobooStats';
+import {t} from '../../src/STRINGS';
+import {fetchUserWithDisplayName} from '../../src/apis/profileQueries';
+import CustomLoadingIndicator from '../../src/components/uis/CustomLoadingIndicator';
 import {useRecoilValue} from 'recoil';
-import {authRecoilState} from '../src/recoil/atoms';
+import {authRecoilState} from '../../src/recoil/atoms';
 import {
   fetchFollowCounts,
   fetchFollowUser,
   fetchIsAFollowing,
-} from '../src/apis/followQueries';
-import useSupabase from '../src/hooks/useSupabase';
+} from '../../src/apis/followQueries';
+import useSupabase from '../../src/hooks/useSupabase';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -148,62 +148,83 @@ export default function DisplayName(): JSX.Element {
     }
   };
 
-  useEffect(() => {
-    async function fetchData() {
-      if (!supabase) return;
-
-      try {
-        const {profile, userTags} = await fetchUserWithDisplayName({
-          displayName,
-          supabase,
-        });
-
-        setUser(profile);
-        setTags(userTags);
+  const fetchData = useCallback(async () => {
+    if (!supabase) return;
 
-        // Check if the current user is following this profile
-        if (authId) {
-          if (profile.id !== authId) {
-            const isUserFollowing = await fetchIsAFollowing({
-              authId,
-              followingId: profile.id,
-              supabase,
-            });
+    try {
+      const {profile, userTags} = await fetchUserWithDisplayName({
+        displayName,
+        supabase,
+      });
 
-            setIsFollowing(isUserFollowing);
-          }
+      setUser(profile);
+      setTags(userTags);
 
-          const followingsData = await fetchFollowCounts({
-            userId: profile.id,
+      // Check if the current user is following this profile
+      if (authId) {
+        if (profile.id !== authId) {
+          const isUserFollowing = await fetchIsAFollowing({
+            authId,
+            followingId: profile.id,
             supabase,
           });
 
-          setFollowingCount(followingsData.followingCount);
+          setIsFollowing(isUserFollowing);
         }
-      } catch (err: any) {
-        throw new Error(err.message);
-      } finally {
-        setLoading(false);
+
+        const followingsData = await fetchFollowCounts({
+          userId: profile.id,
+          supabase,
+        });
+
+        setFollowingCount(followingsData.followerCount);
       }
+    } catch (err: any) {
+      throw new Error(err.message);
+    } finally {
+      setLoading(false);
     }
+  }, [supabase, displayName, authId]);
 
+  const onRefresh = async () => {
+    fetchData();
+  };
+
+  useEffect(() => {
     fetchData();
-  }, [authId, displayName, supabase]);
+  }, [fetchData]);
 
   if (loading) {
     return (
       <>
-        <Stack.Screen options={{title: displayName || t('common.profile')}} />
+        <Stack.Screen
+          options={{
+            headerShown: true,
+            title: displayName || t('common.profile'),
+          }}
+        />
         <CustomLoadingIndicator />
       </>
     );
   }
 
   return (
     <ErrorBoundary FallbackComponent={FallbackComponent}>
-      <Stack.Screen options={{title: displayName || t('common.profile')}} />
       <Container>
-        <CustomScrollView bounces={false}>
+        <Stack.Screen
+          options={{
+            headerShown: true,
+            title: displayName || t('common.profile'),
+          }}
+        />
+        <CustomScrollView
+          bounces={false}
+          scrollViewProps={{
+            refreshControl: (
+              <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+            ),
+          }}
+        >
           <ProfileHeader>
             <UserAvatar
               style={css`

diff --git a/app/(home)/_layout.tsx b/app/(home)/_layout.tsx
@@ -46,6 +46,7 @@ export default function Layout() {
                   : css`
                       border-radius: 48px;
                       margin-left: -8px;
+                      margin-top: 4px;
                     `
               }
             >

diff --git a/app/(home)/onboarding.tsx b/app/(home)/onboarding.tsx
@@ -214,6 +214,7 @@ export default function Onboarding(): JSX.Element {
                 top: 8,
               }}
               style={css`
+                margin-top: 4px;
                 align-items: center;
                 justify-content: center;
                 padding: 2px;

diff --git a/app/(home)/post/[id]/index.tsx b/app/(home)/post/[id]/index.tsx
@@ -331,7 +331,7 @@ export default function PostDetails(): JSX.Element {
     <ErrorBoundary FallbackComponent={FallbackComponent}>
       <Stack.Screen
         options={{
-          title: post?.title || t('common.post'),
+          title: (post?.title || t('common.post')).substring(0, 29),
           headerRight: () =>
             authId ? (
               <View
@@ -346,6 +346,7 @@ export default function PostDetails(): JSX.Element {
                   onPress={handlePressMore}
                   activeOpacity={0}
                   style={css`
+                    margin-top: 4px;
                     margin-right: -8px;
                     border-radius: 48px;
                   `}

diff --git a/app/(home)/post/[id]/update.tsx b/app/(home)/post/[id]/update.tsx
@@ -312,10 +312,12 @@ export default function PostUpdate(): JSX.Element {
                 top: 8,
               }}
               style={css`
-                align-items: center;
-                justify-content: center;
+                margin-top: 4px;
                 margin-right: -4px;
                 border-radius: 99px;
+
+                align-items: center;
+                justify-content: center;
               `}
             >
               {isSubmitting ? (

diff --git a/app/(home)/post/write.tsx b/app/(home)/post/write.tsx
@@ -125,10 +125,12 @@ export default function PostWrite(): JSX.Element {
               onPress={handleSubmit(handleWritePost)}
               activeOpacity={0}
               style={css`
-                align-items: center;
-                justify-content: center;
+                margin-top: 4px;
                 margin-right: -4px;
                 border-radius: 99px;
+
+                align-items: center;
+                justify-content: center;
               `}
               hitSlop={{
                 bottom: 8,

diff --git a/app/(home)/settings/profile-update.tsx b/app/(home)/settings/profile-update.tsx
@@ -565,10 +565,12 @@ export default function ProfileUpdate(): JSX.Element {
               onPress={handleSubmit(handleProfileUpdate)}
               hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
               style={css`
-                align-items: center;
-                justify-content: center;
+                margin-top: 4px;
                 margin-right: -4px;
                 border-radius: 99px;
+
+                align-items: center;
+                justify-content: center;
               `}
             >
               {isSubmitting ? (