feat(api): link to api

apps/mobile/app/(app)/_layout.tsx

@@ -1,14 +1,15 @@
 import { Drawer } from "expo-router/drawer";
 
 import { DrawerContent } from "@/components/ui/(app)/drawer";
+import { BasketProvider } from "@/hooks/useBasket";
+import { LocationProvider } from "@/hooks/useLocation";
 
 export default function AppLayout() {
   return (
-    <Drawer
-      drawerContent={(props) => <DrawerContent {...props} />}
-      screenOptions={{
-        headerShown: false,
-      }}
-    />
+    <LocationProvider>
+      <BasketProvider>
+        <Drawer drawerContent={(props) => <DrawerContent {...props} />} screenOptions={{ headerShown: false }} />
+      </BasketProvider>
+    </LocationProvider>
   );
 }

apps/mobile/app/(app)/basket.tsx

@@ -1,4 +1,3 @@
-import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNavigation } from "expo-router";
 import { FlatList, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -8,7 +7,7 @@ import { ProductBasketCard } from "@/components/product/basket";
 import { Button } from "@/components/ui/button";
 import { AppHeader } from "@/components/ui/header";
 import { productList } from "@/constants/data";
-import { useBasket } from "@/hooks/basket";
+import { useBasket } from "@/hooks/useBasket";
 import { Product } from "@/types/product";
 
 export default function Basket() {

apps/mobile/app/(app)/home.tsx

@@ -9,10 +9,13 @@ import { RestaurantCard } from "@/components/restaurant/card";
 import { AppHeader } from "@/components/ui/header";
 import { CategoryHeader } from "@/components/ui/header/category";
 import { SearchInput } from "@/components/ui/input/search";
-import { productList, restaurantList } from "@/constants/data";
+import { useBasket } from "@/hooks/useBasket";
+import { useLocation } from "@/hooks/useLocation";
 
 export default function Index() {
   const [search, setSearch] = useState("");
+  const { products } = useBasket();
+  const { restaurants } = useLocation();
 
   return (
     <View className="relative flex flex-col justify-between w-screen h-screen p-6 pb-16 bg-white">
@@ -56,7 +59,7 @@ export default function Index() {
         <FlatList
           className="flex-grow-0 w-screen shrink-0"
           horizontal
-          data={productList}
+          data={products}
           renderItem={({ item }) => <ProductCard {...item} />}
         />
         <View className="w-full">
@@ -68,7 +71,7 @@ export default function Index() {
         </View>
         <FlatList
           className="flex-grow w-full shrink-0"
-          data={restaurantList}
+          data={restaurants}
           renderItem={({ item }) => <RestaurantCard {...item} />}
         />
       </SafeAreaView>

apps/mobile/app/(app)/orders/[id]/index.tsx

@@ -7,7 +7,7 @@ import MapView, { Marker } from "react-native-maps";
 import MapViewDirections from "react-native-maps-directions";
 
 import { orderList } from "@/constants/data";
-import { useNative } from "@/hooks/native";
+import { useNative } from "@/hooks/useNative";
 import { DeliveryType, Order } from "@/types/order";
 import { PaymentStatus } from "@/types/payment";
 
@@ -78,15 +78,15 @@ export default function OrderPage() {
           strokeColor="#008D5E"
         />
       </MapView>
-      <View key="header" className="flex flex-row items-center justify-between w-full absolute left-0 p-2 -mt-px">
+      <View key="header" className="absolute left-0 flex flex-row items-center justify-between w-full p-2 -mt-px">
         <TouchableOpacity
           onPress={() => navigate(`(app)`, { screen: "orders/index" })}
-          className=" flex items-center justify-center w-10 h-10 p-2 m-4 bg-black top-12"
+          className="flex items-center justify-center w-10 h-10 p-2 m-4 bg-black  top-12"
         >
           <MaterialCommunityIcons name="arrow-left" size={24} color="white" />
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => {}} className=" flex items-center justify-center w-10 h-10 p-2 m-4 top-12">
-          <Image className="w-10 h-10  bg-white" source={require("@/assets/images/avatar.png")} />
+        <TouchableOpacity onPress={() => {}} className="flex items-center justify-center w-10 h-10 p-2 m-4  top-12">
+          <Image className="w-10 h-10 bg-white" source={require("@/assets/images/avatar.png")} />
         </TouchableOpacity>
       </View>
 

apps/mobile/app/(app)/products/[id].tsx

@@ -8,7 +8,7 @@ import { BasketHeader } from "@/components/basket/header";
 import { Button } from "@/components/ui/button";
 import { AppHeader } from "@/components/ui/header";
 import { productList } from "@/constants/data";
-import { useBasket } from "@/hooks/basket";
+import { useBasket } from "@/hooks/useBasket";
 import { Product } from "@/types/product";
 
 export default function ProductPage() {

apps/mobile/app/(auth)/login.tsx

@@ -6,12 +6,12 @@ import { SafeAreaView } from "react-native-safe-area-context";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { useAuth } from "@/hooks/auth";
+import { useAuth } from "@/hooks/useAuth";
 
 export default function AuthLogin() {
-  const { setUser } = useAuth();
-  const [email, setEmail] = useState("[email protected]");
-  const [password, setPassword] = useState("MotDePasse");
+  const { login } = useAuth();
+  const [email, setEmail] = useState("[email protected]");
+  const [password, setPassword] = useState("password");
 
   return (
     <View className="flex flex-col justify-between w-screen h-screen p-6 pb-16 bg-white">
@@ -44,8 +44,11 @@ export default function AuthLogin() {
         <Button
           title="C'est parti !"
           onPress={() => {
-            setUser({ token: "token" });
-            router.push("/(app)/home");
+            login(email, password)
+              .then((r) => {
+                if (r.ok) router.push("/(app)/home");
+              })
+              .catch(console.error);
           }}
           icon="chevron-right"
         />

apps/mobile/app/_layout.tsx

@@ -1,18 +1,16 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useFonts } from "expo-font";
 import { SplashScreen, Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useEffect } from "react";
 import { useColorScheme } from "react-native";
 
-import { AuthProvider } from "@/hooks/auth";
-import { NativeProvider } from "@/hooks/native";
+import { AuthProvider, useAuth } from "@/hooks/useAuth";
+import { NativeProvider } from "@/hooks/useNative";
 
-export {
-  // Catch any errors thrown by the Layout component.
-  ErrorBoundary,
-} from "expo-router";
+export { ErrorBoundary } from "expo-router";
 
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
@@ -37,27 +35,33 @@ export default function RootLayout() {
     if (loaded) SplashScreen.hideAsync();
   }, [loaded]);
 
+  const colorScheme = useColorScheme();
+  const queryClient = new QueryClient();
   if (!loaded) return null;
 
-  return <RootLayoutNav />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <NativeProvider>
+        <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+          <StatusBar style="auto" />
+          <AuthProvider>
+            <RootLayoutNav />
+          </AuthProvider>
+        </ThemeProvider>
+      </NativeProvider>
+    </QueryClientProvider>
+  );
 }
 
 function RootLayoutNav() {
-  const colorScheme = useColorScheme();
+  const { isAuthenticated } = useAuth();
 
   return (
-    <NativeProvider>
-      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-        <StatusBar style="auto" />
-        <AuthProvider>
-          <Stack
-            initialRouteName="(onboarding)/first"
-            screenOptions={{
-              headerShown: false,
-            }}
-          />
-        </AuthProvider>
-      </ThemeProvider>
-    </NativeProvider>
+    <Stack
+      initialRouteName={isAuthenticated ? "(app)/home" : "(onboarding)/first"}
+      screenOptions={{
+        headerShown: false,
+      }}
+    />
   );
 }

apps/mobile/components/basket/header.tsx

@@ -2,7 +2,8 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNavigation } from "expo-router";
 import { Text, TouchableOpacity, View } from "react-native";
 
-import { useBasket } from "@/hooks/basket";
+import { useBasket } from "@/hooks/useBasket";
+import { toPrice } from "@/lib/product/toPrice";
 
 export const BasketHeader = () => {
   const { total } = useBasket();
@@ -27,7 +28,7 @@ export const BasketHeader = () => {
         <Text className="ml-2 text-2xl font-bold text-black uppercase">Panier</Text>
       </View>
       <View className="bg-[#B6E8D8] h-8 px-2 flex items-center justify-center">
-        <Text className="text-xl font-bold text-[#008D5E]">{total?.toFixed(2).replace(".", "€")}</Text>
+        <Text className="text-xl font-bold text-[#008D5E]">{toPrice(total)}</Text>
       </View>
     </TouchableOpacity>
   );

apps/mobile/components/order/list/item.tsx

@@ -4,7 +4,8 @@ import { format } from "date-fns";
 import { fr } from "date-fns/locale";
 import { Text, TouchableOpacity, View } from "react-native";
 
-import { Status } from "@/types";
+import { toName } from "@/lib/user";
+import { Status } from "@/types/global";
 import { Order } from "@/types/order";
 
 const ORDER_STATUS = {
@@ -30,7 +31,7 @@ export const OrderListItem = ({ item, navigate }: { item: Order; navigate: (href
       )}
     >
       {item.status !== Status.REJECTED && item.status !== Status.FULFILLED && (
-        <Text className="font-bold text-base">{`Livraison estimée : ${format(
+        <Text className="text-base font-bold">{`Livraison estimée : ${format(
           new Date(item.delivery.eta),
           "dd MMMM yyyy à HH:mm",
           {
@@ -44,8 +45,8 @@ export const OrderListItem = ({ item, navigate }: { item: Order; navigate: (href
           locale: fr,
         })}`}</Text>
       )}
-      <View className="flex flex-row space-x-2 justify-between">
-        <View className="flex flex-col grow gap-1">
+      <View className="flex flex-row justify-between space-x-2">
+        <View className="flex flex-col gap-1 grow">
           <View className="flex flex-row items-center">
             <MaterialCommunityIcons name="truck-delivery" size={16} color="black" />
             <Text className="ml-2 text-sm font-medium text-black">{ORDER_STATUS[item.status]}</Text>
@@ -65,9 +66,7 @@ export const OrderListItem = ({ item, navigate }: { item: Order; navigate: (href
           </View>
           <View className="flex flex-row items-center">
             <MaterialCommunityIcons name="walk" size={16} color="black" />
-            <Text className="ml-2 text-sm font-medium text-black">
-              {item.delivery.person.first_name + " " + item.delivery.person.last_name}
-            </Text>
+            <Text className="ml-2 text-sm font-medium text-black">{toName(item.delivery.deliveryPerson)}</Text>
           </View>
         </View>
       </View>

apps/mobile/components/product/basket.tsx

@@ -2,7 +2,7 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Image, ImageSourcePropType, Text, TouchableOpacity, View } from "react-native";
 import { Swipeable } from "react-native-gesture-handler";
 
-import { useBasket } from "@/hooks/basket";
+import { useBasket } from "@/hooks/useBasket";
 import { Product } from "@/types/product";
 
 export const ProductBasketCard = ({ id, name, price, image }: Product) => {

apps/mobile/components/product/card.tsx

@@ -16,12 +16,18 @@ export const ProductCard = (props: Product) => {
       onPress={() => navigate("(app)", { screen: "products/[id]", params: { id: props.id } })}
     >
       <Image className="w-full h-28" source={props.image as ImageSourcePropType} />
-      <View className="absolute top-2 left-2 px-1 py-0.5" style={{ backgroundColor: props.categories[0].hexa_color }}>
-        <Text className="text-xs text-black">
-          {props.categories[0].icon + " "}
-          {props.categories[0].libelle}
-        </Text>
-      </View>
+      {props.categoriesList.length > 0 && (
+        <View className="absolute flex flex-row space-x-1 top-2 left-2">
+          {props.categoriesList.map((category) => (
+            <View key={category.id} style={{ backgroundColor: category.hexaColor }} className="px-1 py-0.5">
+              <Text className="text-xs text-black">
+                {category.icon + " "}
+                {category.libelle}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
       <View className="absolute top-[88px] right-2 px-1 py-0.5 bg-gray-100">
         <Text className="text-xs font-bold text-black">{props.price.toFixed(2).replace(".", "€")}</Text>
       </View>

apps/mobile/components/restaurant/card.tsx

@@ -3,8 +3,8 @@ import classNames from "classnames";
 import { Image, Text, TouchableOpacity, View } from "react-native";
 
 import { restaurantList } from "@/constants/data";
-import { useNative } from "@/hooks/native";
-import { calculateDistance } from "@/libs/distance";
+import { useNative } from "@/hooks/useNative";
+import { calculateDistance } from "@/lib/distance";
 
 export const RestaurantCard = (props: (typeof restaurantList)[number]) => {
   const { location } = useNative();
@@ -13,23 +13,23 @@ export const RestaurantCard = (props: (typeof restaurantList)[number]) => {
       <View className="flex flex-row justify-between w-full">
         <View className="flex flex-row propss-center">
           <Image className="w-24 h-6" source={require("@/assets/images/logo-text.png")} />
-          <Text className="ml-1 font-bold text-white flex-shrink-0 flex-nowrap grow">{props.name}</Text>
+          <Text className="flex-shrink-0 ml-1 font-bold text-white flex-nowrap grow">{props.name}</Text>
         </View>
         {location && (
           <View className="flex flex-row propss-center">
             <MaterialCommunityIcons name="map-marker" size={12} color="white" />
             <Text className="text-xs text-white">
-              {calculateDistance(
-                [location?.coords.latitude, location?.coords.longitude],
-                props.coordinates as [number, number],
-              ).toFixed(2) + " km"}
+              {calculateDistance([location?.coords.latitude, location?.coords.longitude], [
+                props.address.lat,
+                props.address.lng,
+              ] as [number, number]).toFixed(2) + " km"}
             </Text>
           </View>
         )}
       </View>
       <View className="flex flex-row mt-1 propss-center">
         <View className={classNames("w-2 h-2 mr-2 rounded-full", "bg-green-500")} />
-        <Text className="text-xs text-white">{props.opening_hours}</Text>
+        <Text className="text-xs text-white">{props.openinghoursList.join(" / ")}</Text>
       </View>
     </TouchableOpacity>
   );

apps/mobile/components/user/location.tsx

@@ -1,9 +1,13 @@
 import { useRef } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { FlatList, Text, TouchableOpacity, View } from "react-native";
 import RBSheet from "react-native-raw-bottom-sheet";
 
+import { RestaurantCard } from "@/components/restaurant/card";
+import { useLocation } from "@/hooks/useLocation";
+
 export const UserLocation = () => {
   const refRBSheet = useRef<RBSheet>(null);
+  const { restaurants } = useLocation();
 
   return (
     <>
@@ -13,7 +17,11 @@ export const UserLocation = () => {
       </TouchableOpacity>
       <RBSheet ref={refRBSheet} closeOnDragDown closeOnPressMask>
         <View className="absolute flex items-center flex-1 w-full h-full bg-white">
-          <Text>Awesome 🎉</Text>
+          <FlatList
+            className="flex-grow w-full shrink-0"
+            data={restaurants}
+            renderItem={({ item }) => <RestaurantCard {...item} />}
+          />
         </View>
       </RBSheet>
     </>