half done frontend

import React, { useState } from 'react';
//import i{ relative } from 'path';
import { Grid, Container, Paper, Typography, TextField, Button, ButtonGroup } from '@material-ui/core'

function App() {
  /*const [ware,setWare] = useState("");
  const [weight,setWeight] = useState("");
  const [price,setPrice] = useState("");
  const [wares,setWares] = useState([]);
  const [weights, setWeights] = useState([]);
  const [prices, setPrices] = useState([]);

  let sumw = 0;
  let sump = 0;
  let rows = [];

  for(let i = 0; i < wares.length; i++){
      rows.push(<tr><th>{wares[i]}</th><th>{weights[i]}</th><th>{prices[i]}</th></tr>);
      sumw += parseFloat(weights[i]);
      sump += parseFloat(prices[i]);
  }


  return (
    <div className="App">
      <header className="App-header">
        Sum:{sumw}<br/>
        Price:{sump}<br/>
        <table>
          <tablebody>
            {rows}
          </tablebody>
        </table>
        <p>
          <input type="text" value = {ware}  onChange={e => setWare(e.target.value)}/>
          <input type="number"  value = {weight}  onChange={e => setWeight(e.target.value)} />
          <input type="number"  value = {price}  onChange={e => setPrice(e.target.value)} />

          <button type = "button" onClick = {

            () =>
            (setWares([...wares,ware]), setWeights([...weights,weight]),setPrices([...prices,price]),

              setWare(""), setPrice(""),setWeight(""))}>Add</button>
        </p>
      </header>
    </div>
  );

  const [oneName, setOneName] = useState("");
  const [names, setnames] = useState([]);
  let comps = [];

  for(let i = 0; i < names.length;i++){
      comps.push(<Competitor  name = {names[i]} key = {i}/>);
  }

  return(
    <div>
      <input type="text" value = {oneName}  onChange={e => setOneName(e.target.value)}/>
      <button type = "button" onClick = { () => (setnames([...names,oneName]), setOneName(""))}>Add competitor</button>
      {names.map((name,i) => {
        return(<Competitor  name = {name} key = {i}/>);
      })}
    </div>
  )
}

function Competitor(props){
      const [score,setScore] = useState(0);

  return(
    <div>
        {props.name}{" "}
        {score}{" "}
        <button type = "button" onClick = {() =>setScore(score+1)} >Add point</button>
        <button type = "button" onClick = {() =>score > 0 && setScore(score+-1)} >Lower points</button>
    </div>
  )
*/
  const [deps, setDeps] = useState([]);
  const [locs, setLocs] = useState([]);
  const [dests, setDests] = useState([]);
  const [IDs, setIDs] = useState([]);
  const [gates, setGates] = useState([]);

  let test =deps.map((dep, i) => {return(
    <GenerateFlight deptime = {deps[i]} location = {locs[i]}
    destination = {dests[i]} ID = {IDs[i]} key = {IDs[i]} gate ={gates[i]}/>);

    })




  return (

    <Container fixed>
      <Grid container spacing={3}>

          <h1 align="center">Egy nagyszerű cím</h1>
        </Grid>
        <Grid container sx = {12}>
            {test}
        </Grid>
          <Paper>
          <AddFlight setDeps = {setDeps} deps = {deps} locs = {locs} setLocs = {setLocs} dests = {dests} setDests = {setDests}
          IDs = {IDs} setIDs = {setIDs} gates ={gates} setGates = {setGates}/>
          </Paper>



    </Container>
  )

}

function GenerateFlight(props) {
  const [deptime, setDeptime] = useState(props.deptime);
  const [location, setLocation] = useState(props.location);
  const [destination, setDestination] = useState(props.destination);
  const [ID, setID] = useState(props.ID);
  const [gate, setGate] = useState(props.gate);
  const [isEditing, setEdit] = useState(false);
  const [del, setDel] = useState(false);

  if(del){
    return null
  }
  if (!isEditing ) {
    return (
      <Grid item xs = {12}>
        <Paper>
      <ButtonGroup fullWidth = {true} variant='contained'>
        <Button disabled={true}>{deptime}</Button>
        <Button disabled={true}>{location}</Button>
        <Button disabled={true}>{destination}</Button>
        <Button disabled={true}>{ID}</Button>
        <Button disabled={true}>{gate}</Button>
        <Button onClick={() => setEdit(true)}>EDIT</Button>
      </ButtonGroup>
      </Paper>
      </Grid>
    )
  }
  else {
    return (
      <Typography variant="h5">
      <Grid container xs = {12}>
        <Grid item>
          <TextField value={deptime} onChange={e => setDeptime(e.target.value)}></TextField>
        </Grid>
        <Grid item>
          <TextField value={location} onChange={e => setLocation(e.target.value)}></TextField>
        </Grid>
        <Grid item>
          <TextField value={destination} onChange={e => setDestination(e.target.value)}></TextField>
        </Grid>
        <Grid item>
          <TextField value={ID} onChange={e => setID(e.target.value)}></TextField>
        </Grid>
        <Grid item>
          <TextField value={gate} onChange={e => setGate(e.target.value)}></TextField>
        </Grid>
        <Grid item>
          <Button onClick={() => setEdit(false)}>DONE</Button>
        </Grid>
        <Grid item>
          <Button onClick = {() => setDel(true)}>DELETE</Button>
        </Grid>
      </Grid>
      </Typography>

    )
  }

}


function AddFlight(props) {
  const [dept,setDept] = useState("");
  const [loc,setLoc] = useState("");
  const [id,setID] = useState("");
  const [dest,setDest] = useState("");
  const [gate,setGate] = useState("");

  return (
      <Typography variant="h5">
      <Grid container  sx = {10} spacing = {1}>
        <Grid item>
          <TextField  label = "Time" value ={dept}onChange={e => setDept(e.target.value)} margin = "normal"></TextField>
        </Grid>

        <Grid item>
          <TextField label = "Location" value ={loc}  onChange={e => setLoc(e.target.value)}margin = "normal"></TextField>
        </Grid>

        <Grid item>
          <TextField  label = "Destination" value ={dest} onChange={e => setDest(e.target.value)}margin = "normal"></TextField>
        </Grid>

        <Grid item>
          <TextField label = "ID" value ={id} onChange={e => setID(e.target.value)}margin = "normal"></TextField>
        </Grid>

        <Grid item>
          <TextField label = "Gate" value ={gate} onChange={e => setGate(e.target.value)}margin = "normal"></TextField>
        </Grid>

        <Grid item>
          <Button  variant = "contained" onClick ={() => (id === "" || dept === "" || loc === "" || dest === "" || gate === ""
          || (props.setDeps([...props.deps,dept]), props.setLocs([...props.locs,loc]), props.setDests([...props.dests,dest]), props.setIDs([...props.IDs,id]), props.setGates([...props.gates,gate]),

           setDept(""),setLoc(""),setDest(""),setID(""),setGate("")) )}>ADD</Button>
          </Grid>
      </Grid>
      </Typography>
  )

}




export default App;