Change main page and modify flows
This commit is contained in:
Thomas Demirdjian
@@ -1,5 +1,4 @@
|
||||
import { BlurView } from "expo-blur";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
FlatList,
|
||||
Image,
|
||||
@@ -10,6 +9,7 @@ import {
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { Image as ExpoImage } from "expo-image";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { useGlobal } from "reactn";
|
||||
@@ -20,31 +20,40 @@ import MoreMenu from "../../components/MoreMenu";
|
||||
import { projectsRef } from "../../config/firebase";
|
||||
import Page from "../../layouts/Page";
|
||||
import { Routes } from "../../navigation";
|
||||
import { navigate } from "../../navigation/NavigationService";
|
||||
import { navigate, push } from "../../navigation/NavigationService";
|
||||
import { useUser } from "../../providers/UserDataProvider";
|
||||
import { getFollowersCount, getFollowingCount } from "../../services/follows";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import Style, { gutters, size } from "../../styles/Style";
|
||||
import MusicCard from "../Library/components/MusicCard";
|
||||
import { BlurView } from "expo-blur";
|
||||
|
||||
const Profile = () => {
|
||||
const [selected, setSelected] = useState("Chansons");
|
||||
const [currentUserData] = useGlobal("currentUserData");
|
||||
const { userProjects, currentUID } = useUser();
|
||||
const { userProjects, followingCount, currentUserData } = useUser();
|
||||
const [, setTooltip] = useGlobal("_tooltip");
|
||||
const [menuTop, setMenuTop] = useState(0);
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [selectedProjectId, setSelectedProjectId] = useState(null);
|
||||
const [following, setFollowing] = useState(0);
|
||||
const [followers, setFollowers] = useState(0);
|
||||
const onPressMenu = (item) => {
|
||||
setSelected(item);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!currentUID) return;
|
||||
getFollowersCount(currentUID).then(setFollowers);
|
||||
getFollowingCount(currentUID).then(setFollowing);
|
||||
}, [currentUID]);
|
||||
|
||||
const EmptyText = ({ text }) => (
|
||||
<View style={{ flex: 1, ...Style.containerCenter, paddingTop: 20 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
opacity: 0.8,
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<Page
|
||||
backgroundImg={background.profileBG}
|
||||
@@ -76,7 +85,7 @@ const Profile = () => {
|
||||
}
|
||||
>
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<Image
|
||||
<ExpoImage
|
||||
source={
|
||||
currentUserData?.profilePictureURL
|
||||
? {
|
||||
@@ -84,6 +93,10 @@ const Profile = () => {
|
||||
}
|
||||
: img.profile
|
||||
}
|
||||
cachePolicy="memory-disk"
|
||||
priority="high"
|
||||
contentFit="cover"
|
||||
transition={100}
|
||||
style={{
|
||||
...size({ size: 108 }),
|
||||
borderRadius: 100,
|
||||
@@ -101,19 +114,27 @@ const Profile = () => {
|
||||
</View>
|
||||
<View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>{userProjects?.length || 0}</Text>
|
||||
<Text style={styles.label}>projets</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
style={{ flex: 1, alignItems: "center" }}
|
||||
onPress={() => push(Routes.Follows, { selected: "Abonnés" })}
|
||||
>
|
||||
<Text style={styles.value}>
|
||||
{currentUserData?.playlist?.length || 0}
|
||||
{currentUserData?.followedBy?.length || 0}
|
||||
</Text>
|
||||
<Text style={styles.label}>playbacks</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>{followers}</Text>
|
||||
<Text style={styles.label}>abonnés</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>{following}</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={{ flex: 1, alignItems: "center" }}
|
||||
onPress={() =>
|
||||
push(Routes.Follows, { selected: "Abonnements" })
|
||||
}
|
||||
>
|
||||
<Text style={styles.value}>{followingCount}</Text>
|
||||
<Text style={styles.label}>abonnements</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
</View>
|
||||
</BlurView>
|
||||
</View>
|
||||
@@ -157,64 +178,39 @@ const Profile = () => {
|
||||
</View>
|
||||
{selected === "Playbacks" && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<FlatList
|
||||
data={Array.from({ length: 6 })}
|
||||
numColumns={3}
|
||||
contentContainerStyle={{ gap: 14 }}
|
||||
columnWrapperStyle={{ gap: 10 }}
|
||||
renderItem={() => (
|
||||
<Pressable
|
||||
style={{ flex: 1, gap: 6 }}
|
||||
onPress={() => navigate(Routes.Reels)}
|
||||
>
|
||||
<Image
|
||||
source={img.placeholder3}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 147,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Pour Lili
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
<EmptyText text={"Aucun playback pour le moment"} />
|
||||
</View>
|
||||
)}
|
||||
{selected === "Chansons" && (
|
||||
<ScrollView style={{ flex: 1 }}>
|
||||
<FlatList
|
||||
data={Array.isArray(userProjects) ? userProjects : []}
|
||||
contentContainerStyle={{
|
||||
gap: 10,
|
||||
}}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<MusicCard
|
||||
title={item?.title || "Sans titre"}
|
||||
subtitle={currentUserData?.userName || "MusicLand"}
|
||||
imageUri={item?.coverUrl || null}
|
||||
projectId={item?.id}
|
||||
likedBy={item?.likedBy || []}
|
||||
onPress={() =>
|
||||
navigate(Routes.MusicDetails, { projectId: item.id })
|
||||
}
|
||||
onPressMore={(posTop) => {
|
||||
setSelectedProjectId(item.id);
|
||||
setMenuTop(posTop);
|
||||
setShowMenu((prev) => !prev || posTop !== menuTop);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{Array.isArray(userProjects) && userProjects.length > 0 ? (
|
||||
<FlatList
|
||||
data={userProjects}
|
||||
contentContainerStyle={{
|
||||
gap: 10,
|
||||
}}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<MusicCard
|
||||
title={item?.title || "Sans titre"}
|
||||
subtitle={currentUserData?.userName || "MusicLand"}
|
||||
imageUri={item?.coverUrl || null}
|
||||
projectId={item?.id}
|
||||
likedBy={item?.likedBy || []}
|
||||
onPress={() =>
|
||||
navigate(Routes.MusicDetails, { projectId: item.id })
|
||||
}
|
||||
onPressMore={(posTop) => {
|
||||
setSelectedProjectId(item.id);
|
||||
setMenuTop(posTop);
|
||||
setShowMenu((prev) => !prev || posTop !== menuTop);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<EmptyText text={"Aucune chanson pour le moment"} />
|
||||
)}
|
||||
<MoreMenu
|
||||
visible={showMenu}
|
||||
top={menuTop}
|
||||
@@ -249,13 +245,19 @@ const Profile = () => {
|
||||
},
|
||||
},
|
||||
],
|
||||
{ cancelable: true }
|
||||
{ cancelable: true },
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{selected === "Clips" && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<EmptyText text={"Aucun clip pour le moment"} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user