Skip to content

Commit

Permalink
Fix/chores && Refactor/drawer (#189)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbderrahmaneBennani
AbderrahmaneBennani authored Feb 1, 2025
2 parents 9d803e7 + d2db26b commit 4a6dfd8
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 48 deletions.
62 changes: 33 additions & 29 deletions app/src/components/ContextualQuestionActivityChoice.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import { Text } from '@shadcn/components';
import { Text } from "@shadcn/components";

import type { ContextualQuestionProps, OnboardingFormData } from '@src/types';
import { useFormikContext } from 'formik';
import LottieView from 'lottie-react-native';
import { Gamepad2 } from 'lucide-react-native';
import { type ReactNode, useState } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { ChoresButtonModal } from './ChoresButtonModal';
import { InfoAlertIcon } from './InfoAlert';
import type { ContextualQuestionProps, OnboardingFormData } from "@src/types";
import { useFormikContext } from "formik";
import LottieView from "lottie-react-native";
import { Gamepad2 } from "lucide-react-native";
import { type ReactNode, useState } from "react";
import { TouchableOpacity, View } from "react-native";
import { ChoresButtonModal } from "./ChoresButtonModal";
import { InfoAlertIcon } from "./InfoAlert";

export const ContextualQuestionActivityChoice: React.FC<ContextualQuestionProps> = (props) => {
export const ContextualQuestionActivityChoice: React.FC<
ContextualQuestionProps
> = (props) => {
const { onNext } = props;
const { setFieldValue, values } = useFormikContext<OnboardingFormData>();
const [activityType, setActivityType] = useState('');
const [activityType, setActivityType] = useState("");

const onChange = (value: string | undefined) => {
if (!value) return;
setActivityType(value);
setFieldValue('type', value);
setFieldValue("type", value);
};

const onChangeAndNext = (value: string | undefined) => {
Expand All @@ -26,56 +28,58 @@ export const ContextualQuestionActivityChoice: React.FC<ContextualQuestionProps>
};

const onChoreSelectionComplete = (choreType: string) => {
setFieldValue('type', choreType);
setFieldValue("choreType", choreType);
onNext();
};

const IconWrapper = ({ children }: { children: ReactNode }) => (
<View className='flex items-center justify-center'>{children}</View>
<View className="flex items-center justify-center">{children}</View>
);

return (
<View className='flex flex-1 items-stretch justify-center'>
<View className='flex flex-1 flex-col items-center justify-center mb-4'>
<View className="flex flex-1 items-stretch justify-center">
<View className="flex flex-1 flex-col items-center justify-center mb-4">
<LottieView
autoPlay={true}
loop={true}
source={require('../../assets/activity.json')}
source={require("../../assets/activity.json")}
style={{ width: 320, height: 320 }}
/>
</View>
<View className='flex flex-1 flex-col items-stretch gap-y-6'>
<View className='flex flex-col items-center'>
<View className='flex flex-row gap-x-3 items-center justify-center mb-4'>
<Text className='text-2xl text-center font-medium'>Select an activity type</Text>
<View className="flex flex-1 flex-col items-stretch gap-y-6">
<View className="flex flex-col items-center">
<View className="flex flex-row gap-x-3 items-center justify-center mb-4">
<Text className="text-2xl text-center font-medium">
Select an activity type
</Text>
<InfoAlertIcon
title={'What does this mean?'}
title={"What does this mean?"}
description={
'Whether you are in the mood to tackle chores or enjoy some free play, select what suits you best!'
"Whether you are in the mood to tackle chores or enjoy some free play, select what suits you best!"
}
/>
</View>
<Text className='text-lg text-center'>
<Text className="text-lg text-center">
Are you looking to do some chores or play today?
</Text>
</View>
<View className='flex items-center justify-center flex-row gap-4'>
<View className="flex items-center justify-center flex-row gap-4">
<ChoresButtonModal
activityType={activityType}
onPress={() => onChange('chores')}
onPress={() => onChange("chores")}
onFinish={(chore) => onChoreSelectionComplete(chore)}
/>

<TouchableOpacity
onPress={() => onChangeAndNext('play')}
onPress={() => onChangeAndNext("play")}
className={`h-28 w-28 rounded-xl flex items-center justify-center ${
activityType === 'play' ? 'bg-secondary' : 'bg-white'
activityType === "play" ? "bg-secondary" : "bg-white"
}`}
>
<IconWrapper>
<Gamepad2 size={32} />
</IconWrapper>
<Text className='text-center text-md mt-4'>Play</Text>
<Text className="text-center text-md mt-4">Play</Text>
</TouchableOpacity>
</View>
</View>
Expand Down
75 changes: 56 additions & 19 deletions app/src/routes/AuthRoutes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
// Description: This file defines the navigation structure for authenticated users using React Navigation.
// It sets up a drawer navigator with routes for various authenticated screens such as Home and Profile.

import { createDrawerNavigator } from '@react-navigation/drawer';
import { Drawer, Loading } from '@src/components';
import { Collections, Screens, fireAuth, fireStore } from '@src/constants';
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Drawer, Loading } from "@src/components";
import { Collections, Screens, fireAuth, fireStore } from "@src/constants";
import {
ActivityPlayer,
Favorite,
Expand All @@ -14,11 +14,11 @@ import {
NewPlay,
Onboarding,
Profile,
Welcome
} from '@src/screens';
import { doc, getDoc } from 'firebase/firestore';
import { useEffect, useState } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
Welcome,
} from "@src/screens";
import { doc, getDoc } from "firebase/firestore";
import { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";

// Define the parameter types for the AuthRoutes drawer navigator
export type AuthRoutesParams = {
Expand Down Expand Up @@ -53,7 +53,7 @@ export const AuthRoutes: React.FC = () => {
if (!user) return;
const userDocRef = doc(fireStore, Collections.Users, user.uid);
const docData = await getDoc(userDocRef);
setIsFirstTimeUser(!docData.exists() || !docData.get('kids'));
setIsFirstTimeUser(!docData.exists() || !docData.get("kids"));
} catch (error) {
console.log(error);
} finally {
Expand All @@ -64,7 +64,12 @@ export const AuthRoutes: React.FC = () => {
}, []);

if (isLoading) {
return <Loading heading='Loading...' description='Please wait while we load the content.' />;
return (
<Loading
heading="Loading..."
description="Please wait while we load the content."
/>
);
}

return (
Expand All @@ -75,39 +80,71 @@ export const AuthRoutes: React.FC = () => {
<AuthDrawer.Screen
name={Screens.Welcome}
component={Welcome}
options={{ headerShown: false, gestureHandlerProps: { enabled: false } }}
options={{
headerShown: false,
gestureHandlerProps: { enabled: false },
}}
/>
<AuthDrawer.Screen
name={Screens.Home}
component={Home}
options={{ headerShown: false }}
/>
<AuthDrawer.Screen
name={Screens.Profile}
component={Profile}
options={{
headerShown: false,
gestureHandlerProps: { enabled: false },
}}
/>
<AuthDrawer.Screen name={Screens.Home} component={Home} options={{ headerShown: false }} />
<AuthDrawer.Screen name={Screens.Profile} component={Profile} />
<AuthDrawer.Screen
name={Screens.Onboarding}
component={Onboarding}
options={{ headerShown: false, gestureHandlerProps: { enabled: false } }}
options={{
headerShown: false,
gestureHandlerProps: { enabled: false },
}}
/>
<AuthDrawer.Screen
name={Screens.ActivityPlayer}
component={ActivityPlayer}
options={{ headerShown: false, gestureHandlerProps: { enabled: false } }}
options={{
headerShown: false,
gestureHandlerProps: { enabled: false },
}}
/>
<AuthDrawer.Screen
name={Screens.Favorite}
component={Favorite}
options={{ headerShown: false, gestureHandlerProps: { enabled: false } }}
options={{
headerShown: false,
gestureHandlerProps: { enabled: false },
}}
/>
<AuthDrawer.Screen
name={Screens.NewPlay}
component={NewPlay}
options={{ headerShown: false, gestureHandlerProps: { enabled: false } }}
options={{
headerShown: false,
gestureHandlerProps: { enabled: false },
}}
/>
<AuthDrawer.Screen
name={Screens.NewKid}
component={NewKid}
options={{ headerShown: false, gestureHandlerProps: { enabled: false } }}
options={{
headerShown: false,
gestureHandlerProps: { enabled: false },
}}
/>
<AuthDrawer.Screen
name={Screens.Feedback}
component={Feedback}
options={{ headerShown: false, gestureHandlerProps: { enabled: false } }}
options={{
headerShown: false,
gestureHandlerProps: { enabled: false },
}}
/>
</AuthDrawer.Navigator>
);
Expand Down

0 comments on commit 4a6dfd8

Please sign in to comment.