new grid

frontend/src/pages/newPlace/newPlace.js

@@ -2,9 +2,10 @@ 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";
+import {Grid, TextField} from "@mui/material";
 
 export default function NewPlace()
-{   
+{
     const cityList = ["Compiègne", "Margny", "Venette"]
     const typeList = ["Maison", "Appartement", "Studio"]
     const equipmentList = ["wifi", "canap"]
@@ -61,7 +62,7 @@ export default function NewPlace()
 
     }
 
-    
+
     const style = StyleSheet.create({
         input: {
             borderBottomWidth: 1,
@@ -74,30 +75,63 @@ export default function NewPlace()
             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}}>
-                <Text style={style.titles}>Adresse</Text>
-                <TextInput style={style.input} onChangeText={setaddress} value={address} placeholder="Adresse"/>
-                <TextInput style={style.input} onChangeText={setcomp} value={comp} placeholder="Complément"/>
-                <SelectInput style={{fontSize:style.input.fontSize, marginTop:10, marginBottom:10}} SetIsMain={setIsMainCity} useOther={true} onChangeText={setcity} value={city} list={cityList}/>
-                {isMainCity ? <TextInput style={style.input} onChangeText={setcity} value={city}/> : null}
-                <Text style={style.titles}>Nom</Text>
-                <TextInput style={style.input} onChangeText={setname} value={name} placeholder="Nom"/>
-                <Text style={style.titles}>Places restantes</Text>
-                <TextInput style={style.input} onChangeText={setplacesRestantes} value={placesRestantes} placeholder="Places restantes"/>
-                <Text style={style.titles}>Prix</Text>
-                <TextInput style={style.input} onChangeText={setprix} value={prix} placeholder="Prix"/>
-                <Text style={style.titles}>Type de logement</Text>
-                <SelectInput style={{fontSize:style.input.fontSize, marginTop:10, marginBottom:10}} SetIsMain={setIsMainType} useOther={true} onChangeText={settype} value={type} list={typeList}/>
-                {isMainType ? <TextInput style={{...style.input, marginBottom:25}} onChangeText={settype} value={type}/> : null}
-                <TouchableOpacity style={{borderRadius:1, backgroundColor:"black", padding:10, width:180}} onPress={createPlace}>
+                <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>
-                </TouchableOpacity>
+                  </TouchableOpacity>
+                </Grid>
+
+
+
                 <View>
                     {equipmentList.map(item => {
                         return (
@@ -130,4 +164,4 @@ function reducingUpdate(state, action)
 {
     state[action.item] = action.value
     return state
-}
\ No newline at end of file
+}