diff --git a/frontend/src/Components/Search/MultiLevelOptions.jsx b/frontend/src/Components/Search/MultiLevelOptions.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..55e04a44d2146a3432159b8b8ba741154406defe
--- /dev/null
+++ b/frontend/src/Components/Search/MultiLevelOptions.jsx
@@ -0,0 +1,121 @@
+import React, { useState, useContext, useEffect } from 'react';
+import '../../Css/MultiLevelOptions.css';
+import { GlobalContext } from '../../Context/GlobalContext';
+
+const MultiLevelOptions = () => {
+ // State to keep track of user selections
+ const [category, setCategory] = useState('');
+ const [subCategory, setSubCategory] = useState('');
+ const [year, setYear] = useState('');
+ const [party, setParty] = useState('');
+ const {selectedOptions, setSelectedOptions} = useContext(GlobalContext);
+
+ const years = ['1973', '1976', '1979', '1982', '1985', '1988', '1991', '1994', '1998', '2002', '2006', '2010', '2014', '2018', '2022'];
+
+ // Handle category selection (Swedish Election / Swedish Demographic)
+ const handleCategoryChange = (e) => {
+ console.log("Handle Category Change = " + e.target.value)
+ setCategory(e.target.value);
+ setSubCategory('');
+ setYear('');
+ setParty('');
+ };
+
+ // Handle subcategory selection (Total Votes / Party Votes)
+ const handleSubCategoryChange = (e) => {
+ console.log("handleSubCategoryChange = " + e.target.value)
+ setSubCategory(e.target.value);
+ setYear('');
+ setParty('');
+ };
+
+ // Handle year and party selection
+ const handleYearChange = (e) => setYear(e.target.value);
+ const handlePartyChange = (e) => setParty(e.target.value);
+
+ // This will be called whenever any values in the array
+ // [category, subCategory, year, party] changes
+ useEffect(() => {
+ if (category === 'Swedish Demographic') {
+
+ } else if (category === 'Swedish Election Results' && subCategory === 'totalVotes') {
+
+ } else if (
+ category === 'Swedish Election Results' &&
+ subCategory === 'partyVotes' &&
+ year && party
+ ){
+ console.log("test");
+ }
+ }, [category, subCategory, year, party]);
+
+
+ // Rendering based on user selections
+ return (
+ <div className="options-wrapper">
+ <h1>Select Options</h1>
+
+ {/* First level menu */}
+ <select value={category} onChange={handleCategoryChange}>
+ <option value="">-</option>
+ <option value="Swedish Election Results">Swedish Election</option>
+ <option value="Swedish Demographic">Swedish Demographic</option>
+ </select>
+
+ {/* Second level menu, visible only if Swedish Election is selected */}
+ {category === 'Total Votes / Party Votes' && (
+ <h1>Select Al</h1>
+ )}
+ {category === 'Swedish Election Results' && (
+ <select value={subCategory} onChange={handleSubCategoryChange}>
+ <option value="">Select Subcategory</option>
+ <option value="totalVotes">Total Votes</option>
+ <option value="partyVotes">Party Votes</option>
+ </select>
+ )}
+
+ {/* Third level menus, visible only if Party Votes is selected */}
+ {subCategory === 'partyVotes' && (
+ <div>
+ <select value={party} onChange={handlePartyChange}>
+ <option value="">Select Party</option>
+ <option value="Moderaterna">Moderaterna (M)</option>
+ <option value="Centerpartiet">Centerpartiet (C)</option>
+ <option value="Liberalerna">Liberalerna (FP)</option>
+ <option value="Kristdemokraterna">Kristdemokraterna (KD)</option>
+ <option value="Socialdemokraterna">Socialdemokraterna (S)</option>
+ <option value="Sverigedemokraterna">Sverigedemokraterna (SD)</option>
+ <option value="Other">Other</option>
+ <option value="Invalid">Invalid</option>
+ <option value="Voters">Non-Voters</option>
+ </select>
+
+ <select value={year} onChange={handleYearChange}>
+ <option value="">Select Election Year</option>
+ {/* Create an 'Option' element for each year */}
+ {years.map((year) => (
+ <option key={year} value={year}>{year}</option>
+ ))}
+ </select>
+ </div>
+ )}
+
+ {/* Final display based on selection */}
+ <div>
+ {category && subCategory === '' && (
+ <p>Selected: {category}</p>
+ )}
+
+ {category && subCategory === 'totalVotes' && (
+ <p>Showing Total Votes for {category}</p>
+ )}
+
+ {category && subCategory === 'partyVotes' && year && party && (
+ <p>Showing Votes for {party} in {year} Election</p>
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default MultiLevelOptions;
\ No newline at end of file
diff --git a/frontend/src/Components/Search/SearchComponent.jsx b/frontend/src/Components/Search/SearchComponent.jsx
index e20d96149313b018db6c8ded544ee29ae134931d..6ffe7c46dc190c236d213452292fc158c9252e7f 100644
--- a/frontend/src/Components/Search/SearchComponent.jsx
+++ b/frontend/src/Components/Search/SearchComponent.jsx
@@ -1,31 +1,15 @@
import React, { useState, useEffect, useMemo } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
-import MultiSelectText from './MultiSelectText';
+import MultiLevelOptions from './MultiLevelOptions'
import "../../Css/Search.css";
-import * as externalSelections from './Selections'; // Import selections from external file
export const SearchComponent = ({ data, changeRegion }) => {
const [selectedProvince, setSelectedProvince] = useState(null);
- const [parentSelection, setParentSelection] = useState(-1);
-
- const[component, setComponent] = useState(null);
-
- const[components, setComponents] = useState(null);
-
changeRegion(selectedProvince)
-
- let globalChildSelection = -1;
-
- /*
- Some temporary selection allocation
- */
- const euElection = externalSelections.euElection;
- const selections = externalSelections.selections;
-
/**
* useEffect hook to update the selected province based on the incoming data.
* If the incoming data matches any province option, it sets the selected province.
@@ -40,8 +24,9 @@ export const SearchComponent = ({ data, changeRegion }) => {
'Västra Götaland', 'Värmland', 'Örebro', 'Västmanland', 'Dalarna',
'Gävleborg', 'Västernorrland', 'Jämtland', 'Västerbotten', 'Norrbotten'
];
+
+ // Called whenever [data] changes
useEffect(() => {
-
if (data && provinceOptions.includes(data)) {
setSelectedProvince(data);
} else {
@@ -54,60 +39,8 @@ export const SearchComponent = ({ data, changeRegion }) => {
};
const isOptionEqualToValue = (option, value) => option === value;
-
const memoizedProvince = useMemo(() => selectedProvince, [selectedProvince]);
-
- function parentIndexHandler(index){
- const element = euElection.childrens[index];
- setParentSelection(element);
- };
-
-
- function level_1_indexHandler(index){
- console.log("childIndexHandler index:" + index)
- globalChildSelection = index;
- };
-
-// Function to get the child selection based on the parent element
-const handleChildSelection = () => {
- switch (parentSelection) {
- case 'a':
- setComponent( <div className='multi_select'><MultiSelectText selection={externalSelections.level_1_selections.level_1_1_selection} multiSelect={false} indexHandler={level_1_indexHandler}/><button onClick={handleComponentSelection}> Select</button></div>);
- break;
- case 'b':
- setComponent( <div className='multi_select'><MultiSelectText selection={externalSelections.level_1_selections.level_1_2_selection} multiSelect={false} indexHandler={level_1_indexHandler}/><button onClick={handleComponentSelection}> Select</button></div>);
- break;
- case 'c':
- setComponent( <div className='multi_select'><MultiSelectText selection={externalSelections.level_1_selections.level_1_3_selection} multiSelect={false} indexHandler={level_1_indexHandler}/><button onClick={handleComponentSelection}> Select</button></div>);
- break;
- default:
- setComponent(null);
- }
-};
-
-const handleComponentSelection = () => {
- console.log("handleComponentSelection:, global:;" +globalChildSelection)
- const selected = {};
-
- for (const [key, value] of Object.entries(selections)) {
- if (value.id.includes(globalChildSelection)) {
- selected[key] = value;
- }
- }
-
- setComponents(
- <div>
- {Object.values(selected).map((selection, index) => (
- <div key={index} className='multi_select'>
- <MultiSelectText selection={selection} multiSelect={true} />
- </div>
- ))}
- </div>
- );
-};
-
-
return (
<div>
<Autocomplete
@@ -175,12 +108,10 @@ return (
/>
- <div className='multi_select'><MultiSelectText selection={euElection} multiSelect={false} indexHandler={parentIndexHandler}/>
- <button onClick={handleChildSelection}>Select</button>
+ <div className='multi_select'>
+ <MultiLevelOptions />
+
</div>
-
- <>{component}</>
- <>{components}</>
</div>
);
};