From 0c1151ce3e22e9e41248bfc1a17a0c9dd91a5773 Mon Sep 17 00:00:00 2001 From: JP Rodrigues <70jprodrigues@gmail.com> Date: Wed, 26 May 2021 02:03:23 -0300 Subject: [PATCH] Add delete dataset option #7 --- src/assets/trash.svg | 7 ++ src/components/DeleteModal/index.js | 44 +++++++++++++ src/components/DeleteModal/style.sass | 16 +++++ src/components/Header/index.js | 3 +- src/components/Suitable/index.js | 31 +++++---- src/components/Suitable/style.sass | 7 +- src/pages/home/index.js | 94 ++++++++++++++++++++++++++- 7 files changed, 182 insertions(+), 20 deletions(-) create mode 100644 src/assets/trash.svg create mode 100644 src/components/DeleteModal/index.js create mode 100644 src/components/DeleteModal/style.sass diff --git a/src/assets/trash.svg b/src/assets/trash.svg new file mode 100644 index 0000000..4676599 --- /dev/null +++ b/src/assets/trash.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/src/components/DeleteModal/index.js b/src/components/DeleteModal/index.js new file mode 100644 index 0000000..318a2d2 --- /dev/null +++ b/src/components/DeleteModal/index.js @@ -0,0 +1,44 @@ +import { Component } from "react"; +import { withRouter } from "react-router-dom"; +import Modal from "../Modal"; +import "./style.sass"; +import { Context } from "../../store"; + +import Btn from "../Btn"; + +class DeleteModal extends Component { + static contextType = Context; + + render() { + const name = localStorage.getItem("name"); + return ( + +
+

Are you sure you want to remove this dataset?

+
+ + Cancel + + + Yes, remove. + +
+
+ + ); + } +} +export default withRouter(DeleteModal); diff --git a/src/components/DeleteModal/style.sass b/src/components/DeleteModal/style.sass new file mode 100644 index 0000000..f33322c --- /dev/null +++ b/src/components/DeleteModal/style.sass @@ -0,0 +1,16 @@ +.c-delete-modal + display: grid + grid-gap: 16px + &__radio + display: inline-flex + align-items: center + gap: 8px + cursor: pointer + max-width: min-content + &:hover + font-weight: 500 + &__controls + display: flex + align-items: flex-end + justify-content: flex-end + gap: 8px diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 357ff41..c638c73 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -58,7 +58,6 @@ class Header extends Component { }; toggleSettingsModal = () => { - console.log("EOA"); this.setState({ showSettingsModal: !this.state.showSettingsModal, }); @@ -92,7 +91,7 @@ class Header extends Component {
{this.state.showSettingsModal && ( - + )}
- {this.props.areas.map((item) => { - const key = item.key.split(":")[0].trim(); - return ( - this.showTab(key)} - key={key} - active={key === this.state.visible} - > - {item.key} - - ); - })} +
+ {this.props.areas.map((item) => { + const key = item.key.split(":")[0].trim(); + return ( + this.showTab(key)} + key={key} + active={key === this.state.visible} + > + {item.key} + + ); + })} +
+
+ {this.props["right-side-of-header"]} +
{ + this.setState({ deleteCurrent: true }); + }; + + closeDeleteModal = () => { + this.setState({ deleteCurrent: false }); + }; + + getHeaders = () => { + let token = localStorage.getItem("token"); + return { + Authorization: `token ${token}`, + accept: "application/vnd.github.v3+json", + "Content-Type": "application/json", + }; + }; + + removeDataset = () => { + this.setState({ loading: true }); + const repo = localStorage.getItem("repo"); + const name = localStorage.getItem("name"); + const current = localStorage.getItem("current"); + const user = JSON.parse(localStorage.getItem("user")); + + axios + .delete( + `https://api.github.com/repos/${repo}/contents/database/${name}.json`, + { + headers: this.getHeaders(), + data: { + message: `Delete ${name}`, + sha: current, + committer: { + name: user.name, + email: user.email, + }, + }, + } + ) + .then((res) => { + this.notify("success", "Removed! Page will reload"); + localStorage.removeItem("database"); + localStorage.removeItem("current"); + localStorage.removeItem("name"); + this.setState({ loading: false }); + window.location.reload(); + }) + .finally(() => { + this.notify("error", "Error! Please, reload."); + this.setState({ loading: false }); + this.props.onLoadChange && this.props.onLoadChange(false); + }); + }; + + notify = (type, msg) => toast[type](msg); render() { const repo = localStorage.getItem("repo"); @@ -32,10 +92,38 @@ export default class Home extends Component { }, ]; + const rightSideOfHeader = ( + + + + ); + return ( <> - + {this.state.deleteCurrent && ( + + )} + + ); }