Fix age display bug, closes #2840

* Modified age parsing function
* Fixed other found bug: when user had filters set and refreshed
  the page there was a race condition on two queries to the DB one
  with the filters and one without. Because of that sometimes the results
  were filtered and sometimes not. This is now also fixed.

verification/curator-service/ui/cypress/e2e/components/BulkCaseForm.spec.ts

@@ -62,7 +62,7 @@ describe('Bulk upload form', function () {
         cy.contains('VERIFIED');
 
         // Demographics
-        cy.contains('41-45');
+        cy.contains('41 - 45');
         cy.contains('Male');
         cy.contains('Accountant');
         cy.contains('Bangladeshi');

verification/curator-service/ui/src/components/App/index.tsx

@@ -194,6 +194,8 @@ function ProfileMenu(props: { user: User; version: string }): JSX.Element {
                 <MenuItem
                     onClick={() => {
                         dispatch(logout());
+                        // remove previous search query from local storage
+                        localStorage.removeItem('searchQuery');
                     }}
                     className={classes.link}
                 >

verification/curator-service/ui/src/components/LinelistTable/helperFunctions.ts

@@ -57,13 +57,3 @@ export const createData = (
         exclusionData,
     };
 };
-
-export const parseAge = (
-    ageStart: number | undefined,
-    ageEnd: number | undefined,
-) => {
-    if (!ageStart || !ageEnd) return '';
-    if (ageStart === ageEnd) return ageStart?.toString() ?? '';
-
-    return `${ageStart} - ${ageEnd}`;
-};

verification/curator-service/ui/src/components/LinelistTable/index.tsx

@@ -18,7 +18,6 @@ import {
     selectTotalCases,
     selectRowsPerPage,
     selectSort,
-    selectSearchQuery,
     selectExcludeCasesDialogOpen,
     selectCasesSelected,
     selectDeleteCasesDialogOpen,
@@ -45,10 +44,10 @@ import Button from '@mui/material/Button';
 
 import { nameCountry } from '../util/countryNames';
 import renderDate, { renderDateRange } from '../util/date';
-import { createData, labels, parseAge } from './helperFunctions';
+import { createData, labels } from './helperFunctions';
 import { LoaderContainer, StyledAlert } from './styled';
 import { URLToSearchQuery } from '../util/searchQuery';
-import { hasAnyRole } from '../util/helperFunctions';
+import { hasAnyRole, parseAgeRange } from '../util/helperFunctions';
 import { Helmet } from 'react-helmet';
 
 import Pagination from './Pagination';
@@ -80,7 +79,6 @@ const LinelistTable = () => {
     const error = useAppSelector(selectError);
     const rowsPerPage = useAppSelector(selectRowsPerPage);
     const sort = useAppSelector(selectSort);
-    const searchQuery = useAppSelector(selectSearchQuery);
     const user = useAppSelector(selectUser);
     const excludeCasesDialogOpen = useAppSelector(selectExcludeCasesDialogOpen);
     const casesSelected = useAppSelector(selectCasesSelected);
@@ -91,6 +89,8 @@ const LinelistTable = () => {
     const refetchData = useAppSelector(selectRefetchData);
     const rowsAcrossPagesSelected = useAppSelector(selectRowsAcrossPages);
 
+    const searchQuery = location.search;
+
     // Build query and fetch data
     useEffect(() => {
         const query =
@@ -130,10 +130,7 @@ const LinelistTable = () => {
                 parseFloat(data.location?.geometry.latitude.toFixed(4)) || 0,
                 parseFloat(data.location?.geometry.longitude.toFixed(4)) || 0,
                 data.demographics?.nationalities || '',
-                parseAge(
-                    data.demographics?.ageRange?.start,
-                    data.demographics?.ageRange?.end,
-                ),
+                parseAgeRange(data.demographics?.ageRange),
                 data.demographics?.gender || '',
                 data.importedCase?.outcome ||
                     data.events?.find((event) => event.name === 'outcome')

verification/curator-service/ui/src/components/ViewCase.test.tsx

@@ -58,7 +58,7 @@ it('loads and displays case', async () => {
     expect(getByText('2020-04-13')).toBeInTheDocument();
     // Demographics.
     expect(getByText('Non-binary/Third gender')).toBeInTheDocument();
-    expect(getByText('50-59')).toBeInTheDocument();
+    expect(getByText('50 - 59')).toBeInTheDocument();
     expect(getByText('Horse breeder')).toBeInTheDocument();
     expect(getByText('Swedish')).toBeInTheDocument();
     expect(getByText('Asian')).toBeInTheDocument();

verification/curator-service/ui/src/components/ViewCase.tsx

@@ -28,6 +28,7 @@ import { selectFilterBreadcrumbs } from '../redux/app/selectors';
 import { selectSearchQuery } from '../redux/linelistTable/selectors';
 import Chip from '@mui/material/Chip';
 import { nameCountry } from './util/countryNames';
+import { parseAgeRange } from './util/helperFunctions';
 
 const styles = makeStyles((theme) => ({
     errorMessage: {
@@ -128,15 +129,6 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
-function ageRange(range?: { start: number; end: number }): string {
-    if (!range) {
-        return '';
-    }
-    return range.start === range.end
-        ? `${range.start}`
-        : `${range.start}-${range.end}`;
-}
-
 function CaseDetails(props: CaseDetailsProps): JSX.Element {
     const theme = useTheme();
     const showNavMenu = useMediaQuery(theme.breakpoints.up('sm'));
@@ -386,7 +378,9 @@ function CaseDetails(props: CaseDetailsProps): JSX.Element {
                     <Grid container className={classes.grid}>
                         <RowHeader title="Age" />
                         <RowContent
-                            content={ageRange(props.c.demographics?.ageRange)}
+                            content={parseAgeRange(
+                                props.c.demographics?.ageRange,
+                            )}
                         />
 
                         <RowHeader title="Gender" />

verification/curator-service/ui/src/components/util/helperFunctions.ts

@@ -29,3 +29,15 @@ export const hasAnyRole = (
     }
     return user?.roles?.some((r: string) => requiredRoles.includes(r));
 };
+
+export const parseAgeRange = (range?: {
+    start: number;
+    end: number;
+}): string => {
+    if (!range) {
+        return '';
+    }
+    return range.start === range.end
+        ? `${range.start}`
+        : `${range.start} - ${range.end}`;
+};