Merge pull request #54 from UNLV-CS472-672/19-frontend-login-dashboar…

…d-page-real

19 frontend login page

.vscode/launch.json

@@ -1,6 +1,14 @@
 {
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Debug in Exponent",
+      "request": "launch",
+      "type": "reactnative",
+      "cwd": "${workspaceFolder}",
+      "platform": "exponent",
+      "expoHostType": "local"
+    },
     {
       "name": "Next.js",
       "type": "node-terminal",

README.md

@@ -89,9 +89,10 @@ Tasks are assigned to team members by their first name. For tasks with multiple
 
 # Commons Bugs Encountered
 
-[SKD Not found](https://stackoverflow.com/questions/27620262/sdk-location-not-found-define-location-with-sdk-dir-in-the-local-properties-fil)
-[expo-router not found](https://github.com/expo/router/issues/748)
-[Unmatched Route with Clerk -- Window only](https://github.com/expo/router/issues/457)
+- [ ] [SKD Not found](https://stackoverflow.com/questions/27620262/sdk-location-not-found-define-location-with-sdk-dir-in-the-local-properties-fil)
+- [ ] [expo-router not found](https://github.com/expo/router/issues/748)
+- [ ] [Unmatched Route with Clerk -- Window only](https://github.com/expo/router/issues/457)
+- [ ] [Ah yes, you can only for android OS on an Apple OS](https://github.com/expo/eas-cli/issues/1726)
 
 In case you encountered, Failed to get localhost. Please point to your production server.
 

apps/expo/app.config.ts

@@ -28,6 +28,7 @@ const defineConfig = (): ExpoConfig => ({
       foregroundImage: './assets/icon.png',
       backgroundColor: '#1F104A',
     },
+    jsEngine: 'hermes',
   },
   // extra: {
   //   eas: {
@@ -36,9 +37,9 @@ const defineConfig = (): ExpoConfig => ({
   // },
   extra: {
     // this is commented out so you don't have to log in to run expo start locally
-    // eas: {
-    //   projectId: 'a5b98934-bf53-4573-ba91-972c22a6759a',
-    // },
+    eas: {
+      projectId: 'a5b98934-bf53-4573-ba91-972c22a6759a',
+    },
     clerkPublishableKey: process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY,
     expoPublicClerkPublishableKey:
       process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY,
@@ -50,7 +51,12 @@ const defineConfig = (): ExpoConfig => ({
     tsconfigPaths: true,
     typedRoutes: true,
   },
-  plugins: ['expo-router', './expo-plugins/with-modify-gradle.js'],
+  // jsEngine: 'hermes',
+  plugins: [
+    /* don't touch this */
+    'expo-router',
+    './expo-plugins/with-modify-gradle.js',
+  ],
 })
 
 export default defineConfig

apps/expo/eas.json

@@ -12,17 +12,34 @@
     "development": {
       "extends": "base",
       "developmentClient": true,
-      "distribution": "internal"
+      "distribution": "internal",
+      "releaseChannel": "default",
+      "android": {
+        "buildType": "apk"
+      }
     },
     "preview": {
       "extends": "base",
       "distribution": "internal",
-      "ios": {
-        "simulator": true
+      "releaseChannel": "preview",
+      "android": {
+        "buildType": "apk"
       }
     },
     "production": {
       "extends": "base"
+    },
+    "devclient": {
+      "extends": "base",
+      "releaseChannel": "default",
+      "distribution": "internal",
+      "developmentClient": true,
+      "android": {
+        "buildType": "apk"
+      },
+      "ios": {
+        "simulator": true
+      }
     }
   },
   "submit": {

apps/expo/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@clerk/clerk-expo": "^0.20.8",
+    "@expo-google-fonts/koulen": "^0.2.3",
     "@expo/metro-config": "^0.10.7",
     "@shopify/flash-list": "1.4.3",
     "@tanstack/react-query": "^5.8.7",
@@ -26,6 +27,7 @@
     "expo-auth-session": "^5.0.2",
     "expo-constants": "~14.4.2",
     "expo-dev-client": "^2.4.13",
+    "expo-font": "^11.4.0",
     "expo-linking": "~5.0.2",
     "expo-router": "2.0.14",
     "expo-secure-store": "^12.3.1",
@@ -57,6 +59,7 @@
     "@types/react": "^18.2.42",
     "eslint": "^8.53.0",
     "prettier": "^3.1.0",
+    "react-devtools-core": "^5.0.0",
     "tailwindcss": "3.3.5",
     "typescript": "^5.3.3"
   },

apps/expo/src/app/_layout.tsx

@@ -1,13 +1,15 @@
+import { Koulen_400Regular, useFonts } from '@expo-google-fonts/koulen'
 import { Stack } from 'expo-router'
 import { StatusBar } from 'expo-status-bar'
 
 import { TRPCProvider } from '~/utils/api'
 
+import 'expo-dev-client'
 import '~/styles.css'
 
-import * as SecureStore from 'expo-secure-store'
 import { ClerkProvider } from '@clerk/clerk-expo'
-import { useColorScheme } from 'nativewind'
+import * as SecureStore from 'expo-secure-store'
+// import { useColorScheme } from 'nativewind'
 
 const CLERK_PUBLISHABLE_KEY = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY
 
@@ -27,11 +29,23 @@ const tokenCache = {
     }
   },
 }
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+// SplashScreen.preventAutoHideAsync()
 
 // This is the main layout of the app
 // It wraps your pages with the providers they need
 export default function RootLayout() {
-  const { colorScheme } = useColorScheme()
+  // themes
+  // const { colorScheme } = useColorScheme()
+
+  // fonts
+  let [fontsLoaded] = useFonts({
+    Koulen_400Regular,
+  })
+
+  if (!fontsLoaded) {
+    return null
+  }
 
   return (
     <TRPCProvider>
@@ -45,12 +59,12 @@ export default function RootLayout() {
       >
         <Stack
           screenOptions={{
-            headerStyle: {
-              backgroundColor: '#f472b6',
-            },
-            contentStyle: {
-              backgroundColor: colorScheme == 'dark' ? '#09090B' : '#FFFFFF',
-            },
+            // headerStyle: {
+            //   backgroundColor: '#f472b6',
+            // },
+            // contentStyle: {
+            //   backgroundColor: colorScheme == 'dark' ? '#09090B' : '#FFFFFF',
+            // },
           }}
         />
         <StatusBar />

apps/expo/src/app/auth/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { ImageBackground, Text, View } from 'react-native'
+import SignInWithGoogle from '~/components/auth/sign-in-w-google'
+
+const AuthScreen = () => {
+  return (
+    <ImageBackground
+      source={require('assets/auth/background.png')}
+      style={{ flex: 1, backgroundColor: '#1E1E1E' }}
+      resizeMode="cover"
+    >
+      <View className="flex-1 items-center justify-center rounded-md">
+        <View className="scale-150 rounded-lg bg-white p-7">
+          <Text
+            className="font-koulen mb-1 text-center text-[3.70rem] m-2 font-semibold"
+          >
+            BARBELL
+          </Text>
+          <SignInWithGoogle />
+        </View>
+      </View>
+    </ImageBackground>
+  )
+}
+
+export default AuthScreen

apps/expo/src/app/index.tsx

@@ -128,6 +128,14 @@ const StartPage = () => {
           color={'#000000'}
         />
 
+        <Button
+          onPress={() => {
+            router.push('/auth')
+          }}
+          title="Go Auth"
+          color={'#000000'}
+        />
+
         <View className="py-2">
           <Text className="font-semibold italic text-black">
             Press on a post
@@ -160,5 +168,3 @@ const StartPage = () => {
 }
 
 export default StartPage
-
-

apps/expo/src/app/post/[id].tsx

@@ -1,12 +1,13 @@
-import { SafeAreaView, Text, View } from "react-native"
-import { Stack, useGlobalSearchParams } from "expo-router"
+import { SafeAreaView, Text, View } from 'react-native'
+import { Stack, useGlobalSearchParams } from 'expo-router'
 
-import { api } from "~/utils/api"
+import { api } from '~/utils/api'
 
 export default function Post() {
   const { id } = useGlobalSearchParams()
-  if (!id || typeof id !== "string") throw new Error("unreachable")
-  const { data } = api.post.byId.useQuery({ id: id })
+  if (!id || typeof id !== 'string') throw new Error('unreachable')
+  const numericId = parseInt(id, 10)
+  const { data } = api.post.byId.useQuery({ id: numericId })
 
   if (!data) return null
 

apps/expo/src/components/auth/sign-in-w-google.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Alert, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { router } from 'expo-router'
+import * as WebBrowser from 'expo-web-browser'
+import { useOAuth } from '@clerk/clerk-expo'
+
+import { useWarmUpBrowser } from '~/hooks/useWarmUpBrowser'
+
+WebBrowser.maybeCompleteAuthSession()
+
+const SignInWithGoogle = () => {
+  // Warm up the android browser to improve UX
+  // https://docs.expo.dev/guides/authentication/#improving-user-experience
+  useWarmUpBrowser()
+
+  const { startOAuthFlow: startGoogleOAuthFlow } = useOAuth({
+    strategy: 'oauth_google',
+  })
+
+  // add mores strategies here
+  const onPressOAuth = React.useCallback(async () => {
+    try {
+      const startOAuthFlow = startGoogleOAuthFlow
+
+      const { createdSessionId, setActive } = await startOAuthFlow()
+      console.log('startOAuthFlow')
+
+      if (createdSessionId) {
+        setActive?.({ session: createdSessionId })
+        router.back()
+      } else {
+        alert('Sign in failed')
+      }
+    } catch (err: any) {
+      Alert.alert(
+        'OAuth Error',
+        `An error occurred during the OAuth process: ${err.message || err}`,
+      )
+      console.error('OAuth error', err)
+    }
+  }, [])
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={() => onPressOAuth()}
+        className="mb-4 rounded-xl bg-[#1C1B1B] py-1"
+      >
+        <Text className="font-koulen text-center text-xl font-semibold text-white">
+          SIGN IN
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => onPressOAuth()}
+        className="rounded-xl bg-[#48476D] py-1"
+      >
+        <Text className="font-koulen text-center text-xl font-semibold text-white">
+          SIGN UP
+        </Text>
+      </TouchableOpacity>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  // Additional styles can be added here if needed
+})
+
+export default SignInWithGoogle

apps/expo/src/components/auth/sign-in-w-oauth.tsx

@@ -21,8 +21,8 @@ const SignInWithOAuth = () => {
   const { startOAuthFlow: startAppleOAuthFlow } = useOAuth({
     strategy: 'oauth_apple',
   })
+
   // add mores strategies here
-
   const onPressOAuth = React.useCallback(async (provider: string) => {
     try {
       const startOAuthFlow =

apps/expo/tailwind.config.ts

@@ -1,10 +1,34 @@
-import type { Config } from "tailwindcss"
+import type { Config } from 'tailwindcss'
 // @ts-expect-error - no types
-import nativewind from "nativewind/preset"
+import nativewind from 'nativewind/preset'
 
-import baseConfig from "@acme/tailwind-config/native"
+import baseConfig from '@acme/tailwind-config/native'
 
 export default {
-  content: ["./src/**/*.{ts,tsx}"],
+  content: ['./src/**/*.{ts,tsx}'],
   presets: [baseConfig, nativewind],
+  theme: {
+    extend: {
+      fontFamily: {
+        koulen: ['Koulen_400Regular'],
+      },
+      fontSize: {
+        xs     : '0.75rem',    // 12px
+        sm     : '0.875rem',   // 14px
+        base   : '1rem',       // 16px
+        lg     : '1.125rem',   // 18px
+        xl     : '1.25rem',    // 20px
+        '2xl'  : '1.5rem',     // 24px
+        '3xl'  : '1.875rem',   // 30px
+        '4xl'  : '2.25rem',    // 36px
+        '5.5xl': '2.75rem',    // 44px
+        '5xl'  : '3rem',       // 48px
+        '6xl'  : '3.75rem',    // 60px
+        '6.5xl'  : '4rem',       // 64px
+        '7xl'  : '4.5rem',     // 72px
+        '8xl'  : '6rem',       // 96px
+        '9xl'  : '8rem',       // 128px
+      },
+    },
+  },
 } satisfies Config

apps/expo/tsconfig.json

@@ -2,8 +2,10 @@
   "extends": "@acme/tsconfig/base.json",
   "compilerOptions": {
     "baseUrl": ".",
+    "strict": true,
     "paths": {
-      "~/*": ["./src/*"]
+      "~/*": ["./src/*"],
+      "assets/*": ["./assets/*"]
     },
     // "paths": { "@/*": ["./src/*"] },
     "jsx": "react-native",