chore: enhanced web layouts with pkgs

crossplatformkorea · Nov 2, 2024 · b73745f · b73745f
1 parent e3830c0
commit b73745f
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 132 deletions.
diff --git a/app/(home)/_layout.tsx b/app/(home)/_layout.tsx
@@ -42,6 +42,7 @@ export default function HomeLayout() {
                 Platform.OS === 'web'
                   ? css`
                       border-radius: 48px;
+                      margin-left: 12px;
                     `
                   : css`
                       border-radius: 48px;

diff --git a/app/(home)/post/[id]/index.tsx b/app/(home)/post/[id]/index.tsx
@@ -4,7 +4,7 @@ import {Stack, useLocalSearchParams, useRouter} from 'expo-router';
 import {ReplyWithJoins} from '../../../../src/types';
 import {t} from '../../../../src/STRINGS';
 import NotFound from '../../../../src/components/uis/NotFound';
-import {Pressable, View} from 'react-native';
+import {Platform, Pressable, View} from 'react-native';
 import {openURL} from '../../../../src/utils/common';
 import {formatDateTime} from '../../../../src/utils/date';
 import UserListItem from '../../../../src/components/uis/UserListItem';
@@ -335,11 +335,17 @@ export default function PostDetails(): JSX.Element {
           headerRight: () =>
             authId ? (
               <View
-                style={css`
-                  flex-direction: row;
-                  align-items: center;
-                  gap: 4px;
-                `}
+                style={[
+                  css`
+                    flex-direction: row;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 4px;
+                  `,
+                  Platform.OS === 'web' && css`
+                    margin-right: 24px;
+                  `,
+                ]}
               >
                 <RectButton
                   hitSlop={{top: 20, left: 20, right: 20, bottom: 20}}

diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
 import type {ColorSchemeName} from 'react-native';
-import {Platform, useColorScheme} from 'react-native';
+import {Platform, useColorScheme, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {tokenCache} from '../src/utils/cache';
 import {
@@ -216,24 +216,42 @@ function App(): JSX.Element | null {
 }
 
 function Layout(): JSX.Element | null {
+  const {theme} = useDooboo();
   const [reportModalState, setReportModalState] = useRecoilState(
     reportModalRecoilState,
   );
 
   return (
-    <>
-      <App />
-      <ReportModal
-        {...reportModalState}
-        setVisible={(value) => {
-          setReportModalState({
-            ...reportModalState,
-            // @ts-ignore
-            visible: value,
-          });
-        }}
-      />
-    </>
+    <View
+      style={css`
+        flex: 1;
+        align-self: stretch;
+        background-color: ${theme.bg.paper};
+
+        flex-direction: row;
+        justify-content: center;
+      `}
+    >
+      <View
+        style={css`
+          flex: 1;
+          max-width: 480px;
+          background-color: ${theme.bg.basic};
+        `}
+      >
+        <App />
+        <ReportModal
+          {...reportModalState}
+          setVisible={(value) => {
+            setReportModalState({
+              ...reportModalState,
+              // @ts-ignore
+              visible: value,
+            });
+          }}
+        />
+      </View>
+    </View>
   );
 }
 

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "migrate:deploy": "dotenv -e .env.production -- prisma migrate deploy"
   },
   "dependencies": {
-    "@clerk/clerk-expo": "2.2.17",
+    "@clerk/clerk-expo": "^2.2.29",
     "@dooboo/react-native-youtube-iframe": "^2.2.5",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.13.3",

diff --git a/src/apis/githubStatsQueries.ts b/src/apis/githubStatsQueries.ts
@@ -1,7 +1,7 @@
 import {t} from '../STRINGS';
 import {DoobooGithubStats} from '../types/github-stats';
 
-const API_ENDPOINT = 'https://stats.dooboo.io/api/github-stats';
+const API_ENDPOINT = 'https://stats.hyo.dev/api/github-stats';
 
 export const updateDoobooGithub = async (
   login: string,

diff --git a/src/components/uis/ButtonSocialSignIn/index.tsx b/src/components/uis/ButtonSocialSignIn/index.tsx
@@ -34,11 +34,11 @@ export function ButtonSocialSignIn({strategy}: Props): JSX.Element {
 
     setLoading(true);
 
+    const redirectUrl = Linking.createURL('/', {scheme: 'cpk'});
+
     try {
       const {createdSessionId, signIn, signUp, setActive} =
-        await startOAuthFlow({
-          redirectUrl: Linking.createURL('/', {scheme: 'cpk'}),
-        });
+        await startOAuthFlow({redirectUrl});
 
       if (!signIn || !signUp) {
         return;
@@ -89,6 +89,7 @@ export function ButtonSocialSignIn({strategy}: Props): JSX.Element {
       // and has an OAuth account connected to it, you can sign them in.
       signInWith(strategy);
     } catch (error: any) {
+      console.log('error', JSON.stringify(error));
       if (error.clerkError) {
         const {code} = error.errors[0];
         console.log(`[signIn] Clerk Error (${code}):`, error);

diff --git a/src/hooks/useWarmUpBrowser.tsx b/src/hooks/useWarmUpBrowser.tsx
@@ -1,8 +1,10 @@
 import {useEffect} from 'react';
 import * as WebBrowser from 'expo-web-browser';
+import {Platform} from 'react-native';
 
 export const useWarmUpBrowser = () => {
   useEffect(() => {
+    if (Platform.OS === 'web') return;
     // Warm up the android browser to improve UX
     // https://docs.expo.dev/guides/authentication/#improving-user-experience
     void WebBrowser.warmUpAsync();