Revert "updated facets"

This reverts commit 595823a.

recommender-front/src/App.jsx

@@ -33,13 +33,13 @@ function App() {
   const [warning, setWarning] = useState(false);
   const [headerHidden, setHeaderHidden] = useState(false);
   const [selectedCategories, setSelectedCategories] = useState(['All']);
-  const [medicalCategories, setMedicalCategories] = useState(['None']);
+  const [medicalCategories, setMedicalCategories] = useState([]);
   const toggleHeader = () => {
     setHeaderHidden(!headerHidden);
   };
 
   const handleOptionChange = (event) => {
-    setAccessibility(event);
+    setAccessibility(event.target.value);
   };
 
   const handleSliderChange = (event) => {
@@ -168,6 +168,7 @@ function App() {
                     className={`header-container${showAlert || headerHidden ? ' disabled' : ''}`}
                   >
                     <HeaderComponent
+                      accessibility={accessibility}
                       handleChange={handleOptionChange}
                       times={times}
                       sliderValue={selectedValue}

recommender-front/src/components/header/AccessibilityComponent.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+
+function AccessibilityComponent({ accessibility, handleChange }) {
+  return (
+    <FormControl>
+      <Select displayEmpty value={accessibility} onChange={handleChange} data-testid="accessibility-select">
+        <MenuItem value="">
+          <Typography variant="h2">All attractions</Typography>
+        </MenuItem>
+        <MenuItem value="rollator">
+          <Typography variant="h2">Rollator accessible</Typography>
+        </MenuItem>
+        <MenuItem value="stroller">
+          <Typography variant="h2">Stroller accessible</Typography>
+        </MenuItem>
+        <MenuItem value="wheelchair">
+          <Typography variant="h2">Wheelchair accessible</Typography>
+        </MenuItem>
+        <MenuItem value="reduced_mobility">
+          <Typography variant="h2">Reduced mobility</Typography>
+        </MenuItem>
+        <MenuItem value="visually_impaired">
+          <Typography variant="h2">Visually impaired</Typography>
+        </MenuItem>
+      </Select>
+    </FormControl>
+  );
+}
+
+export default AccessibilityComponent;

recommender-front/src/components/header/AccessibilityComponent.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AccessibilityComponent from './AccessibilityComponent';
+
+jest.mock('react-leaflet', () => {
+  const originalModule = jest.requireActual('react-leaflet');
+  return {
+    ...originalModule,
+    MapContainer: originalModule.MapContainer,
+  };
+});
+
+describe('AccessibilityComponent', () => {
+  test('renders without crashing', () => {
+    const mockProps = {
+      accessibility: 'wheelchair',
+    };
+
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    render(<AccessibilityComponent {...mockProps} />);
+  });
+});

recommender-front/src/components/header/HeaderComponent.jsx

@@ -2,17 +2,17 @@ import React from 'react';
 import Slider from '@mui/material/Slider';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
+import AccessibilityComponent from './AccessibilityComponent';
 import LoadingIndicatorComponent from './LoadingIndicatorComponent';
 import InfoComponent from './InfoComponent';
 import parseSliderLabels from '../../utils/HeaderUtils';
 import PreferenceSelector from '../selector/PreferenceSelector';
 import logo from '../../assets/WeatherBasedRecommender.svg';
 import '../../assets/style.css';
 import MedicalSelector from '../selector/MedicalSelector';
-import AccessibilitySelector from '../selector/AccessibilitySelector';
 
 function HeaderComponent({
-  handleChange, times, sliderValue, onChange, isMobile, open, handleOpen,
+  accessibility, handleChange, times, sliderValue, onChange, isMobile, open, handleOpen,
   handleClose, poiData, selectedCategories, setSelectedCategories,
   medicalCategories, setMedicalCategories,
 }) {
@@ -56,9 +56,20 @@ function HeaderComponent({
           selectedCategories={selectedCategories}
           onCategoryChange={setSelectedCategories}
         />
-        <AccessibilitySelector
-          onCategoryChange={handleChange}
-        />
+      </Grid>
+      <Grid
+        item
+        xs={5}
+        sm={5}
+        md={3}
+        lg={3}
+        order={{ lg: 3, md: 3, sm: 5, xs: 5 }}
+        className="dropdown-item"
+        key="dropdown"
+        display="flex"
+        justifyContent="center"
+      >
+        <AccessibilityComponent accessibility={accessibility} handleChange={handleChange} />
       </Grid>
       <Grid
         item

recommender-front/src/components/selector/MedicalSelector.jsx

@@ -4,24 +4,19 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
-import '../../assets/style.css';
 import Typography from '@mui/material/Typography';
-import MenuIcon from '@mui/icons-material/Menu';
+import '../../assets/style.css';
 
 function MedicalSelector({ selectedCategories, onCategoryChange }) {
   const allCategories = ['Mental stress', 'Obesity', 'Diabetes (Type I)', 'Diabetes (Type II)', 'Hypertension', 'Coronary heart disease', 'Bronchial asthma', 'Osteoporosis', 'Back pain', 'Pregnancy'];
-  const isNoneChecked = selectedCategories.includes('None');
-
-  const handleNoneCheckboxChange = () => {
-    onCategoryChange(isNoneChecked ? [] : ['None']);
-  };
 
   const handleCategoryCheckboxChange = (category) => {
     if (selectedCategories.includes(category)) {
       onCategoryChange(selectedCategories.filter((item) => item !== category));
     } else {
-      onCategoryChange([...selectedCategories.filter((item) => item !== 'None'), category]);
+      onCategoryChange([...selectedCategories, category]);
     }
   };
 
@@ -47,7 +42,7 @@ function MedicalSelector({ selectedCategories, onCategoryChange }) {
       >
         <MenuIcon />
       </IconButton>
-      <Typography variant="h7">Health</Typography>
+      <Typography variant="h6">Medical condition</Typography>
       <Menu
         id="category-menu"
         anchorEl={anchorEl}
@@ -64,20 +59,6 @@ function MedicalSelector({ selectedCategories, onCategoryChange }) {
         >
           <CloseIcon />
         </IconButton>
-        <MenuItem>
-          <FormControlLabel
-            control={(
-              <Checkbox
-                checked={isNoneChecked}
-                onChange={handleNoneCheckboxChange}
-                name="allCheckbox"
-                className="icon-button-selector"
-                color="primary"
-              />
-            )}
-            label="None"
-          />
-        </MenuItem>
         {allCategories.map((category) => (
           <MenuItem key={category}>
             <FormControlLabel

recommender-front/src/components/selector/PreferenceSelector.jsx

@@ -6,8 +6,8 @@ import MenuItem from '@mui/material/MenuItem';
 import IconButton from '@mui/material/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
-import '../../assets/style.css';
 import Typography from '@mui/material/Typography';
+import '../../assets/style.css';
 
 function PreferenceSelector({ selectedCategories, onCategoryChange }) {
   const allCategories = ['Sport halls', 'Open air pools and beaches', 'Athletic fields and venues', 'Neighbourhood sports areas', 'Fitness training parks'];
@@ -48,7 +48,7 @@ function PreferenceSelector({ selectedCategories, onCategoryChange }) {
       >
         <MenuIcon />
       </IconButton>
-      <Typography variant="h7">Categories</Typography>
+      <Typography variant="h6">Categories</Typography>
       <Menu
         id="category-menu"
         anchorEl={anchorEl}

recommender-front/src/pages/SimulatorPage.test.jsx

@@ -77,7 +77,7 @@ describe('SimulatorPage', () => {
     global.fetch.mockRestore();
   });
 
-/*  it('shows the overlay when currentTime is past sunset', () => {
+  it('shows the overlay when currentTime is past sunset', () => {
     const { getByPlaceholderText, getByTestId } = render(<SimulatorPage />);
     const currentTimeInput = getByPlaceholderText('Current Time');
     fireEvent.change(currentTimeInput, { target: { value: '23:00' } });
@@ -91,5 +91,5 @@ describe('SimulatorPage', () => {
     fireEvent.change(currentTimeInput, { target: { value: '16:00' } });
 
     expect(queryByTestId('night-overlay')).toBeNull();
-  }); */
+  });
 });