From e36614e8df5cde28375cf7fd1bb7198df0bbddc3 Mon Sep 17 00:00:00 2001 From: Infinite-Null Date: Thu, 21 Mar 2024 02:01:53 +0530 Subject: [PATCH] Finished the settings --- Component/Discover/EachLanguageCard.jsx | 5 +- Component/Discover/EachMomentsandGenres.jsx | 2 +- Route/Home/ChangeName.jsx | 70 +++++++++++++ Route/Home/HomeRoute.jsx | 4 + Route/Home/SelectLanguages.jsx | 108 ++++++++++++++++++++ Route/Home/SettingsPage.jsx | 18 ++-- Route/OnboardingScreen/Slide2.jsx | 86 +++++++++------- 7 files changed, 248 insertions(+), 45 deletions(-) create mode 100644 Route/Home/ChangeName.jsx create mode 100644 Route/Home/SelectLanguages.jsx diff --git a/Component/Discover/EachLanguageCard.jsx b/Component/Discover/EachLanguageCard.jsx index 6d25c9b..c049365 100644 --- a/Component/Discover/EachLanguageCard.jsx +++ b/Component/Discover/EachLanguageCard.jsx @@ -9,13 +9,12 @@ export const EachLanguageCard = ({language}) => { navigation.navigate("LanguageDetail",{language:language.toLowerCase()}) }} style={{ backgroundColor:"rgb(42,41,41)", - maxWidth:100, - padding:10, + padding:15, borderRadius:10, alignItems:"center", justifyContent:"center", }}> - + <PlainText text={language} style={{paddingRight:0}}/> </Pressable> ); }; diff --git a/Component/Discover/EachMomentsandGenres.jsx b/Component/Discover/EachMomentsandGenres.jsx index 0151f8f..f0f0f70 100644 --- a/Component/Discover/EachMomentsandGenres.jsx +++ b/Component/Discover/EachMomentsandGenres.jsx @@ -9,8 +9,8 @@ export const EachMomentsandGenres = ({text, color}) => { navigation.navigate("ShowPlaylistofType",{Searchtext:text.toLowerCase()}) }} style={{ backgroundColor:"rgb(42,41,41)", - maxWidth:100, borderRadius:10, + paddingRight:10, alignItems:"center", justifyContent:"flex-start", flexDirection:'row', diff --git a/Route/Home/ChangeName.jsx b/Route/Home/ChangeName.jsx new file mode 100644 index 0000000..66990f3 --- /dev/null +++ b/Route/Home/ChangeName.jsx @@ -0,0 +1,70 @@ +import { MainWrapper } from "../../Layout/MainWrapper"; +import { Dimensions, Pressable, TextInput, ToastAndroid, View } from "react-native"; +import Animated, { FadeInDown } from "react-native-reanimated"; +import FastImage from "react-native-fast-image"; +import { Heading } from "../../Component/Global/Heading"; +import { useState } from "react"; +import { SetUserNameValue } from "../../LocalStorage/StoreUserName"; +import { useTheme } from "@react-navigation/native"; +import { PlainText } from "../../Component/Global/PlainText"; +import { Spacer } from "../../Component/Global/Spacer"; + +export const ChangeName = ({navigation}) => { + const width = Dimensions.get("window").width + const theme = useTheme() + const [Name, setName] = useState(""); + async function OnConfirm(name){ + if (name === ""){ + // eslint-disable-next-line no-alert + alert("Please Enter name!") + } else { + await SetUserNameValue(name.trim()) + navigation.pop() + ToastAndroid.showWithGravity( + `Please restart the app`, + ToastAndroid.SHORT, + ToastAndroid.CENTER, + ); + } + } + return ( + <MainWrapper> + <View style={{ + alignItems:"center", + justifyContent:"center", + flex:1, + }}> + <Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/GiveName.gif")} style={{ + height:200, + width:200, + borderRadius:100, + }}/></Animated.View> + <Animated.View entering={FadeInDown.delay(500)}><Heading text={"What should I call you?"} nospace={true} style={{marginTop:10}}/></Animated.View> + <TextInput placeholderTextColor={theme.colors.text} value={Name} onChangeText={(text)=>{ + setName(text) + }} textAlign={'center'} placeholder={"Enter your name"} style={{ + borderWidth:2, + backgroundColor:"rgb(53,58,70)", + borderRadius:10, + padding:10, + width:width * 0.5, + color:theme.colors.text, + }}/> + <Spacer/> + <Pressable onPress={()=>{ + OnConfirm(Name) + }} style={{ + padding:10, + alignItems:"center", + justifyContent:'center', + backgroundColor:theme.colors.primary, + borderRadius:10, + }}> + <PlainText text={"Change Name"} style={{ + color:"black", + }}/> + </Pressable> + </View> + </MainWrapper> + ); +}; diff --git a/Route/Home/HomeRoute.jsx b/Route/Home/HomeRoute.jsx index 63a4596..410a71a 100644 --- a/Route/Home/HomeRoute.jsx +++ b/Route/Home/HomeRoute.jsx @@ -7,6 +7,8 @@ import { Album } from "../Album"; import { LikedSongPage } from "../Library/LikedSongPage"; import { LikedPlaylistPage } from "../Library/LikedPlaylistPage"; import { SettingsPage } from "./SettingsPage"; +import { ChangeName } from "./ChangeName"; +import { SelectLanguages } from "./SelectLanguages"; const Stack = createNativeStackNavigator(); export const HomeRoute = () => { return ( @@ -18,6 +20,8 @@ export const HomeRoute = () => { <Stack.Screen name={"LikedSongs"} component={LikedSongPage}/> <Stack.Screen name={"LikedPlaylists"} component={LikedPlaylistPage}/> <Stack.Screen name={"Settings"} component={SettingsPage}/> + <Stack.Screen name={"ChangeName"} component={ChangeName}/> + <Stack.Screen name={"SelectLanguages"} component={SelectLanguages}/> </Stack.Navigator> ); }; diff --git a/Route/Home/SelectLanguages.jsx b/Route/Home/SelectLanguages.jsx new file mode 100644 index 0000000..cb36879 --- /dev/null +++ b/Route/Home/SelectLanguages.jsx @@ -0,0 +1,108 @@ +import { MainWrapper } from "../../Layout/MainWrapper"; +import { Pressable, ToastAndroid, View } from "react-native"; +import Animated, { FadeInDown } from "react-native-reanimated"; +import FastImage from "react-native-fast-image"; +import { PlainText } from "../../Component/Global/PlainText"; +import { EachCheckBox } from "../../Component/RouteOnboarding/EachCheckBox"; +import { useState } from "react"; +import { SetLanguageValue } from "../../LocalStorage/Languages"; +import { useTheme } from "@react-navigation/native"; +import { Spacer } from "../../Component/Global/Spacer"; + +export const SelectLanguages = ({navigation}) => { + const [Languages, setLanguages] = useState([]); + const theme = useTheme() + async function onConfirmPress(language){ + if (language.length < 2){ + // eslint-disable-next-line no-alert + alert("Please select atleast 2 language") + } else { + const Lang = language.join(",") + await SetLanguageValue(Lang) + navigation.pop() + ToastAndroid.showWithGravity( + `Please restart the app`, + ToastAndroid.SHORT, + ToastAndroid.CENTER, + ); + } + } + return ( + <MainWrapper> + <View style={{ + alignItems:"center", + marginTop:10 + }}> + <Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/selectLanguage.gif")} style={{ + height:150, + width:150, + borderRadius:100, + }}/></Animated.View> + <Spacer/> + <Animated.View entering={FadeInDown.delay(750)}><PlainText text={"select atleast 2 language"}/></Animated.View> + </View> + <View style={{ + flex:1, + alignItems:"center", + justifyContent:'flex-start', + marginTop:10, + }}> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(()=>data) + }} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{ + setLanguages(()=>data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Telugu"} checkbox2={"Marathi"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Bhojpuri"} checkbox2={"Bengali"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Kannada"} checkbox2={"Gujarati"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Malayalam"} checkbox2={"Urdu"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Kannada"} checkbox2={"Rajasthani"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Odia"} checkbox2={"Assamese"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <Spacer/> + <Pressable onPress={()=>{ + onConfirmPress((Languages)) + }} style={{ + padding:15, + alignItems:"center", + justifyContent:'center', + backgroundColor:theme.colors.primary, + borderRadius:10, + }}> + <PlainText text={"Confirm"} style={{ + color:"black", + paddingRight:0, + }}/> + </Pressable> + </View> + </MainWrapper> + ); +}; diff --git a/Route/Home/SettingsPage.jsx b/Route/Home/SettingsPage.jsx index 1c19944..a9470b1 100644 --- a/Route/Home/SettingsPage.jsx +++ b/Route/Home/SettingsPage.jsx @@ -14,7 +14,7 @@ import { import { useEffect, useState } from "react"; import { SmallText } from "../../Component/Global/SmallText"; -export const SettingsPage = () => { +export const SettingsPage = ({navigation}) => { const [Font, setFont] = useState(""); const [Playback, setPlayback] = useState(""); const [Download, setDownload] = useState(""); @@ -81,8 +81,12 @@ export const SettingsPage = () => { <PaddingConatiner> <Heading text={"SETTINGS"}/> <ScrollView> - <EachSettingsButton text={"Change Name"}/> - <EachSettingsButton text={"Select Languages"}/> + <EachSettingsButton text={"Change Name"} OnPress={()=>{ + navigation.navigate("ChangeName") + }}/> + <EachSettingsButton text={"Select Languages"} OnPress={()=>{ + navigation.navigate("SelectLanguages") + }}/> <EachDropDownWithLabel data={FontSize} text={"Font size"} placeholder={Font} OnChange={SetFont}/> <EachDropDownWithLabel data={PlaybackQuality} text={"Playback quality"} placeholder={Playback} OnChange={SetPlayBack}/> <EachDropDownWithLabel data={DownloadPath} text={"Download Path"} placeholder={Download} OnChange={SetDownLoad}/> @@ -93,8 +97,8 @@ export const SettingsPage = () => { ); }; -function EachSettingsButton({text}) { - return <Pressable style={{ +function EachSettingsButton({text, OnPress}) { + return <Pressable onPress={OnPress} style={{ backgroundColor:"rgb(43,45,55)", padding:20, borderRadius:10, @@ -117,7 +121,9 @@ function EachDropDownWithLabel({data, text, placeholder, OnChange}){ marginBottom:10, }}> <PlainText text={text}/> - <Dropdown placeholder={placeholder} itemTextStyle={{ + <Dropdown placeholder={placeholder} placeholderStyle={{ + color:"white", + }} itemTextStyle={{ color:"rgb(26,26,26)", }} containerStyle={{ backgroundColor:"rgb(236,236,236)", diff --git a/Route/OnboardingScreen/Slide2.jsx b/Route/OnboardingScreen/Slide2.jsx index 2ff8b10..f7158d2 100644 --- a/Route/OnboardingScreen/Slide2.jsx +++ b/Route/OnboardingScreen/Slide2.jsx @@ -1,5 +1,5 @@ import { MainWrapper } from "../../Layout/MainWrapper"; -import { ScrollView, View } from "react-native"; +import { View } from "react-native"; import Animated, { FadeInDown } from "react-native-reanimated"; import FastImage from "react-native-fast-image"; import { Heading } from "../../Component/Global/Heading"; @@ -7,7 +7,7 @@ import { PlainText } from "../../Component/Global/PlainText"; import { BottomNextAndPrevious } from "../../Component/RouteOnboarding/BottomNextAndPrevious"; import { EachCheckBox } from "../../Component/RouteOnboarding/EachCheckBox"; import { useState } from "react"; -import { GetLanguageValue, SetLanguageValue } from "../../LocalStorage/Languages"; +import { SetLanguageValue } from "../../LocalStorage/Languages"; export const Slide2 = ({navigation}) => { const [Languages, setLanguages] = useState([]); @@ -25,8 +25,7 @@ export const Slide2 = ({navigation}) => { <MainWrapper> <View style={{ alignItems:"center", - justifyContent:"center", - flex:1, + marginTop:10 }}> <Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/selectLanguage.gif")} style={{ height:200, @@ -36,37 +35,54 @@ export const Slide2 = ({navigation}) => { <Animated.View entering={FadeInDown.delay(500)}><Heading text={"What's Your Music Taste?"} nospace={true} style={{marginTop:10}}/></Animated.View> <Animated.View entering={FadeInDown.delay(750)}><PlainText text={"select atleast 2 language"}/></Animated.View> </View> - <View style={{ - flex:1, - alignItems:"center", - justifyContent:'flex-start', - }}> - <EachCheckBox data={Languages} onCheck1={(data)=>{ - setLanguages(()=>data) - }} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{ - setLanguages(()=>data) - }}/> - <EachCheckBox data={Languages} onCheck1={(data)=>{ - setLanguages(data) - }} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{ - setLanguages(data) - }}/> - <EachCheckBox data={Languages} onCheck1={(data)=>{ - setLanguages(data) - }} checkbox1={"Telugu"} checkbox2={"Bhojpuri"} onCheck2={(data)=>{ - setLanguages(data) - }}/> - <EachCheckBox data={Languages} onCheck1={(data)=>{ - setLanguages(data) - }} checkbox1={"Bengali"} checkbox2={"Marathi"} onCheck2={(data)=>{ - setLanguages(data) - }}/> - <EachCheckBox data={Languages} onCheck1={(data)=>{ - setLanguages(data) - }} checkbox1={"Haryanvi"} checkbox2={"Rajasthani"} onCheck2={(data)=>{ - setLanguages(data) - }}/> - </View> + <View style={{ + flex:1, + alignItems:"center", + justifyContent:'flex-start', + marginTop:10, + }}> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(()=>data) + }} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{ + setLanguages(()=>data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Telugu"} checkbox2={"Marathi"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Bhojpuri"} checkbox2={"Bengali"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Kannada"} checkbox2={"Gujarati"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Malayalam"} checkbox2={"Urdu"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Kannada"} checkbox2={"Rajasthani"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + <EachCheckBox data={Languages} onCheck1={(data)=>{ + setLanguages(data) + }} checkbox1={"Odia"} checkbox2={"Assamese"} onCheck2={(data)=>{ + setLanguages(data) + }}/> + + </View> <BottomNextAndPrevious delay={100} showPrevious={true} onNextPress={()=>{ onNextPress(Languages) }} onPreviousPress={()=>{