export function FeaturedProjects()

in frontend/src/components/homepage/featuredProjects.js [53:130]
76 lines of code
6 McCabe index (conditional complexity)

export function FeaturedProjects() {
  const initialData = {
    mapResults: {
      features: [],
      type: 'FeatureCollection',
    },
    results: [],
    pagination: { hasNext: false, hasPrev: false, page: 1 },
  };
  const [state, dispatch] = useFeaturedProjectAPI(initialData);

  const apiResults = state.projects && state.projects.results;
  const pagedProjs = projectPaginate(apiResults);
  const pagedProjsMobile = projectPaginateMobile(apiResults);

  if (apiResults.length) {
    return (
      <section className="pb4 pl5-l pr1-l pl3 black">
        <div className="cf">
          <div className="w-75-l w-60 fl">
            <h3 className="f2 mb0 ttu barlow-condensed fw8">
              <FormattedMessage {...messages.featuredProjects} />
            </h3>
          </div>
          <div className="fl w-25-l pa3 mw6 dn db-l">
            {!state.isLoading && (
              <FeaturedProjectPaginateArrows
                pages={pagedProjs}
                activeProjectCardPage={state.activeProjectCardPage}
                mobile={false}
                dispatch={dispatch}
              />
            )}
          </div>
          <div className="fl w-40 pa3 mb4 mw6 db dn-l">
            {!state.isLoading && (
              <FeaturedProjectPaginateArrows
                pages={pagedProjsMobile}
                mobile={true}
                activeProjectCardPage={state.activeProjectCardPageMobile}
                dispatch={dispatch}
              />
            )}
          </div>
        </div>
        {state.isError ? (
          <div className="bg-tan pa4">
            <FormattedMessage
              {...messages.errorLoadingTheX}
              values={{
                xWord: <FormattedMessage {...messages.featuredProjects} />,
              }}
            />
          </div>
        ) : null}
        <div className="cf dn db-l">
          <ReactPlaceholder customPlaceholder={nCardPlaceholders(4)} ready={!state.isLoading}>
            <FeaturedProjectCards
              pageOfCards={pagedProjs}
              pageNum={state.activeProjectCardPage}
              ready={!state.isLoading}
            />
          </ReactPlaceholder>
        </div>
        <div className="cf db dn-l">
          <ReactPlaceholder type="media" rows={10} ready={!state.isLoading}>
            <FeaturedProjectCards
              pageOfCards={pagedProjsMobile}
              pageNum={state.activeProjectCardPageMobile}
            />
          </ReactPlaceholder>
        </div>
      </section>
    );
  } else {
    return <></>;
  }
}