From a8ebe8bcc3707a5bb014308fdef15137a5a5116c Mon Sep 17 00:00:00 2001 From: Philip Cesar Garay Date: Fri, 15 Aug 2025 21:02:34 +0800 Subject: [PATCH] update --- App.js | 4 +- package.json | 5 +- src/assets/UI/eye.png | Bin 437 -> 359 bytes src/assets/UI/trash.png | Bin 266 -> 341 bytes src/assets/icons/share.png | Bin 0 -> 445 bytes src/assets/index.js | 2 + src/components/AppActionSheet.js | 37 +++ src/components/BlurItemButton.js | 43 ++++ src/components/BorderGradientButton.js | 2 + src/components/NavigateHeader.js | 25 +- src/components/Switch.js | 63 ++--- src/components/modal/DeleteAccountModal.js | 50 ++++ src/components/modal/DeleteAudioModal.js | 50 ++++ src/components/modal/DeleteModal.js | 50 ++++ src/components/modal/DeletePlaybackModal.js | 50 ++++ src/components/modal/ProfileSettingsModal.js | 50 ++++ src/layouts/Page.js | 2 + src/navigation/BottomTab.js | 3 +- src/navigation/MainStack.js | 41 +++- src/navigation/Routes.js | 9 +- src/navigation/SettingsStack.js | 2 +- src/providers/SharedProviders.js | 2 + src/screens/Library/AllMyLikedMusic.js | 72 +++++- src/screens/Library/MusicDetails.js | 20 +- src/screens/Library/components/MusicCard.js | 117 ++++++---- src/screens/Notifications.js | 92 -------- src/screens/Profile/ChangeEmailAddress.js | 49 ++++ src/screens/Profile/ChangePassword.js | 66 ++++++ src/screens/Profile/EditProfile.js | 72 ++++++ src/screens/Profile/Language.js | 96 ++++++++ src/screens/Profile/Notifications.js | 65 ++++++ src/screens/Profile/Profile.js | 227 ++++++++++++++++++- src/screens/Profile/Reels.js | 85 +++++++ src/screens/Profile/Settings.js | 82 +++++++ src/screens/Profile/components/EditInput.js | 72 ++++++ src/screens/Settings.js | 191 ---------------- src/styles/Palette.js | 2 +- src/utils/Sheet.js | 14 ++ yarn.lock | 15 ++ 39 files changed, 1436 insertions(+), 391 deletions(-) create mode 100644 src/assets/icons/share.png create mode 100644 src/components/AppActionSheet.js create mode 100644 src/components/BlurItemButton.js create mode 100644 src/components/modal/DeleteAccountModal.js create mode 100644 src/components/modal/DeleteAudioModal.js create mode 100644 src/components/modal/DeleteModal.js create mode 100644 src/components/modal/DeletePlaybackModal.js create mode 100644 src/components/modal/ProfileSettingsModal.js delete mode 100644 src/screens/Notifications.js create mode 100644 src/screens/Profile/ChangeEmailAddress.js create mode 100644 src/screens/Profile/ChangePassword.js create mode 100644 src/screens/Profile/EditProfile.js create mode 100644 src/screens/Profile/Language.js create mode 100644 src/screens/Profile/Notifications.js create mode 100644 src/screens/Profile/Reels.js create mode 100644 src/screens/Profile/Settings.js create mode 100644 src/screens/Profile/components/EditInput.js delete mode 100644 src/screens/Settings.js create mode 100644 src/utils/Sheet.js diff --git a/App.js b/App.js index b230f2d..2cc02d3 100644 --- a/App.js +++ b/App.js @@ -21,7 +21,7 @@ import { Palette } from "./src/styles"; import { navigationRef, reset } from "./src/navigation/NavigationService"; import initialGlobalState from "./src/config/initialGlobalState"; -import { MenuProvider } from 'react-native-popup-menu'; +import { MenuProvider } from "react-native-popup-menu"; import firebase from "./src/config/firebase"; import Providers from "./src/providers"; @@ -34,6 +34,8 @@ import { Inter_700Bold, } from "@expo-google-fonts/inter"; +import "./src/utils/Sheet"; + console.disableYellowBox = true; console.reportErrorsAsExceptions = false; diff --git a/package.json b/package.json index 4e00061..af360da 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@react-navigation/stack": "^6.0.11", "@stripe/react-stripe-js": "^2.5.0", "@stripe/stripe-js": "^3.0.0", + "add": "^2.0.6", "deprecated-react-native-prop-types": "^3.0.1", "expo": "~52.0.17", "expo-av": "~15.0.1", @@ -66,6 +67,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.5", + "react-native-actions-sheet": "^0.9.7", "react-native-compressor": "^1.8.24", "react-native-country-picker-modal": "^2.0.0", "react-native-dialog": "^9.3.0", @@ -88,7 +90,8 @@ "react-native-web-linear-gradient": "^1.1.2", "react-native-webview": "13.12.5", "reactn": "^2.2.7", - "rxjs": "^7.6.0" + "rxjs": "^7.6.0", + "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.5", diff --git a/src/assets/UI/eye.png b/src/assets/UI/eye.png index 2bb4b3e8bc7a0520716b925833001fc038d97cbe..1a8ac4ed0da30866ea9940fadd49a87b24d8d198 100644 GIT binary patch literal 359 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VXMsm#F#`j)FbFd;%$g$s6l5$8 za(7}_cTVOdki(Mh=jO1igSC`0t- zbBE(fxd9kNrMe|p1zna*%FJQidyzsQltJe0{HGfO& zp2RI#FiUrzDs!}Y#QL0htZ#ij?d(#2l(j`VHTdM(s&!loyiXq7w|w8(XK&uTn(FAf zb>44rJ2nCP_Ry(Xq1J1|XD^(|T7RMWW@bU_a(#y9H|u3Wf2;(C1B0ilpUXO@geCwX Cwu!?4 literal 437 zcmeAS@N?(olHy`uVBq!ia0vp^sz5Bk!3-q5mK<>cQn3L(A+A9BcgBj}=_~$cEdO7y z{&&Xm-Wv={{zUo)n3J^Da#g9y& z)QVrJtANV>fb_2DG<1Fgv_P&T$S;^-|9b@ihx79j8tU)gS14FNVZr+M0r>^}=L;qn z^e1FW=!4w)($mE;q#~|#;_ael10L4!eN3DaT1>8A`~QFD+?C5MSx)RTFw*wkB=BJN zoU(O0=Eh2&S9_S0>X#Mq`RS=ie=k)p+jR6^{f-m8H${BQJ?BnRW;pxqX=(OLi4`r2 zw=7NJ;H_b|SRKiKB-rY2ZK=${aPDuXIvdWapFNe?IIEbM?^mM8N9O;E7f#GFU}b)g z#k*i?sdARFq(t0S|4o1P{1a)oCTh;`w|c*$_8+zb%nMfXeOOm2?Jd3X%sidnRY|Xx zUOaELb=%%qhnSU~Y;v9JEHJqxwbs$%_M>_3Dc#RgO~QM>WH8PDc(8iEP#xpaYvzu# T57jROdYZx0)z4*}Q$iB}0FKfW diff --git a/src/assets/UI/trash.png b/src/assets/UI/trash.png index d36aa1e928661dd0ece395e0314646a90f6692ba..3663b97af261aa4fa78cd4042321162dfd9a2f56 100644 GIT binary patch literal 341 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#SDr48Ar*{oLoW(88Swbp{x4;5D_}93z+1vB zdr&Zi`L2W70l_;CW*2xrJYB(ld}-#w<0?7CWY$>NP|Ueo`ww&3#iSM18&-(CV~f_PiDphY^nA|OAED|K zSj6KOn7RL(!JQPV9-bh?^m|ff!uh>R8Vi25UQyuMuXsS5VO#mx#jGoK#%8C==^9AY zH@;+j*7%z1yp7+3zXdy=NvW+oIQiD}LJpyq%S&7=bvDmkv&f*p>CR^UTBn>}+r;xV jWcIw4*}C)6_K!^Geuc~a+J%&q@(X5YaM*wT{QUU|_a_t>2)tJa zXqH!h1e7fDba4!+hW$|qXe9dP!o;E+hbE$iQ{IRP7Y^6Rkm6eV=n;w47n!Md- wrjfVHw03(t*3@e0?oD0GCa^EO%yW_TPjTq&C||2jK-(ESUHx3vIVCg!06WHJdH?_b diff --git a/src/assets/icons/share.png b/src/assets/icons/share.png new file mode 100644 index 0000000000000000000000000000000000000000..2059d813858cd25bb5d68422b4947fea7a0ce749 GIT binary patch literal 445 zcmV;u0Yd(XP)DP5?|mIsqdz8_*5P1{D*e8#Ei34Z;TIzFeeNXdBx|kx+Zm$#Q)5 z`TcK405cD+We(6R%wkBh1K5K*(8bKVlYD%D58wh+<8o?3l9@)pMURmb zMe&Jd$>A1bi$9rZ<$+s0I&^!`4`#+tBkXASBB{__f-MU{+gI>OBO~33IZblm=5S*2%p95Vx6u4tQ&Z)^!8)9A)Qy7kA-jf@SIivN1 z8MTUy#De+i8BL&xJEJ|CX?c&Mj5TY_an%!AZz8W_J?>9@TOqmcGL0|r8QM-#!N{6O nZJT>Nh6Tz5ZPfqkhX0Rm*c7ZLEeHEb00000NkvXXu0mjf%`3N> literal 0 HcmV?d00001 diff --git a/src/assets/index.js b/src/assets/index.js index 9e8c0b4..701a9ed 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -81,6 +81,7 @@ import heartOutline from "./icons/heartOutline.png"; import more from "./icons/more.png"; import forward from "./icons/forward.png"; import pause from "./icons/pause.png"; +import share from "./icons/share.png"; export const icons = { bell, @@ -139,6 +140,7 @@ export const icons = { more, forward, pause, + share, }; import triangle from "./art/triangle.png"; diff --git a/src/components/AppActionSheet.js b/src/components/AppActionSheet.js new file mode 100644 index 0000000..e7d3bca --- /dev/null +++ b/src/components/AppActionSheet.js @@ -0,0 +1,37 @@ +import { View, Text } from "react-native"; +import React from "react"; +import ActionSheet from "react-native-actions-sheet"; +import { gutters, Palette } from "../styles"; +import { BlurView } from "expo-blur"; + +const AppActionSheet = ({ children, props }) => { + return ( + + + {children} + + + ); +}; + +export default AppActionSheet; diff --git a/src/components/BlurItemButton.js b/src/components/BlurItemButton.js new file mode 100644 index 0000000..8c17a34 --- /dev/null +++ b/src/components/BlurItemButton.js @@ -0,0 +1,43 @@ +import { View, Text, Pressable, StyleSheet, Image } from "react-native"; +import React from "react"; +import { BlurView } from "expo-blur"; +import { Palette, Style } from "../styles"; +import { FONT_FAMILY } from "../styles/Fonts"; +import { icons } from "../assets"; +import { size } from "../styles/Style"; + +const BlurItemButton = ({ onPress, title = "" }) => { + return ( + + + {title} + + + + ); +}; + +export default BlurItemButton; + +const styles = StyleSheet.create({ + buttonContainer: { + ...Style.containerSpaceBetween, + paddingHorizontal: 12, + height: 56, + borderRadius: 14, + overflow: "hidden", + backgroundColor: Palette.glass, + }, + buttonText: { + fontSize: 16, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, +}); diff --git a/src/components/BorderGradientButton.js b/src/components/BorderGradientButton.js index f775d60..5a82ab0 100644 --- a/src/components/BorderGradientButton.js +++ b/src/components/BorderGradientButton.js @@ -10,6 +10,7 @@ const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress, icon, + titleStyle, }) => { return ( @@ -54,6 +55,7 @@ const BorderGradientButton = ({ fontSize: 15, color: Palette.white, fontFamily: FONT_FAMILY.InterMedium, + ...titleStyle, }} > {title} diff --git a/src/components/NavigateHeader.js b/src/components/NavigateHeader.js index d3213a4..7d1987d 100644 --- a/src/components/NavigateHeader.js +++ b/src/components/NavigateHeader.js @@ -12,6 +12,7 @@ export default ({ onBackPressed = null, containerStyle = {}, headerTitleStyle = {}, + hideBackButton = false, }) => { return ( - onBackPressed?.() || goBack()}> - - + {!hideBackButton && ( + onBackPressed?.() || goBack()}> + + + )} { - const currentColor = value ? Palette.green : Palette.red; + const currentColor = value ? ["#F94697", "#7023F7"] : ["#8C8C8C", "#8C8C8C"]; const switchHeight = 28; - const borderWidth = 2; const internalMargin = 2; - const itemSize = switchHeight - borderWidth * 2 - internalMargin * 2; + const itemSize = switchHeight - internalMargin * 2; return ( - setValue(!value)} - style={{ - flexDirection: "row", - width: switchHeight * 2, - height: switchHeight, - borderColor: currentColor, - borderWidth: borderWidth, - borderRadius: 25, - ...containerStyle, - }} - > - setValue(!value)}> + + > + + ); }; diff --git a/src/components/modal/DeleteAccountModal.js b/src/components/modal/DeleteAccountModal.js new file mode 100644 index 0000000..0cdc4f1 --- /dev/null +++ b/src/components/modal/DeleteAccountModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import AppActionSheet from "../AppActionSheet"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { SheetManager } from "react-native-actions-sheet"; + +const DeleteAccountModal = () => { + const onClose = async () => { + await SheetManager.hide("DeleteAccount"); + }; + + return ( + + + + + Supprimer mon compte + + + Es-tu sur de vouloir supprimer ton compte?{"\n"}Attention, cette + action est irréversible! + + + + + + + + + ); +}; + +export default DeleteAccountModal; diff --git a/src/components/modal/DeleteAudioModal.js b/src/components/modal/DeleteAudioModal.js new file mode 100644 index 0000000..6731042 --- /dev/null +++ b/src/components/modal/DeleteAudioModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import AppActionSheet from "../AppActionSheet"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { SheetManager } from "react-native-actions-sheet"; + +const DeleteAudioModal = () => { + const onClose = () => { + SheetManager.hide("DeleteAudio"); + }; + + return ( + + + + + Supprimer mon audio + + + Es-tu sur de vouloir supprimer ton audio?{"\n"} + Attention, cette action est irréversible! + + + + + + + + + ); +}; + +export default DeleteAudioModal; diff --git a/src/components/modal/DeleteModal.js b/src/components/modal/DeleteModal.js new file mode 100644 index 0000000..563213e --- /dev/null +++ b/src/components/modal/DeleteModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import ActionSheet, { SheetManager } from "react-native-actions-sheet"; +import { gutters, Palette } from "../../styles"; +import { BlurView } from "expo-blur"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import AppActionSheet from "../AppActionSheet"; + +const DeleteModal = () => { + const onClose = () => { + SheetManager.hide("Delete"); + }; + + return ( + + + + + Supprimer ma playlist + + + Es-tu sur de vouloir supprimer ta playlist? + + + + + + + + + ); +}; + +export default DeleteModal; diff --git a/src/components/modal/DeletePlaybackModal.js b/src/components/modal/DeletePlaybackModal.js new file mode 100644 index 0000000..f754474 --- /dev/null +++ b/src/components/modal/DeletePlaybackModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import AppActionSheet from "../AppActionSheet"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BorderGradientButton from "../BorderGradientButton"; +import GradientButton from "../GradientButton"; +import { SheetManager } from "react-native-actions-sheet"; + +const DeletePlaybackModal = () => { + const onClose = () => { + SheetManager.hide("DeletePlayback"); + }; + + return ( + + + + + Supprimer mon playback + + + Es-tu sur de vouloir supprimer ton playback?{"\n"} + Attention, cette action est irréversible! + + + + + + + + + ); +}; + +export default DeletePlaybackModal; diff --git a/src/components/modal/ProfileSettingsModal.js b/src/components/modal/ProfileSettingsModal.js new file mode 100644 index 0000000..763c81b --- /dev/null +++ b/src/components/modal/ProfileSettingsModal.js @@ -0,0 +1,50 @@ +import { View, Text } from "react-native"; +import React from "react"; +import AppActionSheet from "../AppActionSheet"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BlurItemButton from "../BlurItemButton"; +import { SheetManager } from "react-native-actions-sheet"; +import { navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; + +const ProfileSettingsModal = () => { + const onClose = async () => { + await SheetManager.hide("ProfileSettings"); + }; + + return ( + + + + Paramètres + + + { + onClose(); + navigate(Routes.EditProfile); + }} + /> + { + onClose(); + navigate(Routes.Settings); + }} + /> + + + + ); +}; + +export default ProfileSettingsModal; diff --git a/src/layouts/Page.js b/src/layouts/Page.js index eaad328..9366dd5 100644 --- a/src/layouts/Page.js +++ b/src/layouts/Page.js @@ -36,6 +36,7 @@ export default ({ onBackPressed = null, backgroundImg = background.writingBG, headerTitleStyle = {}, + hideBackButton = false, }) => { const { currentUID } = useUserData(); @@ -81,6 +82,7 @@ export default ({ rightComponent={rightComponent} onBackPressed={onBackPressed} headerTitleStyle={headerTitleStyle} + hideBackButton={hideBackButton} /> ) ) : null} diff --git a/src/navigation/BottomTab.js b/src/navigation/BottomTab.js index 2dfc1be..48a9beb 100644 --- a/src/navigation/BottomTab.js +++ b/src/navigation/BottomTab.js @@ -18,6 +18,7 @@ import HomeStack from "./HomeStack"; import ChatStack from "./ChatStack"; import SettingsStack from "./SettingsStack"; import Library from "../screens/Library/Library.js"; +import Profile from "../screens/Profile/Profile.js"; const bottomTabStyles = StyleSheet.create({ icon: { @@ -91,7 +92,7 @@ export const BottomTabScreen = () => { /> { const providers = [ @@ -19,6 +20,7 @@ const SharedProviders = ({ children }) => { [StripeEmbeddedProvider, {}], [PremiumProvider, {}], [UniversalLinkProvider, {}], + [SheetProvider, {}], ]; // Dynamically nest the providers using reduce diff --git a/src/screens/Library/AllMyLikedMusic.js b/src/screens/Library/AllMyLikedMusic.js index 4545e4a..b7b6a90 100644 --- a/src/screens/Library/AllMyLikedMusic.js +++ b/src/screens/Library/AllMyLikedMusic.js @@ -1,11 +1,18 @@ -import { View, Text } from "react-native"; -import React from "react"; +import { View, Text, Pressable } from "react-native"; +import React, { useState } from "react"; import Page from "../../layouts/Page"; import { background } from "../../assets"; -import { gutters } from "../../styles"; +import { gutters, Palette } from "../../styles"; import MusicCard from "./components/MusicCard"; +import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated"; +import { BlurView } from "expo-blur"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { SheetManager } from "react-native-actions-sheet"; const AllMyLikedMusic = () => { + const [top, setTop] = useState(0); + const [showMenu, setShowMenu] = useState(false); + return ( { {Array.from({ length: 3 }).map((_, index) => ( - + { + setTop(posTop); + if (showMenu) { + if (posTop === top) { + setShowMenu(false); + } else { + setShowMenu(false); + setTimeout(() => { + setShowMenu(true); + }, 300); + } + } else { + setShowMenu(true); + } + }} + /> ))} + {showMenu && ( + + { + setShowMenu(false); + SheetManager.show("Delete"); + }} + > + + + Supprimer de la playlist + + + + + )} diff --git a/src/screens/Library/MusicDetails.js b/src/screens/Library/MusicDetails.js index 74ff744..90ca6cf 100644 --- a/src/screens/Library/MusicDetails.js +++ b/src/screens/Library/MusicDetails.js @@ -13,15 +13,31 @@ import { Palette } from "../../styles"; import Style, { gutters, size } from "../../styles/Style"; import { FONT_FAMILY } from "../../styles/Fonts"; import Slider from "../../components/Slider"; +import { useRoute } from "@react-navigation/core"; +import { SheetManager } from "react-native-actions-sheet"; const MusicDetails = () => { + const params = useRoute().params; + const action = params?.action; const [fav, setFav] = useState(false); return ( ( + SheetManager.show("DeleteAudio")}> + + + ), + })} > { const [selected, setSelected] = useState(false); + const [open, setOpen] = useState(false); + const [layout, setLayout] = useState(null); + const [menuPos, setMenuPos] = useState(0); + + useEffect(() => { + if (layout) { + const top = layout?.y + 45; + setMenuPos(top); + } + }, [layout]); + + const onPressMenu = () => { + onPressMore?.(menuPos); + }; return ( - - - - - - Alors on danse - Stromae - - + setLayout(e.nativeEvent.layout)} + > + + + - setSelected(!selected)}> - - - - - - - - - + + Alors on danse + Stromae + + + setSelected(!selected)}> + + + + + + + + + + {/* {open && ( + + )} */} + ); }; @@ -76,4 +106,7 @@ const styles = StyleSheet.create({ color: Palette.white, fontFamily: FONT_FAMILY.InterRegular, }, + filterContainer: { + backgroundColor: Palette.tran, + }, }); diff --git a/src/screens/Notifications.js b/src/screens/Notifications.js deleted file mode 100644 index 3c30537..0000000 --- a/src/screens/Notifications.js +++ /dev/null @@ -1,92 +0,0 @@ -import React, { useEffect } from "reactn"; -import { Text, View, FlatList } from "react-native"; -import { useDataFromRef } from "react-native-minuit/src/hooks"; -import moment from "moment"; -import { Motion } from "@legendapp/motion"; - -import Page from "../layouts/Page"; - -import { Fonts, Style } from "../styles"; -import { notificationsRef } from "../config/firebase"; - -import { LoaderIndicator } from "../providers/LoadingProvider"; - -export default (props) => { - const baseNotificationRef = notificationsRef; - - useEffect(() => { - markAsRead(); - }, []); - - const markAsRead = async () => { - try { - } catch (error) { - console.error(error); - } - }; - - const { - data: notificationList, - loading, - loadMore, - } = useDataFromRef({ - ref: baseNotificationRef.orderBy("timestamp", "desc"), - usePagination: true, - batchSize: 40, - documentID: "notificationID", - }); - - return ( - - { - const { title = "", timestamp } = item; - - const randomDuration = Math.floor(Math.random() * 1000) + 500; - - return ( - {}} - > - - - {title} - - - - - {moment(timestamp.toDate()).format("[Le] DD/MM [à] HH:mm")} - - - ); - }} - keyExtractor={(item) => - `Notifications_${item.notificationID}_${item.projectID}` - } - ItemSeparatorComponent={() => ( - - )} - ListFooterComponent={loading ? : null} - onEndReached={loadMore} - onEndReachedThreshold={0.5} - /> - - ); -}; diff --git a/src/screens/Profile/ChangeEmailAddress.js b/src/screens/Profile/ChangeEmailAddress.js new file mode 100644 index 0000000..7fadb0e --- /dev/null +++ b/src/screens/Profile/ChangeEmailAddress.js @@ -0,0 +1,49 @@ +import { View } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import EditInput from "./components/EditInput"; +import GradientButton from "../../components/GradientButton"; + +const ChangeEmailAddress = () => { + return ( + + + + + + + + + ); +}; + +export default ChangeEmailAddress; diff --git a/src/screens/Profile/ChangePassword.js b/src/screens/Profile/ChangePassword.js new file mode 100644 index 0000000..ac9b6a0 --- /dev/null +++ b/src/screens/Profile/ChangePassword.js @@ -0,0 +1,66 @@ +import { View, Text, Pressable } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import EditInput from "./components/EditInput"; +import GradientButton from "../../components/GradientButton"; +import { FONT_FAMILY } from "../../styles/Fonts"; + +const ChangePassword = () => { + return ( + + + + + + + Mot de passe oublié? + + + + + + + ); +}; + +export default ChangePassword; diff --git a/src/screens/Profile/EditProfile.js b/src/screens/Profile/EditProfile.js new file mode 100644 index 0000000..5878aca --- /dev/null +++ b/src/screens/Profile/EditProfile.js @@ -0,0 +1,72 @@ +import { View, Text, Image, TextInput } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background, img } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { BlurView } from "expo-blur"; +import Style, { size } from "../../styles/Style"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import GradientButton from "../../components/GradientButton"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { goBack } from "../../navigation/NavigationService"; +import EditInput from "./components/EditInput"; + +const EditProfile = () => { + return ( + + + + + + + Modifier la photo + + + + + + + + + ); +}; + +export default EditProfile; diff --git a/src/screens/Profile/Language.js b/src/screens/Profile/Language.js new file mode 100644 index 0000000..7c8111a --- /dev/null +++ b/src/screens/Profile/Language.js @@ -0,0 +1,96 @@ +import { View, Text, Pressable } from "react-native"; +import React, { useState } from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import Style, { size } from "../../styles/Style"; + +const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"]; + +const Language = () => { + const [selected, setSelected] = useState("Français"); + + return ( + + + + + Langue + + + {LANGUAGE.map((item, index) => ( + setSelected(item)} + > + + {selected === item && ( + + )} + + + {item} + + + ))} + + + + + ); +}; + +export default Language; diff --git a/src/screens/Profile/Notifications.js b/src/screens/Profile/Notifications.js new file mode 100644 index 0000000..985db74 --- /dev/null +++ b/src/screens/Profile/Notifications.js @@ -0,0 +1,65 @@ +import React from "reactn"; +import Page from "../../layouts/Page"; +import { gutters, Palette, Style } from "../../styles"; +import { background } from "../../assets"; +import { Text, View } from "react-native"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { BlurView } from "expo-blur"; +import Switch from "../../components/Switch"; +import { useState } from "react"; +import { FONT_FAMILY } from "../../styles/Fonts"; + +export default (props) => { + const [isSwitch, setIsSwitch] = useState(false); + + return ( + + + + + + Notifications + + + + + Nous t’encourageons à activer les notifications pour découvrir les + derniers classements, les nouveaux sons et les meilleurs playbacks. + + + + + ); +}; diff --git a/src/screens/Profile/Profile.js b/src/screens/Profile/Profile.js index 7f40cca..a5302ab 100644 --- a/src/screens/Profile/Profile.js +++ b/src/screens/Profile/Profile.js @@ -1,12 +1,229 @@ -import { View, Text } from "react-native"; -import React from "react"; +import { + View, + Text, + Pressable, + Image, + FlatList, + StyleSheet, +} from "react-native"; +import React, { useState } from "react"; +import Page from "../../layouts/Page"; +import { background, icons, img } from "../../assets"; +import { BlurView } from "expo-blur"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import Style, { gutters, size } from "../../styles/Style"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import GradientButton from "../../components/GradientButton"; +import BorderGradient from "../../components/BorderGradient/BorderGradient"; +import MusicCard from "../Library/components/MusicCard"; +import { SheetManager } from "react-native-actions-sheet"; +import { navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; const Profile = () => { + const [selected, setSelected] = useState("Chansons"); + + const onPressMenu = (item) => { + setSelected(item); + }; + return ( - - Profile - + ( + SheetManager.show("ProfileSettings")}> + + + )} + > + + + + + + + elia.mrn + + + + + 0 + playbacks + + + 880 + abonnés + + + 6 + abonnements + + + + + + + {["Chansons", "Playbacks", "Clips"].map((item, index) => ( + onPressMenu(item)} + style={{ flex: 1 }} + > + + + + {item} + + + + ))} + + {selected === "Playbacks" && ( + + ( + navigate(Routes.Reels)} + > + + + Pour Lili + + + )} + /> + + )} + {selected === "Chansons" && ( + + ( + + navigate(Routes.MusicDetails, { + action: "userProfile", + }) + } + /> + )} + /> + + )} + + ); }; export default Profile; + +const styles = StyleSheet.create({ + value: { + fontSize: 16, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + label: { + fontSize: 12, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + menu: { + fontSize: 12, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + borderGradient: { + borderWidth: 1, + borderRadius: 10, + height: 33, + position: "absolute", + zIndex: 1, + width: "100%", + }, + blurContainer: { + height: 33, + zIndex: -1, + borderRadius: 10, + overflow: "hidden", + backgroundColor: Palette.glass, + }, + blurView: { + width: "100%", + height: "100%", + paddingHorizontal: 10, + ...Style.containerCenter, + }, +}); diff --git a/src/screens/Profile/Reels.js b/src/screens/Profile/Reels.js new file mode 100644 index 0000000..8992bb7 --- /dev/null +++ b/src/screens/Profile/Reels.js @@ -0,0 +1,85 @@ +import { View, Text, Pressable, Image } from "react-native"; +import React, { useState } from "react"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { icons, img } from "../../assets"; +import Style, { gutters, size } from "../../styles/Style"; +import { Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { goBack } from "../../navigation/NavigationService"; +import { SheetManager } from "react-native-actions-sheet"; + +const Reels = () => { + const { top } = useSafeAreaInsets(); + const [isFav, setIsFav] = useState(false); + + return ( + + + + + + + + + Mon Profile + + + SheetManager.show("DeletePlayback")}> + + + + + + + setIsFav(!isFav)}> + + + + + + + + ); +}; + +export default Reels; diff --git a/src/screens/Profile/Settings.js b/src/screens/Profile/Settings.js new file mode 100644 index 0000000..2535f69 --- /dev/null +++ b/src/screens/Profile/Settings.js @@ -0,0 +1,82 @@ +import { View, Text } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import BlurItemButton from "../../components/BlurItemButton"; +import BorderGradientButton from "../../components/BorderGradientButton"; +import { SheetManager } from "react-native-actions-sheet"; +import { navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; + +const SETTINGS = [ + { + title: "Adresse mail", + action: () => { + navigate(Routes.ChangeEmailAddress); + }, + }, + { + title: "Modifier mon mot de passe", + action: () => { + navigate(Routes.ChangePassword); + }, + }, + { + title: "Notifications", + action: () => { + navigate(Routes.Notifications); + }, + }, + { + title: "Langue", + action: () => { + navigate(Routes.Language); + }, + }, + { + title: "Gérer mon abonnement", + action: () => {}, + }, +]; + +const Settings = () => { + return ( + + + + {SETTINGS.map((item, index) => ( + + ))} + + + + SheetManager.show("DeleteAccount")} + /> + + + + ); +}; + +export default Settings; diff --git a/src/screens/Profile/components/EditInput.js b/src/screens/Profile/components/EditInput.js new file mode 100644 index 0000000..5e63ebf --- /dev/null +++ b/src/screens/Profile/components/EditInput.js @@ -0,0 +1,72 @@ +import { View, Text, TextInput, Image, Pressable } from "react-native"; +import React, { useState } from "react"; +import { Palette, Style } from "../../../styles"; +import { FONT_FAMILY } from "../../../styles/Fonts"; +import { BlurView } from "expo-blur"; +import { icons } from "../../../assets"; + +const EditInput = ({ label = "", placeholder = "", type = "default" }) => { + const [showPassword, setShowPassword] = useState(false); + + return ( + + + + {label} + + + Modifier + + + + + {type === "password" && ( + setShowPassword(!showPassword)}> + + + )} + + + ); +}; + +export default EditInput; diff --git a/src/screens/Settings.js b/src/screens/Settings.js deleted file mode 100644 index ff10000..0000000 --- a/src/screens/Settings.js +++ /dev/null @@ -1,191 +0,0 @@ -import React, { useRef, useContext, useGlobal } from "reactn"; -import { Text, View } from "react-native"; - -import { WebViewContext } from "../providers/WebViewProvider"; -import { useUserData } from "../providers/UserDataProvider"; - -import Page from "../layouts/Page"; - -import { Routes } from "../navigation"; -import { responsiveHeight } from "../actions/responsiveSizes.js"; - -import ItemRowList from "../components/ItemRowList"; -import BottomSheetContainer from "../components/BottomSheetContainer.js"; -import IconSelector from "../components/IconSelector.js"; - -import useLayoutType from "../hooks/useLayoutType"; - -import { Fonts, Palette, Style, gutters } from "../styles"; -import { icons } from "../assets"; - -import { onStoreReview, openLinkInBrowser } from "../helpers"; -import { - agencyWhatsAppNumber, - calendlyUrl, - instagramUrl, - termsOfSalesUrl, -} from "../data"; -import IconContainer from "../components/IconContainer.js"; - -export default ({ navigation }) => { - const { isDesktop, isWeb, isNative } = useLayoutType(); - const { onSignOut } = useUserData(); - - const [currentProjectID] = useGlobal("currentProjectID"); - - const { setWebViewUrl } = useContext(WebViewContext); - - const appIconBottomSheetRef = useRef(null); - - const settingsList = [ - { - sectionTitle: "Projet", - icon: icons.tools, - optionList: [ - { - title: "Paramètres", - action: () => navigation.navigate(Routes.ProjectSettings), - }, - ], - condition: currentProjectID, - }, - { - sectionTitle: "Compte", - icon: icons.user, - optionList: [ - { - title: "Paramètres du compte", - action: () => navigation.navigate(Routes.AccountSettings), - }, - ], - }, - { - sectionTitle: "Support", - icon: icons.support, - optionList: [ - { - title: "Prendre rendez-vous", - action: () => setWebViewUrl(calendlyUrl), - }, - { - title: "Nous suivre sur Instagram", - action: () => setWebViewUrl(instagramUrl), - }, - { - title: "Nous contacter sur WhatsApp", - action: () => { - openLinkInBrowser({ - url: `http://api.whatsapp.com/send/?phone=${agencyWhatsAppNumber}&text&type=phone_number`, - }); - }, - }, - { - title: "Changer l'icône de l'application", - action: () => { - appIconBottomSheetRef.current?.expand(); - }, - condition: isNative, - }, - { - title: "Noter l'application", - action: () => { - onStoreReview(); - }, - condition: !isWeb, - }, - ], - }, - { - sectionTitle: "Légal", - icon: icons.law, - optionList: [ - { - title: "Conditions générales d'utilisation", - action: () => navigation.navigate(Routes.TermsOfUse), - }, - { - title: "Conditions générales de vente", - action: () => setWebViewUrl(termsOfSalesUrl), - }, - { - title: "Politique de confidentialité", - action: () => navigation.navigate(Routes.PrivacyPolicy), - }, - { - title: "Se déconnecter", - action: async () => { - await onSignOut(); - }, - textStyle: { color: Palette.red }, - addMarginTopFromPrevious: true, - }, - ], - }, - ] - .filter(({ condition = true }) => condition) - .filter( - ({ optionList }) => - optionList.filter(({ condition }) => !condition || condition).length > 0 - ); - - return ( - <> - - {settingsList.map( - ({ icon, sectionTitle = "", optionList = [] }, index) => ( - - - - - - {sectionTitle} - - - - {optionList - .filter(({ condition = true }) => condition) - .map((item, index) => ( - - ))} - - ) - )} - - - - appIconBottomSheetRef.current?.close()} /> - - - ); -}; diff --git a/src/styles/Palette.js b/src/styles/Palette.js index 3e882e2..3b980ca 100644 --- a/src/styles/Palette.js +++ b/src/styles/Palette.js @@ -19,7 +19,7 @@ const Palette = { firebaseYellow: "#FFCA28", transparentFirebaseYellow: "rgba(255, 202, 40, 0.1)", - red: "#E31A1A", + red: "#FF5558", transparentRed: "rgba(227, 26, 26, 0.1)", white: "#ffffff", diff --git a/src/utils/Sheet.js b/src/utils/Sheet.js new file mode 100644 index 0000000..3eb8c30 --- /dev/null +++ b/src/utils/Sheet.js @@ -0,0 +1,14 @@ +import { registerSheet } from "react-native-actions-sheet"; +import DeleteModal from "../components/modal/DeleteModal"; +import ProfileSettingsModal from "../components/modal/ProfileSettingsModal"; +import DeleteAccountModal from "../components/modal/DeleteAccountModal"; +import DeletePlaybackModal from "../components/modal/DeletePlaybackModal"; +import DeleteAudioModal from "../components/modal/DeleteAudioModal"; + +registerSheet("Delete", DeleteModal); +registerSheet("ProfileSettings", ProfileSettingsModal); +registerSheet("DeleteAccount", DeleteAccountModal); +registerSheet("DeletePlayback", DeletePlaybackModal); +registerSheet("DeleteAudio", DeleteAudioModal); + +export {}; diff --git a/yarn.lock b/yarn.lock index 43b6717..f039cbb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2621,6 +2621,11 @@ acorn@^8.8.2: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0" integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA== +add@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235" + integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q== + aggregate-error@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a" @@ -7297,6 +7302,11 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-native-actions-sheet@^0.9.7: + version "0.9.7" + resolved "https://registry.yarnpkg.com/react-native-actions-sheet/-/react-native-actions-sheet-0.9.7.tgz#43ff2d9252f7af2da6dc051be5a5c375a844cdfb" + integrity sha512-rjUwxUr5dxbdSLDtLDUFAdSlFxpNSpJsbXLhHkBzEBMxEMPUhRT3zqbvKqsPj0JUkjwuRligxrhbIJZkg/6ZDw== + react-native-calendars@^1.1300.0: version "1.1307.0" resolved "https://registry.yarnpkg.com/react-native-calendars/-/react-native-calendars-1.1307.0.tgz#2cb8c5abd322037e9b3ef5605afa86f25347068f" @@ -9118,6 +9128,11 @@ yargs@^17.6.2, yargs@^17.7.2: y18n "^5.0.5" yargs-parser "^21.1.1" +yarn@^1.22.22: + version "1.22.22" + resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610" + integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg== + yauzl@^2.4.2: version "2.10.0" resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"