refactor: resource 'routing'

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

@@ -1,19 +1,38 @@
+import {Resource as ResourceComponent} from '@avocado/resource-persea';
 import {classnames, PropTypes, React} from '@flecks/react';
-import {useSelector} from '@flecks/redux';
+import {useDispatch, useSelector} from '@flecks/redux';
 
 import styles from './index.module.scss';
 
-import {projectsSelector} from '../../../state/projects';
+import {
+  fetchProjectResource,
+  projectSelector,
+  projectsSelector,
+  projectResourceSelector,
+  resourceSelector,
+} from '../../../state';
 import Login from './login';
 
 function Resource({expanded}) {
+  const dispatch = useDispatch();
+  const project = useSelector(projectSelector) || 'c41ddaac-89c2-46a4-b3e5-1d634a1a7c36';
   const {structure} = useSelector(projectsSelector);
+  const {current} = useSelector(resourceSelector);
   const projects = Object.entries(structure);
+  const resource = useSelector((state) => projectResourceSelector(state, project, current));
+  if (!resource) {
+    dispatch(fetchProjectResource({uri: current, uuid: project}));
+  }
   return (
     <div className={classnames(styles.resource, expanded && styles.expanded)}>
       {
+        // eslint-disable-next-line no-nested-ternary
         projects.length > 0
-          ? <p>{projects.length}</p>
+          ? (
+            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>

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

@@ -13,4 +13,15 @@
       text-align: center;
     }
   }
+
+  .none {
+    color: rgba(255, 255, 255, 0.3);
+    font-family: var(--thick-title-font-family);
+    justify-content: space-around;
+    display: flex;
+    flex-direction: column;
+    font-size: 2em;
+    height: 100%;
+    text-align: center;
+  }
 }

packages/core/src/index.js

@@ -4,7 +4,11 @@ import {Hooks} from '@flecks/core';
 import Persea from './components/persea';
 import organization from './sidebar/organization';
 import projectsSidebar from './sidebar/projects';
-import {project, projects} from './state';
+import {
+  project,
+  projects,
+  resource,
+} from './state';
 
 export * from './state';
 
@@ -22,6 +26,7 @@ export default {
     '@flecks/redux.slices': () => ({
       project,
       projects,
+      resource,
     }),
     '@persea/core.sidebar': () => ({
       projects: projectsSidebar,

packages/core/src/sidebar/organization/organization/index.jsx

@@ -7,10 +7,7 @@ import {
   React,
   useFlecks,
 } from '@flecks/react';
-import {
-  push,
-  useLocation,
-} from '@flecks/react/router';
+import {useLocation} from '@flecks/react/router';
 import {
   createNextState,
   useDispatch,
@@ -19,6 +16,9 @@ import {
 import './index.scss';
 
 import useLocalStorage from '../../../hooks/use-local-storage';
+import {
+  setCurrentResource,
+} from '../../../state';
 import OrganizationActions from './actions';
 
 const normalizeDisplayName = (displayName) => (
@@ -71,7 +71,9 @@ const Organization = ({
         activate={({value, nodes}) => {
           const path = join('/project', value);
           if (!nodes) {
-            dispatch(push(path));
+            const parts = path.split('/');
+            parts.splice(1, 2);
+            dispatch(setCurrentResource(parts.join('/')));
           }
           else {
             const next = createNextState(collapsed, (draft) => {

packages/core/src/state/index.js

@@ -3,3 +3,6 @@ export {default as project} from './project';
 
 export * from './projects';
 export {default as projects} from './projects';
+
+export * from './resource';
+export {default as resource} from './resource';

packages/core/src/state/projects.js

@@ -1,3 +1,5 @@
+import {join} from 'path';
+
 import {Resource} from '@avocado/resource';
 import {
   createAsyncThunk,
@@ -12,7 +14,8 @@ export const projectsSelector = (state) => state.projects;
 
 export const fetchProjectResource = createAsyncThunk(
   'persea/projects/fetchResource',
-  async ({uri}, {extra: flecks}) => {
+  async ({uri, uuid}, {extra: flecks}) => {
+    Resource.root = join('/projects', uuid);
     const buffer = await Resource.read(uri);
     const {fromBuffer} = flecks.get('$avocado/resource-persea.controllers')
       .find(({matcher}) => uri.match(matcher));
@@ -31,7 +34,7 @@ export const fetchProjectResource = createAsyncThunk(
   },
 );
 
-export const resourceSelector = createSelector(
+export const projectResourceSelector = createSelector(
   [projectsSelector, (_, uuid) => uuid, (_, __, uri) => uri],
   ({resources}, uuid, uri) => uuid && uri && resources[`${uuid}${uri}`],
 );

packages/core/src/state/resource.js

@@ -0,0 +1,29 @@
+import {
+  createSlice,
+} from '@flecks/redux';
+
+export const resourceSelector = (state) => state.resource;
+
+const slice = createSlice({
+  name: 'persea/resource',
+  initialState: {
+    current: null,
+    open: [],
+  },
+  /* eslint-disable no-param-reassign */
+  reducers: {
+    setCurrentResource: (state, {payload}) => {
+      state.current = payload;
+      if (-1 === state.open.indexOf(payload)) {
+        state.open.push(payload);
+      }
+    },
+  },
+  /* eslint-enable no-param-reassign */
+});
+
+export const {
+  setCurrentResource,
+} = slice.actions;
+
+export default slice.reducer;