[B] FE bug fixes

client/src/backend/containers/ingestion/Ingest.js

@@ -13,6 +13,7 @@ import throttle from "lodash/throttle";
 import { websocketActions, notificationActions } from "actions";
 import lh from "helpers/linkHandler";
 import config from "config";
+import { Prompt } from "react-router-dom";
 
 const { request, flush } = entityStoreActions;
 
@@ -263,7 +264,8 @@ export class IngestionIngest extends Component {
     }
 
     return (
-      <div>
+      <>
+        <Prompt message={this.props.t("messages.unsaved_changes")} />
         <div className="ingestion-output">
           <Heading
             ingestion={this.props.ingestion}
@@ -307,7 +309,7 @@ export class IngestionIngest extends Component {
             </button>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 }

client/src/backend/containers/user/Wrapper.js

@@ -40,10 +40,7 @@ function UserWrapper({ match, route, history, confirm, location }) {
   const notifyDestroy = useNotification(u => ({
     level: 0,
     id: `USER_DESTROYED_${u.id}`,
-    heading: t("notifications.reading_group_delete"),
-    body: t("notifications.delete_entity_body", {
-      title: u?.name
-    }),
+    heading: t("notifications.user_delete", { name: u.attributes.fullName }),
     expiration: 5000
   }));
 

client/src/config/app/locale/en-US/json/shared/notifications.json

@@ -18,6 +18,7 @@
     "resource_collection_delete": "The resource collection has been destroyed.",
     "resource_delete": "The resource has been destroyed.",
     "text_delete": "The text has been destroyed.",
+    "user_delete": "{{name}} has been removed.",
     "volume_body": "Volume #{{number}} has passed into the endless night.",
     "volume_delete": "The volume has been destroyed."
   }

client/src/frontend/components/layout/Splash/index.js

@@ -58,17 +58,13 @@ export default function Splash(props) {
           <Styled.Buttons>
             {linkText && linkUrl ? (
               <a href={linkUrl} target="blank" className="utility-button">
-                <span
-                  className={classNames(
-                    "utility-button__text",
-                    "utility-button__text--large",
-                    {
-                      "utility-button__text--dark-green": mode === "light"
-                    }
-                  )}
+                <Styled.Button
+                  className={classNames({
+                    "utility-button__text--dark-green": mode === "light"
+                  })}
                 >
                   {linkText}
-                </span>
+                </Styled.Button>
               </a>
             ) : null}
             {includeSignUp && !authenticated ? (
@@ -78,17 +74,13 @@ export default function Splash(props) {
                 tabIndex="0"
                 to={lh.link("frontendSignUp")}
               >
-                <span
-                  className={classNames(
-                    "utility-button__text",
-                    "utility-button__text--large",
-                    {
-                      "utility-button__text--dark-green": mode === "light"
-                    }
-                  )}
+                <Styled.Button
+                  className={classNames({
+                    "utility-button__text--dark-green": mode === "light"
+                  })}
                 >
                   Sign Up
-                </span>
+                </Styled.Button>
               </Link>
             ) : null}
           </Styled.Buttons>

client/src/frontend/components/layout/Splash/styles.js

@@ -3,7 +3,8 @@ import {
   containerPrototype,
   respond,
   headingPrimary,
-  headingSecondary
+  headingSecondary,
+  defaultTransitionProps
 } from "theme/styles/mixins";
 import { transientOptions } from "helpers/emotionHelpers";
 
@@ -138,6 +139,15 @@ export const Buttons = styled.div`
   }
 `;
 
+export const Button = styled.span`
+  font-size: 14px;
+  transition: color ${defaultTransitionProps};
+
+  .utility-button:not(:disabled):hover & {
+    color: var(--color-base-neutral80);
+  }
+`;
+
 export const Right = styled.figure`
   display: none;
   position: relative;

client/src/frontend/components/reading-group/headings/Group/GroupSummaryBox/index.js

@@ -82,7 +82,7 @@ function GroupSummaryBox({ readingGroup, isBackend }) {
               {creatorName}
             </Item>
           ) : (
-            <Item labelText={t("common.role")} icon="avatar24">
+            <Item labelText={t("common.role_one")} icon="avatar24">
               {currentUserRole}
             </Item>
           )}

client/src/frontend/components/resource-list/Cards/index.js

@@ -29,14 +29,14 @@ export default class ResourceListCards extends PureComponent {
       <Styled.List>
         {this.props.resources.map(resource => {
           return (
-            <Styled.Item key={resource.id}>
+            <li key={resource.id}>
               <Resource.Card
                 resourceCollection={resourceCollection}
                 resource={resource}
                 project={project}
                 itemHeadingLevel={itemHeadingLevel}
               />
-            </Styled.Item>
+            </li>
           );
         })}
       </Styled.List>

client/src/frontend/components/resource-list/Cards/styles.js

@@ -5,22 +5,12 @@ export const List = styled.ul`
   --column-gap: 30px;
 
   ${listUnstyled}
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 1fr;
   column-gap: var(--column-gap);
   row-gap: 18px;
 
   ${respond(`--column-gap: 4.858vw;`, 85)}
-`;
-
-export const Item = styled.li`
-  flex-basis: 100%;
 
-  ${respond(
-    `
-      flex-grow: 1;
-      flex-basis: calc(50% - var(--column-gap));
-    `,
-    75
-  )}
+  ${respond(`grid-template-columns: repeat(2, 1fr);`, 75)}
 `;

client/src/frontend/containers/Home/Content.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/Feature.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]}