Skip to content
Snippets Groups Projects
Commit c7500e09 authored by fu1106jv's avatar fu1106jv
Browse files

Merge branch '1-react-convert-class-components-to-functional-components' into 'main' 

convert react class components to functional components

Closes #1

See merge request swp-ws21-fahrtenbuch/team-einhorn/fahrtenbuch!1
parents ee153808 bf07f915
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/components/createLogEntry.tsx
+ 79
− 83
View file @ c7500e09
import * as React from 'react'; import React from "react";
import Form from 'react-bootstrap/Form'; import Form from "react-bootstrap/Form";
import Row from 'react-bootstrap/Row'; import Row from "react-bootstrap/Row";
import Col from 'react-bootstrap/Col'; import Col from "react-bootstrap/Col";
import Button from 'react-bootstrap/Button'; import Button from "react-bootstrap/Button";
import { useFormik } from 'formik'; import { useFormik } from "formik";
import * as Yup from 'yup'; import * as Yup from "yup";
import {useParams} from 'react-router-dom'; import { useParams } from "react-router-dom";
function VehicleInfo() { function VehicleInfo() {
const { vehicleId } = useParams<{vehicleId: string}>(); const { vehicleId } = useParams<{ vehicleId: string }>();
return ( return (
<div> <div>
<h3>ID: {vehicleId}</h3> <h3>ID: {vehicleId}</h3>
</div> </div>
); );
} }
const CreateLogEntry = () => { const CreateLogEntry = () => {
const formik = useFormik({ const formik = useFormik({
initialValues: { initialValues: {
firstName: '', firstName: "",
lastName: '', lastName: "",
email: '', email: "",
}, },
validationSchema: Yup.object({ validationSchema: Yup.object({
firstName: Yup.string() firstName: Yup.string()
.max(15, 'Must be 15 characters or less') .max(15, "Must be 15 characters or less")
.required('Required'), .required("Required"),
lastName: Yup.string() lastName: Yup.string()
.max(20, 'Must be 20 characters or less') .max(20, "Must be 20 characters or less")
.required('Required'), .required("Required"),
email: Yup.string().email('Invalid email address').required('Required'), email: Yup.string().email("Invalid email address").required("Required"),
}), }),
onSubmit: async values => { onSubmit: async (values) => {
console.log(values) console.log(values);
const response = await fetch('/api/logEntry', { const response = await fetch("/api/logEntry", {
method: 'POST', method: "POST",
credentials: 'same-origin', credentials: "same-origin",
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
},
body: JSON.stringify(values) // body data type must match "Content-Type" header
});
console.log(response.json())
}, },
}); body: JSON.stringify(values), // body data type must match "Content-Type" header
return ( });
<div> console.log(response.json());
<VehicleInfo /> },
<Form onSubmit={formik.handleSubmit}> });
<Row className="mb-3"> return (
<Form.Group as={Col} controlId="firstName"> <div>
<Form.Label>First Name</Form.Label> <VehicleInfo />
<Form.Control <Form onSubmit={formik.handleSubmit}>
type="text" <Row className="mb-3">
{...formik.getFieldProps('firstName')} <Form.Group as={Col} controlId="firstName">
/> <Form.Label>First Name</Form.Label>
{formik.touched.firstName && formik.errors.firstName ? ( <Form.Control type="text" {...formik.getFieldProps("firstName")} />
<div>{formik.errors.firstName}</div> {formik.touched.firstName && formik.errors.firstName ? (
) : null} <div>{formik.errors.firstName}</div>
</Form.Group> ) : null}
</Row> </Form.Group>
<Row className="mb-3"> </Row>
<Form.Group as={Col} controlId="lastName"> <Row className="mb-3">
<Form.Label>Last Name</Form.Label> <Form.Group as={Col} controlId="lastName">
<Form.Control type="text" {...formik.getFieldProps('lastName')} /> <Form.Label>Last Name</Form.Label>
{formik.touched.lastName && formik.errors.lastName ? ( <Form.Control type="text" {...formik.getFieldProps("lastName")} />
<div>{formik.errors.lastName}</div> {formik.touched.lastName && formik.errors.lastName ? (
) : null} <div>{formik.errors.lastName}</div>
</Form.Group> ) : null}
</Row> </Form.Group>
</Row>
<Row className="mb-3"> <Row className="mb-3">
<Form.Group as={Col} controlId="email"> <Form.Group as={Col} controlId="email">
<Form.Label>Email Address</Form.Label> <Form.Label>Email Address</Form.Label>
<Form.Control type="email" {...formik.getFieldProps('email')} /> <Form.Control type="email" {...formik.getFieldProps("email")} />
{formik.touched.email && formik.errors.email ? ( {formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div> <div>{formik.errors.email}</div>
) : null} ) : null}
</Form.Group> </Form.Group>
</Row> </Row>
<Button variant="primary" type="submit"> <Button variant="primary" type="submit">
Submit Submit
</Button> </Button>
</Form> </Form>
</div> </div>
); );
}; };
export default CreateLogEntry export default CreateLogEntry;
src/client/components/header.tsx
+ 24
− 25
View file @ c7500e09
import * as React from 'react'; import React from "react";
import Navbar from 'react-bootstrap/Navbar'; import Navbar from "react-bootstrap/Navbar";
import Container from 'react-bootstrap/Container'; import Container from "react-bootstrap/Container";
import Nav from 'react-bootstrap/Nav'; import Nav from "react-bootstrap/Nav";
import { import { Link } from "react-router-dom";
Link
} from "react-router-dom";
import vehicleTypes from "./vehicleTypes";
class Header extends React.Component { function Header() {
constructor(props: any) { return (
super(props); <Navbar bg="green" variant="dark">
} <Container>
render() { <Navbar.Brand as={Link} to="/">
return <Navbar bg="green" variant="dark"> Navbar
<Container> </Navbar.Brand>
<Nav className="me-auto">
<Navbar.Brand as={Link} to="/">Navbar</Navbar.Brand> <Nav.Link as={Link} to="/vehicleTypes">
<Nav className="me-auto"> Types
<Nav.Link as={Link} to="/vehicleTypes">Types</Nav.Link> </Nav.Link>
<Nav.Link as={Link} to="/login">Login</Nav.Link> <Nav.Link as={Link} to="/login">
</Nav> Login
</Container> </Nav.Link>
</Navbar>; </Nav>
} </Container>
</Navbar>
);
} }
export default Header export default Header;
src/client/components/home.tsx
+ 10
− 11
View file @ c7500e09
import * as React from 'react'; import * as React from "react";
import { import { Link } from "react-router-dom";
Link
} from "react-router-dom";
class Home extends React.Component { function Home() {
render() { return (
return <div> <div>
<Link to={"/qr/testId"}>QR</Link> <Link to={"/qr/testId"}>QR</Link>
</div>; </div>
} );
} }
export default Home
export default Home;
src/client/components/vehicleTypes.tsx
+ 174
− 125
View file @ c7500e09
import * as React from 'react'; import React, { useState, useEffect } from "react";
import Modal from 'react-bootstrap/Modal'; import Modal from "react-bootstrap/Modal";
import Button from 'react-bootstrap/Button'; import Button from "react-bootstrap/Button";
import Table from 'react-bootstrap/Table'; import Table from "react-bootstrap/Table";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash, faPlus } from '@fortawesome/free-solid-svg-icons' import { faTrash, faPlus } from "@fortawesome/free-solid-svg-icons";
function VehicleTypes() {
const [vehicleTypes, setVehicleTypes] = useState<
{ id: number; name: string; seats: number; image: string }[]
>([]);
const [add, setAdd] = useState(false);
const [removeId, setRemoveId] = useState<number>(null);
class VehicleTypes extends React.Component<{}, {removeId: number, add: boolean, vehicleTypes: { id: number; name: string; seats: number; image: string;}[]}> { useEffect(() => {
constructor(props: any) { reloadData();
super(props); });
this.state = {
vehicleTypes: [],
removeId: undefined,
add: false
};
}
reloadData(){
fetch('/api/vehicleType', {
method: 'GET',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => this.setState({ vehicleTypes: data }));
}
componentDidMount() { const reloadData = () => {
this.reloadData(); fetch("/api/vehicleType", {
} method: "GET",
addType(type: any){ credentials: "same-origin",
fetch('/api/vehicleType', { headers: {
method: 'POST', "Content-Type": "application/json",
credentials: 'same-origin', },
headers: { })
'Content-Type': 'application/json' .then((response) => response.json())
}, .then((data) => setVehicleTypes(data))
body: JSON.stringify(type) .catch((e) => console.log("Error while loading vehicle type\n:", e));
}).then( };
()=>this.reloadData() const addType = (type: any) => {
); fetch("/api/vehicleType", {
} method: "POST",
removeType(){ credentials: "same-origin",
fetch('/api/vehicleType/' + this.state.removeId, { headers: {
method: 'DELETE', "Content-Type": "application/json",
credentials: 'same-origin', },
headers: { body: JSON.stringify(type),
'Content-Type': 'application/json' }).then(() => reloadData());
}, };
}).then( const removeType = () => {
()=>{ fetch("/api/vehicleType/" + removeId, {
this.reloadData(); method: "DELETE",
this.setState({removeId: undefined}); credentials: "same-origin",
} headers: {
); "Content-Type": "application/json",
} },
getRemoveDialog(){ }).then(() => {
const { vehicleTypes, removeId } = this.state; reloadData();
return ( setRemoveId(null);
<div className={"modalWrapper"}> });
<Modal.Dialog> };
<Modal.Header closeButton onClick={()=>{this.setState({removeId: undefined})}}> const getRemoveDialog = () => {
<Modal.Title>Remove Vehicle Type</Modal.Title> return (
</Modal.Header> <div className={"modalWrapper"}>
<Modal.Body> <Modal.Dialog>
<p>Remove VehicleType "{vehicleTypes.find(x=>x.id == removeId).name}"?</p> <Modal.Header
</Modal.Body> closeButton
<Modal.Footer> onClick={() => {
<Button variant="secondary" onClick={()=>{this.setState({removeId: undefined})}}>Close</Button> setRemoveId(null);
<Button variant="danger" onClick={()=>{this.removeType()}}>Delete</Button> }}
</Modal.Footer> >
</Modal.Dialog> <Modal.Title>Remove Vehicle Type</Modal.Title>
</div>); </Modal.Header>
} <Modal.Body>
getAddDialog(){ <p>
return ( Remove VehicleType "
<div className={"modalWrapper"}> {vehicleTypes.find((x) => x.id == removeId).name}"?
<Modal.Dialog> </p>
<Modal.Header closeButton onClick={()=>{this.setState({add: false})}}> </Modal.Body>
<Modal.Title>New Vehicle Type</Modal.Title> <Modal.Footer>
</Modal.Header> <Button
<Modal.Body> variant="secondary"
<p>Add VehicleType?</p> onClick={() => {
TODO setRemoveId(null);
</Modal.Body> }}
<Modal.Footer> >
<Button variant="secondary" onClick={()=>{this.setState({add: false})}}>Close</Button> Close
<Button variant="primary" onClick={()=>{this.addType({ </Button>
name: "ABC", <Button
seats: 2, variant="danger"
})}}>Add</Button> onClick={() => {
</Modal.Footer> removeType();
</Modal.Dialog> }}
</div>); >
} Delete
</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
};
const getAddDialog = () => {
return (
<div className={"modalWrapper"}>
<Modal.Dialog>
<Modal.Header
closeButton
onClick={() => {
setAdd(false);
}}
>
<Modal.Title>New Vehicle Type</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Add VehicleType?</p>
TODO
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => {
setAdd(false);
}}
>
Close
</Button>
<Button
variant="primary"
onClick={() => {
addType({ name: "ABC", seats: 2 });
}}
>
Add
</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
};
render(){ return (
const { vehicleTypes, removeId, add } = this.state; <div>
return (<div> <div className={"menuBarTable"}>
<div className={"menuBarTable"}> <Button size="sm" variant="dark" title="Add Type">
<Button size="sm" variant="dark" title="Add Type"><FontAwesomeIcon className={"text-center"} onClick={()=>{this.setState({add: true})}} icon={faPlus} /></Button> <FontAwesomeIcon
</div> className={"text-center"}
<Table striped bordered hover variant="dark"> onClick={() => {
<thead> setAdd(true);
<tr> }}
<th>#</th> icon={faPlus}
<th>Name</th> />
<th>Seats</th> </Button>
<th> </th> </div>
</tr> <Table striped bordered hover variant="dark">
</thead> <thead>
<tbody> <tr>
{vehicleTypes.map(t => <th>#</th>
<tr key={t.id}> <th>Name</th>
<td>{t.id}</td> <th>Seats</th>
<td>{t.name}</td> <th> </th>
<td>{t.seats}</td> </tr>
<td className={"text-center"}><FontAwesomeIcon className={"text-danger text-center iconHover"} onClick={()=>{this.setState({removeId: t.id})}} title="Remove" icon={faTrash} /></td> </thead>
</tr> <tbody>
)} {vehicleTypes.map((t) => (
</tbody> <tr key={t.id}>
</Table> <td>{t.id}</td>
{removeId != undefined && this.getRemoveDialog()} <td>{t.name}</td>
{add && this.getAddDialog()} <td>{t.seats}</td>
</div>) <td className={"text-center"}>
} <FontAwesomeIcon
className={"text-danger text-center iconHover"}
onClick={() => {
this.setState({ removeId: t.id });
}}
title="Remove"
icon={faTrash}
/>
</td>
</tr>
))}
</tbody>
</Table>
{removeId != null && getRemoveDialog()}
{add && getAddDialog()}
</div>
);
} }
export default VehicleTypes export default VehicleTypes;
src/client/index.tsx
+ 7
− 12
View file @ c7500e09
import * as React from 'react'; import * as React from "react";
import { render } from 'react-dom'; import { render } from "react-dom";
import AppRouter from './router' import AppRouter from "./router";
import './css/app'; import "./css/app";
class ApplicationComponent extends React.Component { function App() {
constructor(props: any){ return <AppRouter />;
super(props);
}
render(){
return <AppRouter />;
}
} }
render(<ApplicationComponent />, document.getElementById('app')) render(<App />, document.getElementById("app"));
src/client/router.tsx
+ 20
− 27
View file @ c7500e09
import * as React from 'react'; import * as React from "react";
import Header from './components/header'; import Header from "./components/header";
import CreateLogEntry from './components/createLogEntry'; import CreateLogEntry from "./components/createLogEntry";
import Home from './components/home'; import Home from "./components/home";
import {BrowserRouter, Route, Switch} from 'react-router-dom'; import { BrowserRouter, Route, Switch } from "react-router-dom";
import VehicleTypes from "./components/vehicleTypes"; import VehicleTypes from "./components/vehicleTypes";
class AppRouter extends React.Component<{}, {}> { function AppRouter() {
constructor(props: any) { return (
super(props); <BrowserRouter>
} <Header />
<div className="mainView">
render(){ <Switch>
return (<BrowserRouter> <Route path={["/", "/home"]} component={Home} exact />
<div> <Route path="/qr/:vehicleId" component={CreateLogEntry} />
<Header /> <Route path="/vehicleTypes" component={VehicleTypes} exact />
<div className="mainView"> <Route path="/login" exact />
<Switch> <Route />
<Route path={["/", "/home"]} component={Home} exact/> </Switch>
<Route path="/qr/:vehicleId" component={CreateLogEntry}/> </div>
<Route path="/vehicleTypes" component={VehicleTypes} exact /> </BrowserRouter>
<Route path="/login" exact/> );
<Route />
</Switch>
</div>
</div>
</BrowserRouter>)
}
} }
export default AppRouter; export default AppRouter;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment