-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: create header of profil page * fix: added props to avatar (radius & noCache) * chore: added noCaches in Avatar form * feat: added history in profile page * fix: history card request * feat: added Font constants * chore: using constant instance of arbitrary values * fix: review
- Loading branch information
1 parent
b73e1bc
commit c62caf3
Showing
10 changed files
with
296 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,17 @@ | ||
| import SignOut from "phosphor-react-native/src/icons/SignOut"; | ||
| import React from "react"; | ||
| import { StyleSheet } from "react-native"; | ||
| import { ScrollView } from "react-native"; | ||
|
|
||
| import Button from "../../../components/Button"; | ||
| import { View } from "../../../components/Tamed"; | ||
| import { supabase } from "../../../lib/supabase"; | ||
| import { useSupabaseUserHook } from "../../../lib/useSupabaseUser"; | ||
| import UserRoomHistory from "../../../components/UserRoomHistory"; | ||
|
|
||
| export default function TabsProfile() { | ||
| const user = useSupabaseUserHook(); | ||
|
|
||
| return ( | ||
| <> | ||
| {user && ( | ||
| <View style={styles.elements}> | ||
| <Button | ||
| prependIcon={<SignOut />} | ||
| onPress={() => supabase.auth.signOut()} | ||
| > | ||
| Se déconnecter | ||
| </Button> | ||
| <Button href="/(tabs)/profile/account">Gérer mon compte</Button> | ||
| </View> | ||
| )} | ||
| </> | ||
| <ScrollView | ||
| contentContainerStyle={{ | ||
| paddingVertical: 32, | ||
| paddingHorizontal: 18, | ||
| }} | ||
| > | ||
| <UserRoomHistory limit={10} /> | ||
| </ScrollView> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| elements: { | ||
| gap: 10, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,84 @@ | ||
| import { Room } from "commons/database-types-utils"; | ||
| import { QueryData } from "@supabase/supabase-js/dist/module/lib/types"; | ||
| import { useEffect, useState } from "react"; | ||
| import { FlatList, StyleSheet } from "react-native"; | ||
|
|
||
| import RoomHistoryInfoCard from "./RoomHistoryInfoCard"; | ||
| import { View } from "./Themed"; | ||
| import H2 from "./text/H2"; | ||
| import Subtitle from "./text/Subtitle"; | ||
| import { supabase } from "../lib/supabase"; | ||
| import { useUserProfile } from "../lib/userProfile"; | ||
| import Alert from "./Alert"; | ||
| import RoomHistoryInfoCard from "./RoomHistoryInfoCard"; | ||
| import { Text, View } from "./Themed"; | ||
|
|
||
| export default function UserRoomHistory() { | ||
| const [rooms, setRooms] = useState<Room[]>([]); | ||
| const historyRoom = supabase | ||
| .from("room_users") | ||
| .select("rooms!inner(created_at, name, id, host:user_profile(username))"); | ||
|
|
||
| type HistoryRoomType = QueryData<typeof historyRoom>; | ||
|
|
||
| export default function UserRoomHistory({ limit = 5 }: { limit?: number }) { | ||
| const [rooms, setRooms] = useState<HistoryRoomType | null>([]); | ||
| const user = useUserProfile(); | ||
|
|
||
| useEffect(() => { | ||
| (async () => { | ||
| if (!user) return; | ||
| const userId = user.user_profile_id; | ||
|
|
||
| const { error, data } = await supabase | ||
| .from("rooms") | ||
| .select("*, room_users(*)") | ||
| .eq("room_users.profile_id", userId) | ||
| .eq("is_active", false) | ||
| .order("created_at", { ascending: false }) | ||
| .limit(5); | ||
|
|
||
| if (error) { | ||
| return Alert.alert( | ||
| "Erreur lors de la récupération des salles d'écoute" | ||
| ); | ||
| if (!user) return; | ||
| /** | ||
| * Fetch all rooms where user is a member and the room is not active | ||
| * Tips : If the filter on a referenced table's column is not satisfied, the referenced | ||
| * table returns [] or null but the parent table is not filtered out. | ||
| * If you want to filter out the parent table rows, use the !inner hint | ||
| */ | ||
| const fetchRoomHistory = async () => { | ||
| const { data } = await supabase | ||
| .from("room_users") | ||
| .select( | ||
| "rooms!inner(created_at, name, id, host:user_profile(username))" | ||
| ) | ||
| .eq("rooms.is_active", false) | ||
| .eq("profile_id", user.user_profile_id) | ||
| .order("rooms(created_at)", { ascending: false }) | ||
| .limit(limit); | ||
|
|
||
| if (!data || data.length === 0) { | ||
| return setRooms(null); | ||
| } | ||
|
|
||
| setRooms(data); | ||
| })(); | ||
| }; | ||
| fetchRoomHistory(); | ||
| }, [user]); | ||
|
|
||
| if (rooms) { | ||
| const everyoneHaveRoom = rooms.every((room) => room.rooms); | ||
| const everyoneHaveId = rooms.every((room) => room.rooms?.name); | ||
| if (!everyoneHaveId || !everyoneHaveRoom) | ||
| return <Subtitle>Impossible de charger l'historique des salles</Subtitle>; | ||
| } | ||
|
|
||
| return ( | ||
| <View> | ||
| <Text style={styles.title}>Historique</Text> | ||
| <View style={{ gap: 10 }}> | ||
| <H2>Historique</H2> | ||
| {rooms == null && ( | ||
| <Subtitle>Vous n'avez aucune salle dans votre historique</Subtitle> | ||
| )} | ||
| <FlatList | ||
| data={rooms} | ||
| keyExtractor={(item) => item.id} | ||
| keyExtractor={(item) => item.rooms!.id} | ||
| renderItem={({ item }) => { | ||
| return <RoomHistoryInfoCard room={item} />; | ||
| if (!item.rooms) | ||
| return <Subtitle>Impossible de charger cette salle</Subtitle>; | ||
| return ( | ||
| <RoomHistoryInfoCard | ||
| createdAt={item.rooms.created_at} | ||
| hostUsername={ | ||
| item.rooms.host?.username ?? | ||
| "Impossible de récupérer le nom de l'hôte" | ||
| } | ||
| roomId={item.rooms.id} | ||
| roomName={item.rooms.name} | ||
| /> | ||
| ); | ||
| }} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| title: { | ||
| fontFamily: "Outfit-Bold", | ||
| fontSize: 24, | ||
| marginBottom: 10, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.