Merge pull request #440 from Miss-placed/devBranch

Release v3.2

package.json

@@ -9,8 +9,8 @@
 		"@fortawesome/free-brands-svg-icons": "^6.6.0",
 		"@fortawesome/free-solid-svg-icons": "^6.6.0",
 		"@fortawesome/react-fontawesome": "^0.2.2",
-		"@mui/icons-material": "^5.8.4",
-		"@mui/material": "^5.8.4",
+		"@mui/icons-material": "^6.1.10",
+		"@mui/material": "^6.1.10",
 		"@testing-library/jest-dom": "^5.16.4",
 		"@testing-library/react": "^13.2.0",
 		"@testing-library/user-event": "^13.5.0",

src/App.tsx

@@ -3,13 +3,15 @@ import {
 	Route,
 	BrowserRouter as Router,
 	Routes,
-	useParams,
+	useParams
 } from 'react-router-dom';
 import MapProvider from './components/Map';
+import { IsValidMapId } from './components/MapControls/MapIds';
 import {
 	UserContextProvider,
-	useUserContext,
+	useUserContext
 } from './contexts/UserContext/userContextProvider';
+import HomePage from './pages/HomePage';
 import { BaseLayout } from './pages/layouts/BaseLayout';
 
 function App() {
@@ -20,8 +22,8 @@ function App() {
 			<BaseLayout>
 				<UserContextProvider>
 					<Routes>
-						<Route path="/:id" Component={MapWithItemId} />
-						<Route path="/" Component={MapProvider} />
+						<Route path="/" Component={HomePage} />
+						<Route path="/:id" Component={MapWithIdRoute} />
 						<Route path="/legacy" Component={LegacySite} />
 						<Route path="/challenge" Component={LegacyChallengeSite} />
 					</Routes>
@@ -31,31 +33,14 @@ function App() {
 	);
 }
 
-const MapWithItemId = () => {
-	const { id } = useParams();
-	const {
-		isOnStartup,
-		setSharedMapItemId,
-		isDebugMode,
-		setInitiallySharedMapItemId,
-	} = useUserContext();
-
-	// Update the global state with the 'id' parameter
+const MapWithIdRoute = () => {
+	const { id: mapUrlId } = useParams();
+	const { setSharedMapItemId } = useUserContext();
 	useEffect(() => {
-		if (isOnStartup) {
-			if (isDebugMode) {
-				console.log('setSharedMapItemId: ', id);
-			}
-			setInitiallySharedMapItemId(id);
-			setSharedMapItemId(id);
+		if (mapUrlId && !IsValidMapId(mapUrlId)) {
+			setSharedMapItemId(mapUrlId);
 		}
-	}, [
-		id,
-		isDebugMode,
-		isOnStartup,
-		setInitiallySharedMapItemId,
-		setSharedMapItemId,
-	]);
+	}, [mapUrlId, setSharedMapItemId]);
 
 	return <MapProvider />;
 };

src/classes/index.ts

@@ -32,13 +32,15 @@ export class BaseMarker extends Item {
 	loc: LatLngExpression;
 	img?: string;
 	linkedItems?: string;
+	externalLinks?: string;
 
-	constructor({ id, title, desc, icon, layer, typeDesc, loc, img, linkedItems }: any) {
+	constructor({ id, title, desc, icon, layer, typeDesc, loc, img, linkedItems, externalLinks }: any) {
 		super({ id, title, desc, icon, layer });
 		this.typeDesc = typeDesc;
 		this.loc = loc ?? [0, 0];
 		this.img = img ?? '';
 		this.linkedItems = linkedItems ?? '';
+		this.externalLinks = externalLinks ?? '';
 	}
 }
 
@@ -77,11 +79,12 @@ export class MiscMarker extends BaseMarker {
 			uniqueDesc?: string;
 			img?: string;
 			linkedItems?: string;
+			externalLinks?: string;
 		}
 	) {
 		var newTitle = optional?.uniqueTitle ? optional?.uniqueTitle : title;
-		desc = optional?.uniqueDesc ? `${optional?.uniqueDesc}\n${desc}` : desc;
-		super({ id, title: newTitle, desc, icon, loc, typeDesc: title, img: optional?.img, linkedItems: optional?.linkedItems });
+		desc = optional?.uniqueDesc ? `${desc}\n${optional?.uniqueDesc}` : desc;
+		super({ id, title: newTitle, desc, icon, loc, typeDesc: title, img: optional?.img, linkedItems: optional?.linkedItems, externalLinks: optional?.externalLinks });
 	}
 }
 

src/components/EasterEggs/List/index.tsx

@@ -44,6 +44,7 @@ export const EggList = () => {
             icon={egg.icon}
             img={egg.img}
             linkedItems={egg.linkedItems}
+            externalLinks={egg.externalLinks}
         />;
     });
     if (RenderedEggList.length === 0) {

src/components/EasterEggs/ListMenu/index.tsx

@@ -47,15 +47,22 @@ export const EggListMenu = () => {
 
     // watch((data, { name, type }) => console.log(data, name, type))
 
+    const onModalClick = (e) => {
+        e.stopPropagation();
+    };
+
     return (
         <FormProvider {...methods}>
             <StyledExpandableMenu
                 id="easterEgg-expandable-menu"
                 onSubmit={handleSubmit(onSubmit)}
             >
-                <StyledAccordion expanded={expand}>
+                <StyledAccordion expanded={expand}
+                    onClick={onModalClick}>
                     <StyledAccordionSummary
-                        expandIcon={<FilterAltIcon onClick={toggleAcordion} />}
+                        expandIcon={<FilterAltIcon
+                        // onClick={toggleAcordion} // Temporarily disabled until filter is implemented
+                        />}
                         aria-controls="easterEgg-filter"
                         id="easterEgg-filter-header"
                     >
@@ -65,12 +72,14 @@ export const EggListMenu = () => {
                             variant="outlined"
                             {...register('searchTerm')}
                         />
-                        {totalEggOfType}
+                        <StyledResultsCounter>
+                            {totalEggOfType}
+                        </StyledResultsCounter>
                     </StyledAccordionSummary>
-                    <AccordionDetails>
+                    <StyledAccordionDetails>
                         {/* <EggFilterMenu /> */}
                         Filter Easter Eggs Here
-                    </AccordionDetails>
+                    </StyledAccordionDetails>
                 </StyledAccordion>
             </StyledExpandableMenu>
         </FormProvider>
@@ -92,15 +101,32 @@ const StyledExpandableMenu = styled.form`
 `;
 
 const StyledAccordionSummary = styled(AccordionSummary)`
+background-color: var(--clr-grey-l);
+
 .MuiAccordionSummary-content {
 	display: flex;
 	justify-content: space-between;
     align-items: center;
+
+    #easterEggSearch,
+    #easterEggSearch input {
+		background-color: var(--clr-white);
+		border-radius: var(--radius);
+		border: unset;
+	}
 }
 `
 
 const StyledAccordion = styled(Accordion)`
 	width: 100%;
 	margin: 0;
 	box-shadow: none;
+`;
+
+const StyledAccordionDetails = styled(AccordionDetails)`
+	background: var(--clr-grey-l);
+`;
+
+const StyledResultsCounter = styled.div`
+	color: var(--clr-white-d);
 `;

src/components/Header/index.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { Button, Chip, Divider, Drawer, Menu, MenuItem } from '@mui/material';
 import React, { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { DeclassifiedContext } from '../../contexts/DeclassifiedContext/declassifiedContextProvider';
 import { useUserContext } from '../../contexts/UserContext/userContextProvider';
 import { Game, MapGroupings, MapGroupItem } from '../MapControls/types';
@@ -12,7 +13,6 @@ const StyledHeader = styled.header`
 	position: absolute;
 	z-index: var(--z-index-menu);
 	left: calc((100vw - 375px) / 2);
-
 	button {
 		color: var(--clr-white);
 		width: 375px;
@@ -48,6 +48,14 @@ const MapDrawer = styled(Drawer)`
 	}
 `;
 const MapMenu = styled(Menu)`
+	.current-map-indicator {
+		height: 10px;
+		width: 10px;
+		background-color: var(--clr-red);
+		border-radius: 50%;
+		display: inline-block;
+		margin-left: 10px;
+	}
 	.MuiPaper-root {
 		width: 375px;
 		background-color: var(--clr-bg-inverted);
@@ -82,6 +90,7 @@ const GameTitle = styled(Chip)`
 `;
 
 const Header = () => {
+	const navigate = useNavigate();
 	const { isMobile } = useUserContext();
 	const { currentMapGroup } = useContext(DeclassifiedContext);
 	const { setCurrentMapWithValidation: setCurrentMap } =
@@ -185,20 +194,23 @@ const Header = () => {
 	);
 
 	function buildMapItems(mapGroup: [string, MapGroupItem][]) {
+
 		return mapGroup
 			? mapGroup.map(([key, mapGroupItem]) => {
-				// TODO : maybe swap this out for some better styling instead of removing the current map
-				if (currentMapGroup!.mapName !== mapGroupItem.mapName) {
-					return (
-						<MenuItem
-							onClick={() => setCurrentMap(mapGroupItem.mapLayers[0])}
-							key={key}
-						>
-							{mapGroupItem.mapName}
-						</MenuItem>
-					)
-				}
-				return null;
+				return (
+					<MenuItem
+						onClick={
+							() => {
+								setCurrentMap(mapGroupItem.mapLayers[0])
+								navigate(`/${mapGroupItem.mapLayers[0].id!}`, { replace: true })
+							}
+						}
+						key={key}
+					>
+						{mapGroupItem.mapName}
+						<span className={currentMapGroup!.mapName === mapGroupItem.mapName ? 'current-map-indicator' : ''}></span>
+					</MenuItem>
+				)
 			})
 			: null;
 	}

src/components/Intel/IntelDetailsItem/index.tsx

@@ -10,6 +10,7 @@ import { useLiveQuery } from "dexie-react-hooks";
 import { useContext, useEffect, useState } from "react";
 import { useMapEvents } from "react-leaflet";
 import { DeclassifiedContext } from "../../../contexts/DeclassifiedContext/declassifiedContextProvider";
+import { useUserContext } from "../../../contexts/UserContext/userContextProvider";
 import { addCollectedIntel, deleteCollectedIntel } from "../../../data/dataAccessLayer";
 import { db } from "../../../data/db";
 import { DefaultPOIData, Faction, IIntelItem } from "../../../data/intel";
@@ -38,8 +39,8 @@ export const IntelDetailsItem = ({
 	multiSelectState,
 	addRemoveItemMultiSelect,
 }: IIntelItemWithHandler) => {
-	const { setCurrentMapWithValidation: setCurrentMap, currentMap } =
-		useContext(DeclassifiedContext);
+	const { setSharedMapItemId } = useUserContext();
+	const { setCurrentMapWithValidation: setCurrentMap, currentMap } = useContext(DeclassifiedContext);
 	const mapInstance = useMapEvents({});
 	const [expanded, setExpanded] = useState(false);
 	const [isSelected, setIsSelected] = useState(multiSelectState?.includes(id) ?? false);
@@ -62,7 +63,6 @@ export const IntelDetailsItem = ({
 		<StyledAccordion
 			defaultExpanded={isMarker}
 			onChange={(event) => {
-				// if(event)
 				setExpanded(!expanded)
 			}}
 		>
@@ -125,10 +125,12 @@ export const IntelDetailsItem = ({
 												var mapSetResult = await setCurrentMap(mapItem);
 												if (mapSetResult) {
 													mapInstance.flyTo(loc, 4);
+													setSharedMapItemId(id);
 												}
 											}
 										} else {
 											mapInstance.flyTo(loc, 4);
+											setSharedMapItemId(id);
 										}
 									}}
 								>

src/components/Intel/IntelListMenu/index.tsx

@@ -128,7 +128,7 @@ const StyledAccordionSummary = styled(AccordionSummary)`
 	}
 	#intelSearch,
 	#intelSearch input {
-		background-color: white;
+		background-color: var(--clr-white);
 		border-radius: var(--radius);
 		border: unset;
 	}

src/components/Intel/IntelMapMarker/index.tsx

@@ -36,17 +36,17 @@ export const IntelMapMarker = ({
 	img,
 	map,
 }: IntelItem) => {
+	const { sharedMapItemId } = useUserContext();
 	const mapInstance = useMapEvents({});
 	const [markerInstance, setPopupInstance] = useState<L.Marker | null>(null); // State to hold the Popup instance
-	const { initiallySharedMapItemId } = useUserContext();
 	const isCollected = useLiveQuery(() => db.intelCollected.get(id ?? ''));
 	const markerIcon = renderLeafletIcon(isCollected, faction, typeDesc);
 
 	useEffect(() => {
-		if (initiallySharedMapItemId === id && markerInstance) {
+		if (sharedMapItemId === id && markerInstance) {
 			markerInstance.openPopup();
 		}
-	}, [initiallySharedMapItemId, id, markerInstance, mapInstance]);
+	}, [sharedMapItemId, id, markerInstance, mapInstance]);
 
 	return loc !== null && loc.toString() === DefaultPOIData.nullLoc.toString() ? (
 		<></>