Refactor constants, remove duplicate configuration code (#2248)

Author: entrotech

client/src/appReducer.js

@@ -1,10 +1,7 @@
-import { getTenantId } from "contexts/siteContext";
-import { TENANT_CONFIG } from "helpers/Constants";
+import { DEFAULT_VIEWPORT } from "helpers/Constants";
 import { createContext, useContext, useMemo, useReducer } from "react";
 
-const tenantId = getTenantId();
-export const DEFAULT_COORDINATES =
-  TENANT_CONFIG[tenantId].defaultViewport.center;
+export const DEFAULT_COORDINATES = DEFAULT_VIEWPORT.center;
 
 function stakeholdersReducer(state, action) {
   switch (action.type) {

client/src/components/Admin/LocationAutocomplete.jsx

@@ -1,6 +1,7 @@
 import { Grid, TextField, Typography } from "@mui/material";
 import { useState } from "react";
 import * as awsService from "../../services/aws-service";
+import { TENANT_ID } from "helpers/Constants";
 
 let latestSearchString = "";
 
@@ -18,9 +19,8 @@ const LocationAutocomplete = (props) => {
       // this request starts executing after the
       // setTimeout delay, this request is stale
       // and we don't want to run it.
-      const tenantId = process.env.REACT_APP_TENANT_ID;
       if (s.length > 8 && s === latestSearchString) {
-        const result = await awsService.autoComplete(s, tenantId);
+        const result = await awsService.autoComplete(s, TENANT_ID);
         setGeocodeResults(result);
       }
     }, 500);

client/src/components/Admin/ParentOrganizations.jsx

@@ -14,7 +14,7 @@ import {
   TextField,
 } from "@mui/material";
 import { Formik } from "formik";
-import { tenantId } from "helpers/Configuration";
+import { TENANT_ID } from "helpers/Constants";
 import { useParentOrganizations } from "hooks/useParentOrganizations";
 import { useEffect, useState } from "react";
 import { Navigate, useLocation } from "react-router-dom";
@@ -101,7 +101,7 @@ function ParentOrganizations(props) {
     setActiveOrg({
       code: "",
       name: "",
-      tenantId,
+      TENANT_ID,
     });
   };
 

client/src/components/Admin/SearchCriteria.jsx

@@ -16,7 +16,7 @@ import {
   Typography,
 } from "@mui/material";
 import { useEffect, useState } from "react";
-import { defaultViewport } from "../../helpers/Configuration";
+import { DEFAULT_VIEWPORT } from "helpers/Constants";
 import AccountAutocomplete from "./AccountAutocomplete";
 import LocationAutocomplete from "./LocationAutocomplete";
 import Label from "./ui/Label";
@@ -49,10 +49,10 @@ const SearchCriteria = ({
   );
 
   const [customLatitude, setCustomLatitude] = useState(
-    defaultViewport.center.latitude
+    DEFAULT_VIEWPORT.center.latitude
   );
   const [customLongitude, setCustomLongitude] = useState(
-    defaultViewport.center.longitude
+    DEFAULT_VIEWPORT.center.longitude
   );
   const [customPlaceName, setCustomPlaceName] = useState("");
 

client/src/components/Admin/TagAdmin.jsx

@@ -15,7 +15,7 @@ import {
   Typography,
 } from "@mui/material";
 import { Formik } from "formik";
-import { tenantId } from "helpers/Configuration";
+import { TENANT_ID } from "helpers/Constants";
 import { useTags } from "hooks/useTags";
 import { useEffect, useState } from "react";
 import { Navigate, useLocation } from "react-router-dom";
@@ -100,7 +100,7 @@ function TagAdmin(props) {
   const handleAddNew = () => {
     setActiveTag({
       name: "",
-      tenantId,
+      TENANT_ID,
     });
   };
 

client/src/components/FoodSeeker/Home.jsx

@@ -15,18 +15,10 @@ import useGeolocation, { useLocationPermission } from "hooks/useGeolocation";
 import { useEffect, useState } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import * as analytics from "services/analytics";
-import { useSiteContext } from "../../contexts/siteContext";
+import { useSiteContext } from "contexts/siteContext";
+import { TENANT_LOGO_URL } from "helpers/Constants";
 import SEO from "../SEO";
 
-const logoPaths = {
-  1: require("images/foodoasis.svg").default,
-  2: require("images/foodoasis.svg").default,
-  3: require("../StaticPagesHI/assets/aloha-harvest-bg-none.png"),
-  4: require("images/foodoasis.svg").default,
-  5: require("images/foodoasis.svg").default,
-  6: require("images/foodoasis.svg").default,
-};
-
 const Home = () => {
   const navigate = useNavigate();
   const { tenantId, tenantDetails } = useSiteContext();
@@ -142,7 +134,7 @@ const Home = () => {
                 },
               })}
             >
-              <img src={logoPaths[tenantId]} alt="logo" />
+              <img src={TENANT_LOGO_URL} alt="logo" />
             </Box>
             <Box
               sx={(theme) => ({

client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.jsx

@@ -9,7 +9,7 @@ import { useCallback, useEffect, useState } from "react";
 // for craco.config.js contents
 import { Grid } from "@mui/material";
 import { MAPBOX_STYLE } from "constants/map";
-import { defaultViewport } from "helpers/Configuration";
+import { MAPBOX_ACCESS_TOKEN, DEFAULT_VIEWPORT } from "helpers/Constants";
 import useBreakpoints from "hooks/useBreakpoints";
 import useFeatureFlag from "hooks/useFeatureFlag";
 import "mapbox-gl/dist/mapbox-gl.css";
@@ -60,7 +60,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const [viewport, setViewport] = useState({
     latitude,
     longitude,
-    zoom: defaultViewport.zoom,
+    zoom: DEFAULT_VIEWPORT.zoom,
   });
   const dispatch = useAppDispatch();
   const neighborhood = useNeighborhood();
@@ -140,7 +140,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
         ref={mapRef}
         {...viewport}
         onMove={(e) => setViewport(e.viewState)}
-        mapboxAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
+        mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
         mapStyle={MAPBOX_STYLE}
         draggable={true}
         onLoad={onLoad}

client/src/components/Layout/Footer.jsx

@@ -2,22 +2,14 @@ import { Box, CardMedia } from "@mui/material";
 import { MENU_ITEMS } from "helpers/Constants";
 import useLocationHook from "hooks/useLocationHook";
 import { Link } from "react-router-dom";
-import { tenantId } from "../../helpers/Configuration";
 import Copyright from "./Copyright";
+import { TENANT_LOGO_URL } from "helpers/Constants";
+
 /* 
 This file is not used in the application at this time, but left here in 
 case the UI/UX team decides to re-instate it.
 */
 
-const logoPaths = {
-  1: require("images/foodoasis.svg").default,
-  2: require("images/foodoasis.svg").default,
-  3: require("../StaticPagesHI/assets/aloha-harvest-bg-none.png"),
-  4: require("images/foodoasis.svg").default,
-  5: require("images/foodoasis.svg").default,
-  6: require("images/foodoasis.svg").default,
-};
-
 const Footer = () => {
   const { isHomePage } = useLocationHook();
 
@@ -66,7 +58,7 @@ const Footer = () => {
       <CardMedia
         component="img"
         alt="logo"
-        src={logoPaths[tenantId]}
+        src={TENANT_LOGO_URL}
         sx={(theme) => ({
           maxWidth: "95px",
           height: "100%",

client/src/components/Layout/Header.jsx

@@ -2,28 +2,18 @@ import { AppBar, Box, Toolbar, Typography } from "@mui/material";
 import useLocationHook from "hooks/useLocationHook";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
-import { useSiteContext } from "../../contexts/siteContext";
-import { useUserContext } from "../../contexts/userContext";
+import { useUserContext } from "contexts/userContext";
+import { TENANT_LOGO_URL } from "helpers/Constants";
 import Menu from "./Menu";
 
 Header.propTypes = {
   tenantId: PropTypes.number,
 };
 
-const logoPaths = {
-  1: require("images/foodoasis.svg").default,
-  2: require("images/foodoasis.svg").default,
-  3: require("../StaticPagesHI/assets/aloha-harvest-bg-none.png"),
-  4: require("images/foodoasis.svg").default,
-  5: require("images/foodoasis.svg").default,
-  6: require("images/foodoasis.svg").default,
-};
-
 export default function Header() {
-  const { tenantId } = useSiteContext();
   const { isAuthPage } = useLocationHook();
-  const imageType = logoPaths
-    ? logoPaths[tenantId].split(".").pop()
+  const imageType = TENANT_LOGO_URL
+    ? TENANT_LOGO_URL.split(".").pop()
     : "unknown";
 
   const { user } = useUserContext();
@@ -64,7 +54,7 @@ export default function Header() {
           >
             <a href="/">
               <img
-                src={logoPaths[tenantId]}
+                src={TENANT_LOGO_URL}
                 style={
                   imageType === "svg" ? { width: "100%", height: "100%" } : {}
                 }

client/src/components/Layout/WidgetFooter.jsx

@@ -2,16 +2,8 @@ import { Box } from "@mui/material";
 import { useSiteContext } from "contexts/siteContext";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
-import { isMobile } from "../../helpers";
-
-const logoPaths = {
-  1: require("images/foodoasis.svg"),
-  2: require("images/foodoasis.svg"),
-  3: require("images/foodoasis.svg"),
-  4: require("images/foodoasis.svg"),
-  5: require("images/foodoasis.svg"),
-  6: require("images/foodoasis.svg"),
-};
+import { isMobile } from "helpers";
+import { TENANT_LOGO_URL } from "helpers/Constants";
 
 function WidgetFooterSection(props) {
   const {
@@ -180,7 +172,7 @@ function WidgetFooterSection(props) {
 
 function WidgetFooter() {
   const [mobile, setMobile] = useState(null);
-  const { tenantId, tenantDetails } = useSiteContext();
+  const { tenantDetails } = useSiteContext();
   const { maintainers } = tenantDetails;
 
   useEffect(() => {
@@ -203,7 +195,7 @@ function WidgetFooter() {
     >
       <WidgetFooterSection
         name="Food Oasis"
-        logoPath={logoPaths[tenantId]}
+        logoPath={TENANT_LOGO_URL}
         url={`${window.location.origin}`}
         alt="Food Oasis Logo"
       />