Add delete dataset option #7

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 (
+      <Modal
+        title={`Remove dataset "${name}"`}
+        small
+        onClose={this.props.onClose}
+        indestructible={this.props.loading}
+      >
+        <div className="c-delete-modal">
+          <p>Are you sure you want to remove this dataset?</p>
+          <div className="c-delete-modal__controls">
+            <Btn
+              disabled={this.props.loading}
+              color="negative"
+              onClick={this.props.onClose}
+            >
+              Cancel
+            </Btn>
+            <Btn
+              loading={this.props.loading}
+              color="positive"
+              onClick={this.props.onPositive}
+            >
+              Yes, remove.
+            </Btn>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+}
+export default withRouter(DeleteModal);

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

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 {
         </div>
         <div className="c-header__right">
           {this.state.showSettingsModal && (
-            <RepoSelection indestructible onClose={this.toggleSettingsModal} />
+            <RepoSelection onClose={this.toggleSettingsModal} />
           )}
           <Btn
             className="v--bg-white"

src/components/Suitable/index.js

@@ -22,19 +22,24 @@ export default class Suitable extends Component {
     return (
       <div className={`c-suitable ${this.props.className}`}>
         <div className="c-suitable__header">
-          {this.props.areas.map((item) => {
-            const key = item.key.split(":")[0].trim();
-            return (
-              <Btn
-                color={item.color}
-                onClick={() => this.showTab(key)}
-                key={key}
-                active={key === this.state.visible}
-              >
-                {item.key}
-              </Btn>
-            );
-          })}
+          <div className="c-suitable__header-controls">
+            {this.props.areas.map((item) => {
+              const key = item.key.split(":")[0].trim();
+              return (
+                <Btn
+                  color={item.color}
+                  onClick={() => this.showTab(key)}
+                  key={key}
+                  active={key === this.state.visible}
+                >
+                  {item.key}
+                </Btn>
+              );
+            })}
+          </div>
+          <div className="c-suitable__header-right-side">
+            {this.props["right-side-of-header"]}
+          </div>
         </div>
         <div className="c-suitable__body">
           <SuitableContent

src/components/Suitable/style.sass

@@ -5,5 +5,8 @@
   max-width: 100%
   &__header
     display: flex
-    gap: 4px
-    flex-wrap: wrap
+    justify-content: space-between
+    &-controls
+      display: flex
+      gap: 4px
+      flex-wrap: wrap

src/pages/home/index.js

@@ -3,9 +3,12 @@ import QuestionMapper from "../../components/QuestionMapper";
 import RawData from "../../components/RawData";
 import Suitable from "../../components/Suitable";
 import { Context } from "../../store";
-import Loading from "../../assets/loading.gif";
+import { ReactComponent as Trash } from "../../assets/trash.svg";
 import Save from "../../components/Save";
-
+import Btn from "../../components/Btn";
+import DeleteModal from "../../components/DeleteModal";
+import toast, { Toaster } from "react-hot-toast";
+import axios from "axios";
 export default class Home extends Component {
   static contextType = Context;
 
@@ -14,8 +17,65 @@ export default class Home extends Component {
 
     this.state = {
       items: [],
+      deleteCurrent: false,
+      loading: false,
     };
   }
+  openDeleteModal = () => {
+    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 = (
+        <Btn color="negative" onClick={this.openDeleteModal}>
+          <Trash />
+        </Btn>
+      );
+
       return (
         <>
-          <Suitable areas={areas} no-re-click></Suitable>
+          {this.state.deleteCurrent && (
+            <DeleteModal
+              loading={this.state.loading}
+              onClose={this.closeDeleteModal}
+              onPositive={this.removeDataset}
+            />
+          )}
+          <Suitable
+            areas={areas}
+            no-re-click
+            right-side-of-header={rightSideOfHeader}
+          ></Suitable>
           <Save />
+          <Toaster
+            position="bottom-center"
+            toastOptions={{
+              error: {
+                style: {
+                  background: "#e2aaaa",
+                  fontWeight: 500,
+                },
+              },
+            }}
+          />
         </>
       );
     }