feat(expo): added RecentMusics component to display recent musics add…

…ed by the logged in user
datsmysong · Apr 5, 2024 · cca2af0 · cca2af0
1 parent 8e5df58
commit cca2af0
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 18 deletions.
diff --git a/expo/app/(tabs)/index.tsx b/expo/app/(tabs)/index.tsx
@@ -1,15 +1,52 @@
 // import * as WebBrowser from "expo-web-browser";
+import { JSONTrack } from "commons/backend-types";
 import ClockCounterClockwise from "phosphor-react-native/src/icons/ClockCounterClockwise";
-import React from "react";
-import { View as NativeView, ScrollView } from "react-native";
+import MusicNote from "phosphor-react-native/src/icons/MusicNote";
+import React, { useEffect, useState } from "react";
+import { FlatList, View as NativeView, ScrollView } from "react-native";
 
+import Alert from "../../components/Alert";
 import Button from "../../components/Button";
+import { TrackCard } from "../../components/Music";
 import { View } from "../../components/Themed";
 import { RoomHistoryList } from "../../components/UserRoomHistory";
 import H1 from "../../components/text/H1";
 import H2 from "../../components/text/H2";
+import { getApiUrl } from "../../lib/apiUrl";
 import { useUserProfile } from "../../lib/userProfile";
 
+function RecentMusics() {
+  const userProfile = useUserProfile();
+  const [recentMusics, setRecentMusics] = useState<JSONTrack[]>([]);
+  const apiUrl = getApiUrl();
+
+  useEffect(() => {
+    if (!userProfile) return;
+
+    const fetchRecentMusics = async () => {
+      const query = await fetch(`${apiUrl}/recent-musics`, {
+        credentials: "include",
+      });
+      if (!query.ok)
+        return Alert.alert(
+          "Erreur serveur, revenez plus tard ou contactez un administrateur"
+        );
+      const data = await query.json();
+      setRecentMusics(data);
+    };
+
+    fetchRecentMusics();
+  }, [userProfile]);
+
+  return (
+    <FlatList
+      data={recentMusics}
+      renderItem={({ item }) => <TrackCard key={item.id} music={item} />}
+      ItemSeparatorComponent={() => <View style={{ height: 12 }} />}
+    />
+  );
+}
+
 export default function HomeTab() {
   // This shouldn't be needed, but I'm leaving this here just in case that breaks something
   // WebBrowser.maybeCompleteAuthSession();
@@ -23,25 +60,54 @@ export default function HomeTab() {
           alignItems: "flex-start",
         }}
       >
-        <View
-          style={{
-            gap: 12,
-            flexDirection: "row",
-            justifyContent: "center",
-            alignItems: "flex-start",
-          }}
-        >
-          <ClockCounterClockwise />
-          <H2>Votre dernière salle</H2>
-        </View>
+        <TitleIcon
+          title="Votre dernière salle"
+          icon={<ClockCounterClockwise />}
+        />
         <View style={{ width: "100%" }}>
           <RoomHistoryList limit={1} />
         </View>
       </View>
+      <View
+        style={{
+          gap: 12,
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+        }}
+      >
+        <TitleIcon
+          title="Vos dernières musiques partagées"
+          icon={<MusicNote />}
+        />
+        <View style={{ width: "100%" }}>
+          <RecentMusics />
+        </View>
+      </View>
     </ScrollView>
   );
 }
 
+type TitleIconProps = {
+  icon: React.ReactNode;
+  title: string;
+};
+
+function TitleIcon({ icon, title }: TitleIconProps) {
+  return (
+    <View
+      style={{
+        gap: 12,
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "flex-start",
+      }}
+    >
+      {icon}
+      <H2>{title}</H2>
+    </View>
+  );
+}
+
 export function HomeTabHeader() {
   const userProfile = useUserProfile();
 
@@ -63,7 +129,7 @@ export function HomeTabHeader() {
           alignContent: "center",
         }}
       >
-        <H1>Salut {userProfile?.username ?? ""} 👋</H1>
+        <H1>Salut {userProfile?.profile?.nickname ?? ""} 👋</H1>
       </NativeView>
       <NativeView style={{ flex: 1, gap: 8, paddingVertical: 12 }}>
         <Button block href="/rooms/create">

diff --git a/expo/lib/userProfile.ts b/expo/lib/userProfile.ts
@@ -1,14 +1,20 @@
-import { PostgrestError, User } from "@supabase/supabase-js";
-import { UserProfile } from "commons/database-types-utils";
+import { PostgrestError, QueryData, User } from "@supabase/supabase-js";
 import { useEffect, useState } from "react";
 
 import { supabase } from "./supabase";
 import { useSupabaseUserHook } from "./useSupabaseUser";
 
+const userProfileQuery = supabase
+  .from("user_profile")
+  .select("*, profile(*)")
+  .single();
+
+type UserProfileQueryResponse = QueryData<typeof userProfileQuery>;
+
 export const getUserProfile = async (id: string) => {
   const { data, error } = await supabase
     .from("user_profile")
-    .select("*")
+    .select("*, profile(*)")
     .eq("account_id", id)
     .single();
   if (error) {
@@ -30,7 +36,7 @@ export const getUserProfileFromUserProfileId = async (id: string) => {
 };
 
 export function useUserProfile() {
-  const [profile, setProfile] = useState<UserProfile | null>();
+  const [profile, setProfile] = useState<UserProfileQueryResponse | null>();
   const user = useSupabaseUserHook();
 
   useEffect(() => {