Consent Mechanism (CivicTechTO#51)

Adds frontend consent mechanism, allowing user to specifically opt-in to viewing unidentified remains.
thomaslillo · Oct 10, 2023 · 990d28f · 990d28f
2 parents 8781503 + 005e3a5
commit 990d28f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 23 deletions.
diff --git a/missing-persons-viewer-vite/README.md b/missing-persons-viewer-vite/README.md
@@ -21,8 +21,8 @@ This repository has been built with the following technologies:
 
 ## TODO
 
-- [ ] Change data source to rely on new branch (newest-data)
-- [ ] Yeet former FE code into /dev/null 🌋
+- [x] Change data source to rely on new branch (newest-data)
+- [x] Yeet former FE code into /dev/null 🌋
 
 ### Missing Persons list view
 
@@ -35,4 +35,4 @@ This repository has been built with the following technologies:
 
 - [ ] Filter missing persons associated with unidentified remains
 - [ ] Search filter unidentified remains
-- [ ] Content warning/opt-in to see images of unidentified remains
+- [x] Content warning/opt-in to see images of unidentified remains
diff --git a/missing-persons-viewer-vite/src/App/pages/MissingPersons/MissingPersons.tsx b/missing-persons-viewer-vite/src/App/pages/MissingPersons/MissingPersons.tsx
@@ -26,6 +26,7 @@ export const MissingPersons = ({
       <section>
         <Text as="h3"> Filters:</Text>
         <Flex css={{ gap: '1rem' }}>
+          {/* Only show missing persons with potentially unidentified remains. */}
           <Flex
             as="label"
             css={{ gap: '1ch', alignItems: 'center' }}
@@ -35,7 +36,7 @@ export const MissingPersons = ({
               type="checkbox"
               name="showOnlyMatching"
               id="showOnlyMatching"
-              checked={searchParams.get('showOnlyMatching') === 'true'}
+              defaultChecked={searchParams.get('showOnlyMatching') === 'true'}
               onClick={() => {
                 setSearchParams((previous) => {
                   const previousEntries = Object.fromEntries(previous);
@@ -49,7 +50,7 @@ export const MissingPersons = ({
                 });
               }}
             />
-            Show only matching
+            Show only if matching remains available
           </Flex>
         </Flex>
       </section>

diff --git a/missing-persons-viewer-vite/src/App/pages/UnidentifiedPersons/UnidentifiedPersons.tsx b/missing-persons-viewer-vite/src/App/pages/UnidentifiedPersons/UnidentifiedPersons.tsx
@@ -1,4 +1,8 @@
-import { ScrollRestoration, useLoaderData } from 'react-router-dom';
+import {
+  ScrollRestoration,
+  useLoaderData,
+  useSearchParams,
+} from 'react-router-dom';
 
 import { Flex, Grid } from 'src/shared/components/Layout';
 import { Image } from 'src/shared/components/Media';
@@ -58,10 +62,17 @@ export const UnidentifiedPersons = () => {
 
   const normalizedName = normalizeName(name);
 
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const params = new URLSearchParams(searchParams);
+
+  console.log({ params });
+
   return (
     <>
       {/* Reset scroll position when navigating to page */}
       <ScrollRestoration />
+
       <Grid
         as="main"
         css={{
@@ -84,26 +95,49 @@ export const UnidentifiedPersons = () => {
           <Grid as="section">
             <h1>{normalizedName}</h1>
 
+            <section>
+              <Text as="h3"> Filters:</Text>
+              <Flex css={{ gap: '1rem' }}>
+                {/* Only show unidentified remains if user opts in. */}
+                <Flex
+                  as="label"
+                  css={{ gap: '1ch', alignItems: 'center' }}
+                  htmlFor="showUnidentifiedRemains"
+                >
+                  <input
+                    type="checkbox"
+                    name="showUnidentifiedRemains"
+                    id="showUnidentifiedRemains"
+                    defaultChecked={
+                      searchParams.get('showUnidentifiedRemains') === 'true'
+                    }
+                    onClick={() => {
+                      setSearchParams((previous) => {
+                        const previousEntries = Object.fromEntries(previous);
+                        const showUnidentifiedRemains =
+                          previousEntries.showUnidentifiedRemains === 'true';
+
+                        return {
+                          ...previousEntries,
+                          showUnidentifiedRemains: String(
+                            !showUnidentifiedRemains,
+                          ),
+                        };
+                      });
+                    }}
+                  />
+                  Display unidentified remains
+                </Flex>
+              </Flex>
+            </section>
+
             <Text as="a" href={caseURL}>
               <Semibold>{caseRef}</Semibold>
             </Text>
             <Text as="small">Missing since: {missingSince}</Text>
           </Grid>
 
-          <img
-            src={
-              images && images?.length > 0
-                ? images?.[0]
-                : 'https://via.placeholder.com/250?text=Not+Available'
-            }
-            alt={`A photo of ${normalizedName}`}
-            style={{
-              width: '250px',
-              height: '250px',
-              objectFit: 'cover',
-            }}
-            loading="lazy"
-          />
+          <Image src={images?.[0]} alt={`A photo of ${normalizedName}`} />
 
           <Text as="p" css={{ maxWidth: '70ch' }}>
             {caseDesc}
@@ -200,9 +234,9 @@ export const UnidentifiedPersons = () => {
                     <Image
                       // Default to a placeholder image in dev (for maintaining developer sanity)
                       src={
-                        import.meta.env.PROD
+                        searchParams.get('showUnidentifiedRemains') === 'true'
                           ? images[0]
-                          : 'https://placekitten.com/250/250'
+                          : 'https://placehold.co/600x400?text=Image+Hidden'
                       }
                       alt="Unidentified remains"
                     />

diff --git a/missing-persons-viewer-vite/src/shared/components/Media/Image.tsx b/missing-persons-viewer-vite/src/shared/components/Media/Image.tsx
@@ -13,7 +13,7 @@ export const BaseImage = styled('img', {
 });
 
 export const Image = ({
-  src = 'https://via.placeholder.com/250?text=Not+Available',
+  src = 'https://placehold.co/600x400?text=Not+Available',
   alt,
   css,
 }: ImageProps) => {