Placeholders

ApollosProject · Mar 4, 2024 · 67afc69 · 67afc69
1 parent 17f1534
commit 67afc69
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 30 deletions.
diff --git a/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js b/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { getURLFromType } from '../../../utils';
-import { systemPropTypes, ResourceCard, Box } from '../../../ui-kit';
+import { systemPropTypes, ResourceCard, Box, H5 } from '../../../ui-kit';
 import Styled from './ActionListFeature.styles';
 import { useNavigate } from 'react-router-dom';
 
-function ActionListFeature(props = {}) {
+function ActionListFeature({ feature, emptyPlaceholderText }) {
   const navigate = useNavigate();
 
   const handleActionPress = (item) => {
@@ -14,17 +14,24 @@ function ActionListFeature(props = {}) {
     });
   };
 
-  if (props?.feature?.actions?.length === 0 || !props?.feature?.actions) {
+  if (feature?.actions?.length === 0 || !feature?.actions) {
+    if (emptyPlaceholderText) {
+      return (
+        <Box className="empty-placeholder-text-container">
+          <H5 className="empty-placeholder-text">{emptyPlaceholderText}</H5>
+        </Box>
+      );
+    }
     return null;
   }
 
   return (
     <Box>
       <Box padding="xs" fontWeight="600" color="base.gray" id="results">
-        {props.feature.title || props.feature.subtitle}
+        {feature.title || feature.subtitle}
       </Box>
       <Styled.List>
-        {props.feature?.actions?.map((item, index) => {
+        {feature?.actions?.map((item, index) => {
           return (
             <Styled.Wrapper key={index}>
               <ResourceCard

diff --git a/packages/web-shared/components/FeatureFeed/Feed.js b/packages/web-shared/components/FeatureFeed/Feed.js
@@ -10,7 +10,7 @@ import { Box, Loader } from '../../ui-kit';
 
 import FeatureFeedComponentMap from './FeatureFeedComponentMap';
 
-const Feed = ({ loading, data }) => {
+const Feed = ({ loading, data, emptyPlaceholderText }) => {
   const transformLink = useLink();
   // Clunky, silly workaround for an Apollo query `loading` prop problem.
   // We don't want cache updates or background refetch calls to trigger
@@ -41,7 +41,7 @@ const Feed = ({ loading, data }) => {
     );
   }
 
-  const features = data.features?.map(feature => (feature.cards === null ? undefined : feature));
+  const features = data.features?.map((feature) => (feature.cards === null ? undefined : feature));
   const renderedFeatures = compact(features);
 
   if (!renderedFeatures?.length) {
@@ -65,7 +65,7 @@ const Feed = ({ loading, data }) => {
       return null;
     }
 
-    const handleTransformLink = url => {
+    const handleTransformLink = (url) => {
       // just bulletproofing
       if (!isFunction(transformLink)) return url;
       return transformLink(url);
@@ -76,6 +76,7 @@ const Feed = ({ loading, data }) => {
         key={`${feature.id}_${i}`}
         feature={feature}
         transformLink={handleTransformLink}
+        emptyPlaceholderText={emptyPlaceholderText}
       />
     );
   });

diff --git a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
@@ -13,7 +13,7 @@ import {
 
 import { open as openModal, set as setModal, useModal } from '../../providers/ModalProvider';
 
-function FeatureFeedListGrid(props = {}) {
+function FeatureFeedListGrid({ loading, data, emptyPlaceholderText }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [state, dispatch] = useModal();
   const dispatchBreadcrumb = useBreadcrumbDispatch();
@@ -35,6 +35,14 @@ function FeatureFeedListGrid(props = {}) {
     }
   };
 
+  if (!loading && data?.features[0]?.cards?.length === 0 && emptyPlaceholderText) {
+    return (
+      <Box className="empty-placeholder-text-container">
+        <H3 class="empty-placeholder-text">{emptyPlaceholderText}</H3>
+      </Box>
+    );
+  }
+
   return (
     <Box pb="l">
       <Box
@@ -46,7 +54,7 @@ function FeatureFeedListGrid(props = {}) {
           lg: 'repeat(3, 1fr)',
         }}
       >
-        {props.data?.features[0]?.cards?.map((item, index) => (
+        {data?.features[0]?.cards?.map((item, index) => (
           <ContentCard
             key={index}
             image={item.coverImage}

diff --git a/packages/web-shared/embeds/Main.js b/packages/web-shared/embeds/Main.js
@@ -4,11 +4,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import { Searchbar } from '../components';
 
-import {
-  ContentItemProvider,
-  FeatureFeedProvider,
-  ContentFeedProvider,
-} from '../providers';
+import { ContentItemProvider, FeatureFeedProvider, ContentFeedProvider } from '../providers';
 import {
   ContentSingle,
   FeatureFeedList,
@@ -42,24 +38,14 @@ function RenderEmbed(props) {
     }
     case 'Search': {
       return (
-        <Styled.Search
-          in={!searchState.loading}
-          timeout={300}
-          classNames="fade"
-          unmountOnExit
-        >
+        <Styled.Search in={!searchState.loading} timeout={300} classNames="fade" unmountOnExit>
           <Searchbar width="100%" />
         </Styled.Search>
       );
     }
     default: {
       return (
-        <Styled.Search
-          in={!searchState.loading}
-          timeout={300}
-          classNames="fade"
-          unmountOnExit
-        >
+        <Styled.Search in={!searchState.loading} timeout={300} classNames="fade" unmountOnExit>
           <Searchbar width="100%" />
         </Styled.Search>
       );
@@ -84,6 +70,7 @@ const Main = () => {
               searchFeed={widget.dataset.searchFeed}
               featureFeed={widget.dataset.featureFeed}
               modal={widget.dataset.modal}
+              emptyPlaceholderText={widget.dataset.emptyPlaceholderText}
             />,
             widget
           );

diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html
@@ -56,8 +56,12 @@
     ></div> -->
 
   <div data-type="FeatureFeed" data-church="liquid_church"
-    data-feature-feed="FeatureFeed:04160599-4edf-4824-98c5-02c1a8854c48"
-    data-placeholder="What are you looking for?" data-modal="true" class="apollos-widget"></div>
+    data-feature-feed="FeatureFeed:04160599-4edf-4824-98c5-02c1a8854c48" data-placeholder="What are you looking for?"
+    data-modal="true" class="apollos-widget"></div>
+
+  <div data-type="FeatureFeed" data-church="liquid_church"
+    data-feature-feed="FeatureFeed:7ff30e63-caa8-4015-bc00-73633e857b2f" data-modal="true" class="apollos-widget"
+    data-empty-placeholder-text="No jobs today!"></div>
   <!-- 
     <div
       data-church="cedar_creek"
@@ -71,7 +75,8 @@
     style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
     data-search-feed="FeatureFeed:07e1050d-a6c4-4b46-a2a0-12d8fbf1df3c"></div>
   <div data-type="FeatureFeed" data-church="liquid_church"
-    data-feature-feed="FeatureFeed:d3912726-487b-4635-9cec-99ed84a21209" data-modal="true" class="apollos-widget"></div>
+    data-feature-feed="FeatureFeed:d3912726-487b-4635-9cec-99ed84a21209" data-modal="true" class="apollos-widget">
+  </div>
 
 
   <!--