feat: tabs!

packages/core/src/components/persea/resource/index.jsx

@@ -1,3 +1,9 @@
+import {
+  Tab,
+  Tabs,
+  TabList,
+  TabPanel,
+} from '@avocado/react';
 import {Resource as ResourceComponent} from '@avocado/resource-persea';
 import {classnames, PropTypes, React} from '@flecks/react';
 import {useDispatch, useSelector} from '@flecks/redux';
@@ -5,11 +11,14 @@ import {useDispatch, useSelector} from '@flecks/redux';
 import styles from './index.module.scss';
 
 import {
+  closeResource,
   fetchProjectResource,
+  openResourcesSelector,
   projectSelector,
   projectsSelector,
   projectResourceSelector,
   resourceSelector,
+  setCurrentResource,
 } from '../../../state';
 import Login from './login';
 
@@ -18,6 +27,7 @@ function Resource({expanded}) {
   const project = useSelector(projectSelector) || 'c41ddaac-89c2-46a4-b3e5-1d634a1a7c36';
   const {structure} = useSelector(projectsSelector);
   const {current} = useSelector(resourceSelector);
+  const openResources = useSelector(openResourcesSelector);
   const projects = Object.entries(structure);
   const resource = useSelector((state) => projectResourceSelector(state, project, current));
   if (!resource) {
@@ -25,21 +35,56 @@ function Resource({expanded}) {
   }
   return (
     <div className={classnames(styles.resource, expanded && styles.expanded)}>
-      {
+      <Tabs
-        // eslint-disable-next-line no-nested-ternary
+        onSelect={(index) => {
-        projects.length > 0
+          dispatch(setCurrentResource(openResources[index].uri));
-          ? (
+        }}
-            current
+      >
-              ? resource && <ResourceComponent resource={resource} uri={current} />
+        <TabList>
-              : <div className={styles.none}><p>No resource loaded</p></div>
+          {
-          )
+            openResources.map(({uri}) => (
-          : (
+              <Tab
-            <div className={styles.login}>
+                key={uri}
-              <p>You must log in to access your projects.</p>
+              >
-              <Login />
+                {uri}
-            </div>
+                <button
-          )
+                  type="button"
-      }
+                  className={styles.close}
+                  onClick={(event) => {
+                    dispatch(closeResource(uri));
+                    event.stopPropagation();
+                  }}
+                >
+                  ✕
+                </button>
+
+              </Tab>
+            ))
+          }
+        </TabList>
+        {
+          openResources.map(({uri}) => (
+            <TabPanel key={uri} />
+          ))
+        }
+      </Tabs>
+      <div className={styles.content}>
+        {
+          // eslint-disable-next-line no-nested-ternary
+          projects.length > 0
+            ? (
+              current
+                ? resource && <ResourceComponent resource={resource} uri={current} />
+                : <div className={styles.none}><p>No resource loaded</p></div>
+            )
+            : (
+              <div className={styles.login}>
+                <p>You must log in to access your projects.</p>
+                <Login />
+              </div>
+            )
+        }
+      </div>
     </div>
   );
 }

packages/core/src/components/persea/resource/index.module.scss

@@ -1,5 +1,7 @@
 .resource {
   background-color: #1a1a1a;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   width: calc(100% - 3rem);
 
@@ -24,4 +26,12 @@
     height: 100%;
     text-align: center;
   }
+
+  > :global(.react-tabs) {
+    overflow: auto;
+  }
+}
+
+.content {
+  flex-grow: 100;
 }

packages/core/src/state/resource.js

@@ -1,9 +1,20 @@
 import {
+  createSelector,
   createSlice,
 } from '@flecks/redux';
 
 export const resourceSelector = (state) => state.resource;
 
+export const currentResourceSelector = createSelector(
+  resourceSelector,
+  ({current}) => current,
+);
+
+export const openResourcesSelector = createSelector(
+  resourceSelector,
+  ({open}) => open,
+);
+
 const slice = createSlice({
   name: 'persea/resource',
   initialState: {
@@ -12,10 +23,21 @@ const slice = createSlice({
   },
   /* eslint-disable no-param-reassign */
   reducers: {
+    closeResource: (state, {payload}) => {
+      const index = state.open.findIndex(({uri}) => uri === payload);
+      if (-1 !== index) {
+        state.open.splice(index, 1);
+      }
+      if (state.current === payload) {
+        state.current = state.open.length > 0
+          ? state.open[Math.max(0, index - 1)].uri
+          : null;
+      }
+    },
     setCurrentResource: (state, {payload}) => {
       state.current = payload;
-      if (-1 === state.open.indexOf(payload)) {
+      if (-1 === state.open.findIndex(({uri}) => uri === payload)) {
-        state.open.push(payload);
+        state.open.push({uri: payload});
       }
     },
   },
@@ -23,6 +45,7 @@ const slice = createSlice({
 });
 
 export const {
+  closeResource,
   setCurrentResource,
 } = slice.actions;