From f7eeb15301bfe035aac488c71889d75b3df2fef5 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sun, 28 Jun 2020 11:03:42 -0500
Subject: [PATCH] feat: close resource

---
 src/client/index.scss    |  2 ++
 src/client/resources.jsx | 16 ++++++++++++++--
 src/client/state.js      | 15 +++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/client/index.scss b/src/client/index.scss
index c2ae35d..e3e9715 100644
--- a/src/client/index.scss
+++ b/src/client/index.scss
@@ -200,6 +200,8 @@ select {
     padding: 0.75em;
   }
   .close {
+    background-color: transparent;
+    border: none;
     color: #999999;
     padding: 0.25em;
     visibility: hidden;
diff --git a/src/client/resources.jsx b/src/client/resources.jsx
index 50dfb91..fd63831 100644
--- a/src/client/resources.jsx
+++ b/src/client/resources.jsx
@@ -11,7 +11,10 @@ import {
 } from 'react-tabs';
 
 import Resource from './resource';
-import {setActiveResourceUri} from './state';
+import {
+  closeResource,
+  setActiveResourceUri,
+} from './state';
 
 const decorate = compose(
   contempo(require('./resources.raw.scss')),
@@ -32,7 +35,16 @@ const Resources = (props) => {
               <span className="wrapper">
                 <span className="icon" />
                 <span className="text">{uri}</span>
-                <span className="close">✕</span>
+                <button
+                  className="close"
+                  onClick={(event) => {
+                    dispatch(closeResource(uri));
+                    event.stopPropagation();
+                  }}
+                  type="button"
+                >
+                  ✕
+                </button>
               </span>
             </Tab>
           ))}
diff --git a/src/client/state.js b/src/client/state.js
index cca33e9..f6867ff 100644
--- a/src/client/state.js
+++ b/src/client/state.js
@@ -35,6 +35,20 @@ const slice = createSlice({
     resourceUris: [],
   },
   reducers: {
+    closeResource: (state, {payload: uri}) => {
+      const index = state.resourceUris.indexOf(uri);
+      if (-1 !== index) {
+        state.resourceUris.splice(index, 1);
+        if (state.resourceUris.length > 0) {
+          state.activeResourceUri = state.resourceUris[
+            Math.min(state.resourceUris.length - 1, index)
+          ];
+        }
+        else {
+          state.activeResourceUri = '';
+        }
+      }
+    },
     setActiveResourceUri: (state, {payload: uri}) => {
       state.activeResourceUri = uri;
       if (-1 === state.resourceUris.indexOf(uri)) {
@@ -51,6 +65,7 @@ const slice = createSlice({
 });
 
 export const {
+  closeResource,
   setActiveResourceUri,
   setActiveSidebarIndex,
   setIsSidebarExpanded,