[B][E] Ensure homepage content is SSR; prevent layout flash

Author: 1aurend

client/src/frontend/containers/Home/Collections.js

@@ -0,0 +1,62 @@
+import React from "react";
+import Feature from "./Feature";
+import CollectionNavigation from "frontend/components/CollectionNavigation";
+import { useFromStore } from "hooks";
+import useFetchHomepageContent from "./useFetchHomepageContent";
+import EntityCollection from "frontend/components/entity/Collection";
+import EntityCollectionPlaceholder from "global/components/entity/CollectionPlaceholder";
+
+export default function Content() {
+  const settings = useFromStore("settings", "select");
+
+  const { hasVisibleHomeProjectCollections, hasVisibleProjects } =
+    settings?.attributes?.calculated ?? {};
+  const showProjects = !hasVisibleHomeProjectCollections;
+
+  const {
+    loaded,
+    projects,
+    collections,
+    journals,
+    features
+  } = useFetchHomepageContent(showProjects);
+
+  if (!loaded) return null;
+
+  if (!projects?.length && !collections?.length && !journals?.length)
+    return <EntityCollectionPlaceholder.Projects />;
+
+  const renderCollections = collections?.length
+    ? collections.map((projectCollection, i) => (
+        <EntityCollection.ProjectCollectionSummary
+          key={projectCollection.id}
+          projectCollection={projectCollection}
+          limit={projectCollection.attributes.homepageCount}
+          bgColor={i % 2 === 0 ? "neutral05" : "white"}
+        />
+      ))
+    : null;
+
+  const renderProjects = projects?.length ? (
+    <EntityCollection.ProjectsSummary projects={projects} bgColor="neutral05" />
+  ) : null;
+
+  const count = showProjects ? 1 : collections?.length;
+
+  return (
+    <>
+      <Feature features={features} />
+      {showProjects ? renderProjects : renderCollections}
+      {!!journals?.length &&
+        journals.map((journal, i) => (
+          <EntityCollection.JournalSummary
+            key={journal.id}
+            journal={journal}
+            bgColor={(count + i) % 2 === 0 ? "neutral05" : "white"}
+            limit={8}
+          />
+        ))}
+      {hasVisibleProjects && <CollectionNavigation />}
+    </>
+  );
+}

client/src/frontend/containers/Home/Content.js

@@ -1,21 +1,16 @@
-import React, { useMemo } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import Layout from "frontend/components/layout";
-import { featuresAPI } from "api";
-import { useFetch } from "hooks";
+import { useFromStore } from "hooks";
 import { commonActions } from "actions/helpers";
 import { useDispatch } from "react-redux";
 
-export default function HomeFeatureContainer({ authentication }) {
-  const filters = useMemo(() => ({ home: true }), []);
-  const { data: features } = useFetch({
-    request: [featuresAPI.index, filters],
-    withAuthDependency: true
-  });
-
+export default function HomeFeatureContainer({ features }) {
   const dispatch = useDispatch();
   const actions = commonActions(dispatch);
 
+  const authentication = useFromStore("authentication");
+
   return features?.length ? (
     <Layout.Splash
       feature={features[0]}

client/src/frontend/containers/Home/Feature.js

@@ -1,40 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Collections from "./Collections";
-import Projects from "./Projects";
-import Feature from "./Feature";
-import CollectionNavigation from "frontend/components/CollectionNavigation";
+import Content from "./Content";
 import EventTracker, { EVENTS } from "global/components/EventTracker";
 import HeadContent from "global/components/HeadContent";
-import { useFromStore } from "hooks";
-import { useLocation } from "react-router-dom";
 
 export default function HomeContainer() {
-  const settings = useFromStore("settings", "select");
-
-  const { hasVisibleHomeProjectCollections, hasVisibleProjects } =
-    settings?.attributes?.calculated ?? {};
-  const showProjects = !hasVisibleHomeProjectCollections;
-  const authentication = useFromStore("authentication");
-  const location = useLocation();
-
   return (
     <>
       <HeadContent />
-      <div
-        style={{
-          overflowX: "hidden"
-        }}
-      >
-        <EventTracker event={EVENTS.VIEW_LIBRARY} />
-        <Feature authentication={authentication} />
-        {showProjects ? (
-          <Projects location={location} authentication={authentication} />
-        ) : (
-          <Collections />
-        )}
-        {hasVisibleProjects && <CollectionNavigation />}
-      </div>
+      <EventTracker event={EVENTS.VIEW_LIBRARY} />
+      <Content />
     </>
   );
 }

client/src/frontend/containers/Home/Projects.js

@@ -0,0 +1,62 @@
+import { useMemo } from "react";
+import { useFetch } from "hooks";
+import {
+  projectCollectionsAPI,
+  journalsAPI,
+  projectsAPI,
+  featuresAPI
+} from "api";
+
+export default function useFetchHomepageContent(fetchProjects) {
+  const collectionFilters = useMemo(
+    () => ({
+      visibleOnHomepage: true,
+      order: "position ASC"
+    }),
+    []
+  );
+
+  const projectFilters = useMemo(
+    () => ({
+      standaloneModeEnforced: false,
+      order: "sort_title, title"
+    }),
+    []
+  );
+
+  const journalFilters = useMemo(
+    () => ({
+      showOnHomepage: true
+    }),
+    []
+  );
+
+  const featuresFilters = useMemo(() => ({ home: true }), []);
+
+  const { data: projects, loaded: projectsLoaded } = useFetch({
+    request: [projectsAPI.index, projectFilters, { number: 1, size: 20 }],
+    condition: fetchProjects
+  });
+  const { data: collections, loaded: collectionsLoaded } = useFetch({
+    request: [projectCollectionsAPI.index, collectionFilters],
+    withAuthDependency: true,
+    condition: !fetchProjects
+  });
+
+  const { data: journals, loaded: journalsLoaded } = useFetch({
+    request: [journalsAPI.index, journalFilters],
+    withAuthDependency: true
+  });
+
+  const { data: features, loaded: featuresLoaded } = useFetch({
+    request: [featuresAPI.index, featuresFilters],
+    withAuthDependency: true
+  });
+
+  const loaded =
+    journalsLoaded && featuresLoaded && fetchProjects
+      ? projectsLoaded
+      : collectionsLoaded;
+
+  return { loaded, journals, projects, collections, features };
+}