feat: real project hydration

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 (
+      <div className={classnames(styles.resource, expanded && styles.expanded)}>
+        {
+          0 !== userId
+            ? (
+              <div className={classnames(styles.resource, expanded && styles.expanded)}>
+                <div className={styles.none}><p>No project loaded</p></div>
+              </div>
+            )
+            : (
+              <div className={styles.login}>
+                <p>You must log in to access your projects.</p>
+                <Login />
+              </div>
+            )
+        }
+      </div>
+    );
+  }
   if (!resource) {
     dispatch(fetchProjectResource({uri: current, uuid: project}));
   }

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;
+}

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 (
     <div className={styles.content}>
-      <Organization
-        label={label}
-        uuid={project}
-        resourcePaths={resourcePaths}
-      />
+      {
+        project
+          ? (
+            <Organization
+              label={structure.label}
+              uuid={project}
+              resourcePaths={structure.resourcePaths}
+            />
+          )
+          : (
+            <div className={styles.empty}>
+              <p>You don&apos;t have any projects.</p>
+            </div>
+          )
+      }
     </div>
   );
 }

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');
 }

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 (

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;