Delete Target

Author: cht42

.pre-commit-config.yaml

@@ -18,7 +18,7 @@ repos:
         types: [python]
       - id: black
         name: black
-        entry: black backend
+        entry: black backend/app
         language: python
         types: [python]
       - id: pylint

backend/app/router/targets.py

@@ -21,7 +21,7 @@ def create_target(
 @router.get(
     "/targets",
     response_model=tp.List[schemas.Target],
-    response_model_include=["id", "first_name", "last_name"],
+    response_model_include={"id", "first_name", "last_name"},
 )
 def read_targets(db: Session = Depends(get_db)) -> tp.List[schemas.Target]:
     """Get all targets."""

frontend/app/src/App.tsx

@@ -1,17 +1,27 @@
 import React, { FC } from "react";
-import { Navbar } from "react-bootstrap";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
-import { Home, TargetInfo, TargetSearch } from "./components/public";
+import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
+
+import {
+  Home,
+  TargetInfo,
+  TargetSearch,
+  NavigationBar,
+  TargetCreate,
+} from "./components/public";
 
 export const App: FC = () => {
   return (
     <>
       <BrowserRouter basename="/">
+        <NavigationBar />
         <Switch>
-          <Navbar></Navbar>
           <Route exact path="/" component={Home} />
           <Route exact path="/targets" component={TargetSearch} />
+          <Route exact path="/targets/create" component={TargetCreate} />
           <Route path="/targets/:id" component={TargetInfo} />
+          <Route>
+            <Redirect to="/" />
+          </Route>
         </Switch>
       </BrowserRouter>
     </>

frontend/app/src/components/public/TargetInfo.tsx

@@ -1,26 +1,39 @@
 import React, { FC, useEffect, useState } from "react";
-import { useParams } from "react-router";
-import { Row, Col, Container, ListGroup } from "react-bootstrap";
+import { useHistory, useParams } from "react-router";
+import {
+  Row,
+  Col,
+  Container,
+  ListGroup,
+  DropdownButton,
+  Dropdown,
+  Jumbotron,
+} from "react-bootstrap";
 
 import { Target } from ".";
 
-const loadTarget = async (id: string) => {
-  return fetch("/api/targets/" + id, {
-    method: "GET",
-  });
-};
-
 export const TargetInfo: FC = () => {
   const { id }: { id: string } = useParams();
   const [target, setTarget] = useState<Target | null>(null);
+  const history = useHistory();
 
   useEffect(() => {
-    loadTarget(id)
+    fetch("/api/targets/" + id, {
+      method: "GET",
+    })
       .then((res) => res.json())
       .then((data) => setTarget(data))
       .catch(console.error);
   }, [id]);
 
+  const deleteTarget = (e: React.MouseEvent) => {
+    if (window.confirm("Are you sure you want to delete this target ?")) {
+      fetch("/api/targets/" + id, { method: "DELETE" })
+        .then(() => history.push("/"))
+        .catch(console.error);
+    }
+  };
+
   const listPaths = target && (
     <ListGroup>
       {target.pictures.map((picture) => (
@@ -42,9 +55,22 @@ export const TargetInfo: FC = () => {
 
   return (
     <Container>
+      <Row>
+        <Col style={{ textAlign: "center" }}>
+          <Jumbotron>
+            <h1>Target File</h1>
+            <br />
+            <DropdownButton title="Options">
+              <Dropdown.Item onClick={deleteTarget}>
+                Delete Target
+              </Dropdown.Item>
+            </DropdownButton>
+          </Jumbotron>
+        </Col>
+      </Row>
       <Row>
         <Col xs={6}>
-          <h1>Target Atrtibutes</h1>
+          <h1>Target Attributes</h1>
           {listAttributes}
         </Col>
         <Col xs={6}>

frontend/app/src/components/public/index.ts

@@ -1,6 +1,8 @@
 export * from "./Home";
 export * from "./TargetInfo";
 export * from "./TargetSearch";
+export * from "./TargetCreate";
+export * from "./NavigationBar";
 
 export interface Picture {
   id: number;