diff --git a/packages/core/src/components/persea/resource/index.jsx b/packages/core/src/components/persea/resource/index.jsx index 589baf4..81dfb7f 100644 --- a/packages/core/src/components/persea/resource/index.jsx +++ b/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 (
{projects.length}
+ ? ( + current + ? resource &&No resource loaded
You must log in to access your projects.
diff --git a/packages/core/src/components/persea/resource/index.module.scss b/packages/core/src/components/persea/resource/index.module.scss index efbb350..e4cba1c 100644 --- a/packages/core/src/components/persea/resource/index.module.scss +++ b/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; + } } diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0c8bc06..c35a636 100644 --- a/packages/core/src/index.js +++ b/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, diff --git a/packages/core/src/sidebar/organization/organization/index.jsx b/packages/core/src/sidebar/organization/organization/index.jsx index cc45523..4f15cfb 100644 --- a/packages/core/src/sidebar/organization/organization/index.jsx +++ b/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) => { diff --git a/packages/core/src/state/index.js b/packages/core/src/state/index.js index a8de8a8..0404e1b 100644 --- a/packages/core/src/state/index.js +++ b/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'; diff --git a/packages/core/src/state/projects.js b/packages/core/src/state/projects.js index 9a2a5bd..7a88f1c 100644 --- a/packages/core/src/state/projects.js +++ b/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}`], ); diff --git a/packages/core/src/state/resource.js b/packages/core/src/state/resource.js new file mode 100644 index 0000000..482f5e9 --- /dev/null +++ b/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;