Skip to content

Commit bf6f3c5

Browse files
frederickbaierfrederickbaier
authored
Feat/add missing icons (#190)
2 parents 4a6dfd8 + 3ed7771 commit bf6f3c5

File tree

6 files changed

+393
-336
lines changed

6 files changed

+393
-336
lines changed

‎app/src/components/ContextualQuestionActivityChoice.tsx‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
1-
import { Text } from "@shadcn/components";
1+
import { Text } from '@shadcn/components';
22

3-
import type { ContextualQuestionProps, OnboardingFormData } from "@src/types";
4-
import { useFormikContext } from "formik";
5-
import LottieView from "lottie-react-native";
6-
import { Gamepad2 } from "lucide-react-native";
7-
import { type ReactNode, useState } from "react";
8-
import { TouchableOpacity, View } from "react-native";
9-
import { ChoresButtonModal } from "./ChoresButtonModal";
10-
import { InfoAlertIcon } from "./InfoAlert";
3+
import type { ContextualQuestionProps, OnboardingFormData } from '@src/types';
4+
import { useFormikContext } from 'formik';
5+
import LottieView from 'lottie-react-native';
6+
import { Gamepad2 } from 'lucide-react-native';
7+
import { type ReactNode, useState } from 'react';
8+
import { TouchableOpacity, View } from 'react-native';
9+
import { ChoresButtonModal } from './ChoresButtonModal';
10+
import { InfoAlertIcon } from './InfoAlert';
1111

12-
export const ContextualQuestionActivityChoice: React.FC<
13-
ContextualQuestionProps
14-
> = (props) => {
12+
export const ContextualQuestionActivityChoice: React.FC<ContextualQuestionProps> = (props) => {
1513
const { onNext } = props;
1614
const { setFieldValue, values } = useFormikContext<OnboardingFormData>();
17-
const [activityType, setActivityType] = useState("");
15+
const [activityType, setActivityType] = useState('');
1816

1917
const onChange = (value: string | undefined) => {
2018
if (!value) return;
2119
setActivityType(value);
22-
setFieldValue("type", value);
20+
setFieldValue('type', value);
2321
};
2422

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

3028
const onChoreSelectionComplete = (choreType: string) => {
31-
setFieldValue("choreType", choreType);
29+
setFieldValue('choreType', choreType);
3230
onNext();
3331
};
3432

3533
const IconWrapper = ({ children }: { children: ReactNode }) => (
36-
<View className="flex items-center justify-center">{children}</View>
34+
<View className='flex items-center justify-center'>{children}</View>
3735
);
3836

3937
return (
40-
<View className="flex flex-1 items-stretch justify-center">
41-
<View className="flex flex-1 flex-col items-center justify-center mb-4">
38+
<View className='flex flex-1 items-stretch justify-center'>
39+
<View className='flex flex-1 flex-col items-center justify-center mb-4'>
4240
<LottieView
4341
autoPlay={true}
4442
loop={true}
45-
source={require("../../assets/activity.json")}
43+
source={require('../../assets/activity.json')}
4644
style={{ width: 320, height: 320 }}
4745
/>
4846
</View>
49-
<View className="flex flex-1 flex-col items-stretch gap-y-6">
50-
<View className="flex flex-col items-center">
51-
<View className="flex flex-row gap-x-3 items-center justify-center mb-4">
52-
<Text className="text-2xl text-center font-medium">
53-
Select an activity type
54-
</Text>
47+
<View className='flex flex-1 flex-col items-stretch gap-y-6'>
48+
<View className='flex flex-col items-center'>
49+
<View className='flex flex-row gap-x-3 items-center justify-center mb-4'>
50+
<Text className='text-2xl text-center font-medium'>Select an activity type</Text>
5551
<InfoAlertIcon
56-
title={"What does this mean?"}
52+
title={'What does this mean?'}
5753
description={
58-
"Whether you are in the mood to tackle chores or enjoy some free play, select what suits you best!"
54+
'Whether you are in the mood to tackle chores or enjoy some free play, select what suits you best!'
5955
}
6056
/>
6157
</View>
62-
<Text className="text-lg text-center">
58+
<Text className='text-lg text-center'>
6359
Are you looking to do some chores or play today?
6460
</Text>
6561
</View>
66-
<View className="flex items-center justify-center flex-row gap-4">
62+
<View className='flex items-center justify-center flex-row gap-4'>
6763
<ChoresButtonModal
6864
activityType={activityType}
69-
onPress={() => onChange("chores")}
65+
onPress={() => onChange('chores')}
7066
onFinish={(chore) => onChoreSelectionComplete(chore)}
7167
/>
7268

7369
<TouchableOpacity
74-
onPress={() => onChangeAndNext("play")}
70+
onPress={() => onChangeAndNext('play')}
7571
className={`h-28 w-28 rounded-xl flex items-center justify-center ${
76-
activityType === "play" ? "bg-secondary" : "bg-white"
72+
activityType === 'play' ? 'bg-secondary' : 'bg-white'
7773
}`}
7874
>
7975
<IconWrapper>
8076
<Gamepad2 size={32} />
8177
</IconWrapper>
82-
<Text className="text-center text-md mt-4">Play</Text>
78+
<Text className='text-center text-md mt-4'>Play</Text>
8379
</TouchableOpacity>
8480
</View>
8581
</View>

‎app/src/components/HealthConsiderationsDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Text } from '@shadcn/components/ui/text';
1313
import { iconWithClassName } from '@shadcn/icons/iconWithClassName';
1414
import { CheckCircle, Plus, X } from 'lucide-react-native';
1515
import { useState } from 'react';
16-
import { ScrollView, View } from 'react-native';
16+
import { ScrollView } from 'react-native';
1717

1818
iconWithClassName(Plus);
1919
iconWithClassName(CheckCircle);

‎app/src/routes/AuthRoutes.tsx‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,24 @@
22
// Description: This file defines the navigation structure for authenticated users using React Navigation.
33
// It sets up a drawer navigator with routes for various authenticated screens such as Home and Profile.
44

5-
import { createDrawerNavigator } from "@react-navigation/drawer";
6-
import { Drawer, Loading } from "@src/components";
7-
import { Collections, Screens, fireAuth, fireStore } from "@src/constants";
5+
import { createDrawerNavigator } from '@react-navigation/drawer';
6+
import { Drawer, Loading } from '@src/components';
7+
import { Collections, Screens, fireAuth, fireStore } from '@src/constants';
88
import {
99
ActivityPlayer,
1010
Favorite,
1111
Feedback,
12+
History,
1213
Home,
1314
NewKid,
1415
NewPlay,
1516
Onboarding,
1617
Profile,
17-
Welcome,
18-
} from "@src/screens";
19-
import { doc, getDoc } from "firebase/firestore";
20-
import { useEffect, useState } from "react";
21-
import { useAuthState } from "react-firebase-hooks/auth";
18+
Welcome
19+
} from '@src/screens';
20+
import { doc, getDoc } from 'firebase/firestore';
21+
import { useEffect, useState } from 'react';
22+
import { useAuthState } from 'react-firebase-hooks/auth';
2223

2324
// Define the parameter types for the AuthRoutes drawer navigator
2425
export type AuthRoutesParams = {
@@ -53,7 +54,7 @@ export const AuthRoutes: React.FC = () => {
5354
if (!user) return;
5455
const userDocRef = doc(fireStore, Collections.Users, user.uid);
5556
const docData = await getDoc(userDocRef);
56-
setIsFirstTimeUser(!docData.exists() || !docData.get("kids"));
57+
setIsFirstTimeUser(!docData.exists() || !docData.get('kids'));
5758
} catch (error) {
5859
console.log(error);
5960
} finally {
@@ -64,12 +65,7 @@ export const AuthRoutes: React.FC = () => {
6465
}, []);
6566

6667
if (isLoading) {
67-
return (
68-
<Loading
69-
heading="Loading..."
70-
description="Please wait while we load the content."
71-
/>
72-
);
68+
return <Loading heading='Loading...' description='Please wait while we load the content.' />;
7369
}
7470

7571
return (
@@ -82,68 +78,79 @@ export const AuthRoutes: React.FC = () => {
8278
component={Welcome}
8379
options={{
8480
headerShown: false,
85-
gestureHandlerProps: { enabled: false },
81+
gestureHandlerProps: { enabled: false }
8682
}}
8783
/>
8884
<AuthDrawer.Screen
8985
name={Screens.Home}
9086
component={Home}
91-
options={{ headerShown: false }}
87+
options={{
88+
headerShown: false,
89+
gestureHandlerProps: { enabled: false }
90+
}}
9291
/>
9392
<AuthDrawer.Screen
9493
name={Screens.Profile}
9594
component={Profile}
9695
options={{
9796
headerShown: false,
98-
gestureHandlerProps: { enabled: false },
97+
gestureHandlerProps: { enabled: false }
9998
}}
10099
/>
101100
<AuthDrawer.Screen
102101
name={Screens.Onboarding}
103102
component={Onboarding}
104103
options={{
105104
headerShown: false,
106-
gestureHandlerProps: { enabled: false },
105+
gestureHandlerProps: { enabled: false }
107106
}}
108107
/>
109108
<AuthDrawer.Screen
110109
name={Screens.ActivityPlayer}
111110
component={ActivityPlayer}
112111
options={{
113112
headerShown: false,
114-
gestureHandlerProps: { enabled: false },
113+
gestureHandlerProps: { enabled: false }
115114
}}
116115
/>
117116
<AuthDrawer.Screen
118117
name={Screens.Favorite}
119118
component={Favorite}
120119
options={{
121120
headerShown: false,
122-
gestureHandlerProps: { enabled: false },
121+
gestureHandlerProps: { enabled: false }
123122
}}
124123
/>
125124
<AuthDrawer.Screen
126125
name={Screens.NewPlay}
127126
component={NewPlay}
128127
options={{
129128
headerShown: false,
130-
gestureHandlerProps: { enabled: false },
129+
gestureHandlerProps: { enabled: false }
131130
}}
132131
/>
133132
<AuthDrawer.Screen
134133
name={Screens.NewKid}
135134
component={NewKid}
136135
options={{
137136
headerShown: false,
138-
gestureHandlerProps: { enabled: false },
137+
gestureHandlerProps: { enabled: false }
139138
}}
140139
/>
141140
<AuthDrawer.Screen
142141
name={Screens.Feedback}
143142
component={Feedback}
144143
options={{
145144
headerShown: false,
146-
gestureHandlerProps: { enabled: false },
145+
gestureHandlerProps: { enabled: false }
146+
}}
147+
/>
148+
<AuthDrawer.Screen
149+
name={Screens.History}
150+
component={History}
151+
options={{
152+
headerShown: false,
153+
gestureHandlerProps: { enabled: false }
147154
}}
148155
/>
149156
</AuthDrawer.Navigator>

‎app/src/screens/History.tsx‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
import { useNavigation } from '@react-navigation/native';
22
import { Text } from '@shadcn/components';
3-
import { fireAuth, Collections, fireStore, Screens, Stacks } from '@src/constants';
3+
import { Collections, Screens, Stacks, fireAuth, fireStore } from '@src/constants';
44
import type { HistoryActivity } from '@src/types';
5+
import type { AppNavigation } from '@src/types';
56
import { collection, doc, getDocs, updateDoc } from 'firebase/firestore';
7+
import { UserIcon } from 'lucide-react-native';
68
import React, { useEffect } from 'react';
7-
import type { AppNavigation } from '@src/types';
89
import { useAuthState } from 'react-firebase-hooks/auth';
910
import { Image, ScrollView, TouchableOpacity, View } from 'react-native';
1011
import FeatherIcon from 'react-native-vector-icons/Feather';
11-
import MCIIcon from 'react-native-vector-icons/MaterialCommunityIcons';
12+
import type { IconProps } from 'react-native-vector-icons/Icon';
13+
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
1214

1315
export const History: React.FC = () => {
1416
const { navigate } = useNavigation<AppNavigation>();
1517
const [user] = useAuthState(fireAuth);
1618
const [activeTab, setActiveTab] = React.useState<'all' | 'favorites'>('all');
1719
const [items, setItems] = React.useState([] as HistoryActivity[]);
1820

21+
const MCIIcon = MaterialCommunityIcons as unknown as React.FC<IconProps>;
22+
const FeatherIconCasted = FeatherIcon as unknown as React.FC<IconProps>;
23+
1924
const fetchFavoriteActivities = async () => {
2025
if (!user) {
2126
console.log('No user found!');
@@ -94,6 +99,10 @@ export const History: React.FC = () => {
9499
});
95100
};
96101

102+
const onHomeBtnPressed = () => {
103+
navigate(Stacks.Auth, { screen: Screens.Home });
104+
};
105+
97106
// Decide which items to show based on activeTab
98107
const itemsToShow =
99108
activeTab === 'all' ? items : items.filter((item) => item.isFavourite === true);
@@ -102,22 +111,25 @@ export const History: React.FC = () => {
102111
const iconColor = '#620674';
103112

104113
return (
105-
<View className='flex-1 bg-white'>
106-
{/* Header Section */}
107-
<View className='pt-12 px-4 pb-4'>
108-
{/* Avatar + Welcome Row */}
109-
<View className='flex-row items-center mb-6'>
114+
<View className='flex flex-1 flex-col px-6 gap-y-4'>
115+
<View className='flex flex-row items-center justify-between mt-4'>
116+
<View className='flex flex-row items-center gap-x-4'>
110117
{user?.photoURL ? (
111-
<Image source={{ uri: user.photoURL }} className='w-8 h-8 rounded-full mr-2' />
118+
<Image source={{ uri: user.photoURL }} className='w-10 h-10 rounded-full mr-3' />
112119
) : (
113-
<FeatherIcon name='user' size={28} color={iconColor} style={{ marginRight: 8 }} />
120+
<View className='w-10 h-10 rounded-full bg-gray-300 mr-3 flex items-center justify-center'>
121+
<UserIcon className='text-gray-500 w-6 h-6' />
122+
</View>
114123
)}
115-
116-
<Text className='text-xl font-semibold text-primary'>
117-
{`Welcome ${user?.displayName || user?.email || 'User'}!`}
118-
</Text>
124+
<Text className='text-l font-bold text-primary text-xl '>History</Text>
119125
</View>
120126

127+
<TouchableOpacity onPress={onHomeBtnPressed} className='ml-auto'>
128+
<FeatherIconCasted name='home' size={27} color='#620674' />
129+
</TouchableOpacity>
130+
</View>
131+
132+
<View className='pt-1 px-4 pb-4'>
121133
{/* Tabs */}
122134
<View className='flex-row'>
123135
<TouchableOpacity onPress={() => setActiveTab('all')}>
@@ -156,13 +168,13 @@ export const History: React.FC = () => {
156168
className='flex-row items-center justify-between bg-gray-100 px-4 py-3 mx-4 mb-2 rounded-md'
157169
>
158170
{/* Item Info */}
159-
<View>
171+
<View style={{ width: '75%' }}>
160172
<Text className='text-base text-primary'>{item.activity}</Text>
161173
<Text className='text-sm text-primary/70'>{item.description}</Text>
162174
</View>
163175

164176
{/* Action Buttons in two rows (2x2) */}
165-
<View>
177+
<View style={{ width: '25%' }}>
166178
{/* Top row */}
167179
<View className='flex-row'>
168180
<TouchableOpacity className='m-2' onPress={() => handleToggleFavourite(item.id)}>
@@ -180,10 +192,10 @@ export const History: React.FC = () => {
180192
{/* Bottom row */}
181193
<View className='flex-row'>
182194
<TouchableOpacity className='m-2'>
183-
<FeatherIcon name='edit-3' size={20} color={iconColor} />
195+
<FeatherIconCasted name='edit-3' size={20} color={iconColor} />
184196
</TouchableOpacity>
185197
<TouchableOpacity className='m-2' onPress={() => replayActivity(item.id)}>
186-
<FeatherIcon name='refresh-cw' size={20} color={iconColor} />
198+
<FeatherIconCasted name='refresh-cw' size={20} color={iconColor} />
187199
</TouchableOpacity>
188200
</View>
189201
</View>

0 commit comments

Comments
 (0)