leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix - input & profile flatlist

Browse Source
This commit is contained in:
Victor
2025-09-17 16:24:06 +02:00
parent 3acfea7551
commit f40d5c8051
2 changed files with 129 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Input.js
+47 -47
View File
@@ -166,57 +166,57 @@ const Input = ({
}}
/>
) : */}
(
<TextInput
ref={inputRef}
placeholder={placeholder}
placeholderTextColor={Palette.gray}
value={value}
onChangeText={setValue}
multiline={type === 'textarea'}
editable={type !== 'countryPicker'}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
style={{
width: '100%',
...(isRoundedRectangle
{type !== 'countryPicker' && (
<TextInput
ref={inputRef}
placeholder={placeholder}
placeholderTextColor={Palette.gray}
value={value}
onChangeText={setValue}
multiline={type === 'textarea'}
editable={type !== 'countryPicker'}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
style={{
width: '100%',
...(isRoundedRectangle
? {
height: '100%',
flex: 1,
textAlignVertical: type === 'textarea' ? 'top' : 'center',
}
: { textAlign: 'center' }),
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
...(isWeb
? {
lineHeight: 'auto',
}
: {}),
...textInputStyle,
}}
{...(type === 'password'
? {
height: '100%',
flex: 1,
textAlignVertical: type === 'textarea' ? 'top' : 'center',
secureTextEntry: !showPassword,
autoCapitalize: 'none',
autoCompleteType: 'password',
textContentType: 'password',
}
: { textAlign: 'center' }),
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
...(isWeb
: {})}
{...(type === 'email'
? {
lineHeight: 'auto',
keyboardType: 'email-address',
autoCapitalize: 'none',
autoCompleteType: 'email',
textContentType: 'emailAddress',
}
: {}),
...textInputStyle,
}}
{...(type === 'password'
? {
secureTextEntry: !showPassword,
autoCapitalize: 'none',
autoCompleteType: 'password',
textContentType: 'password',
}
: {})}
{...(type === 'email'
? {
keyboardType: 'email-address',
autoCapitalize: 'none',
autoCompleteType: 'email',
textContentType: 'emailAddress',
}
: {})}
keyboardType={isNumeric ? 'numeric' : 'default'}
keyboardAppearance='dark'
inputAccessoryViewID={inputAccessoryViewID}
{...textInputProps}
/>
: {})}
keyboardType={isNumeric ? 'numeric' : 'default'}
keyboardAppearance='dark'
inputAccessoryViewID={inputAccessoryViewID}
{...textInputProps}
/>
)}
{type === 'password' ? (
<Pressable onPress={() => setShowPassword(!showPassword)}>
src/screens/Profile/Profile.js
+82 -91
View File
@@ -1,7 +1,7 @@
import { useRoute } from "@react-navigation/native";
import { BlurView } from "expo-blur";
import { Image as ExpoImage } from "expo-image";
import React, { useEffect, useMemo, useState } from "react";
import { useRoute } from '@react-navigation/native';
import { BlurView } from 'expo-blur';
import { Image as ExpoImage } from 'expo-image';
import React, { useEffect, useMemo, useState } from 'react';
import {
FlatList,
Image,
@@ -11,27 +11,27 @@ import {
StyleSheet,
Text,
View,
} from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { useGlobal } from "reactn";
import { background, icons, img } from "../../assets";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import MoreMenu from "../../components/MoreMenu";
import { projectsRef, usersRef } from "../../config/firebase";
import useDataFromRef from "../../hooks/useDataFromRef";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { navigate, push } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import Style, { gutters, size } from "../../styles/Style";
import MusicCard from "../Library/components/MusicCard";
} from 'react-native';
import { SheetManager } from 'react-native-actions-sheet';
import { responsiveHeight } from 'react-native-responsive-dimensions';
import { useGlobal } from 'reactn';
import { background, icons, img } from '../../assets';
import BorderGradient from '../../components/BorderGradient/BorderGradient';
import MoreMenu from '../../components/MoreMenu';
import { projectsRef, usersRef } from '../../config/firebase';
import useDataFromRef from '../../hooks/useDataFromRef';
import Page from '../../layouts/Page';
import { Routes } from '../../navigation';
import { navigate, push } from '../../navigation/NavigationService';
import { useUser } from '../../providers/UserDataProvider';
import { Palette } from '../../styles';
import { FONT_FAMILY } from '../../styles/Fonts';
import Style, { gutters, size } from '../../styles/Style';
import MusicCard from '../Library/components/MusicCard';
const Profile = () => {
const { params } = useRoute();
const [selected, setSelected] = useState("Chansons");
const [selected, setSelected] = useState('Chansons');
const {
userProjects: selfProjects,
userPlaybacks: selfPlaybacks,
@@ -41,10 +41,10 @@ const Profile = () => {
followUser,
unfollowUser,
} = useUser();
const [currentUID] = useGlobal("currentUID");
const [currentUID] = useGlobal('currentUID');
const targetUserId = params?.userId || currentUID || null;
const isSelf = !!currentUID && targetUserId === currentUID;
const [, setTooltip] = useGlobal("_tooltip");
const [, setTooltip] = useGlobal('_tooltip');
const [userData, setUserData] = useState(null);
const [isFollowing, setIsFollowing] = useState(false);
const [followers, setFollowers] = useState(0);
@@ -65,7 +65,7 @@ const Profile = () => {
setFollowers(
Array.isArray(currentUserData?.followedBy)
? currentUserData.followedBy.length
: 0,
: 0
);
return;
}
@@ -82,7 +82,7 @@ const Profile = () => {
const followingQueryRef = useMemo(() => {
try {
return targetUserId
? usersRef.where("followedBy", "array-contains", targetUserId)
? usersRef.where('followedBy', 'array-contains', targetUserId)
: null;
} catch (e) {
return null;
@@ -113,7 +113,7 @@ const Profile = () => {
// Composant factorisé pour afficher la liste de musiques
const MusicListSection = ({ data, emptyText }) => (
<ScrollView style={{ flex: 1 }}>
<ScrollView style={{ flex: 1, marginBottom: 70 }}>
{Array.isArray(data) && data.length > 0 ? (
<FlatList
data={data}
@@ -124,10 +124,10 @@ const Profile = () => {
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<MusicCard
title={item?.title || "Sans titre"}
title={item?.title || 'Sans titre'}
subtitle={
(isSelf ? currentUserData?.userName : userData?.userName) ||
"MusicLand"
'MusicLand'
}
imageUri={item?.coverUrl || null}
projectId={item?.id}
@@ -156,25 +156,25 @@ const Profile = () => {
isSelf
? [
{
label: "Supprimer",
label: 'Supprimer',
onPress: () =>
SheetManager.show("Delete", {
SheetManager.show('Delete', {
payload: {
title: "Supprimer le projet",
title: 'Supprimer le projet',
message:
"Cette action supprimera définitivement ce projet.",
'Cette action supprimera définitivement ce projet.',
onConfirm: async () => {
try {
if (!selectedProjectId) return;
await projectsRef.doc(selectedProjectId).delete();
setTooltip({
type: "success",
text: "Projet supprimé",
type: 'success',
text: 'Projet supprimé',
});
} catch (e) {
setTooltip({
type: "error",
text: e?.message || "Suppression impossible",
type: 'error',
text: e?.message || 'Suppression impossible',
});
}
},
@@ -196,8 +196,7 @@ const Profile = () => {
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
opacity: 0.8,
}}
>
}}>
{text}
</Text>
</View>
@@ -208,8 +207,8 @@ const Profile = () => {
try {
if (!targetUserId || isSelf) return null;
return projectsRef
.where("userId", "==", targetUserId)
.orderBy("updatedAt", "desc");
.where('userId', '==', targetUserId)
.orderBy('updatedAt', 'desc');
} catch (e) {
return null;
}
@@ -229,24 +228,23 @@ const Profile = () => {
return (
<Page
backgroundImg={background.profileBG}
headerType="NAVIGATE"
headerType='NAVIGATE'
hideBackButton={params?.noBack}
contentContainerStyle={{
paddingBottom: gutters * 2,
}}
containerStyle={{
backgroundColor: "#0000004D",
backgroundColor: '#0000004D',
}}
rightComponent={() =>
isSelf ? (
<Pressable onPress={() => SheetManager.show("ProfileSettings")}>
<Pressable onPress={() => SheetManager.show('ProfileSettings')}>
<Image source={icons.more} style={{ ...size({ size: 24 }) }} />
</Pressable>
) : null
}
>
}>
<View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
<View style={{ borderRadius: 20, overflow: "hidden" }}>
<View style={{ borderRadius: 20, overflow: 'hidden' }}>
<BlurView
intensity={20}
style={{
@@ -258,7 +256,7 @@ const Profile = () => {
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
>
<View style={{ alignItems: "center" }}>
<View style={{ alignItems: 'center' }}>
<ExpoImage
source={
(
@@ -273,9 +271,9 @@ const Profile = () => {
}
: img.profile
}
cachePolicy="memory-disk"
priority="high"
contentFit="cover"
cachePolicy='memory-disk'
priority='high'
contentFit='cover'
transition={100}
style={{
...size({ size: 108 }),
@@ -287,14 +285,13 @@ const Profile = () => {
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
}}>
{(isSelf ? currentUserData?.userName : userData?.userName) ||
"Profil"}
'Profil'}
</Text>
</View>
<View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
<View style={{ flex: 1, alignItems: "center" }}>
<View style={{ flex: 1, alignItems: 'center' }}>
<Text style={styles.value}>
{Array.isArray(displayedProjects)
? displayedProjects.length
@@ -303,14 +300,13 @@ const Profile = () => {
<Text style={styles.label}>projets</Text>
</View>
<Pressable
style={{ flex: 1, alignItems: "center" }}
style={{ flex: 1, alignItems: 'center' }}
onPress={() =>
push(Routes.Follows, {
selected: "Abonnés",
selected: 'Abonnés',
...(isSelf ? {} : { userId: targetUserId }),
})
}
>
}>
<Text style={styles.value}>
{isSelf
? currentUserData?.followedBy?.length || 0
@@ -319,14 +315,13 @@ const Profile = () => {
<Text style={styles.label}>abonnés</Text>
</Pressable>
<Pressable
style={{ flex: 1, alignItems: "center" }}
style={{ flex: 1, alignItems: 'center' }}
onPress={() =>
push(Routes.Follows, {
selected: "Abonnements",
selected: 'Abonnements',
...(isSelf ? {} : { userId: targetUserId }),
})
}
>
}>
<Text style={styles.value}>
{isSelf ? followingCount : following}
</Text>
@@ -339,23 +334,21 @@ const Profile = () => {
style={{
height: 36,
borderRadius: 100,
overflow: "hidden",
backgroundColor: "#FFFFFF22",
alignItems: "center",
justifyContent: "center",
width: "80%",
alignSelf: "center",
overflow: 'hidden',
backgroundColor: '#FFFFFF22',
alignItems: 'center',
justifyContent: 'center',
width: '80%',
alignSelf: 'center',
marginTop: 18,
}}
>
}}>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
{isFollowing ? "Ne plus suivre" : "Suivre"}
}}>
{isFollowing ? 'Ne plus suivre' : 'Suivre'}
</Text>
</View>
</Pressable>
@@ -366,20 +359,18 @@ const Profile = () => {
style={{
...Style.containerRow,
gap: 6,
}}
>
}}>
{/*{["Chansons", "Playbacks", "Clips"].map((item, index) => (*/}
{["Chansons", "Playbacks"].map((item, index) => (
{['Chansons', 'Playbacks'].map((item, index) => (
<Pressable
key={index}
onPress={() => onPressMenu(item)}
style={{ flex: 1 }}
>
style={{ flex: 1 }}>
<BorderGradient
gradientProps={{
colors:
selected === item
? ["#FFFFFF00", "#FFFFFF"]
? ['#FFFFFF00', '#FFFFFF']
: [Palette.tran, Palette.tran],
locations: [0, 1],
start: { x: 0, y: 0 },
@@ -401,22 +392,22 @@ const Profile = () => {
</Pressable>
))}
</View>
{selected === "Playbacks" && (
{selected === 'Playbacks' && (
<MusicListSection
data={displayedPlaybacks}
emptyText="Aucun playback pour le moment"
emptyText='Aucun playback pour le moment'
/>
)}
{selected === "Chansons" && (
{selected === 'Chansons' && (
<MusicListSection
data={displayedProjects}
emptyText="Aucune chanson pour le moment"
emptyText='Aucune chanson pour le moment'
/>
)}
{selected === "Clips" && (
{selected === 'Clips' && (
<View style={{ flex: 1 }}>
<EmptyText text={"Aucun clip pour le moment"} />
<EmptyText text={'Aucun clip pour le moment'} />
</View>
)}
</View>
@@ -446,20 +437,20 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 10,
height: 33,
position: "absolute",
position: 'absolute',
zIndex: 1,
width: "100%",
width: '100%',
},
blurContainer: {
height: 33,
zIndex: -1,
borderRadius: 10,
overflow: "hidden",
overflow: 'hidden',
backgroundColor: Palette.glass,
},
blurView: {
width: "100%",
height: "100%",
width: '100%',
height: '100%',
paddingHorizontal: 10,
...Style.containerCenter,
},