Staging

public-redesign/src/app/ui/socialSharingTagsHelpers.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const getDefaultOGMetaTags = () => (
+	<React.Fragment>
+		<meta property="og:type" content="website" />
+		<meta
+			property="og:description"
+			content="A real-time crowd-sourced map of sausage and cake availability at Australian elections. It's practically part of the Australian Constitution. Or something. #demsausage"
+		/>
+	</React.Fragment>
+);

public-redesign/src/features/aboutPage/AboutPage.tsx

@@ -2,6 +2,7 @@ import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import { grey } from '@mui/material/colors';
 import { styled } from '@mui/material/styles';
 import { Helmet } from 'react-helmet-async';
+import { getDefaultOGMetaTags } from '../../app/ui/socialSharingTagsHelpers';
 import { StyledInteractableBoxFullHeight } from '../../app/ui/styledInteractableBoxFullHeight';
 import { mapaThemePrimaryGrey } from '../../app/ui/theme';
 import { getBaseURL } from '../../app/utils';
@@ -40,6 +41,7 @@ export default function AboutPage() {
 				<title>FAQs and About Us | Democracy Sausage</title>
 
 				{/* Open Graph: Facebook / Twitter */}
+				{getDefaultOGMetaTags()}
 				<meta property="og:url" content={`${getBaseURL()}/about/`} />
 				<meta property="og:title" content="FAQs and About Us | Democracy Sausage" />
 			</Helmet>

public-redesign/src/features/app/appSlice.ts

@@ -6,7 +6,9 @@ import { IMapPollingPlaceGeoJSONFeatureCollection } from '../map/mapHelpers';
 import { IMapFilterSettings, IPollingPlace } from '../pollingPlaces/pollingPlacesInterfaces';
 
 export interface AppState {
-	mapFilterSettings: IMapFilterSettings;
+	mapFilterSettings: {
+		[key: number]: IMapFilterSettings;
+	};
 	searchBarFilterControlState: boolean;
 	pollingPlaces: IMapPollingPlaceGeoJSONFeatureCollection | undefined;
 	mapFeatures: IPollingPlace | null | undefined;
@@ -76,8 +78,11 @@ export const appSlice = createSlice({
 		// setActiveElectionId: (state, action: PayloadAction<number | undefined>) => {
 		// 	state.electionId = action.payload;
 		// },
-		setMapFilterSettings: (state, action: PayloadAction<IMapFilterSettings>) => {
-			state.mapFilterSettings = action.payload;
+		setMapFilterSettings: (
+			state,
+			action: PayloadAction<{ mapFilterSettings: IMapFilterSettings; electionId: number }>,
+		) => {
+			state.mapFilterSettings[action.payload.electionId] = action.payload.mapFilterSettings;
 		},
 		setSearchBarFilterControlState: (state, action: PayloadAction<boolean>) => {
 			state.searchBarFilterControlState = action.payload;
@@ -138,16 +143,32 @@ export const { setMapFilterSettings, setSearchBarFilterControlState, setPollingP
 
 export const selectMapFeatures = (state: RootState) => state.app.mapFeatures;
 
-export const selectMapFilterSettings = (state: RootState) => state.app.mapFilterSettings;
+// These selectors for the map filter settings accept electionId into the selector as an external parameter
+// Ref: https://stackoverflow.com/a/61220891/7368493
+export const selectMapFilterSettings = createSelector(
+	[
+		// First input selector extracts filter settings from the state
+		(state: RootState) => state.app.mapFilterSettings,
+		// Second input selector forwards the electionId argument
+		(mapFilterSettings, electionId: number) => electionId,
+	],
+	(mapFilterSettings, electionId) => mapFilterSettings[electionId] || {},
+);
 
 export const selectIsMapFiltered = createSelector(
-	selectMapFilterSettings,
-	(mapFilterSettings) => values(mapFilterSettings).find((option) => option === true) || false,
+	[
+		// First input selector extracts forwards the electionId argument to selectMapFilterSettings
+		(state: RootState, electionId: number) => selectMapFilterSettings(state, electionId),
+	],
+	(mapFilterSettingsForElection) => values(mapFilterSettingsForElection).find((option) => option === true) || false,
 );
 
 export const selectNumberOfMapFilterSettingsApplied = createSelector(
-	selectMapFilterSettings,
-	(mapFilterSettings) => values(mapFilterSettings).filter((option) => option === true).length,
+	[
+		// First input selector extracts forwards the electionId argument to selectMapFilterSettings
+		(state: RootState, electionId: number) => selectMapFilterSettings(state, electionId),
+	],
+	(mapFilterSettingsForElection) => values(mapFilterSettingsForElection).filter((option) => option === true).length,
 );
 
 export const selectSearchBarFilterControlState = (state: RootState) => state.app.searchBarFilterControlState;

public-redesign/src/features/map/layersSelector/layersSelector.tsx

@@ -99,8 +99,18 @@ export default function LayersSelector(props: Props) {
 
 				<StyledLayersButton
 					size="small"
-					disabled={true}
+					onClick={toggleDrawer(true)}
+					disableTouchRipple
+					disableFocusRipple
+					disableRipple
 					sx={{
+						// Disable all visual on hover effects
+						'&.MuiButtonBase-root:hover': {
+							backgroundColor: 'white',
+							boxShadow:
+								'0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
+						},
+
 						// Option 1: Purple + White
 						// backgroundColor: mapaThemePrimaryPurple,
 						// color: 'white !important',

public-redesign/src/features/map/map.tsx

@@ -17,6 +17,7 @@ import { navigateToPollingPlaceFromFeature } from '../../app/routing/navigationH
 import { navigateToSearchPollingPlacesByIds } from '../../app/routing/navigationHelpers/navigationHelpersSearch';
 import { getStringParamOrEmptyString, getStringParamOrUndefined } from '../../app/routing/routingHelpers';
 import { Election } from '../../app/services/elections';
+import { getDefaultOGMetaTags } from '../../app/ui/socialSharingTagsHelpers';
 import { getAPIBaseURL, getBaseURL } from '../../app/utils';
 import { selectMapFilterSettings, setPollingPlaces } from '../app/appSlice';
 import { getDefaultElection, getViewForElection } from '../elections/electionHelpers';
@@ -138,7 +139,7 @@ function Map(props: Props) {
 	const mapViewFromURL = createMapViewFromURL(params);
 	const [initialMapView] = useState(mapViewFromURL);
 
-	const mapFilterSettings = useAppSelector((state) => selectMapFilterSettings(state));
+	const mapFilterSettings = useAppSelector((state) => selectMapFilterSettings(state, election.id));
 
 	// ######################
 	// Map Loading
@@ -228,6 +229,7 @@ function Map(props: Props) {
 				<title>{election.name} | Democracy Sausage</title>
 
 				{/* Open Graph: Facebook / Twitter */}
+				{getDefaultOGMetaTags()}
 				<meta property="og:url" content={`${getBaseURL()}/${election.name_url_safe}/`} />
 				<meta property="og:title" content={`${election.name} | Democracy Sausage`} />
 				<meta property="og:image" content={`${getAPIBaseURL()}/0.1/map_image/${election.id}/`} />
@@ -252,19 +254,21 @@ function Map(props: Props) {
 
 			<LayersSelector electionId={election.id} />
 
-			<AddStallButton />
-
-			<Box
-				sx={{
-					position: 'absolute',
-					bottom: '24px',
-					width: '96%',
-					zIndex: 1050,
-					margin: '8px',
-				}}
-			>
-				<SearchBarCosmeticNonFunctional />
-			</Box>
+			{isEmbedModeActive() === false && <AddStallButton />}
+
+			{isEmbedModeActive() === false && (
+				<Box
+					sx={{
+						position: 'absolute',
+						bottom: '24px',
+						width: '96%',
+						zIndex: 1050,
+						margin: '8px',
+					}}
+				>
+					<SearchBarCosmeticNonFunctional election={election} />
+				</Box>
+			)}
 
 			{isEmbedModeActive() === false && <MapWelcomeToTheNewWebsite />}
 

public-redesign/src/features/map/mapFilterHelpers.ts

@@ -1,11 +1,11 @@
 import { IMapFilterSettings, IPollingPlace } from '../pollingPlaces/pollingPlacesInterfaces';
 import { NomsReader } from './nomsReader';
 
-export const hasFilterOptions = (mapFilterSettings: IMapFilterSettings) =>
+export const hasFilterOptions = (mapFilterSettings: IMapFilterSettings, electionId: number) =>
 	Object.values(mapFilterSettings).filter((enabled) => enabled === true).length > 0;
 
-export const satisfiesMapFilter = (noms: NomsReader, mapFilterSettings: IMapFilterSettings) => {
-	if (hasFilterOptions(mapFilterSettings) && noms.hasAnyNoms() === true) {
+export const satisfiesMapFilter = (noms: NomsReader, mapFilterSettings: IMapFilterSettings, electionId: number) => {
+	if (hasFilterOptions(mapFilterSettings, electionId) && noms.hasAnyNoms() === true) {
 		for (const [option, enabled] of Object.entries(mapFilterSettings)) {
 			if (enabled === true && noms.hasNomsOption(option) === false) {
 				return false;
@@ -20,8 +20,9 @@ export const satisfiesMapFilter = (noms: NomsReader, mapFilterSettings: IMapFilt
 export const doesPollingPlaceSatisifyFilterCriteria = (
 	pollingPlace: IPollingPlace,
 	mapFilterSettings: IMapFilterSettings,
+	electionId: number,
 ) => {
-	if (hasFilterOptions(mapFilterSettings) === false) {
+	if (hasFilterOptions(mapFilterSettings, electionId) === false) {
 		return true;
 	}
 
@@ -34,7 +35,7 @@ export const doesPollingPlaceSatisifyFilterCriteria = (
 		return false;
 	}
 
-	if (satisfiesMapFilter(nomsReader, mapFilterSettings) === false) {
+	if (satisfiesMapFilter(nomsReader, mapFilterSettings, electionId) === false) {
 		return false;
 	}
 

public-redesign/src/features/map/mapStyleHelpers.ts

@@ -8,6 +8,7 @@ export const olStyleFunction = (
 	feature: IMapPollingPlaceFeature,
 	resolution: number,
 	mapFilterSettings: IMapFilterSettings,
+	electionId: number,
 ) => {
 	const noms = getObjectOrUndefinedFromFeature(feature, 'noms');
 
@@ -18,12 +19,15 @@ export const olStyleFunction = (
 	const nomsReader = new NomsReader(noms as IMapPollingGeoJSONNoms);
 
 	if (nomsReader.hasAnyNoms() === true) {
-		if (hasFilterOptions(mapFilterSettings) === true && satisfiesMapFilter(nomsReader, mapFilterSettings) === false) {
+		if (
+			hasFilterOptions(mapFilterSettings, electionId) === true &&
+			satisfiesMapFilter(nomsReader, mapFilterSettings, electionId) === false
+		) {
 			return null;
 		}
 
 		return resolution >= 7 ? nomsReader.getIconForNoms() : nomsReader.getDetailedIconsForNoms(feature /*, resolution*/);
 	}
 
-	return hasFilterOptions(mapFilterSettings) === false ? supportingIcons.grey_question.icon.ol : null;
+	return hasFilterOptions(mapFilterSettings, electionId) === false ? supportingIcons.grey_question.icon.ol : null;
 };

public-redesign/src/features/map/openLayersMap/OpenLayersMap.tsx

@@ -150,7 +150,7 @@ class OpenLayersMap extends React.PureComponent<IProps, {}> {
 
 				if (sausageLayer !== null) {
 					const styleFunction = (feature: IMapPollingPlaceFeature, resolution: number) =>
-						olStyleFunction(feature, resolution, this.props.mapFilterSettings);
+						olStyleFunction(feature, resolution, this.props.mapFilterSettings, this.props.election.id);
 					sausageLayer.setStyle(styleFunction as StyleFunction);
 				}
 			}
@@ -391,7 +391,7 @@ class OpenLayersMap extends React.PureComponent<IProps, {}> {
 		this.vectorSourceChangedEventKey = vectorSource.once('change', this.onVectorSourceChanged.bind(this));
 
 		const styleFunction = (feature: IMapPollingPlaceFeature, resolution: number) =>
-			olStyleFunction(feature, resolution, mapFilterSettings);
+			olStyleFunction(feature, resolution, mapFilterSettings, this.props.election.id);
 
 		const vectorLayer = new VectorLayer({
 			// renderMode: 'image',

public-redesign/src/features/search/searchByAddressOrGPS/searchBar/searchBar.tsx

@@ -27,6 +27,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../../../../app/hooks/store';
 import { useUnmount } from '../../../../app/hooks/useUnmount';
 import { getStringParamOrEmptyString } from '../../../../app/routing/routingHelpers';
+import { Election } from '../../../../app/services/elections';
 import { mapaThemePrimaryPurple } from '../../../../app/ui/theme';
 import {
 	selectIsMapFiltered,
@@ -39,6 +40,7 @@ import SearchFilterComponent from '../../shared/searchFilterComponent';
 import './searchBar.css';
 
 interface Props {
+	election: Election;
 	autoFocusSearchField?: boolean;
 	enableFiltering?: boolean;
 	isFetching: boolean;
@@ -50,6 +52,7 @@ interface Props {
 
 export default function SearchBar(props: Props) {
 	const {
+		election,
 		autoFocusSearchField,
 		enableFiltering,
 		isFetching,
@@ -84,8 +87,11 @@ export default function SearchBar(props: Props) {
 	}
 
 	const searchBarFilterControlOpen = useAppSelector((state) => selectSearchBarFilterControlState(state));
-	const isMapFiltered = useAppSelector(selectIsMapFiltered);
-	const numberOfMapFilterSettingsApplied = useAppSelector(selectNumberOfMapFilterSettingsApplied);
+	const isMapFiltered = useAppSelector((state) => selectIsMapFiltered(state, election.id));
+
+	const numberOfMapFilterSettingsApplied = useAppSelector((state) =>
+		selectNumberOfMapFilterSettingsApplied(state, election.id),
+	);
 
 	// ######################
 	// Search Field
@@ -403,7 +409,7 @@ export default function SearchBar(props: Props) {
 
 			{(isWaitingForGPSLocation === true || isFetching === true) && <LinearProgress color="secondary" />}
 
-			{enableFiltering === true && searchBarFilterControlOpen === true && <SearchFilterComponent />}
+			{enableFiltering === true && searchBarFilterControlOpen === true && <SearchFilterComponent election={election} />}
 
 			{isGeolocationErrored === true && (
 				<Alert severity="error" sx={{ mt: 2 }}>

public-redesign/src/features/search/searchByAddressOrGPS/searchBar/searchBarCosmeticNonFunctional.tsx

@@ -12,6 +12,7 @@ import {
 	navigateToSearchDrawerRootFromExternalToSearchBar,
 } from '../../../../app/routing/navigationHelpers/navigationHelpersSearch';
 import { getStringParamOrEmptyString } from '../../../../app/routing/routingHelpers';
+import { Election } from '../../../../app/services/elections';
 import { mapaThemePrimaryPurple } from '../../../../app/ui/theme';
 import {
 	selectIsMapFiltered,
@@ -20,7 +21,13 @@ import {
 } from '../../../app/appSlice';
 import './searchBar.css';
 
-export default function SearchBarCosmeticNonFunctional() {
+interface Props {
+	election: Election;
+}
+
+export default function SearchBarCosmeticNonFunctional(props: Props) {
+	const { election } = props;
+
 	const dispatch = useAppDispatch();
 
 	const params = useParams();
@@ -30,8 +37,10 @@ export default function SearchBarCosmeticNonFunctional() {
 
 	const searchBarSearchText = getStringParamOrEmptyString(params, 'search_term');
 
-	const isMapFiltered = useAppSelector(selectIsMapFiltered);
-	const numberOfMapFilterSettingsApplied = useAppSelector(selectNumberOfMapFilterSettingsApplied);
+	const isMapFiltered = useAppSelector((state) => selectIsMapFiltered(state, election.id));
+	const numberOfMapFilterSettingsApplied = useAppSelector((state) =>
+		selectNumberOfMapFilterSettingsApplied(state, election.id),
+	);
 
 	// ######################
 	// Search Field

public-redesign/src/features/search/searchByAddressOrGPS/searchComponent.tsx

@@ -78,7 +78,7 @@ export default function SearchComponent(props: Props) {
 	const urlLonLatFromGPS = getStringParamOrEmptyString(params, 'gps_lon_lat');
 	const urlLonLat = urlLonLatFromGPS !== '' ? urlLonLatFromGPS : urlLonLatFromSearch;
 
-	const mapFilterSettings = useAppSelector((state) => selectMapFilterSettings(state));
+	const mapFilterSettings = useAppSelector((state) => selectMapFilterSettings(state, election.id));
 
 	// ######################
 	// Mapbox Search Query
@@ -123,7 +123,8 @@ export default function SearchComponent(props: Props) {
 		isSuccessFetchingNearbyPollingPlaces === true &&
 		pollingPlaceNearbyResults !== undefined
 			? pollingPlaceNearbyResults.filter(
-					(pollingPlace) => doesPollingPlaceSatisifyFilterCriteria(pollingPlace, mapFilterSettings) === true,
+					(pollingPlace) =>
+						doesPollingPlaceSatisifyFilterCriteria(pollingPlace, mapFilterSettings, election.id) === true,
 				)
 			: undefined;
 
@@ -138,6 +139,7 @@ export default function SearchComponent(props: Props) {
 	return (
 		<React.Fragment>
 			<SearchBar
+				election={election}
 				autoFocusSearchField={autoFocusSearchField}
 				enableFiltering={enableFiltering}
 				isFetching={isFetchingNearbyPollingPlaces === true || isFetchingMapboxResults === true}
@@ -221,7 +223,7 @@ export default function SearchComponent(props: Props) {
 			{pollingPlaceNearbyResultsFiltered !== undefined && (
 				<SearchByAddressOrGPSResultsContainer
 					numberOfResults={pollingPlaceNearbyResultsFiltered.length}
-					isFiltered={hasFilterOptions(mapFilterSettings) === true}
+					isFiltered={hasFilterOptions(mapFilterSettings, election.id) === true}
 					isSearchingByGPS={urlLonLatFromGPS !== ''}
 					pollingPlacesLoaded={election.polling_places_loaded}
 					enableViewOnMap={enableViewOnMap}