refactor: handle auth layers and migrate header

crossplatformkorea · Sep 18, 2024 · b54de79 · b54de79
1 parent f23d356
commit b54de79
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 36 deletions.
diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
@@ -8,7 +8,7 @@ export default function AuthLayout() {
   const {isSignedIn} = useAuth();
 
   if (isSignedIn) {
-    return <Redirect href={'/'} />;
+    return <Redirect href={'/(tabs)'} />;
   }
 
   return (

diff --git a/app/(home)/(tabs)/_layout.tsx b/app/(home)/(tabs)/_layout.tsx
@@ -21,9 +21,9 @@ function SettingsMenu(): JSX.Element {
       style={css`
         align-items: center;
         justify-content: center;
-        padding: 8px;
+        padding: 2px;
         border-radius: 99px;
-        margin-right: 4px;
+        margin-right: 8px;
       `}
     >
       <Icon color={theme.text.basic} name="List" size={22} />
@@ -58,6 +58,7 @@ export default function TabLayout(): JSX.Element {
 
   return (
     <Tabs
+      initialRouteName="index"
       screenOptions={{
         tabBarActiveTintColor: theme.role.primary,
         headerStyle: {backgroundColor: theme.bg.basic},

diff --git a/app/(home)/_layout.tsx b/app/(home)/_layout.tsx
@@ -2,17 +2,24 @@ import {Stack} from 'expo-router/stack';
 import {t} from '../../src/STRINGS';
 import {Icon, useDooboo} from 'dooboo-ui';
 import {RectButton} from 'react-native-gesture-handler';
-import {useRouter} from 'expo-router';
+import {Redirect, useRouter} from 'expo-router';
 import {Platform} from 'react-native';
 import {WEB_URL} from '../../src/utils/constants';
 import {css} from '@emotion/native';
+import {useAuth} from '@clerk/clerk-expo';
 
 export default function Layout() {
   const {theme} = useDooboo();
   const {back, replace} = useRouter();
+  const {isSignedIn} = useAuth();
+
+  if (!isSignedIn) {
+    return <Redirect href={'/intro'} />;
+  }
 
   return (
     <Stack
+      initialRouteName={'(tabs)'}
       screenOptions={{
         headerStyle: {backgroundColor: theme.bg.basic},
         headerTintColor: theme.text.label,
@@ -34,11 +41,9 @@ export default function Layout() {
               style={
                 Platform.OS === 'web'
                   ? css`
-                      padding: 8px;
                       border-radius: 48px;
                     `
                   : css`
-                      padding: 8px;
                       border-radius: 48px;
                       margin-left: -8px;
                     `

diff --git a/app/(home)/onboarding.tsx b/app/(home)/onboarding.tsx
@@ -31,7 +31,8 @@ import FallbackComponent from '../../src/components/uis/FallbackComponent';
 import {showAlert} from '../../src/utils/alert';
 import {RectButton} from 'react-native-gesture-handler';
 import ErrorBoundary from 'react-native-error-boundary';
-import useSupabase, { SupabaseClient } from '../../src/hooks/useSupabase';
+import useSupabase, {SupabaseClient} from '../../src/hooks/useSupabase';
+import CustomLoadingIndicator from '../../src/components/uis/CustomLoadingIndicator';
 
 const Container = styled.SafeAreaView`
   flex: 1;
@@ -178,29 +179,31 @@ export default function Onboarding(): JSX.Element {
     }
   }, [data, setValue]);
 
+  if (!user?.id) {
+    return (
+      <>
+        <Stack.Screen options={{headerShown: false}} />
+        <CustomLoadingIndicator />
+      </>
+    );
+  }
+
   if (user?.display_name) {
-    return <Redirect href={'/'} />;
+    return <Redirect href={'/(tabs)'} />;
   }
 
   if (error) {
     return <FallbackComponent />;
   }
 
-  if (!data) {
-    return (
-      <Container>
-        <ActivityIndicator size="large" color={theme.text.label} />
-      </Container>
-    );
-  }
-
   return (
     <ErrorBoundary FallbackComponent={FallbackComponent}>
       <Stack.Screen
         options={{
           title: t('onboarding.title'),
           headerRight: () => (
             <RectButton
+              activeOpacity={0}
               // @ts-ignore
               onPress={handleSubmit(handleFinishOnboarding)}
               hitSlop={{
@@ -212,7 +215,7 @@ export default function Onboarding(): JSX.Element {
               style={css`
                 align-items: center;
                 justify-content: center;
-                padding: 6px;
+                padding: 2px;
                 margin-right: -4px;
                 border-radius: 99px;
               `}

diff --git a/app/(home)/post/[id]/index.tsx b/app/(home)/post/[id]/index.tsx
@@ -60,16 +60,19 @@ export default function PostDetails(): JSX.Element {
   const post = posts.find((p) => p.id === id);
 
   useEffect(() => {
-    if (id) {
-      incrementViewCount(id);
+    if (id && supabase) {
+      incrementViewCount({
+        postId: id,
+        supabase,
+      });
 
       setPosts((prevPosts) =>
         prevPosts.map((p) =>
           p.id === id ? {...p, view_count: (p.view_count || 0) + 1} : p,
         ),
       );
     }
-  }, [id, setPosts]);
+  }, [id, setPosts, supabase]);
 
   useEffect(() => {
     if (post) {
@@ -341,9 +344,9 @@ export default function PostDetails(): JSX.Element {
                 <RectButton
                   hitSlop={{top: 20, left: 20, right: 20, bottom: 20}}
                   onPress={handlePressMore}
+                  activeOpacity={0}
                   style={css`
                     margin-right: -8px;
-                    padding: 8px;
                     border-radius: 48px;
                   `}
                 >

diff --git a/app/(home)/post/[id]/update.tsx b/app/(home)/post/[id]/update.tsx
@@ -314,7 +314,6 @@ export default function PostUpdate(): JSX.Element {
               style={css`
                 align-items: center;
                 justify-content: center;
-                padding: 6px;
                 margin-right: -4px;
                 border-radius: 99px;
               `}

diff --git a/app/(home)/post/write.tsx b/app/(home)/post/write.tsx
@@ -123,10 +123,10 @@ export default function PostWrite(): JSX.Element {
             <RectButton
               // @ts-ignore
               onPress={handleSubmit(handleWritePost)}
+              activeOpacity={0}
               style={css`
                 align-items: center;
                 justify-content: center;
-                padding: 6px;
                 margin-right: -4px;
                 border-radius: 99px;
               `}

diff --git a/app/(home)/settings/login-info.tsx b/app/(home)/settings/login-info.tsx
@@ -112,6 +112,16 @@ export default function LoginInfo(): JSX.Element {
 
       signOut();
     }
+
+    setAuth({
+      authId: null,
+      user: null,
+      blockedUserIds: [],
+      pushToken: null,
+      tags: [],
+    });
+
+    replace('/');
   };
 
   const handleWithdrawUser = async (): Promise<void> => {

diff --git a/app/(home)/settings/profile-update.tsx b/app/(home)/settings/profile-update.tsx
@@ -567,7 +567,6 @@ export default function ProfileUpdate(): JSX.Element {
               style={css`
                 align-items: center;
                 justify-content: center;
-                padding: 6px;
                 margin-right: -4px;
                 border-radius: 99px;
               `}

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -26,7 +26,7 @@ import {authRecoilState, reportModalRecoilState} from '../src/recoil/atoms';
 import {AsyncStorageKey} from '../src/utils/constants';
 import CustomLoadingIndicator from '../src/components/uis/CustomLoadingIndicator';
 import useAppState from '../src/hooks/useAppState';
-import {ClerkProvider, ClerkLoaded, useUser} from '@clerk/clerk-expo';
+import {ClerkProvider, ClerkLoaded, useUser, useAuth} from '@clerk/clerk-expo';
 import ReportModal from '../src/components/modals/ReportModal';
 import {getLocale, t} from '../src/STRINGS';
 import {fetchUserProfile} from '../src/apis/profileQueries';
@@ -48,6 +48,7 @@ Notifications.setNotificationHandler({
 function App(): JSX.Element | null {
   const {user} = useUser();
   const {assetLoaded, snackbar} = useDooboo();
+  const {signOut} = useAuth();
   const [, setAuth] = useRecoilState(authRecoilState);
   const [checkEasUpdate, setCheckEasUpdate] = useState(false);
   const {isUpdateAvailable, isUpdatePending} = useUpdates();
@@ -130,8 +131,6 @@ function App(): JSX.Element | null {
             })
             .single();
 
-          console.log('data', data);
-
           if (data) {
             existingUser = data;
           }
@@ -148,7 +147,7 @@ function App(): JSX.Element | null {
 
         if (profile) {
           if (profile?.deleted_at) {
-            await supabase.auth.signOut();
+            signOut();
 
             snackbar.open({
               text: t('common.deletedAccount'),
@@ -201,7 +200,7 @@ function App(): JSX.Element | null {
     };
 
     checkUser();
-  }, [setAuth, snackbar, supabase, user]);
+  }, [setAuth, signOut, snackbar, supabase, user]);
 
   useEffect(() => {
     if (assetLoaded) {

diff --git a/app/(home)/picture.tsx → app/picture.tsx b/app/(home)/picture.tsx → app/picture.tsx
@@ -4,13 +4,13 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {css} from '@emotion/native';
 import {IconButton} from 'dooboo-ui';
 import {Stack, useLocalSearchParams, useRouter} from 'expo-router';
-import CustomLoadingIndicator from '../../src/components/uis/CustomLoadingIndicator';
-import Wrapper from '../../src/components/uis/Wrapper';
-import ImageZoomView from '../../src/components/uis/ImageZoomView';
-import {isDesktopDevice} from '../../src/utils/common';
-import {t} from '../../src/STRINGS';
+import CustomLoadingIndicator from '../src/components/uis/CustomLoadingIndicator';
+import Wrapper from '../src/components/uis/Wrapper';
+import ImageZoomView from '../src/components/uis/ImageZoomView';
+import {isDesktopDevice} from '../src/utils/common';
+import {t} from '../src/STRINGS';
 import ErrorBoundary from 'react-native-error-boundary';
-import FallbackComponent from '../../src/components/uis/FallbackComponent';
+import FallbackComponent from '../src/components/uis/FallbackComponent';
 
 export default function Picture(): JSX.Element {
   const {imageUrl} = useLocalSearchParams();

diff --git a/src/apis/postQueries.ts b/src/apis/postQueries.ts
@@ -267,7 +267,13 @@ BEGIN
   UPDATE posts SET view_count = view_count + 1 WHERE id = post_id;
 END;
 */
-export const incrementViewCount = async (postId: string) => {
+export const incrementViewCount = async ({
+  postId,
+  supabase,
+}: {
+  postId: string;
+  supabase: SupabaseClient;
+}) => {
   //@ts-ignore
   const {data, error} = await supabase.rpc('increment_view_count', {
     post_id: postId,