Add client deletion

client/src/pages/ClientsListPage.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Table, Button } from "antd";
+import { Table, Button, Space } from "antd";
 import { Link, useHistory } from "react-router-dom";
 import { UserAddOutlined } from "@ant-design/icons";
 import ClientService from "../service/ClientService";
@@ -7,10 +7,22 @@ import ClientService from "../service/ClientService";
 export default function ClientsPage() {
   const history = useHistory();
   const [clients, setClients] = useState([]);
+  const [selectedClients, setSelectedClients] = useState([]);
+  const [actionsVisible, setActionsVisible] = useState(false);
+
   useEffect(() => {
     ClientService.getClients().then(setClients);
   }, []);
 
+  const onSelectChange = (selectedRowKeys) => {
+    setSelectedClients(selectedRowKeys);
+    if (selectedRowKeys.length >= 1) {
+      setActionsVisible(true);
+    } else {
+      setActionsVisible(false);
+    }
+  };
+
   const columns = [
     {
       title: "Name",
@@ -28,17 +40,31 @@ export default function ClientsPage() {
 
   return (
     <div>
-      <Button
-        onClick={() => history.push("/clients/new")}
-        type="primary"
-        icon={<UserAddOutlined />}
-        style={{ marginBottom: 16 }}
-      >
-        Add
-      </Button>
+      <Space direction="horizontal" style={{ marginBottom: 16 }}>
+        <Button
+          onClick={() => history.push("/clients/new")}
+          type="primary"
+          icon={<UserAddOutlined />}
+        >
+          Add
+        </Button>
+        <Button
+          type="primary"
+          danger
+          disabled={!actionsVisible}
+          onClick={() => {
+            ClientService.deleteMany(selectedClients).then(() =>
+              window.location.reload()
+            );
+          }}
+        >
+          Delete
+        </Button>
+      </Space>
       <Table
         rowSelection={{
           type: "checkbox",
+          onChange: onSelectChange,
         }}
         columns={columns}
         dataSource={clients.map((client) => {

client/src/service/ClientService.ts

@@ -49,4 +49,13 @@ export default {
       value: status,
     });
   },
+
+  deleteMany(ids: String[]): Promise<any> {
+    console.log("To delete:", ids);
+    return axios({
+      method: "delete",
+      url: basepath + "/clients",
+      data: ids,
+    });
+  },
 };

server/routes/clients.js

@@ -93,8 +93,11 @@ router.post("/:id/events", async (req, res) => {
  * Body should contain array of id strings
  */
 router.delete("/", async (req, res) => {
+  console.debug(req);
   if (!(req.body instanceof Array)) {
-    return res.status(400).send("Body must contain array of indices");
+    return res
+      .status(400)
+      .send("Body must contain array of indices but got: " + req.body);
   }
   res.send(await Client.remove({ _id: req.body }));
 });