Skip to content

Commit f6ca047

Browse files
josh-torrejosh-torre
committed
Add FE format and format all existing files
1 parent 5f9a1e8 commit f6ca047

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+10540
-6188
lines changed

‎Makefile‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
up-backend up-frontend logs-backend logs-frontend \
55
build-backend build-frontend shell-backend shell-frontend setup-hooks generate-api \
66
clean-node-modules \
7-
up-localstack up-backend-localstack logs-localstack
7+
format-frontend \
8+
up-localstack up-backend-localstack logs-localstack
89

910
# Default target - show help
1011
.DEFAULT_GOAL := help
@@ -52,6 +53,7 @@ help:
5253
@echo " make logs-frontend - View frontend logs"
5354
@echo " make build-backend - Build only backend"
5455
@echo " make build-frontend - Build only frontend"
56+
@echo " make format-frontend - Format all frontend files with Prettier"
5557
@echo ""
5658
@echo "$(BLUE)Container Management:$(NC)"
5759
@echo " make stop - Stop all services (without removing)"
@@ -187,6 +189,11 @@ restart-frontend:
187189
@$(DOCKER_COMPOSE) restart frontend
188190
@echo "$(GREEN)Frontend restarted$(NC)"
189191

192+
format-frontend:
193+
@echo "$(BOLD)Formatting all frontend files with Prettier...$(NC)"
194+
@cd frontend && bun x prettier --write "**/*.{ts,tsx,js,jsx,json,css,scss,md}"
195+
@echo "$(GREEN)Frontend formatting complete$(NC)"
196+
190197
# ------------------------
191198
# Cleanup Commands
192199
# ------------------------

‎frontend/apps/mobile/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,11 @@ To use the Map features, you must configure Google Maps API keys for iOS and And
4444
2. Edit `.env` and fill in the required values:
4545

4646
## Map Integration & Managing Locations
47+
4748
The map view (app/(tabs)/map.tsx) retrieves event occurrences dynamically from the backend API. It renders location pins for all events that have valid geographic coordinates.
4849

4950
To populate the map:
5051

5152
1. Ensure the backend API is running and accessible.
5253

53-
2. Create event occurrences with associated locations containing valid latitude and longitude.
54+
2. Create event occurrences with associated locations containing valid latitude and longitude.

‎frontend/apps/mobile/app/(app)/(tabs)/_layout.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,10 @@ export default function TabLayout() {
3838
<Tabs.Screen
3939
name="profile"
4040
options={{
41-
title: 'Profile',
42-
tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
41+
title: "Profile",
42+
tabBarIcon: ({ color }) => (
43+
<IconSymbol size={28} name="person.fill" color={color} />
44+
),
4345
}}
4446
/>
4547
<Tabs.Screen name="event" options={{ href: null }} />

‎frontend/apps/mobile/app/(app)/(tabs)/family/_layout.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,34 @@ import { Colors } from "@/constants/theme";
55

66
export default function FamilyLayout() {
77
const colorScheme = useColorScheme();
8-
const theme = Colors[colorScheme ?? 'light'];
8+
const theme = Colors[colorScheme ?? "light"];
99

1010
return (
1111
<Stack
1212
screenOptions={{
1313
headerShown: false,
1414
headerTintColor: theme.tint,
1515
headerStyle: { backgroundColor: theme.background },
16-
headerTitleStyle: { fontFamily: 'NunitoSans_600SemiBold', color: theme.text },
17-
headerBackTitle: "",
16+
headerTitleStyle: {
17+
fontFamily: "NunitoSans_600SemiBold",
18+
color: theme.text,
19+
},
20+
headerBackTitle: "",
1821
}}
1922
>
20-
<Stack.Screen
21-
name="index"
22-
options={{
23-
headerShown: false
24-
}}
23+
<Stack.Screen
24+
name="index"
25+
options={{
26+
headerShown: false,
27+
}}
2528
/>
26-
<Stack.Screen
27-
name="manage"
28-
options={{
29+
<Stack.Screen
30+
name="manage"
31+
options={{
2932
title: "Manage Child",
30-
headerShown: false
31-
}}
33+
headerShown: false,
34+
}}
3235
/>
3336
</Stack>
3437
);
35-
}
38+
}

‎frontend/apps/mobile/app/(app)/(tabs)/family/index.tsx‎

Lines changed: 107 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,65 @@
1-
import React from 'react';
2-
import { View, ScrollView, TouchableOpacity, ActivityIndicator, useColorScheme } from 'react-native';
3-
import { useRouter } from 'expo-router';
4-
import { useSafeAreaInsets } from 'react-native-safe-area-context';
5-
import { ThemedText } from '@/components/themed-text';
6-
import { ThemedView } from '@/components/themed-view';
7-
import { IconSymbol } from '@/components/ui/icon-symbol';
8-
import { useGetChildrenByGuardianId, useGetGuardianById } from '@skillspark/api-client';
9-
import { Colors, AppColors } from '@/constants/theme';
10-
import { ChildListItem } from '@/components/ChildListItem';
11-
import { SectionHeader } from '@/components/SectionHeader';
12-
import { useAuthContext } from '@/hooks/use-auth-context';
13-
import { ErrorScreen } from '@/components/ErrorScreen';
1+
import React from "react";
2+
import {
3+
View,
4+
ScrollView,
5+
TouchableOpacity,
6+
ActivityIndicator,
7+
useColorScheme,
8+
} from "react-native";
9+
import { useRouter } from "expo-router";
10+
import { useSafeAreaInsets } from "react-native-safe-area-context";
11+
import { ThemedText } from "@/components/themed-text";
12+
import { ThemedView } from "@/components/themed-view";
13+
import { IconSymbol } from "@/components/ui/icon-symbol";
14+
import {
15+
useGetChildrenByGuardianId,
16+
useGetGuardianById,
17+
} from "@skillspark/api-client";
18+
import { Colors, AppColors } from "@/constants/theme";
19+
import { ChildListItem } from "@/components/ChildListItem";
20+
import { SectionHeader } from "@/components/SectionHeader";
21+
import { useAuthContext } from "@/hooks/use-auth-context";
22+
import { ErrorScreen } from "@/components/ErrorScreen";
1423

1524
export default function FamilyListScreen() {
1625
const router = useRouter();
1726
const insets = useSafeAreaInsets();
1827
const colorScheme = useColorScheme();
19-
const theme = Colors[colorScheme ?? 'light'];
28+
const theme = Colors[colorScheme ?? "light"];
2029

2130
const { guardianId } = useAuthContext();
2231

23-
const { data: guardianResponse, isLoading: guardianLoading } = useGetGuardianById(guardianId!, {
24-
query: {
25-
enabled: !!guardianId,
26-
}
27-
});
28-
const { data: childrenResponse, isLoading: childrenLoading } = useGetChildrenByGuardianId(guardianId!, {
29-
query: {
30-
enabled: !!guardianId,
31-
}
32-
});
32+
const { data: guardianResponse, isLoading: guardianLoading } =
33+
useGetGuardianById(guardianId!, {
34+
query: {
35+
enabled: !!guardianId,
36+
},
37+
});
38+
const { data: childrenResponse, isLoading: childrenLoading } =
39+
useGetChildrenByGuardianId(guardianId!, {
40+
query: {
41+
enabled: !!guardianId,
42+
},
43+
});
3344

34-
const guardian = guardianResponse?.status === 200 ? guardianResponse.data : null;
35-
const children = childrenResponse?.status === 200 ? childrenResponse.data : [];
45+
const guardian =
46+
guardianResponse?.status === 200 ? guardianResponse.data : null;
47+
const children =
48+
childrenResponse?.status === 200 ? childrenResponse.data : [];
3649

3750
const handleAddChild = () => {
38-
router.push('/family/manage');
51+
router.push("/family/manage");
3952
};
4053

4154
const handleEditChild = (child: any) => {
4255
router.push({
43-
pathname: '/family/manage',
56+
pathname: "/family/manage",
4457
params: {
4558
id: child.id,
4659
name: child.name,
4760
birth_month: child.birth_month,
4861
birth_year: child.birth_year,
49-
school_id: child.school_id ?? '',
62+
school_id: child.school_id ?? "",
5063
interests: child.interests ?? [],
5164
},
5265
});
@@ -68,61 +81,111 @@ export default function FamilyListScreen() {
6881
<ThemedView className="flex-1" style={{ paddingTop: insets.top }}>
6982
<View className="flex-row items-center justify-between px-5 py-3">
7083
<TouchableOpacity
71-
onPress={() => router.navigate('/profile')}
84+
onPress={() => router.navigate("/profile")}
7285
className="w-10 justify-center items-start"
7386
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
7487
>
7588
<IconSymbol name="chevron.left" size={24} color={theme.text} />
7689
</TouchableOpacity>
77-
<ThemedText className="text-xl text-center font-nunito-bold">Family Information</ThemedText>
90+
<ThemedText className="text-xl text-center font-nunito-bold">
91+
Family Information
92+
</ThemedText>
7893
<View className="w-10" />
7994
</View>
8095

81-
<ScrollView contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 12 }} showsVerticalScrollIndicator={false}>
82-
<TouchableOpacity className="flex-row items-start py-4 gap-3" activeOpacity={0.7}>
96+
<ScrollView
97+
contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 12 }}
98+
showsVerticalScrollIndicator={false}
99+
>
100+
<TouchableOpacity
101+
className="flex-row items-start py-4 gap-3"
102+
activeOpacity={0.7}
103+
>
83104
<View className="w-11 h-11 items-center justify-center">
84105
<IconSymbol name="person.circle" size={40} color={theme.text} />
85106
</View>
86107
<View className="flex-1 gap-1">
87-
<ThemedText className="text-base font-nunito-semibold">{guardian?.name}</ThemedText>
88-
<ThemedText className="text-[13px] font-nunito" style={{ color: AppColors.mutedText }}>@{guardian?.username}</ThemedText>
89-
<ThemedText className="text-[13px] font-nunito" style={{ color: AppColors.mutedText }}>{guardian?.email}</ThemedText>
108+
<ThemedText className="text-base font-nunito-semibold">
109+
{guardian?.name}
110+
</ThemedText>
111+
<ThemedText
112+
className="text-[13px] font-nunito"
113+
style={{ color: AppColors.mutedText }}
114+
>
115+
@{guardian?.username}
116+
</ThemedText>
117+
<ThemedText
118+
className="text-[13px] font-nunito"
119+
style={{ color: AppColors.mutedText }}
120+
>
121+
{guardian?.email}
122+
</ThemedText>
90123
</View>
91124
</TouchableOpacity>
92-
<View className="h-px my-3" style={{ backgroundColor: AppColors.divider }} />
125+
<View
126+
className="h-px my-3"
127+
style={{ backgroundColor: AppColors.divider }}
128+
/>
93129
<SectionHeader
94130
title="Child Profile"
95131
actionLabel="add profile +"
96132
onAction={handleAddChild}
97133
/>
98134
{children.length === 0 && (
99-
<ThemedText className="text-sm pb-4 font-nunito" style={{ color: AppColors.subtleText }}>No child profiles added yet.</ThemedText>
135+
<ThemedText
136+
className="text-sm pb-4 font-nunito"
137+
style={{ color: AppColors.subtleText }}
138+
>
139+
No child profiles added yet.
140+
</ThemedText>
100141
)}
101142
{children.map((child: any, idx: number) => (
102143
<React.Fragment key={child.id}>
103144
<ChildListItem
104145
child={child}
105146
onPress={() => handleEditChild(child)}
106147
/>
107-
{idx < children.length - 1 && <View className="h-px my-3" style={{ backgroundColor: AppColors.divider }} />}
148+
{idx < children.length - 1 && (
149+
<View
150+
className="h-px my-3"
151+
style={{ backgroundColor: AppColors.divider }}
152+
/>
153+
)}
108154
</React.Fragment>
109155
))}
110-
<View className="h-px my-3" style={{ backgroundColor: AppColors.divider }} />
156+
<View
157+
className="h-px my-3"
158+
style={{ backgroundColor: AppColors.divider }}
159+
/>
111160
<SectionHeader
112161
title="Emergency Contact"
113162
actionLabel="add contact +"
114163
onAction={() => {}}
115164
/>
116165
{/* TODO: Replace with real emergency contact data from API */}
117-
<TouchableOpacity className="flex-row items-start py-4 gap-3" activeOpacity={0.7}>
166+
<TouchableOpacity
167+
className="flex-row items-start py-4 gap-3"
168+
activeOpacity={0.7}
169+
>
118170
<View className="w-11 h-11 items-center justify-center">
119171
<IconSymbol name="person.circle" size={40} color={theme.text} />
120172
</View>
121173
<View className="flex-1 gap-1">
122-
<ThemedText className="text-base font-nunito-semibold">Martha Smith</ThemedText>
123-
<ThemedText className="text-[13px] font-nunito" style={{ color: AppColors.mutedText }}>(555) 123-4567</ThemedText>
174+
<ThemedText className="text-base font-nunito-semibold">
175+
Martha Smith
176+
</ThemedText>
177+
<ThemedText
178+
className="text-[13px] font-nunito"
179+
style={{ color: AppColors.mutedText }}
180+
>
181+
(555) 123-4567
182+
</ThemedText>
124183
</View>
125-
<IconSymbol name="chevron.right" size={18} color={AppColors.subtleText} />
184+
<IconSymbol
185+
name="chevron.right"
186+
size={18}
187+
color={AppColors.subtleText}
188+
/>
126189
</TouchableOpacity>
127190
<View className="h-10" />
128191
</ScrollView>

0 commit comments

Comments
 (0)