From 63c5c34f0382859bbb8d725aa776c29d6fbe62ae Mon Sep 17 00:00:00 2001
From: frikky <fredrik_9490@hotmail.com>
Date: Thu, 30 Dec 2021 16:46:38 +0100
Subject: [PATCH] #631: Added delete button to file UI

---
 backend/go-app/go.mod             |   4 +-
 docker-compose.yml                |   2 +-
 frontend/src/views/Admin.jsx      | 155 ++++++++++++++++++++----------
 frontend/src/views/AppCreator.jsx |   3 +
 4 files changed, 108 insertions(+), 56 deletions(-)

diff --git a/backend/go-app/go.mod b/backend/go-app/go.mod
index 9cd9863a..0099d571 100644
--- a/backend/go-app/go.mod
+++ b/backend/go-app/go.mod
@@ -2,7 +2,7 @@ module main
 
 go 1.15
 
-replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared
+//replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared
 
 //replace github.com/frikky/kin-openapi => ../../../../git/kin-openapi
 //replace github.com/frikky/go-elasticsearch => ../../../../git/go-elasticsearch
@@ -22,7 +22,7 @@ require (
 	github.com/gorilla/mux v1.8.0
 	github.com/h2non/filetype v1.1.1
 	github.com/satori/go.uuid v1.2.0
-	github.com/shuffle/shuffle-shared v0.1.60
+	github.com/shuffle/shuffle-shared v0.1.61
 	github.com/skip2/go-qrcode v0.0.0-20200617195104-da1b6568686e // indirect
 	go4.org v0.0.0-20201209231011-d4a079459e60 // indirect
 	golang.org/x/crypto v0.0.0-20210921155107-089bfa567519
diff --git a/docker-compose.yml b/docker-compose.yml
index 3808caa8..0ec19fe0 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3'
 services:
   frontend:
-    #build: ./frontend
+    build: ./frontend
     image: ghcr.io/frikky/shuffle-frontend:nightly
     container_name: shuffle-frontend
     hostname: shuffle-frontend
diff --git a/frontend/src/views/Admin.jsx b/frontend/src/views/Admin.jsx
index 098fd3d5..c5ecc336 100644
--- a/frontend/src/views/Admin.jsx
+++ b/frontend/src/views/Admin.jsx
@@ -1094,6 +1094,41 @@ const Admin = (props) => {
       });
   };
 
+  const deleteFile = (file) => {
+    fetch(globalUrl + "/api/v1/files/" + file.id, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for file delete :O!");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+				if (responseJson.success) {
+					alert.info("Successfully deleted file "+file.name)
+					
+				} else if (responseJson.reason !== undefined && responseJson.reason !== null) {
+					alert.error("Failed to delete file: " + responseJson.reason)
+
+				}
+				setTimeout(() => {
+					getFiles();
+				}, 1500);
+
+        console.log(responseJson)
+      })
+      .catch((error) => {
+        alert.error(error.toString());
+      });
+  };
+
   const downloadFile = (file) => {
     fetch(globalUrl + "/api/v1/files/" + file.id + "/content", {
       method: "GET",
@@ -3118,7 +3153,6 @@ const Admin = (props) => {
                 style={{ minWidth: 125, maxWidth: 125 }}
               />
               <ListItemText primary="Actions" />
-              <ListItemText primary="File ID" />
             </ListItem>
             {files === undefined || files === null || files.length === 0
               ? null
@@ -3235,11 +3269,13 @@ const Admin = (props) => {
                         }}
                       />
                       <ListItemText
-                        primary=<Tooltip
-                          title={"Download file"}
-                          style={{}}
-                          aria-label={"Download"}
-                        >
+                        primary=
+												<span style={{display: "flex"}}>
+													<Tooltip
+														title={"Download file"}
+														style={{}}
+														aria-label={"Download"}
+													>
                           <span>
                             <IconButton
                               disabled={file.status !== "active"}
@@ -3256,56 +3292,69 @@ const Admin = (props) => {
                             </IconButton>
                           </span>
                         </Tooltip>
+												<Tooltip
+                          title={"Delete file"}
+                          style={{}}
+                          aria-label={"Delete"}
+                        >
+                          <span>
+                            <IconButton
+                              disabled={file.status !== "active"}
+                              onClick={() => {
+                                deleteFile(file);
+                              }}
+                            >
+                              <DeleteIcon
+                                style={{
+                                  color:
+                                    file.status === "active" ? "white" : "grey",
+                                }}
+                              />
+                            </IconButton>
+                          </span>
+                        </Tooltip>
+												<Tooltip
+                          title={"Copy file ID"}
+                          style={{}}
+                          aria-label={"copy"}
+                        >
+													<IconButton
+														onClick={() => {
+															const elementName = "copy_element_shuffle";
+															var copyText = document.getElementById(elementName);
+															if (copyText !== null && copyText !== undefined) {
+																const clipboard = navigator.clipboard;
+																if (clipboard === undefined) {
+																	alert.error(
+																		"Can only copy over HTTPS (port 3443)"
+																	);
+																	return;
+																}
+
+																navigator.clipboard.writeText(file.id);
+																copyText.select();
+																copyText.setSelectionRange(
+																	0,
+																	99999
+																); /* For mobile devices */
+
+																/* Copy the text inside the text field */
+																document.execCommand("copy");
+
+																alert.info(file.id + " copied to clipboard");
+															}
+														}}
+													>
+														<FileCopyIcon style={{ color: "white" }} />
+													</IconButton>
+												</Tooltip>
+												</span>
                         style={{
-                          minWidth: 75,
-                          maxWidth: 75,
+                          minWidth: 150,
+                          maxWidth: 150,
                           overflow: "hidden",
                         }}
                       />
-                      {/*
-							<ListItemText>
-								<Button 
-									style={{}} 
-									variant="contained"
-									color="primary"
-									disabled
-									onClick={() => deleteSchedule(file)}
-								>
-									Stop schedule	
-								</Button>
-							</ListItemText>
-							*/}
-                      <ListItemText
-                        primary=<IconButton
-                          onClick={() => {
-                            const elementName = "copy_element_shuffle";
-                            var copyText = document.getElementById(elementName);
-                            if (copyText !== null && copyText !== undefined) {
-                              const clipboard = navigator.clipboard;
-                              if (clipboard === undefined) {
-                                alert.error(
-                                  "Can only copy over HTTPS (port 3443)"
-                                );
-                                return;
-                              }
-
-                              navigator.clipboard.writeText(file.id);
-                              copyText.select();
-                              copyText.setSelectionRange(
-                                0,
-                                99999
-                              ); /* For mobile devices */
-
-                              /* Copy the text inside the text field */
-                              document.execCommand("copy");
-
-                              alert.info(file.id + " copied to clipboard");
-                            }
-                          }}
-                        >
-                          <FileCopyIcon style={{ color: "white" }} />
-                        </IconButton>
-                      />
                     </ListItem>
                   );
                 })}
@@ -4095,7 +4144,7 @@ const Admin = (props) => {
         <Tabs
           value={curTab}
           indicatorColor="primary"
-					textColor="primary"
+					textColor="secondary"
           onChange={setConfig}
           aria-label="disabled tabs example"
         >
diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx
index 1ac122b8..9f5e3c1c 100644
--- a/frontend/src/views/AppCreator.jsx
+++ b/frontend/src/views/AppCreator.jsx
@@ -3501,6 +3501,9 @@ const AppCreator = (props) => {
 								}
 							}
 
+							// Found that dashes in the URL doesn't work
+							parsedurl = parsedurl.replace("-", "_")
+
               if (event.target.value !== parsedurl) {
                 setUrlPath(parsedurl);
                 setActionField("url", parsedurl);