Skip to content

Commit

Permalink
Merge pull request #642 from WildMeOrg/511_continuation_of_encounter_…
Browse files Browse the repository at this point in the history
…search

Continuation of Encounter Search (using OpenSearch)
  • Loading branch information
TanyaStere42 authored Aug 19, 2024
2 parents ba2a276 + abedc76 commit b24bcb2
Show file tree
Hide file tree
Showing 107 changed files with 3,957 additions and 1,760 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,5 @@ catalina.base_IS_UNDEFINED
/frontend/.env
/frontend/build
/frontend/.env
/frontend/src/serviceWorkerRegistration.js
/frontend/src/serviceWorker.js
1 change: 0 additions & 1 deletion frontend/config-overrides.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
22 changes: 22 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
18 changes: 17 additions & 1 deletion frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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",
Expand All @@ -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
Expand All @@ -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>
Expand Down
12 changes: 7 additions & 5 deletions frontend/src/AuthenticatedSwitch.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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} />}
Expand All @@ -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>
Expand All @@ -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>

Expand Down
6 changes: 6 additions & 0 deletions frontend/src/FilterContextProvider.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

import { createContext } from "react";

const FilterContext = createContext(true);
export default FilterContext;

7 changes: 3 additions & 4 deletions frontend/src/FrontDesk.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) => {
Expand Down
40 changes: 19 additions & 21 deletions frontend/src/UnAuthenticatedSwitch.jsx
Original file line number Diff line number Diff line change
@@ -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 />
Expand Down
12 changes: 9 additions & 3 deletions frontend/src/components/AlertBanner.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
Expand Down
93 changes: 93 additions & 0 deletions frontend/src/components/AndSelector.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading

0 comments on commit b24bcb2

Please sign in to comment.