Added the delete feature

package.json

@@ -14,9 +14,9 @@
     "react": "^16.13.1",
     "react-ace": "^9.1.4",
     "react-dom": "^16.13.1",
-    "react-iframe": "^1.8.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "sweetalert2": "^10.5.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -37,4 +37,24 @@
 
 #htmlEditor {
   display: block;
+}
+
+.swal2-popup{
+  background-color: #2E3440 !important;
+}
+.swal2-title {
+  color: #A3F7BF !important;
+  font-family: 'Comfortaa', sans-serif;
+}
+.swal2-html-container{
+  color: #fff !important;
+  font-family: 'Comfortaa', sans-serif;
+}
+.swal2-styled.swal2-confirm {
+  background-color: #A3F7BF !important;color: #2E3440 !important;
+  font-family: 'Comfortaa', sans-serif;
+}
+.swal2-styled.swal2-cancel{
+  background-color: #FF6D6D !important;color: #fff !important;
+  font-family: 'Comfortaa', sans-serif;
 }

src/pages/projectspage.jsx

@@ -3,6 +3,9 @@ import { Link, useHistory } from 'react-router-dom';
 
 import firebase from '../components/firebase';
 
+import Swal from 'sweetalert2';
+// import 'sweetalert2/src/sweetalert2.scss';
+
 import { makeStyles } from '@material-ui/core/styles';
 import Fab from '@material-ui/core/Fab';
 import IconButton from '@material-ui/core/IconButton';
@@ -177,17 +180,51 @@ function Projectspage() {
                 setDisplayName(firebaseUser.displayName);
                 myUID.current = firebaseUser.uid;
                 firebaseRef.current = firebase.database().ref("WebDev/" + firebaseUser.uid)
-                firebaseRef.current.on("child_added", snap => {
-                    const key = snap.key;
-                    const project = { ...snap.val(), key: key };
-                    setProjects(prevProjects => [...prevProjects, project]);
-                })
-                startBackdrop(false);
+                loadProjects();
             }
             else history.push("/auth");
         });
     }, []);
 
+    function loadProjects() {
+        firebaseRef.current.once("value").then(snap => {
+            startBackdrop(false);
+            // const key = snap.key;
+            // const project = { ...snap.val(), key: key };
+            // setProjects(prevProjects => [...prevProjects, project]);
+            console.log(snap.val())
+            let tempProjects = [];
+            for (let i in snap.val()) {
+                const key = i;
+                const project = { ...snap.val()[i], key: key };
+                tempProjects.push(project);
+            }
+            setProjects(tempProjects);
+
+        })
+    }
+
+    function deleteProject(projectToBeDeleted) {
+        Swal.fire({
+            title: 'Are you sure?',
+            text: "You won't be able to revert this!",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Yes, delete it!'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                firebaseRef.current.child(projectToBeDeleted).remove(); loadProjects();
+                Swal.fire(
+                    'Deleted!',
+                    'Your file has been deleted.',
+                    'success'
+                )
+            }
+        })
+    }
+
     return (
         <div>
             <Backdrop className={classes.backdrop} open={open} style={{ zIndex: 5 }}>
@@ -226,7 +263,7 @@ function Projectspage() {
                             <CardActions>
                                 <Button className={classes.openBtn} startIcon={<LaunchIcon />} size="small" onClick={() => { startBackdrop(true); history.push("/edit/" + myUID.current + "/" + project.key + "/") }}>Open</Button>
                                 <Button className={classes.openBtn} startIcon={<LanguageIcon />} size="small" onClick={() => { startBackdrop(true); history.push("/deploy/" + myUID.current + "/" + project.key + "/") }}>Visit</Button>
-                                <Button className={classes.deleteBtn} startIcon={<DeleteIcon />} size="small" onClick={() => { firebaseRef.current.child(project.key).remove(); }}>Delete</Button>
+                                <Button className={classes.deleteBtn} startIcon={<DeleteIcon />} size="small" onClick={() => { deleteProject(project.key) }}>Delete</Button>
                             </CardActions>
                         </Card>
                     ))}

yarn.lock

@@ -9447,13 +9447,6 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-iframe@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/react-iframe/-/react-iframe-1.8.0.tgz#8c78f2c59b894ca5605fa7e45e61e27e57e96091"
-  integrity sha512-NYi89+rEqREwQxW9sDf+akh6/dtwWd3bOjByoVEIQ7SicOxVawRMer3pLdWjFaHXpuxTB9NqobPf/Ohj2iAKkg==
-  dependencies:
-    object-assign "^4.1.1"
-
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10766,6 +10759,11 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+sweetalert2@^10.5.1:
+  version "10.5.1"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-10.5.1.tgz#277c20f4977c7524168e13fed579e5c21d18e1dd"
+  integrity sha512-WU2rcWJldFKSxLmO+nBRVZfK5+/XHonQXLYbjiY/r+OFpGkpiHpaqg7hysVGQ+paAWk2BZK+QKiUYL3RK7dnMw==
+
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"