mobile layout preparation

Author: javfg

package-lock.json

@@ -21,6 +21,7 @@
     "lodash": "4.17.15",
     "react": "^16.13.1",
     "react-cookies": "^0.1.1",
+    "react-device-detect": "^1.13.1",
     "react-dom": "^16.13.1",
     "react-ga": "^3.0.0",
     "universal-cookie": "^4.0.3"

package.json

@@ -12,8 +12,7 @@ import config from '../config';
 import bluGreen from '../styles/theme';
 import { encode } from '../utils/utils';
 
-
-export default function Dashboard({ countries, colorMap, dataset, events, lastUpdate}) {
+export default function Dashboard({ countries, colorMap, dataset, events, lastUpdate, mobile }) {
   const [suggestEventModalOpen, setSuggestEventModalOpen] = useState(false);
   const [popoverOpen, setPopoverOpen] = useState(false);
 
@@ -39,40 +38,33 @@ export default function Dashboard({ countries, colorMap, dataset, events, lastUp
         'suggest-event-date': date,
         'suggest-event-description': description,
         'suggest-event-reference': reference,
-      })
+      }),
     });
 
     setPopoverOpen(true);
   };
 
-
   useEffect(() => {
-    const popoverTimeout = setTimeout(() => { setPopoverOpen(false); }, config.popoverTimeout);
+    const popoverTimeout = setTimeout(() => {
+      setPopoverOpen(false);
+    }, config.popoverTimeout);
+
     return () => clearTimeout(popoverTimeout);
   }, [popoverOpen]);
 
-
   const theme = createMuiTheme(bluGreen);
 
-
   return (
     <ThemeProvider theme={theme}>
       <TopBar
         handleClickSuggestEvent={handleClickSuggestEvent}
         lastUpdate={lastUpdate}
+        mobile={mobile}
       />
 
-      <Charts
-        countries={countries}
-        colorMap={colorMap}
-        dataset={dataset}
-      />
+      <Charts countries={countries} colorMap={colorMap} dataset={dataset} />
 
-      <Lists
-        dataset={dataset}
-        events={events}
-        lastUpdate={lastUpdate}
-      />
+      <Lists dataset={dataset} events={events} lastUpdate={lastUpdate} />
 
       <SuggestEventModal
         countries={countries}
@@ -98,6 +90,6 @@ export default function Dashboard({ countries, colorMap, dataset, events, lastUp
 
       <Footer />
       <CookieConsent />
-    </ThemeProvider >
+    </ThemeProvider>
   );
 }

src/components/Dashboard.js

@@ -13,41 +13,37 @@ import MailIcon from '@material-ui/icons/Mail';
 import DataSelector from './Charts/DataSelector';
 import useChartSettings from '../hooks/useChartSettings';
 
-
 const useStyles = makeStyles({
-  caps: { textTransform: 'uppercase'},
+  caps: { textTransform: 'uppercase' },
   button: { padding: 0 },
   reduceheight: { marginTop: '-36px' },
   reducewidth: { width: '56%' },
   toolbar: { justifyContent: 'space-between', padding: '0 8px !important' },
-  title: { textTransform: 'uppercase', fontWeight: 'bold'},
+  title: { textTransform: 'uppercase', fontWeight: 'bold' },
   subtitle: {
     fontSize: '0.8rem',
     textAlign: 'right',
     textTransform: 'uppercase',
-    margin: '-9px 0 0 0'
+    margin: '-9px 0 0 0',
   },
 });
 
-
-function TopBar({ handleClickSuggestEvent, lastUpdate }) {
+function TopBar({ handleClickSuggestEvent, lastUpdate, mobile }) {
   const classes = useStyles();
   const matchesDownMd = useMediaQuery(theme => theme.breakpoints.down('md'));
   const matchesUpMd = useMediaQuery(theme => theme.breakpoints.up('md'));
 
   const { chartSettings, saveChartSettings } = useChartSettings();
   const { showData, showType } = chartSettings;
 
-
   const handleChangeShowData = e => {
-    saveChartSettings({...chartSettings, showData: e.target.value});
+    saveChartSettings({ ...chartSettings, showData: e.target.value });
   };
 
   const handleChangeShowType = e => {
-    saveChartSettings({...chartSettings, showType: e.target.checked ? 'total' : 'daily'});
+    saveChartSettings({ ...chartSettings, showType: e.target.checked ? 'total' : 'daily' });
   };
 
-
   return (
     <AppBar position="sticky">
       <Toolbar className={classes.toolbar}>
@@ -58,38 +54,47 @@ function TopBar({ handleClickSuggestEvent, lastUpdate }) {
           <p className={classes.subtitle}>Last updated: {lastUpdate}</p>
         </div>
 
-        <Grid container className={matchesUpMd ? classes.reducewidth : null } spacing={3}>
-          <Grid item xs={12} lg={8} xl={6}>
-            <DataSelector
-              name="showdata"
-              title="Data"
-              items={['confirmed', 'deaths', 'recovered']}
-              handleChange={handleChangeShowData}
-              selection={showData}
-            />
-          </Grid>
-          <Grid item className={matchesDownMd ? classes.reduceheight : ''} xs={12} lg={4} xl={6}>
-            <DataSelector
-              name="showtype"
-              title="Aggregate"
-              items={['daily', 'total']}
-              handleChange={handleChangeShowType}
-              selection={showType}
-            />
-          </Grid>
-        </Grid>
-        <Button
-          color="inherit"
-          onClick={handleClickSuggestEvent}
-          className={classes.button}
-          startIcon={<MailIcon />}
-        >
-          Suggest an event
-        </Button>
+        {mobile ? null : (
+          <>
+            <Grid container className={matchesUpMd ? classes.reducewidth : null} spacing={3}>
+              <Grid item xs={12} lg={8} xl={6}>
+                <DataSelector
+                  name="showdata"
+                  title="Data"
+                  items={['confirmed', 'deaths', 'recovered']}
+                  handleChange={handleChangeShowData}
+                  selection={showData}
+                />
+              </Grid>
+              <Grid
+                item
+                className={matchesDownMd ? classes.reduceheight : ''}
+                xs={12}
+                lg={4}
+                xl={6}
+              >
+                <DataSelector
+                  name="showtype"
+                  title="Aggregate"
+                  items={['daily', 'total']}
+                  handleChange={handleChangeShowType}
+                  selection={showType}
+                />
+              </Grid>
+            </Grid>
+            <Button
+              color="inherit"
+              onClick={handleClickSuggestEvent}
+              className={classes.button}
+              startIcon={<MailIcon />}
+            >
+              Suggest an event
+            </Button>
+          </>
+        )}
       </Toolbar>
     </AppBar>
   );
 }
 
-
 export default TopBar;

src/components/TopBar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactGA from 'react-ga';
+import { isMobile } from 'react-device-detect';
 import { schemeTableau10 as st } from 'd3';
 
 import Dashboard from './components/Dashboard';
@@ -15,10 +16,9 @@ ReactGA.pageview(window.location.pathname + window.location.search);
 
 const preparedDataset = prepareDataset(dataset);
 const countries = prepareCountries(preparedDataset);
-const colorMap = countries.reduce((acc, c, i) => ({...acc, [c]: st[i % st.length]}), {});
+const colorMap = countries.reduce((acc, c, i) => ({ ...acc, [c]: st[i % st.length] }), {});
 const lastUpdate = dataset[countries[0]][dataset[countries[0]].length - 1].date;
 
-
 // Render app.
 ReactDOM.render(
   <ChartSettingsProvider>
@@ -28,6 +28,8 @@ ReactDOM.render(
       dataset={preparedDataset}
       events={events}
       lastUpdate={lastUpdate}
+      mobile={isMobile}
     />
-  </ChartSettingsProvider>
-, document.getElementById("app"));
+  </ChartSettingsProvider>,
+  document.getElementById('app'),
+);