From 19aee35d5134d482efb035cfbc3f2102fdbb6f16 Mon Sep 17 00:00:00 2001 From: Jaagrav Date: Thu, 15 Oct 2020 16:11:57 +0530 Subject: [PATCH] Added the delete feature --- package.json | 4 +-- src/App.css | 20 +++++++++++++++ src/pages/projectspage.jsx | 51 ++++++++++++++++++++++++++++++++------ yarn.lock | 12 ++++----- 4 files changed, 71 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index c8b93d5..4ab33f1 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css index 79d2c27..7235b23 100644 --- a/src/App.css +++ b/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; } \ No newline at end of file diff --git a/src/pages/projectspage.jsx b/src/pages/projectspage.jsx index d3b32b9..b2dcf1d 100644 --- a/src/pages/projectspage.jsx +++ b/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 (
@@ -226,7 +263,7 @@ function Projectspage() { - + ))} diff --git a/yarn.lock b/yarn.lock index 89b9d70..ddda5d9 100644 --- a/yarn.lock +++ b/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"