Newer
Older
import { useEffect, useMemo, useReducer, useState } from "react";
import { TextInput, View, Text, StyleSheet, Dimensions, ScrollView, TouchableOpacity, CheckBox, SectionList } from "react-native";
import { baseIPAddress, newPlacePath } from "../../../constants/server";
import { SelectInput } from "../../components/form/select";
const cityList = ["Compiègne", "Margny", "Venette"]
const typeList = ["Maison", "Appartement", "Studio"]
const equipmentList = ["wifi", "canap"]
const [address, setaddress] = useState("");
const [city, setcity] = useState("Compiègne");
const [comp, setcomp] = useState("");
const [name, setname] = useState("");
const [placesRestantes, setplacesRestantes] = useState("");
const [prix, setprix] = useState("");
const [type, settype] = useState("");
const [equip, updateEquip] = useReducer(reducingUpdate, equipmentList, reducingInit)
const [isMainCity, setIsMainCity] = useState(true);
const [isMainType, setIsMainType] = useState(true);
const [customReload, setCustomReload] = useState(false)
function Reload() { setCustomReload(!customReload) }
const [placeAdded, setPlaceAdded] = useState(false)
const [errorText, setErrorText] = useState("")
if (!address || !city || !name || !prix || !type)
{
//If a necessary var is undefined, render a user friendly error
setErrorText("Veuillez bien remplir tous les champs obligatoires.")
return
}
//Création de l'objet JSON à envoyer
"address": [address, city].join(", "),
"name": name,
"place_restant": placesRestantes,
"price": prix,
"types": type,
"equipment" : equip
}
fetch(baseIPAddress + newPlacePath, {
//Appel du back
method: "post",
body: JSON.stringify(place)
}).then(res => {
//En cas de réussite de création
setPlaceAdded(true)
}).catch(err => {
//En cas d'échec, render error
setErrorText("Erreur serveur, veuillez bien remplir tous les champs")
const style = StyleSheet.create({
input: {
borderBottomWidth: 1,
fontSize: 15,
borderBottomColor: "grey",
width: Dimensions.get('window').width * (1/2)
},
titles: {
fontSize: 30,
fontWeight: "bold",
marginTop: 25,
marginBottom: 15
},
grid: {
marginLeft: 20,
alignItems: 'center',
justifyContent: 'center',
display: 'flex'
return (
<View style={{marginTop:20, backgroundColor:"white", height:"100%"}} >
{errorText!=""? <Text>{errorText}</Text> : null}
<ScrollView style={{marginLeft:20, marginBottom: 20}}>
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<Grid item style={{marginLeft:20}} container spacing={1}>
<Text style={style.titles}>Adresse</Text>
</Grid>
<Grid item style={{marginLeft:20}} container spacing={1}>
<TextField required id={address} placeholder="Adresse" onChangeText={setaddress}/>
<TextField style={{marginLeft:3}} onChangeText={setcomp} id={comp} placeholder="Complément"/>
</Grid>
<Grid item style={{marginLeft:20}}>
<SelectInput style={{fontSize:style.input.fontSize, marginTop:10, marginBottom:10}} SetIsMain={setIsMainCity} useOther={true} onChangeText={setcity} value={city} list={cityList}/>
{isMainCity ? <TextField placeholder="Autre" onChangeText={setcity} id={city}/> : null}
</Grid>
<Grid item style={{marginLeft:20, marginTop: 10}}>
<Text style={style.titles}>Nom</Text>
</Grid>
<Grid item style={{marginLeft:20}}>
<TextField required onChangeText={setname} id={name} placeholder="Nom"/>
</Grid>
<Grid item style={{marginLeft:20, marginTop: 10}}>
<Text style={style.titles}>Places restantes</Text>
</Grid>
<Grid item style={{marginLeft:20}}>
<TextField required onChangeText={setplacesRestantes} id={placesRestantes} placeholder="Places restantes"/>
</Grid>
<Grid item style={{marginLeft:20, marginTop: 10}}>
<Text style={style.titles}>Prix</Text>
</Grid>
<Grid item style={{marginLeft:20}}>
<TextField required onChangeText={setprix} id={prix} placeholder="Prix"/>
</Grid>
<Grid item style={{marginLeft:20, marginTop: 10}}>
<Text style={style.titles}>Type de logement</Text>
</Grid>
<Grid item style={{marginLeft:20}}>
<SelectInput style={{fontSize:style.input.fontSize, marginTop:10, marginBottom:10}} SetIsMain={setIsMainType} useOther={true} onChangeText={settype} value={type} list={typeList}/>
{isMainType ? <TextField style={{...style.input, marginBottom:25}} placeholder="Autre" onChangeText={settype} value={type}/> : null}
</Grid>
<Grid>
<TouchableOpacity style={{borderRadius:1, backgroundColor:"black", padding:10, width:180}} onPress={createPlace}>
<Text style={{fontSize:16, color:"white", fontWeight:"bold", textAlign:"center"}}>Ajouter le logement</Text>
<View key={item} style={{flexDirection:"row"}}>
<CheckBox value={equip[item]} onValueChange={(val) => {updateEquip({"value": val, "item": item}); Reload()}} />
<Text>{item}</Text>
</View>
</ScrollView>
</View>
)
}
/**
* Reducing functions
*/
function reducingInit(equipmentList)
{
let dic = {}
equipmentList.forEach(element => {
dic[element] = false
})
return dic
}
function reducingUpdate(state, action)
{
state[action.item] = action.value
return state