feat(datatrak): RN-1467: survey submission sync indicator

packages/datatrak-web/src/views/LandingPage/RecentSurveysSection.tsx

@@ -3,13 +3,15 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
+import { Typography } from '@material-ui/core';
 import React from 'react';
 import styled from 'styled-components';
-import { Typography } from '@material-ui/core';
 import { SurveyIcon, Tile, LoadingTile } from '../../components';
+
 import { useCurrentUserRecentSurveys } from '../../api';
-import { SectionHeading } from './SectionHeading';
+import { TileProps } from '../../components/Tile';
 import { useIsMobile } from '../../utils';
+import { SectionHeading } from './SectionHeading';
 
 const RecentSurveys = styled.section`
   grid-area: recentSurveys;
@@ -42,8 +44,41 @@ const ScrollBody = styled.div<{
   }
 `;
 
-export const RecentSurveysSection = () => {
+interface RecentSurveyTileProps extends TileProps {
+  surveyName: string;
+  surveyCode: string;
+  countryName: string;
+  countryCode: string;
+}
+const RecentSurveyTile = ({
+  surveyName,
+  surveyCode,
+  countryName,
+  countryCode,
+  ...props
+}: RecentSurveyTileProps) => {
   const isMobile = useIsMobile();
+  const tooltip = isMobile ? (
+    <>
+      {surveyName}
+      <br />
+      {countryName}
+    </>
+  ) : null;
+
+  return (
+    <Tile
+      Icon={SurveyIcon}
+      text={countryName}
+      title={surveyName}
+      to={`/survey/${countryCode}/${surveyCode}/1`}
+      tooltip={tooltip}
+      {...props}
+    />
+  );
+};
+
+export const RecentSurveysSection = () => {
   const { data: recentSurveys = [], isSuccess, isLoading } = useCurrentUserRecentSurveys();
   const hasMoreThanOneSurvey = recentSurveys.length > 1;
 
@@ -52,34 +87,16 @@ export const RecentSurveysSection = () => {
       <SectionHeading>Top surveys</SectionHeading>
       <ScrollBody $hasMoreThanOneSurvey={hasMoreThanOneSurvey}>
         {isLoading && <LoadingTile />}
-        {isSuccess && (
-          <>
-            {recentSurveys?.length ? (
-              recentSurveys.map(({ surveyName, surveyCode, countryName, countryCode }) => (
-                <Tile
-                  key={`${surveyCode}-${countryName}`}
-                  title={surveyName}
-                  text={countryName}
-                  tooltip={
-                    !isMobile ? (
-                      <>
-                        {surveyName}
-                        <br />
-                        {countryName}
-                      </>
-                    ) : null
-                  }
-                  Icon={SurveyIcon}
-                  to={`/survey/${countryCode}/${surveyCode}/1`}
-                />
-              ))
-            ) : (
-              <Typography variant="body2" color="textSecondary">
-                No recent surveys to display
-              </Typography>
-            )}
-          </>
-        )}
+        {isSuccess &&
+          (recentSurveys?.length > 0 ? (
+            recentSurveys.map(props => (
+              <RecentSurveyTile key={`${props.surveyCode}-${props.countryName}`} {...props} />
+            ))
+          ) : (
+            <Typography variant="body2" color="textSecondary">
+              No recent surveys to display
+            </Typography>
+          ))}
       </ScrollBody>
     </RecentSurveys>
   );

packages/datatrak-web/src/views/LandingPage/SurveyResponsesSection.tsx

@@ -38,46 +38,46 @@ const ScrollBody = styled.div`
   }
 `;
 
+const SurveyResponseTile = ({ id, surveyName, dataTime, entityName, countryName }) => {
+  const isMobile = useIsMobile();
+  const tooltip = isMobile && (
+    <>
+      {surveyName}
+      <br />
+      {entityName}
+    </>
+  );
+
+  return (
+    <Tile
+      Icon={SurveyTickIcon}
+      text={entityName}
+      title={surveyName}
+      to={`?responseId=${id}`}
+      tooltip={tooltip}
+    >
+      {countryName}, {displayDate(dataTime)}
+    </Tile>
+  );
+};
+
 export const SurveyResponsesSection = () => {
   const { data: recentSurveyResponses, isSuccess, isLoading } = useCurrentUserSurveyResponses();
-  const isMobile = useIsMobile();
   const { project } = useCurrentUserContext();
 
   return (
     <Container>
       <SectionHeading>Submission history</SectionHeading>
       <ScrollBody>
-        {isLoading && <LoadingTile count={15} />}
-        {isSuccess && (
-          <>
-            {recentSurveyResponses?.length > 0 ? (
-              recentSurveyResponses.map(({ id, surveyName, dataTime, entityName, countryName }) => (
-                <Tile
-                  key={id}
-                  title={surveyName}
-                  text={entityName}
-                  to={`?responseId=${id}`}
-                  tooltip={
-                    !isMobile ? (
-                      <>
-                        {surveyName}
-                        <br />
-                        {entityName}
-                      </>
-                    ) : null
-                  }
-                  Icon={SurveyTickIcon}
-                >
-                  {countryName}, {displayDate(dataTime)}
-                </Tile>
-              ))
-            ) : (
-              <Typography variant="body2" color="textSecondary">
-                No recent surveys responses to display for {project?.name || 'project'}
-              </Typography>
-            )}{' '}
-          </>
-        )}
+        {isLoading && <LoadingTile />}
+        {isSuccess &&
+          (recentSurveyResponses?.length > 0 ? (
+            recentSurveyResponses.map(props => <SurveyResponseTile key={props.id} {...props} />)
+          ) : (
+            <Typography variant="body2" color="textSecondary">
+              No recent surveys responses to display for {project?.name || 'project'}
+            </Typography>
+          ))}
       </ScrollBody>
     </Container>
   );