1import { StyleSheet,View,Text} from 'react-native'
2import React ,{useContext}from 'react'
3import { useFormik } from 'formik';
4import Button from './CustomButton';
5import TextInput from './CustomInput';
6import { storeLocalStorageData } from './../utils/storage';
7import UserContext from './../utils/context';
8import axios from 'axios';
9import {LinearGradient} from 'expo-linear-gradient';
10
11import * as yup from 'yup'
12import { useState } from 'react';
13
14
15
16interface JoinRoomProps{
17
18}
19const JoinRoom: React.FC<JoinRoomProps> = () => {
20
21
22 const devUrl="http://localhost:4000"
23 const lanUrl="http://192.168.43.238:4000"
24 const prodUrl="https://sockets-server-ke.herokuapp.com/"
25
26
27 const client = axios.create({ baseURL:prodUrl});
28 const user = useContext(UserContext);
29
30const [error, setError] = useState({ name:"", message:"" });
31const { handleChange, handleSubmit, values,errors,isSubmitting } = useFormik({
32
33 initialValues: { username:'',room:'general' },
34
35 onSubmit: values =>{
36 const roomname = values.room?values.room.toLowerCase():"general"
37 const username = values.username.toLowerCase()
38 const room_data = {username,room:roomname}
39
40 client.post('/users', {user:room_data})
41 .then( (response)=> {
42 const user_exist =response.data.data
43 console.log("user exists === ",user_exist,room_data)
44
45 if(user_exist){
46 console.log("error block")
47 setError({name:"username",message:"username exists"})
48 errors.username = "username exists"
49 }else{
50 console.log("no error block")
51 storeLocalStorageData(room_data)
52 user.updateUser(room_data)
53 }
54
55
56
57 })
58 .catch(function (error) {
59
60 });
61
62 }
63
64 })
65 console.log("errors",errors.username)
66
67 const validationColor = "white"
68 const textColor = "white"
69
70return (
71 <View
72 style={styles.container}>
73 <LinearGradient colors={['#164e63', '#1b9999', '#851ea3']} style={styles.linearGradient}>
74 <View style={styles.formbox}>
75
76 <TextInput onChangeText={handleChange('username')} value={values.username}
77 validationColor={validationColor} textcolor={textColor}/>
78 {}
79 {error.name==="username" &&<Text style={{ fontSize: 15, color: 'yellow' }}>{error.message}</Text>}
80 <View style={styles.inputbuffer}></View>
81
82 <TextInput onChangeText={handleChange('room')} value={values.room}
83 validationColor={validationColor} textcolor={textColor}
84 />
85 {error.name === "room" &&<Text style={{ fontSize: 15, color: 'yellow' }}>{error.message}</Text>}
86
87 <View style={styles.button}>
88 <Button onPress={handleSubmit} label="JOIN" color={textColor} />
89 </View>
90
91 </View>
92 </LinearGradient>
93</View>
94 )
95}
96
97export default JoinRoom
98
99const styles = StyleSheet.create({
100 container:{
101
102 flex:1,
103 width:'100%',
104 height:"100%",
105 marginTop:15
106
107
108 },
109 inputbuffer:{
110 height:20,
111 flexDirection:'column',
112 justifyContent:'center',
113 alignItems:'center',
114 width:'100%'
115},
116linearGradient: {
117 flex: 1,
118 width:'100%',
119 height:"100%",
120 flexDirection:'column',
121 justifyContent:'center',
122 alignItems:'center',
123
124},
125formbox:{
126 flex:.5,
127 height:100,
128 backgroundColor:"#330033",
129 flexDirection:'column',
130 justifyContent:'center',
131 alignItems:'center',
132 width:'95%',
133 borderRadius:10,
134 elevation:7,
135 shadowColor:'#00ff33',
136 shadowOffset: {
137 width: 5,
138 height: 25,
139 },
140 shadowOpacity: .9,
141 shadowRadius: 50.05,
142 }
143,
144button:{
145marginTop:20,
146
147
148 }
149
150})
