Skip to content

Commit e36614e

Browse files
Infinite-NullInfinite-Null
committed
Finished the settings
1 parent 1f0fab2 commit e36614e

File tree

7 files changed

+248
-45
lines changed

7 files changed

+248
-45
lines changed

‎Component/Discover/EachLanguageCard.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@ export const EachLanguageCard = ({language}) => {
99
navigation.navigate("LanguageDetail",{language:language.toLowerCase()})
1010
}} style={{
1111
backgroundColor:"rgb(42,41,41)",
12-
maxWidth:100,
13-
padding:10,
12+
padding:15,
1413
borderRadius:10,
1514
alignItems:"center",
1615
justifyContent:"center",
1716
}}>
18-
<PlainText text={language}/>
17+
<PlainText text={language} style={{paddingRight:0}}/>
1918
</Pressable>
2019
);
2120
};

‎Component/Discover/EachMomentsandGenres.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export const EachMomentsandGenres = ({text, color}) => {
99
navigation.navigate("ShowPlaylistofType",{Searchtext:text.toLowerCase()})
1010
}} style={{
1111
backgroundColor:"rgb(42,41,41)",
12-
maxWidth:100,
1312
borderRadius:10,
13+
paddingRight:10,
1414
alignItems:"center",
1515
justifyContent:"flex-start",
1616
flexDirection:'row',

‎Route/Home/ChangeName.jsx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { MainWrapper } from "../../Layout/MainWrapper";
2+
import { Dimensions, Pressable, TextInput, ToastAndroid, View } from "react-native";
3+
import Animated, { FadeInDown } from "react-native-reanimated";
4+
import FastImage from "react-native-fast-image";
5+
import { Heading } from "../../Component/Global/Heading";
6+
import { useState } from "react";
7+
import { SetUserNameValue } from "../../LocalStorage/StoreUserName";
8+
import { useTheme } from "@react-navigation/native";
9+
import { PlainText } from "../../Component/Global/PlainText";
10+
import { Spacer } from "../../Component/Global/Spacer";
11+
12+
export const ChangeName = ({navigation}) => {
13+
const width = Dimensions.get("window").width
14+
const theme = useTheme()
15+
const [Name, setName] = useState("");
16+
async function OnConfirm(name){
17+
if (name === ""){
18+
// eslint-disable-next-line no-alert
19+
alert("Please Enter name!")
20+
} else {
21+
await SetUserNameValue(name.trim())
22+
navigation.pop()
23+
ToastAndroid.showWithGravity(
24+
`Please restart the app`,
25+
ToastAndroid.SHORT,
26+
ToastAndroid.CENTER,
27+
);
28+
}
29+
}
30+
return (
31+
<MainWrapper>
32+
<View style={{
33+
alignItems:"center",
34+
justifyContent:"center",
35+
flex:1,
36+
}}>
37+
<Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/GiveName.gif")} style={{
38+
height:200,
39+
width:200,
40+
borderRadius:100,
41+
}}/></Animated.View>
42+
<Animated.View entering={FadeInDown.delay(500)}><Heading text={"What should I call you?"} nospace={true} style={{marginTop:10}}/></Animated.View>
43+
<TextInput placeholderTextColor={theme.colors.text} value={Name} onChangeText={(text)=>{
44+
setName(text)
45+
}} textAlign={'center'} placeholder={"Enter your name"} style={{
46+
borderWidth:2,
47+
backgroundColor:"rgb(53,58,70)",
48+
borderRadius:10,
49+
padding:10,
50+
width:width * 0.5,
51+
color:theme.colors.text,
52+
}}/>
53+
<Spacer/>
54+
<Pressable onPress={()=>{
55+
OnConfirm(Name)
56+
}} style={{
57+
padding:10,
58+
alignItems:"center",
59+
justifyContent:'center',
60+
backgroundColor:theme.colors.primary,
61+
borderRadius:10,
62+
}}>
63+
<PlainText text={"Change Name"} style={{
64+
color:"black",
65+
}}/>
66+
</Pressable>
67+
</View>
68+
</MainWrapper>
69+
);
70+
};

‎Route/Home/HomeRoute.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { Album } from "../Album";
77
import { LikedSongPage } from "../Library/LikedSongPage";
88
import { LikedPlaylistPage } from "../Library/LikedPlaylistPage";
99
import { SettingsPage } from "./SettingsPage";
10+
import { ChangeName } from "./ChangeName";
11+
import { SelectLanguages } from "./SelectLanguages";
1012
const Stack = createNativeStackNavigator();
1113
export const HomeRoute = () => {
1214
return (
@@ -18,6 +20,8 @@ export const HomeRoute = () => {
1820
<Stack.Screen name={"LikedSongs"} component={LikedSongPage}/>
1921
<Stack.Screen name={"LikedPlaylists"} component={LikedPlaylistPage}/>
2022
<Stack.Screen name={"Settings"} component={SettingsPage}/>
23+
<Stack.Screen name={"ChangeName"} component={ChangeName}/>
24+
<Stack.Screen name={"SelectLanguages"} component={SelectLanguages}/>
2125
</Stack.Navigator>
2226
);
2327
};

‎Route/Home/SelectLanguages.jsx

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { MainWrapper } from "../../Layout/MainWrapper";
2+
import { Pressable, ToastAndroid, View } from "react-native";
3+
import Animated, { FadeInDown } from "react-native-reanimated";
4+
import FastImage from "react-native-fast-image";
5+
import { PlainText } from "../../Component/Global/PlainText";
6+
import { EachCheckBox } from "../../Component/RouteOnboarding/EachCheckBox";
7+
import { useState } from "react";
8+
import { SetLanguageValue } from "../../LocalStorage/Languages";
9+
import { useTheme } from "@react-navigation/native";
10+
import { Spacer } from "../../Component/Global/Spacer";
11+
12+
export const SelectLanguages = ({navigation}) => {
13+
const [Languages, setLanguages] = useState([]);
14+
const theme = useTheme()
15+
async function onConfirmPress(language){
16+
if (language.length < 2){
17+
// eslint-disable-next-line no-alert
18+
alert("Please select atleast 2 language")
19+
} else {
20+
const Lang = language.join(",")
21+
await SetLanguageValue(Lang)
22+
navigation.pop()
23+
ToastAndroid.showWithGravity(
24+
`Please restart the app`,
25+
ToastAndroid.SHORT,
26+
ToastAndroid.CENTER,
27+
);
28+
}
29+
}
30+
return (
31+
<MainWrapper>
32+
<View style={{
33+
alignItems:"center",
34+
marginTop:10
35+
}}>
36+
<Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/selectLanguage.gif")} style={{
37+
height:150,
38+
width:150,
39+
borderRadius:100,
40+
}}/></Animated.View>
41+
<Spacer/>
42+
<Animated.View entering={FadeInDown.delay(750)}><PlainText text={"select atleast 2 language"}/></Animated.View>
43+
</View>
44+
<View style={{
45+
flex:1,
46+
alignItems:"center",
47+
justifyContent:'flex-start',
48+
marginTop:10,
49+
}}>
50+
<EachCheckBox data={Languages} onCheck1={(data)=>{
51+
setLanguages(()=>data)
52+
}} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{
53+
setLanguages(()=>data)
54+
}}/>
55+
<EachCheckBox data={Languages} onCheck1={(data)=>{
56+
setLanguages(data)
57+
}} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{
58+
setLanguages(data)
59+
}}/>
60+
<EachCheckBox data={Languages} onCheck1={(data)=>{
61+
setLanguages(data)
62+
}} checkbox1={"Telugu"} checkbox2={"Marathi"} onCheck2={(data)=>{
63+
setLanguages(data)
64+
}}/>
65+
<EachCheckBox data={Languages} onCheck1={(data)=>{
66+
setLanguages(data)
67+
}} checkbox1={"Bhojpuri"} checkbox2={"Bengali"} onCheck2={(data)=>{
68+
setLanguages(data)
69+
}}/>
70+
<EachCheckBox data={Languages} onCheck1={(data)=>{
71+
setLanguages(data)
72+
}} checkbox1={"Kannada"} checkbox2={"Gujarati"} onCheck2={(data)=>{
73+
setLanguages(data)
74+
}}/>
75+
<EachCheckBox data={Languages} onCheck1={(data)=>{
76+
setLanguages(data)
77+
}} checkbox1={"Malayalam"} checkbox2={"Urdu"} onCheck2={(data)=>{
78+
setLanguages(data)
79+
}}/>
80+
<EachCheckBox data={Languages} onCheck1={(data)=>{
81+
setLanguages(data)
82+
}} checkbox1={"Kannada"} checkbox2={"Rajasthani"} onCheck2={(data)=>{
83+
setLanguages(data)
84+
}}/>
85+
<EachCheckBox data={Languages} onCheck1={(data)=>{
86+
setLanguages(data)
87+
}} checkbox1={"Odia"} checkbox2={"Assamese"} onCheck2={(data)=>{
88+
setLanguages(data)
89+
}}/>
90+
<Spacer/>
91+
<Pressable onPress={()=>{
92+
onConfirmPress((Languages))
93+
}} style={{
94+
padding:15,
95+
alignItems:"center",
96+
justifyContent:'center',
97+
backgroundColor:theme.colors.primary,
98+
borderRadius:10,
99+
}}>
100+
<PlainText text={"Confirm"} style={{
101+
color:"black",
102+
paddingRight:0,
103+
}}/>
104+
</Pressable>
105+
</View>
106+
</MainWrapper>
107+
);
108+
};

‎Route/Home/SettingsPage.jsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import { useEffect, useState } from "react";
1515
import { SmallText } from "../../Component/Global/SmallText";
1616

17-
export const SettingsPage = () => {
17+
export const SettingsPage = ({navigation}) => {
1818
const [Font, setFont] = useState("");
1919
const [Playback, setPlayback] = useState("");
2020
const [Download, setDownload] = useState("");
@@ -81,8 +81,12 @@ export const SettingsPage = () => {
8181
<PaddingConatiner>
8282
<Heading text={"SETTINGS"}/>
8383
<ScrollView>
84-
<EachSettingsButton text={"Change Name"}/>
85-
<EachSettingsButton text={"Select Languages"}/>
84+
<EachSettingsButton text={"Change Name"} OnPress={()=>{
85+
navigation.navigate("ChangeName")
86+
}}/>
87+
<EachSettingsButton text={"Select Languages"} OnPress={()=>{
88+
navigation.navigate("SelectLanguages")
89+
}}/>
8690
<EachDropDownWithLabel data={FontSize} text={"Font size"} placeholder={Font} OnChange={SetFont}/>
8791
<EachDropDownWithLabel data={PlaybackQuality} text={"Playback quality"} placeholder={Playback} OnChange={SetPlayBack}/>
8892
<EachDropDownWithLabel data={DownloadPath} text={"Download Path"} placeholder={Download} OnChange={SetDownLoad}/>
@@ -93,8 +97,8 @@ export const SettingsPage = () => {
9397
);
9498
};
9599

96-
function EachSettingsButton({text}) {
97-
return <Pressable style={{
100+
function EachSettingsButton({text, OnPress}) {
101+
return <Pressable onPress={OnPress} style={{
98102
backgroundColor:"rgb(43,45,55)",
99103
padding:20,
100104
borderRadius:10,
@@ -117,7 +121,9 @@ function EachDropDownWithLabel({data, text, placeholder, OnChange}){
117121
marginBottom:10,
118122
}}>
119123
<PlainText text={text}/>
120-
<Dropdown placeholder={placeholder} itemTextStyle={{
124+
<Dropdown placeholder={placeholder} placeholderStyle={{
125+
color:"white",
126+
}} itemTextStyle={{
121127
color:"rgb(26,26,26)",
122128
}} containerStyle={{
123129
backgroundColor:"rgb(236,236,236)",

‎Route/OnboardingScreen/Slide2.jsx

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { MainWrapper } from "../../Layout/MainWrapper";
2-
import { ScrollView, View } from "react-native";
2+
import { View } from "react-native";
33
import Animated, { FadeInDown } from "react-native-reanimated";
44
import FastImage from "react-native-fast-image";
55
import { Heading } from "../../Component/Global/Heading";
66
import { PlainText } from "../../Component/Global/PlainText";
77
import { BottomNextAndPrevious } from "../../Component/RouteOnboarding/BottomNextAndPrevious";
88
import { EachCheckBox } from "../../Component/RouteOnboarding/EachCheckBox";
99
import { useState } from "react";
10-
import { GetLanguageValue, SetLanguageValue } from "../../LocalStorage/Languages";
10+
import { SetLanguageValue } from "../../LocalStorage/Languages";
1111

1212
export const Slide2 = ({navigation}) => {
1313
const [Languages, setLanguages] = useState([]);
@@ -25,8 +25,7 @@ export const Slide2 = ({navigation}) => {
2525
<MainWrapper>
2626
<View style={{
2727
alignItems:"center",
28-
justifyContent:"center",
29-
flex:1,
28+
marginTop:10
3029
}}>
3130
<Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/selectLanguage.gif")} style={{
3231
height:200,
@@ -36,37 +35,54 @@ export const Slide2 = ({navigation}) => {
3635
<Animated.View entering={FadeInDown.delay(500)}><Heading text={"What's Your Music Taste?"} nospace={true} style={{marginTop:10}}/></Animated.View>
3736
<Animated.View entering={FadeInDown.delay(750)}><PlainText text={"select atleast 2 language"}/></Animated.View>
3837
</View>
39-
<View style={{
40-
flex:1,
41-
alignItems:"center",
42-
justifyContent:'flex-start',
43-
}}>
44-
<EachCheckBox data={Languages} onCheck1={(data)=>{
45-
setLanguages(()=>data)
46-
}} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{
47-
setLanguages(()=>data)
48-
}}/>
49-
<EachCheckBox data={Languages} onCheck1={(data)=>{
50-
setLanguages(data)
51-
}} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{
52-
setLanguages(data)
53-
}}/>
54-
<EachCheckBox data={Languages} onCheck1={(data)=>{
55-
setLanguages(data)
56-
}} checkbox1={"Telugu"} checkbox2={"Bhojpuri"} onCheck2={(data)=>{
57-
setLanguages(data)
58-
}}/>
59-
<EachCheckBox data={Languages} onCheck1={(data)=>{
60-
setLanguages(data)
61-
}} checkbox1={"Bengali"} checkbox2={"Marathi"} onCheck2={(data)=>{
62-
setLanguages(data)
63-
}}/>
64-
<EachCheckBox data={Languages} onCheck1={(data)=>{
65-
setLanguages(data)
66-
}} checkbox1={"Haryanvi"} checkbox2={"Rajasthani"} onCheck2={(data)=>{
67-
setLanguages(data)
68-
}}/>
69-
</View>
38+
<View style={{
39+
flex:1,
40+
alignItems:"center",
41+
justifyContent:'flex-start',
42+
marginTop:10,
43+
}}>
44+
<EachCheckBox data={Languages} onCheck1={(data)=>{
45+
setLanguages(()=>data)
46+
}} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{
47+
setLanguages(()=>data)
48+
}}/>
49+
<EachCheckBox data={Languages} onCheck1={(data)=>{
50+
setLanguages(data)
51+
}} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{
52+
setLanguages(data)
53+
}}/>
54+
<EachCheckBox data={Languages} onCheck1={(data)=>{
55+
setLanguages(data)
56+
}} checkbox1={"Telugu"} checkbox2={"Marathi"} onCheck2={(data)=>{
57+
setLanguages(data)
58+
}}/>
59+
<EachCheckBox data={Languages} onCheck1={(data)=>{
60+
setLanguages(data)
61+
}} checkbox1={"Bhojpuri"} checkbox2={"Bengali"} onCheck2={(data)=>{
62+
setLanguages(data)
63+
}}/>
64+
<EachCheckBox data={Languages} onCheck1={(data)=>{
65+
setLanguages(data)
66+
}} checkbox1={"Kannada"} checkbox2={"Gujarati"} onCheck2={(data)=>{
67+
setLanguages(data)
68+
}}/>
69+
<EachCheckBox data={Languages} onCheck1={(data)=>{
70+
setLanguages(data)
71+
}} checkbox1={"Malayalam"} checkbox2={"Urdu"} onCheck2={(data)=>{
72+
setLanguages(data)
73+
}}/>
74+
<EachCheckBox data={Languages} onCheck1={(data)=>{
75+
setLanguages(data)
76+
}} checkbox1={"Kannada"} checkbox2={"Rajasthani"} onCheck2={(data)=>{
77+
setLanguages(data)
78+
}}/>
79+
<EachCheckBox data={Languages} onCheck1={(data)=>{
80+
setLanguages(data)
81+
}} checkbox1={"Odia"} checkbox2={"Assamese"} onCheck2={(data)=>{
82+
setLanguages(data)
83+
}}/>
84+
85+
</View>
7086
<BottomNextAndPrevious delay={100} showPrevious={true} onNextPress={()=>{
7187
onNextPress(Languages)
7288
}} onPreviousPress={()=>{

0 commit comments

Comments
 (0)