From 36d77a21d0a7fc18ae717b2fe99aff1170b11cbd Mon Sep 17 00:00:00 2001
From: Pavel Strunkin <pashidlos@gmail.com>
Date: Sat, 18 Jul 2020 20:09:32 +0200
Subject: [PATCH] test variation delete added

---
 src/components/TestVariationList.tsx  | 15 ++++++++++++++-
 src/pages/TestVariationListPage.tsx   | 11 ++++++++++-
 src/services/testVariation.service.ts | 14 +++++++++++++-
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/TestVariationList.tsx b/src/components/TestVariationList.tsx
index 86d1b334..91647846 100644
--- a/src/components/TestVariationList.tsx
+++ b/src/components/TestVariationList.tsx
@@ -8,14 +8,17 @@ import {
   makeStyles,
   CardActions,
   Button,
+  IconButton,
 } from "@material-ui/core";
 import { staticService } from "../services";
 import { Link } from "react-router-dom";
 import { routes } from "../constants";
 import { TestVariationDetails } from "./TestVariationDetails";
+import { Delete } from "@material-ui/icons";
 
 interface IProps {
   items: TestVariation[];
+  onDeleteClick: (id: string) => void;
 }
 
 const useStyles = makeStyles({
@@ -28,7 +31,10 @@ const useStyles = makeStyles({
   },
 });
 
-const TestVariationList: React.FunctionComponent<IProps> = ({ items }) => {
+const TestVariationList: React.FunctionComponent<IProps> = ({
+  items,
+  onDeleteClick,
+}) => {
   const classes = useStyles();
 
   return (
@@ -52,6 +58,13 @@ const TestVariationList: React.FunctionComponent<IProps> = ({ items }) => {
               >
                 History
               </Button>
+              <IconButton
+                onClick={(event: React.MouseEvent<HTMLElement>) =>
+                  onDeleteClick(t.id)
+                }
+              >
+                <Delete />
+              </IconButton>
             </CardActions>
           </Card>
         </Grid>
diff --git a/src/pages/TestVariationListPage.tsx b/src/pages/TestVariationListPage.tsx
index 1f068ce9..8f617f4a 100644
--- a/src/pages/TestVariationListPage.tsx
+++ b/src/pages/TestVariationListPage.tsx
@@ -45,6 +45,12 @@ const TestVariationListPage: React.FunctionComponent = () => {
     );
   }, [query, branchName, os, device, browser, viewport, testVariations]);
 
+  const handleDelete = (id: string) => {
+    testVariationService.remove(id).then((item) => {
+      setTestVariations(testVariations.filter((i) => i.id !== item.id));
+    });
+  };
+
   return (
     <React.Fragment>
       <Container>
@@ -74,7 +80,10 @@ const TestVariationListPage: React.FunctionComponent = () => {
               />
             </Grid>
             <Grid item>
-              <TestVariationList items={filteredItems} />
+              <TestVariationList
+                items={filteredItems}
+                onDeleteClick={handleDelete}
+              />
             </Grid>
           </Grid>
         </Box>
diff --git a/src/services/testVariation.service.ts b/src/services/testVariation.service.ts
index 1b66d167..d405a5c3 100644
--- a/src/services/testVariation.service.ts
+++ b/src/services/testVariation.service.ts
@@ -11,6 +11,7 @@ export const testVariationService = {
   setIgnoreAreas,
   setComment,
   merge,
+  remove,
 };
 
 function getList(projectId: String): Promise<TestVariation[]> {
@@ -74,4 +75,15 @@ function merge(projectId: String, branchName: String): Promise<Build> {
     `${API_URL}${ENDPOINT_URL}/merge?projectId=${projectId}&branchName=${branchName}`,
     requestOptions
   ).then(handleResponse);
-}
\ No newline at end of file
+}
+
+function remove(id: String): Promise<TestVariation> {
+  const requestOptions = {
+    method: "DELETE",
+    headers: authHeader(),
+  };
+
+  return fetch(`${API_URL}${ENDPOINT_URL}/${id}`, requestOptions).then(
+    handleResponse
+  );
+}