Continuation of Encounter Search (using OpenSearch)

.gitignore

@@ -43,3 +43,5 @@ catalina.base_IS_UNDEFINED
 /frontend/.env
 /frontend/build
 /frontend/.env
+/frontend/src/serviceWorkerRegistration.js
+/frontend/src/serviceWorker.js

frontend/config-overrides.js

@@ -3,7 +3,6 @@ const webpack = require('webpack');
 module.exports = function override(config, env) { 
   if(env === 'production'){
     config.devtool = 'source-map';
-    console.log('source-map');
     // config.devtool = 'cheap-module-source-map';
   }
     config.plugins.push(

frontend/package.json

@@ -20,6 +20,7 @@
     "react-burger-menu": "^3.0.9",
     "react-data-table-component": "^7.6.2",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.52.1",
     "react-intl": "^6.6.2",
     "react-paginate": "^8.2.0",
     "react-router-bootstrap": "^0.26.2",

frontend/src/App.jsx

@@ -12,6 +12,7 @@ import { BrowserRouter, useLocation, useRoutes } from "react-router-dom";
 import LocaleContext from "./IntlProvider";
 import FooterVisibilityContext from "./FooterVisibilityContext";
 import Cookies from "js-cookie";
+import FilterContext from "./FilterContextProvider";
 
 function App() {
   const messageMap = {
@@ -24,7 +25,7 @@ function App() {
   const [locale, setLocale] = useState(initialLocale);
   const [visible, setVisible] = useState(true);
   const containerStyle = {
-    maxWidth: "1440px",
+    // maxWidth: "1440px",
     display: "flex",
     flexDirection: "column",
     minHeight: "100vh", 
@@ -37,6 +38,19 @@ function App() {
     Cookies.set("wildbookLangCode", newLocale);
   };
 
+  const [filters, setFilters] = useState({});
+  const updateFilter = (filterName, value) => {
+    setFilters((prevFilters) => ({
+      ...prevFilters,
+      [filterName]: value,
+    }));
+
+  }
+
+  const resetFilters = () => {
+    setFilters({}); 
+  };
+
   return (
     <QueryClientProvider client={queryClient}>
       <LocaleContext.Provider
@@ -53,7 +67,9 @@ function App() {
               messages={messageMap[locale]}
             >
               <FooterVisibilityContext.Provider value={{ visible, setVisible }}>
+              <FilterContext.Provider value={{ filters, updateFilter, resetFilters }}>
                 <FrontDesk adminUserInitialized={true} setLocale={setLocale} />
+              </FilterContext.Provider>
               </FooterVisibilityContext.Provider>
             </IntlProvider>
           </BrowserRouter>

frontend/src/AuthenticatedSwitch.jsx

@@ -15,6 +15,7 @@ export default function AuthenticatedSwitch({ showAlert, setShowAlert }) {
   const { isFetched, data, error } = useGetMe();
   const username = data?.username;
   const avatar = data?.imageURL || "/react/images/Avatar.png";
+  const [header, setHeader] = React.useState(true);
 
   return (
     <div className="d-flex flex-column min-vh-100">
@@ -23,8 +24,8 @@ export default function AuthenticatedSwitch({ showAlert, setShowAlert }) {
         className="position-fixed top-0 mx-auto w-100"
         style={{
           zIndex: "100",
-          height: "60px",
-          maxWidth: "1440px",
+          height: "50px",
+          backgroundColor: "#303336",
         }}
       >
         {showAlert && <AlertBanner setShowAlert={setShowAlert} />}
@@ -38,11 +39,12 @@ export default function AuthenticatedSwitch({ showAlert, setShowAlert }) {
 
       <div
         id="main-content"
-        className="flex-grow-1 d-flex justify-content-center mt-4 pt-5"
+        className="flex-grow-1 d-flex justify-content-center"
         style={{
           boxSizing: "border-box",
-          maxWidth: "1440px",
+          // maxWidth: "1440px",
           overflow: "hidden",
+          paddingTop: header? "48px" : "0",
         }}
       >
         <Routes>
@@ -51,7 +53,7 @@ export default function AuthenticatedSwitch({ showAlert, setShowAlert }) {
           <Route path="/encounter-search" element={<EncounterSearch />} />
           <Route path="/login" element={<Login />} />
           <Route path="/" element={<Home />} />
-          <Route path="*" element={<NotFound />} />
+          <Route path="*" element={<NotFound setHeader={setHeader}/>} />
         </Routes>
       </div>
 

frontend/src/FilterContextProvider.jsx

@@ -0,0 +1,6 @@
+
+import { createContext } from "react";
+
+const FilterContext = createContext(true);
+export default FilterContext;
+

frontend/src/FrontDesk.jsx

@@ -5,10 +5,10 @@ import axios from "axios";
 import AuthContext from "./AuthProvider";
 import getMergeNotifications from "./models/notifications/getMergeNotifications";
 import getCollaborationNotifications from "./models/notifications/getCollaborationNotifications";
-import NotFound from "./pages/errorPages/NotFound";
-import ServerError from "./pages/errorPages/ServerError";
 import LoadingScreen from "./components/LoadingScreen";
 import GoogleTagManager from "./GoogleTagManager";
+import Cookies from "js-cookie";
+import "./css/scrollBar.css";
 
 export default function FrontDesk() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -17,11 +17,10 @@ export default function FrontDesk() {
   const [collaborationData, setCollaborationData] = useState([]);
   const [mergeData, setMergeData] = useState([]);
   const [count, setCount] = useState(0);
-  const [showAlert, setShowAlert] = useState(true);
+  const [showAlert, setShowAlert] = useState(() => Cookies.get("showAlert") === "false" ? false : true);
   const [loading, setLoading] = useState(true);
 
   const checkLoginStatus = () => {
-    console.log("Polling API...");
     axios
       .head("/api/v3/user")
       .then((response) => {

frontend/src/UnAuthenticatedSwitch.jsx

@@ -1,56 +1,54 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
-import ErrorPage from "./pages/errorPages/ErrorPage";
 import Login from "./pages/Login";
 import Footer from "./components/Footer";
-import Home from "./pages/Home";
 import AlertBanner from "./components/AlertBanner";
 import UnAuthenticatedAppHeader from "./components/UnAuthenticatedAppHeader";
 import NotFound from "./pages/errorPages/NotFound";
-import Forbidden from "./pages/errorPages/Forbidden";
 import Unauthorized from "./pages/errorPages/Unauthorized";
-import ServerError from "./pages/errorPages/ServerError";
-import BadRequest from "./pages/errorPages/BadRequest";
 import About from "./About";
 import EncounterSearch from "./pages/EncounterSearch";
+import Home from "./pages/Home";
 
 export default function UnAuthenticatedSwitch({ showAlert, setShowAlert }) {
-  console.log("UnAuthenticatedSwitch", showAlert);
+  const [header, setHeader] = React.useState(true);
+  const [headerTop, setHeaderTop] = React.useState("60px");
+  const alertBannerRef = React.useRef(null);
 
   return (
     <div className="d-flex flex-column min-vh-100">
       <div
         id="header"
-        className="position-fixed top-0 mx-auto w-100"
+        className="position-fixed top-0 w-100"
         style={{
           zIndex: "100",
-          height: "60px",
-          maxWidth: "1440px",
+          height: "50px",
+          backgroundColor: "#303336",
         }}
+
       >
-        {showAlert && <AlertBanner setShowAlert={setShowAlert} />}
-        <UnAuthenticatedAppHeader
-          showAlert={showAlert}
-          setShowAlert={setShowAlert}
-        />
+        {showAlert && <AlertBanner
+          setShowAlert={setShowAlert} />}
+        <UnAuthenticatedAppHeader/>
       </div>
 
       <div
         id="main-content"
-        className="flex-grow-1 d-flex justify-content-center mt-4 pt-5"
+        className="flex-grow-1 d-flex justify-content-center"
         style={{
           boxSizing: "border-box",
-          maxWidth: "1440px",
           overflow: "hidden",
+          paddingTop: header ? "48px" : "0",
         }}
       >
         <Routes>
-          <Route path="/about" element={<About />} />
-          <Route path="/home" element={<Unauthorized />} />
-          <Route path="/encounter-search" element={<EncounterSearch />} />
+          {/* <Route path="/about" element={<About />} /> */}
+          <Route path="/home" element={<Unauthorized setHeader={setHeader} />} />
+          {/* <Route path="/encounter-search" element={<EncounterSearch />} /> */}
+          <Route path="/encounter-search" element={<Login />} />
           <Route path="/login" element={<Login />} />
           <Route path="/" element={<Login />} />
-          <Route path="*" element={<NotFound />} />
+          <Route path="*" element={<NotFound setHeader={setHeader} />} />
         </Routes>
       </div>
       <Footer />

frontend/src/components/AlertBanner.jsx

@@ -2,14 +2,16 @@ import React from "react";
 import ThemeColorContext from "../ThemeColorProvider";
 import { FormattedMessage } from "react-intl";
 import BrutalismButton from "./BrutalismButton";
+import Cookies from "js-cookie";
 
-export default function AlertBanner({ setShowAlert }) {
+export default function AlertBanner({ showAlert, setShowAlert }) {
   const theme = React.useContext(ThemeColorContext);
   return (
     <div
-      className="alert alert-warning alert-dismissible fade show d-flex justify-content-between align-items-center"
+      className="fade show d-flex justify-content-between align-items-center"
       role="alert"
       style={{
+        margin: "0 !important",
         padding: 10,
         boxSizing: "border-box",
         minHeight: 60,
@@ -24,7 +26,11 @@ export default function AlertBanner({ setShowAlert }) {
         color={theme.primaryColors.primary500}
         borderColor={theme.primaryColors.primary500}
         style={{ padding: 10, margin: 0 }}
-        onClick={() => setShowAlert(false)}
+        onClick={() => {
+          setShowAlert(false);
+          Cookies.set("showAlert", false, { expires: 7 });
+        }
+        }
       >
         <FormattedMessage id="OK" />
       </BrutalismButton>

frontend/src/components/AndSelector.jsx

@@ -0,0 +1,93 @@
+import Select from 'react-select';
+import { useEffect, useState } from 'react';
+import { useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { FormGroup, FormLabel } from 'react-bootstrap';
+import Description from './Form/Description'
+
+const colourStyles = {
+    option: (styles) => ({
+        ...styles,
+        color: 'black',
+    }),
+    control: (styles) => ({ ...styles, backgroundColor: 'white' }),
+    singleValue: (styles) => ({ ...styles, color: 'black' }),
+    menuPortal: base => ({ ...base, zIndex: 9999 }),
+    control: base => ({ ...base, zIndex: 1 }),
+};
+
+export default function AndSelector({ 
+    noLabel,
+    noDesc,
+    label,
+    isMulti, 
+    options, 
+    onChange, 
+    field, 
+    filterKey, 
+    term, }) {
+
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const selectedOptionsRef = useRef(selectedOptions);
+
+    useEffect(() => {
+
+        onChange(null, field);
+        return () => {
+            options.forEach(option => {
+                onChange(null, `${field}.${option.value}`);
+            });
+        };
+    }, []);
+
+    const handleChange = (selected) => {
+
+        const addedOptions = selected.filter(option => !selectedOptions.includes(option));
+        const removedOptions = selectedOptions.filter(option => !selected.includes(option));
+
+        setSelectedOptions(selected || []);
+        selectedOptionsRef.current = selected || [];
+
+        if (addedOptions.length > 0) {
+            addedOptions.forEach(option => {
+                onChange({
+                    filterId: `${field}.${option.value}`,
+                    clause: "filter",
+                    filterKey: filterKey,
+                    query: {
+                        "term": {
+                            [field]: option.value
+                        }
+                    }
+                });
+            })
+        }
+
+        if (removedOptions.length > 0) {
+            removedOptions.forEach(option => {
+                onChange(null, `${field}.${option.value}`);
+            });
+        }
+    }
+
+    return (
+        <FormGroup className="mt-2">
+            {noLabel ? null : <FormLabel><FormattedMessage id={label} defaultMessage={label} /></FormLabel>}
+            {noDesc ? null : <Description>
+                <FormattedMessage id={`${label}_DESC`} />
+            </Description>}
+
+            <Select
+                isMulti={isMulti}
+                options={options}
+                className="basic-multi-select"
+                classNamePrefix="select"
+                styles={colourStyles}
+                menuPlacement="auto"
+                menuPortalTarget={document.body}
+                value={selectedOptions}
+                onChange={handleChange}
+            />
+        </FormGroup>
+    );
+}