added screen to set user info

apps/next/pages/create_user/index.tsx

@@ -0,0 +1,3 @@
+import { CreateUserScreen } from 'app/features/create_user/screen'
+
+export default CreateUserScreen

packages/app/components/DateTools.tsx

@@ -1,3 +1,5 @@
+import { Alert } from "react-native";
+
 export const formatDate = (date) => {
     return new Date(date).toLocaleDateString('en-US', {
       month: '2-digit',
@@ -12,4 +14,13 @@ export const formatTime = (date) => {
         minute: '2-digit',
         hour12: true,
     });
-  };
+  };
+
+/* Format a date to be a postgres date. We use postgres date to store user birthday. */
+export const formatBirthDay = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+

packages/app/components/UserInfoEditor.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useContext } from 'react';
+import { useLink } from 'solito/link';
+import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
+import { useRouter } from 'solito/router';
+import {
+    Button,
+    Input, 
+    Paragraph,
+    ParagraphProps,
+    Popover,
+    Separator,
+    Text,
+    Label,
+    VisuallyHidden,
+    XStack,
+    YStack,
+    isClient,
+    useMedia,
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6
+  } from 'tamagui';
+import { ChevronLeft, Swords, ImagePlus, Grid, Edit, Menu, User } from '@tamagui/lucide-icons'
+import { Check } from '@tamagui/lucide-icons'
+import { Checkbox } from 'tamagui'
+import DatePicker from '@react-native-community/datetimepicker';
+import { Alert } from 'react-native';
+
+import { formatBirthDay } from './DateTools';
+import { ContainerXL} from '../components/Container';
+import { UserType } from '../../../types/user';
+import { GenderType } from '../../../types/gender';
+
+export function UserInfoEdit({ user }: { user: UserType}) {
+    const [firstName, setFirstName] = useState(user.first_name);
+    const [birthDate, setBirthDate] = useState(new Date(Date.parse(user.birthday)));
+    const [gender, setGender] = useState<GenderType>(user.gender);
+    const [homeCity, setHomeCity] = useState(user.home_city);
+    const [dateOpen, setDateOpen] = useState(false)
+
+    const { push } = useRouter();
+
+    const session = useSession();
+    const supabase = useSupabaseClient();
+
+    const handleSubmit = async () => {
+        try {
+          const { error } = await supabase
+            .from('users')
+            .upsert({
+              id: user.id,
+              first_name: firstName,
+              birthday: birthDate,
+              gender,
+              home_city: homeCity,
+            });
+
+          if (error) throw error;
+
+          push('/discover')
+        } catch (err) {
+          console.error('Error updating user:', err);
+          alert('Error updating user');
+        }
+    };
+
+    return (
+        <>
+        <ContainerXL>
+            <H4 color='$text1' ta="left">First Name</H4>
+            <Input size="$4" placeholder={user.first_name} onChangeText={(value) => setFirstName(value)}></Input>
+
+            <H4 color='$text1' ta="left">Birth Day</H4>
+            <DatePicker
+            modal
+            mode='datetime'
+            open={dateOpen}
+            value={birthDate}
+            onConfirm={(birthDate) => {
+                setDateOpen(false)
+                setBirthDate(birthDate)
+            }}
+            onCancel={() => {
+                setDateOpen(false)
+            }}
+            />
+
+            <H4 color='$text1' ta="left">Gender</H4>
+            <Checkbox size="$4" onCheckedChange={() => setGender('female')} checked={gender === 'female'}>
+                <Checkbox.Indicator>
+                    <Check />
+                </Checkbox.Indicator>
+            </Checkbox>
+            <Label>
+                Female
+            </Label>
+
+            <Checkbox size="$4" onCheckedChange={() => setGender('male')} checked={gender === 'male'}>
+                <Checkbox.Indicator>
+                    <Check />
+                </Checkbox.Indicator>
+            </Checkbox>
+            <Label>
+                Male
+            </Label>
+
+            <Checkbox size="$4" onCheckedChange={() => setGender('non-binary')} checked={gender === 'non-binary'}>
+                <Checkbox.Indicator>
+                    <Check />
+                </Checkbox.Indicator>
+            </Checkbox>
+            <Label>
+                Non-Binary
+            </Label>
+
+            <H4 color='$text1' ta="left">Home City</H4>
+            <Input size="$4" placeholder={user.home_city} onChangeText={(value) => setHomeCity(value)}></Input>
+
+            <Button onPress={handleSubmit}>Submit</Button>
+        </ContainerXL>
+        </>
+    );  
+}

packages/app/features/create_user/screen.tsx

@@ -0,0 +1,62 @@
+import { Anchor, Button, H1, Input, Paragraph, Separator, Sheet, XStack, YStack, Spinner } from '@my/ui'
+import { useRouter } from 'solito/router';
+import { v4 as uuidv4 } from 'uuid'
+import React, { useState, useEffect } from 'react';
+import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
+
+import { UserInfoEdit } from 'app/components/UserInfoEditor'
+
+import { UserType } from '../../../../types/user'
+
+export function CreateUserScreen() {
+  const [user, setUser] = useState<UserType | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const session = useSession();
+  const supabase = useSupabaseClient();
+
+  const { push } = useRouter();
+
+  const newUser: UserType = {
+    id: session?.user.id,
+    first_name: '',
+    birthday: new Date(),
+    gender: '',
+    home_city: '',
+  };
+
+  const getUser = async () => {
+    try {
+      const { data: fetchedUser, error: userError } = await supabase
+        .from('users')
+        .select('*')
+        .eq('id', session?.user.id)
+        .single();
+
+      if (userError) throw userError;
+
+      setUser(fetchedUser);
+    } catch (err) {
+      console.error('Error fetching user:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    getUser();
+  }, [supabase, session]);
+
+  useEffect(() => {
+    if (user) {
+      push('/discover');
+    }
+  }, [user]);
+
+  return (
+    <>
+    <YStack bg='$background3' f={1} jc="center" ai="center" p="$4" space>
+      {!isLoading && !user && <UserInfoEdit user={newUser} />}
+    </YStack>
+    </>
+  )
+}

packages/app/features/email_signin/screen.tsx

@@ -33,7 +33,7 @@ export function EmailSignInScreen() {
     if (error) {
       alert(error.message);
     } else {
-      push('/discover')
+      push('/create_user')
     }
   }
 

packages/app/features/profile/screen.tsx

@@ -1,16 +1,46 @@
 import { Anchor, Button, H1, Input, Paragraph, Separator, Sheet, XStack, YStack } from '@my/ui'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
 
 import { Navbar } from 'app/components/Navbar'
+import { UserInfoEdit } from 'app/components/UserInfoEditor'
+
+import { UserType } from '../../../../types/user';
+import { Alert } from 'react-native';
 
 export function ProfileScreen() {
+  const [user, setUser] = useState<UserType | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const session = useSession();
+  const supabase = useSupabaseClient();
+
+  const getUser = async () => {
+    try {
+      const { data: fetchedUser, error: userError } = await supabase
+        .from('users')
+        .select('*')
+        .eq('id', session?.user.id)
+        .single();
+
+      if (userError) throw userError;
+
+      setUser(fetchedUser);
+    } catch (err) {
+      console.error('Error fetching user:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    getUser();
+  }, [session, supabase]);
 
   return (
     <>
     <YStack bg='$background3' f={1} jc="center" ai="center" p="$4" space>
-      <YStack space="$4" maw={600}>
-        <H1 color='$primary1' ta="center">Profile</H1>
-      </YStack>
+      {!isLoading && <UserInfoEdit user={user}/>}
     </YStack>
     <Navbar/>
     </>

packages/app/navigation/native/index.tsx

@@ -11,12 +11,14 @@ import { CalendarScreen } from 'app/features/calendar/screen'
 import { CommunityScreen } from 'app/features/community/screen'
 import { ProfileScreen } from 'app/features/profile/screen'
 import { EventScreen } from 'app/features/event/detail-screen'
+import { CreateUserScreen } from 'app/features/create_user/screen'
 import { animations } from '@my/ui/dist/cjs/animations'
 
 const Stack = createNativeStackNavigator<{
   home: undefined
   signin: undefined
   create_account: undefined
+  create_user: undefined
   email_signin: undefined
   email_signup: undefined
   discover: undefined
@@ -115,6 +117,14 @@ export function NativeNavigation() {
           animation: 'none',
         }}
       />
+      <Stack.Screen
+        name="create_user"
+        component={CreateUserScreen}
+        options={{
+          title: 'Create User',
+          animation: 'fade',
+        }}
+      />
     </Stack.Navigator>
   )
 }

packages/app/provider/navigation/index.tsx

@@ -17,6 +17,7 @@ export function NavigationProvider({ children }: { children: React.ReactNode })
               home: '',
               signin: 'signin',
               create_account: 'create_account',
+              create_user: 'create_user',
               email_signin: 'email_signin',
               email_signup: 'email_signup',
               create_event: 'create_event',