Remove react-lazyload and ts convert some components

components/actions/ActionHighlightCard.js → components/actions/ActionHighlightCard.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import { Card, CardBody, CardTitle, Badge } from 'reactstrap';
 import styled from 'styled-components';
 import { transparentize } from 'polished';
 import PlanContext from 'context/plan';
 import { useTheme } from 'common/theme';
 import EmbedContext from 'context/embed';
 import { cleanActionStatus } from 'common/preprocess';
+import { ActionHighlightListAction } from './ActionHighlightsList';
 import { getStatusColorForAction } from 'common/ActionStatusSummary';
 import { ActionLink } from 'common/links';
 import Icon from 'components/common/Icon';
@@ -61,14 +61,14 @@ const StyledCardTitle = styled(CardTitle)`
   margin-bottom: 0;
 `;
 
-const ImgArea = styled.div`
+const ImgArea = styled.div<{ bgcolor?: string }>`
   min-height: 9rem;
   position: relative;
   background-color: ${(props) =>
     props.bgcolor || props.theme.themeColors.light};
 `;
 
-const ImgBg = styled.div`
+const ImgBg = styled.div<{ background: string }>`
   height: 9rem;
   background-image: url(${(props) => props.background});
   background-position: center;
@@ -104,7 +104,15 @@ const ActionNumber = styled.div`
   }
 `;
 
-function ActionHighlightCard(props) {
+type ActionHighlightCardProps = {
+  action: ActionHighlightListAction;
+  imageUrl?: string;
+  hideIdentifier?: boolean;
+};
+
+// TODO: FIX typechecking
+
+function ActionHighlightCard(props: ActionHighlightCardProps) {
   const { action, imageUrl, hideIdentifier } = props;
   const plan = useContext(PlanContext);
   const embed = useContext(EmbedContext);
@@ -163,23 +171,4 @@ function ActionHighlightCard(props) {
   );
 }
 
-ActionHighlightCard.defaultProps = {
-  hideIdentifier: false,
-  imageUrl: undefined,
-};
-
-ActionHighlightCard.propTypes = {
-  action: PropTypes.shape({
-    identifier: PropTypes.string,
-    name: PropTypes.string,
-    status: PropTypes.shape({
-      name: PropTypes.string,
-      identifier: PropTypes.string,
-    }),
-    completion: PropTypes.number,
-  }).isRequired,
-  imageUrl: PropTypes.string,
-  hideIdentifier: PropTypes.bool,
-};
-
 export default React.memo(ActionHighlightCard);

components/actions/ActionHighlightsList.js → components/actions/ActionHighlightsList.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable max-classes-per-file */
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import { gql } from '@apollo/client';
 import { Query } from '@apollo/client/react/components';
 import styled from 'styled-components';
 import { Row, Col } from 'reactstrap';
-import LazyLoad from 'react-lazyload';
-
+import {
+  ActionHightlightListQuery,
+  PlanContextFragment,
+} from 'common/__generated__/graphql';
 import EmbedContext from 'context/embed';
 import Button from 'components/common/Button';
 import { getActionTermContext, useTranslation } from 'common/i18n';
@@ -93,40 +94,35 @@ const StyledCardContainer = styled(ReactStrapCol)`
   .card {
     height: 100%;
   }
-
-  .lazyload-wrapper {
-    width: 100%;
-  }
 `;
 
-const ConditionalLazyLoad = (props) => {
-  if (props.embed?.active) {
-    return <>{props.children}</>;
-  }
-  return <LazyLoad height={300}>{props.children}</LazyLoad>;
-};
+export type ActionHighlightListAction = NonNullable<
+  ActionHightlightListQuery['planActions']
+>;
 
-const CardContainer = (props) => {
-  return (
-    <StyledCardContainer {...props}>
-      <ConditionalLazyLoad {...props}>{props.children}</ConditionalLazyLoad>
-    </StyledCardContainer>
-  );
+type ActionCardListProps = {
+  t: (arg0: string, arg1: Record<string, unknown>) => string;
+  actions: ActionHighlightListAction;
+  plan: PlanContextFragment;
+  displayHeader?: boolean;
 };
 
-function ActionCardList({ t, actions, plan, displayHeader }) {
+function ActionCardList(props: ActionCardListProps) {
+  const { t, actions, plan, displayHeader } = props;
   // Components which use the EmbedContext support embedding
   const embed = useContext(EmbedContext);
 
   return (
     <Row>
       {displayHeader && (
         <ListHeader xs="12">
-          <h2>{t('recently-updated-actions', getActionTermContext(plan))}</h2>
+          <h2>
+            {t('recently-updated-actions', getActionTermContext(plan) || {})}
+          </h2>
         </ListHeader>
       )}
-      {actions.map((item) => (
-        <CardContainer
+      {actions?.map((item) => (
+        <StyledCardContainer
           xs="12"
           md="6"
           lg="4"
@@ -137,15 +133,15 @@ function ActionCardList({ t, actions, plan, displayHeader }) {
           <ActionHighlightCard
             action={item}
             imageUrl={getActionImage(plan, item)?.small.src}
-            hideIdentifier={plan.hideActionIdentifiers}
+            hideIdentifier={plan.hideActionIdentifiers || false}
           />
-        </CardContainer>
+        </StyledCardContainer>
       ))}
       {!embed.active && (
         <Col xs="12" className="mt-5 mb-5">
           <ActionListLink>
             <Button color="primary" tag="a">
-              {t('see-all-actions', getActionTermContext(plan))}{' '}
+              {t('see-all-actions', getActionTermContext(plan) || {})}{' '}
               <Icon name="arrowRight" />
             </Button>
           </ActionListLink>
@@ -155,26 +151,22 @@ function ActionCardList({ t, actions, plan, displayHeader }) {
   );
 }
 
-ActionCardList.propTypes = {
-  t: PropTypes.func.isRequired,
-  actions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-  displayHeader: PropTypes.bool,
-  plan: PropTypes.shape({
-    identifier: PropTypes.string,
-  }).isRequired,
+type ActionHighlightsListProps = {
+  plan: PlanContextFragment;
 };
 
-function ActionHighlightsList(props) {
-  const { plan, count, displayHeader } = props;
+function ActionHighlightsList(props: ActionHighlightsListProps) {
+  const { plan } = props;
 
   const { t } = useTranslation();
 
   const queryParams = {
     plan: plan.identifier,
-    first: count ?? 6,
+    first: 6,
     orderBy: '-updatedAt',
   };
 
+  // TODO: Convert to useQuery
   return (
     <Query query={GET_ACTION_LIST} variables={queryParams}>
       {({ data, loading, error }) => {
@@ -183,25 +175,10 @@ function ActionHighlightsList(props) {
           return (
             <p>{t('error-loading-actions', getActionTermContext(plan))}</p>
           );
-        return (
-          <ActionCardList
-            t={t}
-            actions={data.planActions}
-            plan={plan}
-            displayHeader={displayHeader ?? true}
-          />
-        );
+        return <ActionCardList t={t} actions={data.planActions} plan={plan} />;
       }}
     </Query>
   );
 }
 
-ActionHighlightsList.propTypes = {
-  count: PropTypes.number,
-  displayHeader: PropTypes.bool,
-  plan: PropTypes.shape({
-    identifier: PropTypes.string,
-  }).isRequired,
-};
-
 export default ActionHighlightsList;

components/contentblocks/IndicatorHighlightsBlock.tsx

@@ -23,7 +23,7 @@ const IndicatorHighlightsBlock = ({ id = '' }: CommonContentBlockProps) => {
   return (
     <IndicatorsSection id={id} className="indicators-section">
       <Container>
-        <IndicatorHighlightsList plan={plan} />
+        <IndicatorHighlightsList planIdentifier={plan.identifier} />
       </Container>
     </IndicatorsSection>
   );

components/indicators/IndicatorHighlightCard.js → components/indicators/IndicatorHighlightCard.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Card, CardImgOverlay, CardBody, CardTitle } from 'reactstrap';
 import styled from 'styled-components';
-import { getActionTermContext, withTranslation } from '../../common/i18n';
-import { IndicatorLink } from '../../common/links';
+import { getActionTermContext, withTranslation } from 'common/i18n';
+import { IndicatorLink } from 'common/links';
 import { usePlan } from 'context/plan';
 import { readableColor } from 'polished';
 
@@ -96,8 +95,16 @@ function beautifyValue(x) {
   return displayNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
 }
 
-function IndicatorHighlightCard(props) {
-  const { t, level, objectid, name, value, unit } = props;
+type IndicatorHighlightCardProps = {
+  level: string | null | undefined;
+  objectid: string;
+  name: string;
+  value?: number;
+  unit?: string;
+};
+
+function IndicatorHighlightCard(props: IndicatorHighlightCardProps) {
+  const { t, level, objectid, name, value = null, unit = '' } = props;
   const plan = usePlan();
 
   // FIXME: It sucks that we only use the context for the translation key 'action'
@@ -108,7 +115,6 @@ function IndicatorHighlightCard(props) {
 
   return (
     <StyledCard>
-      {/* TODO: animate transition */}
       <IndicatorLink id={objectid} prefetch={false}>
         <a>
           <IndicatorBg level={level} />
@@ -132,17 +138,4 @@ function IndicatorHighlightCard(props) {
   );
 }
 
-IndicatorHighlightCard.defaultProps = {
-  value: null,
-  unit: '-',
-};
-
-IndicatorHighlightCard.propTypes = {
-  level: PropTypes.string.isRequired,
-  objectid: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.number,
-  unit: PropTypes.string,
-};
-
 export default withTranslation('common')(IndicatorHighlightCard);