Mobile is actually mobile (#457)

* remove react detect device * fix resource issue * fix non closing modal * remove unused * lint * remove redux connect * fix toolbar * remove unused * maybe now * update selected tap check * fix prevent location crash
phlask · Jun 26, 2024 · 9536e6a · 9536e6a
1 parent 2ac543b
commit 9536e6a
Show file tree

Hide file tree

Showing 53 changed files with 1,101 additions and 1,969 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,7 +6,7 @@ cypress/
 # Build directory
 docker/
 build/
-src/serviceWorker
+./src/serviceWorker
 
 # Unused files
 Legend.js

diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,7 +3,8 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "prettier",
-    "plugin:react/jsx-runtime"
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended"
   ],
   "rules": {
     "react/prop-types": 0,

diff --git a/jsconfig.json b/jsconfig.json
@@ -1,13 +1,8 @@
 {
-    "include": [
-        "src/**/*"
-    ],
-    "compilerOptions": {
-        "jsx": "react-jsx",
-        "target": "es6",
-        "baseUrl": "./src"
-    },
-    "exclude": [
-        "node_modules"
-    ]
-}
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "es6",
+    "baseUrl": "./src"
+  }
+}
diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.3.0",
     "react-burger-menu": "^3.0.6",
-    "react-device-detect": "^2.2.2",
     "react-div-100vh": "^0.7.0",
     "react-dom": "^17.0.0",
     "react-ga4": "^2.0.0",

diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
 
     <!--The font Billy likes-->
     <link
-      href="https://fonts.googleapis.com/css?family=Exo+2&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Exo:wght@700&family=Inter:wght@500;600;700&display=swap"
       rel="stylesheet"
     />
 

diff --git a/src/actions/actions.js b/src/actions/actions.js
@@ -1,5 +1,6 @@
+import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
 import { initializeApp } from 'firebase/app';
-import { getDatabase, onValue, ref } from 'firebase/database';
+import { getDatabase, get, ref } from 'firebase/database';
 import { resourcesConfig } from '../firebase/firebaseConfig';
 import { testData } from '../firebase/functionalTest';
 
@@ -27,25 +28,18 @@ export const resetFilterFunction = () => ({
   type: RESET_FILTER_FUNCTION
 });
 
-export const GET_RESOURCES_SUCCESS = 'GET_RESOURCES_SUCCESS';
-export const getResourcesSuccess = allResources => ({
-  type: GET_RESOURCES_SUCCESS,
-  allResources
-});
+export const getResources = createAsyncThunk(
+  'fetch-resources',
+  async (_, { dispatch }) => {
+    const app = initializeApp(resourcesConfig);
+    const database = getDatabase(app);
 
-export const getResources = () => dispatch => {
-  const app = initializeApp(resourcesConfig);
-  const database = getDatabase(app);
-  return process.env.REACT_APP_CYPRESS_TEST
-    ? dispatch(getResourcesSuccess(testData))
-    : onValue(
-        ref(database, '/'),
-        snapshot => {
-          dispatch(getResourcesSuccess(Object.values(snapshot.val())));
-        },
-        { onlyOnce: true }
-      );
-};
+    if (process.env.REACT_APP_CYPRESS_TEST) return testData;
+    const snapshot = await get(ref(database, '/'));
+    const results = snapshot.val();
+    return Object.values(results) || [];
+  }
+);
 
 // Handles the case where a new resource is added from the submission form
 export const PUSH_NEW_RESOURCE = 'PUSH_NEW_RESOURCE';
@@ -65,30 +59,10 @@ export const setMapCenter = coords => ({
   type: SET_MAP_CENTER,
   coords
 });
-
-// export const TOGGLE_SEARCH_BAR = 'TOGGLE_SEARCH_BAR';
-// export const toggleSearchBar = isShown => ({
-//   type: TOGGLE_SEARCH_BAR,
-//   isShown
-// });
-
-// export const TOGGLE_FILTER_MODAL = 'TOGGLE_FILTER_MODAL';
-// export const toggleFilterModal = isShown => ({
-//   type: TOGGLE_FILTER_MODAL,
-//   isShown
-// });
-
-export const TOGGLE_INFO_WINDOW = 'TOGGLE_INFO_WINDOW';
-export const toggleInfoWindow = isShown => ({
-  type: TOGGLE_INFO_WINDOW,
-  isShown
-});
+export const toggleInfoWindow = createAction('TOGGLE_INFO_WINDOW');
 
 export const TOGGLE_INFO_WINDOW_CLASS = 'TOGGLE_INFO_WINDOW_CLASS';
-export const toggleInfoWindowClass = isShown => ({
-  type: TOGGLE_INFO_WINDOW_CLASS,
-  isShown
-});
+export const toggleInfoWindowClass = createAction('TOGGLE_INFO_WINDOW_CLASS');
 
 export const TOGGLE_INFO_EXPANDED = 'TOGGLE_INFO_EXPANDED';
 export const toggleInfoExpanded = isExpanded => ({
@@ -112,29 +86,17 @@ export const setSelectedPlace = selectedPlace => ({
   selectedPlace
 });
 
-export const SET_TOOLBAR_MODAL = 'SET_TOOLBAR_MODAL';
-export const setToolbarModal = toolbarModal => ({
-  type: SET_TOOLBAR_MODAL,
-  mode: toolbarModal
-});
+export const setToolbarModal = createAction('SET_TOOLBAR_MODAL');
 
 export const TOOLBAR_MODAL_NONE = 'TOOLBAR_MODAL_NONE';
 export const TOOLBAR_MODAL_RESOURCE = 'TOOLBAR_MODAL_RESOURCE';
 export const TOOLBAR_MODAL_FILTER = 'TOOLBAR_MODAL_FILTER';
 export const TOOLBAR_MODAL_SEARCH = 'TOOLBAR_MODAL_SEARCH';
 export const TOOLBAR_MODAL_CONTRIBUTE = 'TOOLBAR_MODAL_CONTRIBUTE';
 
-export const TOGGLE_RESOURCE_TYPE = 'TOGGLE_RESOURCE_TYPE';
-export const toggleResourceType = resourceType => ({
-  type: TOGGLE_RESOURCE_TYPE,
-  mode: resourceType
-});
+export const toggleResourceType = createAction('TOGGLE_RESOURCE_TYPE');
 
-export const TOGGLE_RESOURCE_MENU = 'TOGGLE_RESOURCE_MENU';
-export const toggleResourceMenu = isShown => ({
-  type: TOGGLE_RESOURCE_MENU,
-  isShown
-});
+export const toggleResourceMenu = createAction('TOGGLE_RESOURCE_MENU');
 
 export const CHANGE_RESOURCE_TYPE = 'CHANGE_RESOURCE_TYPE';
 export const changeResourceType = resourceType => ({

diff --git a/src/components/AddResourceModal/AddBathroom/AddBathroom.jsx b/src/components/AddResourceModal/AddBathroom/AddBathroom.jsx
@@ -1,16 +1,16 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { geocode, setDefaults, RequestType } from 'react-geocode';
 import styles from '../AddResourceModal.module.scss';
 import { useForm } from 'react-hook-form';
 import { Box, CardContent, Grid, Typography, IconButton } from '@mui/material';
 
-import { isMobile } from 'react-device-detect';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 
 import PageOne from './PageOne';
 import PageTwo from './PageTwo';
+import useIsMobile from 'hooks/useIsMobile';
 
 function AddBathroom({
   prev,
@@ -35,6 +35,7 @@ function AddBathroom({
   checkboxChangeHandler,
   textFieldChangeHandler
 }) {
+  const isMobile = useIsMobile();
   const userLocation = useSelector(state => state.filterMarkers.userLocation);
 
   useEffect(() => {

diff --git a/src/components/AddResourceModal/AddBathroom/PageOne.jsx b/src/components/AddResourceModal/AddBathroom/PageOne.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ImageUploader from 'react-images-upload';
 import PlacesAutocomplete from 'react-places-autocomplete';
-import { geocode, setDefaults, RequestType } from 'react-geocode';
+import { geocode, RequestType } from 'react-geocode';
 import styles from '../AddResourceModal.module.scss';
 import { Controller } from 'react-hook-form';
 import {
@@ -14,7 +14,8 @@ import {
 } from '@mui/material';
 import MyLocationIcon from '@mui/icons-material/MyLocation';
 
-import { isMobile } from 'react-device-detect';
+import useIsMobile from 'hooks/useIsMobile';
+import noop from 'utils/noop';
 
 const ENTRY_TYPE = [
   { entryType: 'Open access', explanation: 'Public site, open to all' },
@@ -39,6 +40,8 @@ const PageOne = ({
   setValue,
   textFieldChangeHandler
 }) => {
+  const isMobile = useIsMobile();
+
   return (
     <>
       {isMobile && (
@@ -142,7 +145,7 @@ const PageOne = ({
                             textFieldChangeHandler(addr);
                             onChange(addr);
                           })
-                          .catch(console.error);
+                          .catch(noop);
                       }
                     }}
                     style={{ backgroundColor: 'white' }}

diff --git a/src/components/AddResourceModal/AddBathroom/PageTwo.jsx b/src/components/AddResourceModal/AddBathroom/PageTwo.jsx
@@ -11,8 +11,7 @@ import {
   TextField,
   ListItem
 } from '@mui/material';
-
-import { isMobile } from 'react-device-detect';
+import useIsMobile from 'hooks/useIsMobile';
 
 const PageTwo = ({
   onDrop,
@@ -28,6 +27,8 @@ const PageTwo = ({
   checkboxChangeHandler,
   textFieldChangeHandler
 }) => {
+  const isMobile = useIsMobile();
+
   const BATHROOM_HELPFUL_INFO = [
     {
       label: 'Wheelchair accessible',

diff --git a/src/components/AddResourceModal/AddFood/AddFood.jsx b/src/components/AddResourceModal/AddFood/AddFood.jsx
@@ -4,13 +4,13 @@ import { geocode, setDefaults, RequestType } from 'react-geocode';
 import styles from '../AddResourceModal.module.scss';
 import { useForm, Controller } from 'react-hook-form';
 import { Card, CardContent, Grid, IconButton, Typography } from '@mui/material';
-import { isMobile } from 'react-device-detect';
 
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 
 import PageOne from './PageOne';
 import PageTwo from './PageTwo';
+import useIsMobile from 'hooks/useIsMobile';
 
 function AddFood({
   prev,
@@ -41,6 +41,7 @@ function AddFood({
   checkboxChangeHandler,
   textFieldChangeHandler
 }) {
+  const isMobile = useIsMobile();
   const getVariableName = variable => Object.keys(variable)[0];
 
   const userLocation = useSelector(state => state.filterMarkers.userLocation);

diff --git a/src/components/AddResourceModal/AddFood/PageOne.jsx b/src/components/AddResourceModal/AddFood/PageOne.jsx
@@ -20,8 +20,8 @@ import {
 } from '@mui/material';
 import MyLocationIcon from '@mui/icons-material/MyLocation';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-import { isMobile } from 'react-device-detect';
+import useIsMobile from 'hooks/useIsMobile';
+import noop from 'utils/noop';
 
 const PageOne = ({
   // state values and handlers for the textfields
@@ -50,6 +50,8 @@ const PageOne = ({
   checkboxChangeHandler,
   textFieldChangeHandler
 }) => {
+  const isMobile = useIsMobile();
+
   const FOOD_TYPE = [
     {
       id: '0',
@@ -213,7 +215,7 @@ const PageOne = ({
                             textFieldChangeHandler(addr);
                             onChange(addr);
                           })
-                          .catch(console.error);
+                          .catch(noop);
                       }
                     }}
                     style={{ backgroundColor: 'white' }}

diff --git a/src/components/AddResourceModal/AddFood/PageTwo.jsx b/src/components/AddResourceModal/AddFood/PageTwo.jsx
@@ -12,7 +12,7 @@ import {
   ListItem
 } from '@mui/material';
 
-import { isMobile } from 'react-device-detect';
+import useIsMobile from 'hooks/useIsMobile';
 
 const PageTwo = ({
   onDrop,
@@ -27,6 +27,8 @@ const PageTwo = ({
   checkboxChangeHandler,
   textFieldChangeHandler
 }) => {
+  const isMobile = useIsMobile();
+
   const FOOD_HELPFUL_INFO = [
     {
       label: 'Wheelchair accessible',

diff --git a/src/components/AddResourceModal/AddForaging/AddForaging.jsx b/src/components/AddResourceModal/AddForaging/AddForaging.jsx
@@ -9,8 +9,7 @@ import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import PageOne from './PageOne';
 import PageTwo from './PageTwo';
-
-import { isMobile } from 'react-device-detect';
+import useIsMobile from 'hooks/useIsMobile';
 
 function AddForaging({
   prev,
@@ -41,6 +40,7 @@ function AddForaging({
   checkboxChangeHandler,
   textFieldChangeHandler
 }) {
+  const isMobile = useIsMobile();
   const userLocation = useSelector(state => state.filterMarkers.userLocation);
 
   useEffect(() => {

diff --git a/src/components/AddResourceModal/AddForaging/PageOne.jsx b/src/components/AddResourceModal/AddForaging/PageOne.jsx
@@ -20,8 +20,8 @@ import {
 } from '@mui/material';
 import MyLocationIcon from '@mui/icons-material/MyLocation';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-import { isMobile } from 'react-device-detect';
+import useIsMobile from 'hooks/useIsMobile';
+import noop from 'utils/noop';
 
 const ENTRY_TYPE = [
   { entryType: 'Open access', explanation: 'Public site, open to all' },
@@ -54,6 +54,8 @@ const PageOne = ({
   checkboxChangeHandler,
   textFieldChangeHandler
 }) => {
+  const isMobile = useIsMobile();
+
   const FORAGE_TYPE = [
     {
       forageType: 'Nut',
@@ -191,7 +193,7 @@ const PageOne = ({
                             textFieldChangeHandler(addr);
                             onChange(addr);
                           })
-                          .catch(console.error);
+                          .catch(noop);
                       }
                     }}
                     style={{ backgroundColor: 'white' }}

diff --git a/src/components/AddResourceModal/AddForaging/PageTwo.jsx b/src/components/AddResourceModal/AddForaging/PageTwo.jsx
@@ -11,8 +11,7 @@ import {
   TextField,
   ListItem
 } from '@mui/material';
-
-import { isMobile } from 'react-device-detect';
+import useIsMobile from 'hooks/useIsMobile';
 
 const PageTwo = ({
   onDrop,
@@ -27,6 +26,8 @@ const PageTwo = ({
   checkboxChangeHandler,
   textFieldChangeHandler
 }) => {
+  const isMobile = useIsMobile();
+
   const FORAGING_HELPFUL_INFO = [
     {
       label: 'Medicinal',