feat: workspaces crud (resolves #15)

renderer/components/Workspaces/WorkspaceConfigurer/index.js

@@ -1,36 +1,28 @@
 import Modal from "components/Modal/index";
-import React from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
+import WorkspaceItem from "./WorkspaceItem/index";
+import AddModal from "./AddModal";
 
 const WorkspaceConfigurer = ({onClose}) => {
   const { workspaces } = useSelector((state) => state.workspaces);
-
-  const onSubmit  = () => {
-    onClose();
-  }
+  const [openAddModal, setOpenAddModal] = useState(false);
 
   return (
     <Modal
       size="md"
       title="Workspaces"
-      confirmText="Create"
-      handleConfirm={onSubmit}
+      confirmText={"+ New Workspace"}
+      handleConfirm={() => setOpenAddModal(true)}
       handleCancel={onClose}
+      hideCancel={true}
     >
-      <ul className="mb-2">
-      {workspaces && workspaces.length && workspaces.map((workspace) => (
-        <div className="flex justify-between items-baseline w-4/5 mb-2">
-          <li key={workspace.uid}>{workspace.name}</li>
-          <button
-            style={{backgroundColor: "var(--color-brand)"}}
-            className="flex items-center h-full text-white active:bg-blue-600 font-bold text-xs px-4 py-2 ml-2 uppercase rounded shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
-            onClick={() => console.log("delete")}
-          >
-            <span style={{marginLeft: 5}}>Delete</span>
-          </button>
-        </div>
-      ))}
+      <ul className="mb-2" >
+        {workspaces && workspaces.length && workspaces.map((workspace) => (
+          <WorkspaceItem workspace={workspace} />
+        ))}
       </ul>
+      {openAddModal && <AddModal onClose={() => setOpenAddModal(false)}/>}
     </Modal>
   )