Replaced MultiSelectText.jsx and Selections.jsx with MultiLevelOptions

frontend/src/Components/Search/MultiLevelOptions.jsx

+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

frontend/src/Components/Search/SearchComponent.jsx

 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>  
   );
 };