integrate new ui design with api call

frontend/src/components/sidebar.tsx

@@ -5,8 +5,6 @@ import { useEffect, useState } from "react";
 import NumberField from "./numberField";
 import getRatingsProviders from "../functions/getRatingsProviders";
 import capitaliseFirstLetter from "../functions/capitaliseFirstLetter";
-import CheckIcon from '@mui/icons-material/Check';
-import ClearIcon from '@mui/icons-material/Clear';
 
 interface SidebarProps {
     filters : FilterState;
@@ -51,9 +49,9 @@ export default function Sidebar(props : SidebarProps) {
                     onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: value}))}
                 />
             </Box>
+            <Divider />
             {!props.filters.nameOnly && 
             <>
-                <Divider />
                 <Box sx={{ p: 2}}>
                     <Typography component='legend'>Cities</Typography>
                     <Autocomplete
@@ -105,37 +103,37 @@ export default function Sidebar(props : SidebarProps) {
                     </Grid>
                 </Box>
                 <Divider />
-                <Box sx={{p: 2}}>
-                    <Typography component='legend'>Results per Page</Typography>
-                    <NumberField 
-                        label="" 
-                        value={props.filters.resultsPerPage}
-                        onValueChange={value => props.onChange(Object.assign({}, {...props.filters}, {resultsPerPage: value, currentPage: 1}))}
-                        min={10} 
-                        max={40} 
-                    />
-                </Box>
-                <Divider />
-                <Box sx={{p: 2}}>
-                    <InputLabel id='sort-label'>Sort By</InputLabel>
-                    <Select
-                        labelId='sort-label'
-                        value={props.filters.sortBy}
-                        onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {sortBy: (e.target as any).value}))}
-                    >
-                        {sortingOptions.map(option => {
-                            return (
-                                <MenuItem 
-                                    value={option.value} 
-                                    selected={option.value === props.filters.sortBy}
-                                >
-                                    {option.name}
-                                </MenuItem>
-                            )
-                        })}
-                    </Select>
-                </Box>
             </>}
+            <Box sx={{p: 2}}>
+                <Typography component='legend'>Results per Page</Typography>
+                <NumberField 
+                    label="" 
+                    value={props.filters.resultsPerPage}
+                    onValueChange={value => props.onChange(Object.assign({}, {...props.filters}, {resultsPerPage: value, currentPage: 1}))}
+                    min={10} 
+                    max={40} 
+                />
+            </Box>
+            <Divider />
+            <Box sx={{p: 2}}>
+                <InputLabel id='sort-label'>Sort By</InputLabel>
+                <Select
+                    labelId='sort-label'
+                    value={props.filters.sortBy}
+                    onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {sortBy: (e.target as any).value}))}
+                >
+                    {sortingOptions.map(option => {
+                        return (
+                            <MenuItem 
+                                value={option.value} 
+                                selected={option.value === props.filters.sortBy}
+                            >
+                                {option.name}
+                            </MenuItem>
+                        )
+                    })}
+                </Select>
+            </Box>
         </Paper>
     )
 }

frontend/src/functions/getSolicitors.ts

@@ -4,24 +4,29 @@ import FilterState from "../models/filterState";
 import api from "./axios";
 
 export default async function GetSolicitors(filters : FilterState) {
-    var minRating = filters.minRating;
-    if (minRating == null) {
-        minRating = 0;
-    }
 
-    let queryString = `pageSize=${filters.resultsPerPage}&pageNumber=${filters.currentPage}&ratingsProvider=${filters.ratingsProvider}&minRating=${minRating}`;
+    let queryString = `pageSize=${filters.resultsPerPage}&pageNumber=${filters.currentPage}`;
-    if (filters.cities.length > 0) {
-        queryString += '&cities=' + filters.cities.join('&cities=');
-    }
-    
-    if (filters.sortBy != null) {
-        queryString += `&orderingType=${filters.sortBy}`;
-    }
 
     if (filters.namePart != null && filters.namePart !== '') {
         queryString += `&nameFilter=${filters.namePart}`;
     }
 
+    if (!filters.nameOnly) {
+        var minRating = filters.minRating;
+        if (minRating == null) {
+            minRating = 0;
+        }
+        queryString += `&minRating=${minRating}&ratingsProvider=${filters.ratingsProvider}`;
+
+        if (filters.cities.length > 0) {
+            queryString += '&cities=' + filters.cities.join('&cities=');
+        }
+    }
+        
+    if (filters.sortBy != null) {
+        queryString += `&orderingType=${filters.sortBy}`;
+    }
+
     const response = await api.get(`/solicitors?${queryString}`);
     return response.data as PaginationResponse<SolicitorSummary>;
 }