✨ Enregistrer un incident

[x] Inscription
[x] Connexion
[x] Enregistrer un incident

package.json

@@ -6,10 +6,14 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.23.0",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.0.4",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
@@ -35,5 +39,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.30",
+    "@types/react-router-dom": "^5.3.1"
   }
 }

src/App.tsx

@@ -0,0 +1,34 @@
+import "./App.css";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import RegisterPage from "./pages/RegisterPage";
+import "semantic-ui-css/semantic.min.css";
+import LoginPage from "./pages/LoginPage";
+import UserHomePage from "./pages/UserHomePage";
+import EvenementPage from "./pages/EvenementPage";
+
+function App() {
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/">
+          <HomePage />
+        </Route>
+        <Route exact path="/register">
+          <RegisterPage />
+        </Route>
+        <Route exact path="/login">
+          <LoginPage />
+        </Route>
+        <Route path="/my-home">
+          <UserHomePage />
+        </Route>
+        <Route path="/evenements">
+          <EvenementPage />
+        </Route>
+      </Switch>
+    </Router>
+  );
+}
+
+export default App;

src/components/ModalCreateEvenement.tsx

@@ -0,0 +1,87 @@
+import axios from "axios";
+import React from "react";
+import { Modal, Form, Button } from "semantic-ui-react";
+
+export default function ModalCreateEvenement(props: any) {
+  const submit = () => {
+    axios
+      .post("http://localhost:8000/evenements", {
+        date: props.date,
+        heure: props.heure,
+        details: props.details,
+        type_incident: props.type_incident,
+        _token: localStorage.getItem("_token"),
+      })
+      .then((response) => {
+        console.log(response);
+        props.isOk();
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  return (
+    <Modal
+      onClose={() => props.setOpen(false)}
+      onOpen={() => props.setOpen(true)}
+      open={props.open}
+    >
+      <Modal.Header>Enregistrement d'un Evenement</Modal.Header>
+      <Modal.Content>
+        <Form onSubmit={submit}>
+          <Form.Select
+            fluid
+            label="Type d'Incident"
+            name="type_incident"
+            options={props.optionIncidents}
+            onChange={props.handleChange}
+            placeholder="Type d'Incident"
+          />
+          <Form.Group widths="equal">
+            <Form.Input
+              fluid
+              id="form-subcomponent-shorthand-input-prenom"
+              label="Date"
+              name="date"
+              type="date"
+              placeholder="Date"
+              value={props.date}
+              onChange={props.handleChange}
+            />
+            <Form.Input
+              fluid
+              id="form-subcomponent-shorthand-input-nom"
+              label="Heure"
+              name="heure"
+              type="time"
+              placeholder="Heure"
+              value={props.heure}
+              onChange={props.handleChange}
+            />
+          </Form.Group>
+          <Form.TextArea
+            label="Détails"
+            name="details"
+            placeholder="Description de l'evenement"
+            value={props.details}
+            onChange={props.handleChange}
+          />
+        </Form>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button color="red" onClick={() => props.setOpen(false)}>
+          Annuler
+        </Button>
+        <Button
+          content="Enregistrer"
+          labelPosition="right"
+          icon="checkmark"
+          positive
+          type="submit"
+          onClick={() => submit()}
+        />
+      </Modal.Actions>
+    </Modal>
+  );
+}

src/components/SideBarMenu.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Menu } from "semantic-ui-react";
+
+export default function SideBarMenu() {
+  let activeItem: string = "";
+
+  return (
+    <Menu vertical size="huge">
+      <Menu.Item>
+        <Menu.Header>Tableau de Bord</Menu.Header>
+        <Menu.Menu>
+          <Menu.Item name="accueil" active={activeItem === "accueil"} />
+          <Menu.Item
+            href="/evenements"
+            name="evenements"
+            active={activeItem === "evenements"}
+          />
+          <Menu.Item name="incidents" active={activeItem === "incidents"} />
+          <Menu.Item name="Mon compte" active={activeItem === "Mon Compte"} />
+        </Menu.Menu>
+      </Menu.Item>
+    </Menu>
+  );
+}

src/pages/EvenementPage.tsx

@@ -0,0 +1,120 @@
+import axios from "axios";
+import React, { Component } from "react";
+import { Grid, Header, Icon } from "semantic-ui-react";
+import ModalCreateEvenement from "../components/ModalCreateEvenement";
+import SideBarMenu from "../components/SideBarMenu";
+
+export default class EvenementPage extends Component<any, any> {
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      open: false,
+      date: "",
+      heure: "",
+      details: "",
+      type_incident: "",
+      optionIncidents: [],
+    };
+  }
+
+  setOpen = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  handleChange = (e: any, data: any) => {
+    this.setState({ [data.name]: data.value });
+  };
+
+  fetchTypeIncidents = () => {
+    axios
+      .get("http://localhost:8000/type-incidents")
+      .then((response) => {
+        this.setState({ optionIncidents: response.data });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  fetchEvenements = () => {
+    const _token = localStorage.getItem("_token");
+    axios.defaults.headers.post["Access-Control-Allow-Origin"] = "*";
+    axios
+      .get("http://localhost:8000/evenements/" + _token)
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  isOk = () => {
+    this.setOpen();
+  };
+
+  showModal = () => {
+    let listOptions: { key: any; text: any; value: any }[] = [];
+
+    this.state.optionIncidents.forEach((element: any) => {
+      listOptions.push({
+        key: element.id,
+        text: element.libelle,
+        value: element.id,
+      });
+    });
+
+    this.setState({ optionIncidents: listOptions });
+
+    this.setOpen();
+  };
+
+  componentDidMount() {
+    this.fetchEvenements();
+    this.fetchTypeIncidents();
+  }
+
+  render() {
+    return (
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width={3}>
+            <SideBarMenu />
+          </Grid.Column>
+          <Grid.Column width={13}>
+            <Grid.Row>
+              <br />
+              <Header as="h3">
+                Déclaration des Evenements{" "}
+                <Icon
+                  name="add circle"
+                  color="blue"
+                  size="big"
+                  link
+                  onClick={() => this.showModal()}
+                />
+              </Header>
+              <br />
+            </Grid.Row>
+            {this.state.open ? (
+              <ModalCreateEvenement
+                handleChange={this.handleChange}
+                date={this.state.date}
+                heure={this.state.heure}
+                details={this.state.details}
+                optionIncidents={this.state.optionIncidents}
+                open={this.state.open}
+                setOpen={this.setOpen}
+                type_incident={this.state.type_incident}
+                isOk={this.isOk}
+              />
+            ) : (
+              ""
+            )}
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    );
+  }
+}

src/pages/LoginPage.tsx

@@ -0,0 +1,75 @@
+import axios from 'axios';
+import React, { Component } from 'react'
+import { Redirect } from 'react-router';
+import { Grid, Form, Button } from 'semantic-ui-react'
+
+export default class LoginPage extends Component<any,any> {
+    constructor(props:any){
+        super(props);
+        this.state = {
+            email:'',
+            password:'',
+            redirect:false,
+            isLoading:false,
+            data:''
+        };
+    }
+
+    setResponse = (data:any)=>{
+       localStorage.setItem('_token',data);
+       this.setState({redirect:true});
+    }
+
+    handleChange = (e:any, data: any) => {
+       this.setState({[data.name]:data.value})
+    }
+
+    sendDate = ()=>{
+        axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
+
+        axios.post('http://localhost:8000/login',this.state).then(response => {
+               this.setResponse(response.data);
+        }).catch(error => {
+             console.log(error);
+        });
+
+        this.setState({isLoading:false});
+    }
+
+    render() {
+        const {email, password, redirect} = this.state;
+        if (redirect) {
+            return <Redirect to='/home'/>;
+        }
+        return (
+            <Grid centered>
+                <Grid.Column width={8}>
+                    <Form onSubmit={this.sendDate}>
+                        <h2>Se Connecter</h2>
+                            <Form.Input
+                                fluid
+                                id='form-subcomponent-shorthand-input-prenom'
+                                label='Email'
+                                name="email"
+                                type="email"
+                                placeholder='Email'
+                                value={email}
+                                onChange={this.handleChange}
+                                />
+                            <Form.Input
+                                fluid
+                                id='form-subcomponent-shorthand-input-nom'
+                                label='Mot de Passe'
+                                name="password"
+                                type="password"
+                                placeholder='Mot de Passe'
+                                value={password}
+                                onChange={this.handleChange}
+                                />
+                        <Button type='submit' loading={this.state.isLoading} onClick={()=> this.setState({isLoading:!this.state.isLoading})} color="blue">Se Connecter</Button>
+                        </Form>
+                </Grid.Column>
+            </Grid>
+        )
+    }
+}