Merge pull request #53 from codersagainstcovidorg/close-info-box

Adds ability to close InfoPrompt & save that choice in localStorage
codersagainstcovidorg · Mar 31, 2020 · 7084fbc · 7084fbc
2 parents 5efd8a5 + 6481503
commit 7084fbc
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 42 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,7 +14,7 @@ import Header from './Components/Header';
 import LegalModal from './Components/LegalModal';
 import theme from './theme';
 import getViewportHeight from './utils/getViewportHeight';
-import { trackLocationPrompt, trackDrawerStatus } from './utils/tracking';
+import { trackDrawerStatus, trackLocationPrompt } from './utils/tracking';
 
 // Layout Component styles
 const LayoutContainer = styled.div`

diff --git a/src/Components/DataUpdateSnackbar.tsx b/src/Components/DataUpdateSnackbar.tsx
@@ -36,7 +36,7 @@ const DataUpdateSnackbar = () => {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         disableWindowBlurListener={false}
       >
         <MuiAlert

diff --git a/src/Components/Header.tsx b/src/Components/Header.tsx
@@ -1,21 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
-import {
-  Toolbar,
-  IconButton,
-  AppBar,
-  Typography,
-  Link,
-} from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
+import Alert from '@material-ui/lab/Alert';
+import AlertTitle from '@material-ui/lab/AlertTitle';
 import MenuIcon from '@material-ui/icons/Menu';
+import Link from '@material-ui/core/Link';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import AppBar from '@material-ui/core/AppBar';
+import Typography from '@material-ui/core/Typography';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
 import { ADD_LOCATION_FORM } from '../constants';
 
-const InfoPrompt = styled(Alert)`
-  border-radius: 0 !important;
-  min-height: 63px;
-`;
-
 const HeaderToolbar = styled(Toolbar)`
   padding: 0 7px;
   font-family: 'Roboto,Helvetica,Arial,sans-serif';
@@ -28,44 +23,78 @@ const DrawerIcon = styled(MenuIcon)`
   margin-left: -4px;
 `;
 
+const InfoPrompt = styled(Alert)`
+  border-radius: 0 !important;
+  position: relative;
+  min-height: 63px;
+`;
+
 const HeaderText = styled(Typography)`
   font-size: 1.3rem;
 `;
 
+const CloseButton = styled(IconButton)`
+  position: absolute !important;
+  right: 5px;
+  top: 5px;
+`;
+
 const AlertText = styled.div``;
 
+// NOTE: Update this date when changing info text, so new versions will appear closed earlier
+const LAST_VERSION =
+  'Sun Mar 29 2020 18:50:03 GMT-0400 (Eastern Daylight Time)';
+const LOCAL_STORAGE_KEY = 'InfoPrompt';
+
 type HeaderProps = {
   showToolbar: boolean;
   toggleDrawer: Function;
 };
 
-const Header = ({ showToolbar, toggleDrawer }: HeaderProps) => (
-  <AppBar position="static">
-    {showToolbar && (
-      <HeaderToolbar variant="dense">
-        <IconButton onClick={() => toggleDrawer()}>
-          <DrawerIcon />
-        </IconButton>
-
-        <HeaderText variant="h5">Find Covid Testing</HeaderText>
-      </HeaderToolbar>
-    )}
-
-    <InfoPrompt variant="filled" severity="info">
-      <AlertTitle>
-        Thanks to student volunteers at Georgetown School of Medicine, 150+
-        locations were added across eleven (11) states.
-      </AlertTitle>
-      <AlertText>
-        Next update will add new sites for 10+ states. You can help by
-        <Link href={ADD_LOCATION_FORM} target="_blank" rel="noopener">
-          &nbsp;adding a new location
-        </Link>
-        .
-      </AlertText>
-    </InfoPrompt>
-  </AppBar>
-);
+const Header = ({ showToolbar, toggleDrawer }: HeaderProps) => {
+  const savedValue = localStorage.getItem(LOCAL_STORAGE_KEY);
+  const hasBeenClosed = savedValue === LAST_VERSION;
+  const [closed, setClosed] = React.useState<boolean>(hasBeenClosed);
+
+  const handleClose = () => {
+    setClosed(true);
+    localStorage.setItem(LOCAL_STORAGE_KEY, LAST_VERSION);
+  };
+
+  return (
+    <AppBar position="static">
+      {showToolbar && (
+        <HeaderToolbar variant="dense">
+          <IconButton onClick={() => toggleDrawer()}>
+            <DrawerIcon />
+          </IconButton>
+
+          <HeaderText variant="h5">Find Covid Testing</HeaderText>
+        </HeaderToolbar>
+      )}
+
+      {!closed && (
+        <InfoPrompt variant="filled" severity="info">
+          <AlertTitle>
+            Thanks to student volunteers at Georgetown School of Medicine, 150+
+            locations were added across eleven (11) states.
+          </AlertTitle>
+          <AlertText>
+            Next update will add new sites for 10+ states. You can help by{' '}
+            <Link href={ADD_LOCATION_FORM} target="_blank" rel="noopener">
+              adding a new location
+            </Link>
+            .
+          </AlertText>
+
+          <CloseButton onClick={handleClose} size="small" color="inherit">
+            <CloseRoundedIcon />
+          </CloseButton>
+        </InfoPrompt>
+      )}
+    </AppBar>
+  );
+};
 
 Header.defaultProps = {
   showToolbar: false,