diff --git a/packages/core/src/components/persea/resource/index.jsx b/packages/core/src/components/persea/resource/index.jsx index c7b7b8a..e2db7a0 100644 --- a/packages/core/src/components/persea/resource/index.jsx +++ b/packages/core/src/components/persea/resource/index.jsx @@ -9,6 +9,7 @@ import { import {Resource as ResourceComponent} from '@avocado/resource-persea'; import {classnames, PropTypes, React} from '@flecks/react'; import {useDispatch, useSelector} from '@flecks/redux'; +import {userIdSelector} from '@flecks/user'; import styles from './index.module.scss'; @@ -26,13 +27,34 @@ import Login from './login'; function Resource({expanded}) { const dispatch = useDispatch(); - const project = useSelector(projectSelector) || 'c41ddaac-89c2-46a4-b3e5-1d634a1a7c36'; + const project = useSelector(projectSelector); const {structure} = useSelector(projectsSelector); const {current} = useSelector(resourceSelector); const openResources = useSelector(openResourcesSelector); const projects = Object.entries(structure); const selectedIndex = openResources.findIndex(({uri}) => current === uri); const resource = useSelector((state) => projectResourceSelector(state, project, current)); + const userId = useSelector(userIdSelector); + if (!project) { + return ( +
+ { + 0 !== userId + ? ( +
+

No project loaded

+
+ ) + : ( +
+

You must log in to access your projects.

+ +
+ ) + } +
+ ); + } if (!resource) { dispatch(fetchProjectResource({uri: current, uuid: project})); } diff --git a/packages/core/src/components/persea/resource/index.module.scss b/packages/core/src/components/persea/resource/index.module.scss index a7349cf..a9415ef 100644 --- a/packages/core/src/components/persea/resource/index.module.scss +++ b/packages/core/src/components/persea/resource/index.module.scss @@ -9,24 +9,6 @@ width: calc(100% - 25rem); } - .login { - p { - margin: 3em; - 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; - } - > :global(.react-tabs) { overflow: auto; } @@ -35,3 +17,21 @@ .content { flex-grow: 100; } + +.login { + p { + margin: 3em; + 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/sidebar/organization/content.jsx b/packages/core/src/sidebar/organization/content.jsx index 5c5a062..cd990de 100644 --- a/packages/core/src/sidebar/organization/content.jsx +++ b/packages/core/src/sidebar/organization/content.jsx @@ -7,15 +7,25 @@ import {projectSelector, structureSelector} from '../../state'; import Organization from './organization'; function Content() { - const project = useSelector(projectSelector) || 'c41ddaac-89c2-46a4-b3e5-1d634a1a7c36'; - const {label, resourcePaths} = useSelector((state) => structureSelector(state, project)); + const project = useSelector(projectSelector); + const structure = useSelector((state) => structureSelector(state, project)); return (
- + { + project + ? ( + + ) + : ( +
+

You don't have any projects.

+
+ ) + }
); } diff --git a/packages/core/src/sidebar/organization/content.module.scss b/packages/core/src/sidebar/organization/content.module.scss index 0b23268..92177b1 100644 --- a/packages/core/src/sidebar/organization/content.module.scss +++ b/packages/core/src/sidebar/organization/content.module.scss @@ -1,6 +1,14 @@ .content { } +.empty { + p { + font-family: var(--message-font-family); + margin-top: 1em; + text-align: center; + } +} + .icon { background-image: url('./icon_document.svg'); } diff --git a/packages/core/src/sidebar/projects/content.jsx b/packages/core/src/sidebar/projects/content.jsx index 62aa061..4027c55 100644 --- a/packages/core/src/sidebar/projects/content.jsx +++ b/packages/core/src/sidebar/projects/content.jsx @@ -6,7 +6,7 @@ import styles from './content.module.scss'; import {projectSelector, projectsSelector} from '../../state'; function Content() { - const project = useSelector(projectSelector) || 'c41ddaac-89c2-46a4-b3e5-1d634a1a7c36'; + const project = useSelector(projectSelector); const {structure} = useSelector(projectsSelector); const projects = Object.entries(structure); return ( diff --git a/packages/core/src/state/project.js b/packages/core/src/state/project.js index 7f0f817..c9533ad 100644 --- a/packages/core/src/state/project.js +++ b/packages/core/src/state/project.js @@ -1,7 +1,10 @@ import { createSlice, + hydrateServer, } from '@flecks/redux'; +const HydrateServer = Symbol.for('$persea/core.project'); + export const projectSelector = (state) => state.project; const slice = createSlice({ @@ -11,19 +14,28 @@ const slice = createSlice({ reducers: { setProject: (state, {payload}) => payload, }, + extraReducers: (builder) => { + builder.addCase(hydrateServer, (state, {payload}) => payload.req[HydrateServer]); + }, /* eslint-enable no-param-reassign */ }); slice.reducer.hydrateServer = async (req) => { const {user} = req; if (!user) { - return null; + req[HydrateServer] = null; + return; } const projects = await user.getProjects(); if (0 === projects.length) { - return null; + req[HydrateServer] = null; + return; } - return projects[0].uuid; + req[HydrateServer] = projects[0].uuid; }; +export const { + setProject, +} = slice.actions; + export default slice.reducer;