added map zoom back into to the user settings

src/user/UserSettings.tsx

@@ -10,7 +10,7 @@ import {
   Textsms as TextIcon,
   Contrast,
 } from "@mui/icons-material";
-import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem, Radio, RadioGroup, TextField, Theme, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography } from "@mui/material";
+import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem, Radio, RadioGroup, Slider, TextField, Theme, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography } from "@mui/material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import UserAvatar from "./UserAvatar";
 import { useGlobalState, useSnackbar, useUserAPI } from "providers";
@@ -31,6 +31,7 @@ import UnitsIcon from "@mui/icons-material/Category";
 import { setThemeType } from "theme";
 import { IsAdaptiveAgriculture } from "services/whiteLabel";
 import { setDistanceUnit, setGrainUnit, setPressureUnit, setTemperatureUnit } from "utils";
+import FieldsIcon from "products/AgIcons/FieldsIcon";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -82,7 +83,9 @@ export default function UserSettings(props: Props) {
   const [avatarExpanded, setAvatarExpanded] = useState<boolean>(false);
   const [notificationsExpanded, setNotificationsExpanded] = useState<boolean>(false);
   const [unitsExpanded, setUnitsExpanded] = useState<boolean>(false);
+  const [mapsExpanded, setMapsExpanded] = useState<boolean>(false);
   const [avatarUrl, setAvatarUrl] = useState<string>("");
+  const [sliderVal, setSliderVal] = useState(globalState.user.settings.mapZoom);
   // const [themeValue, setThemeValue] = useState<"light" | "dark" | "system">(themeMode.mode)
 
   useEffect(() => {
@@ -151,6 +154,30 @@ export default function UserSettings(props: Props) {
     setUser(updatedUser);
   };
 
+  const changeDefaultZoom = (value: number) => {
+    setSliderVal(value);
+    let updatedUser = User.clone(user);
+    updatedUser.settings.mapZoom = value;
+    setUser(updatedUser)
+  };
+
+  const mapSettings = () => {
+    return (
+      <Box display="flex">
+          <Typography>Map Zoom Level</Typography>
+          <Slider
+            valueLabelDisplay="auto"
+            value={sliderVal}
+            min={1}
+            max={16}
+            onChange={(_, val) => {
+              changeDefaultZoom(val as number);
+            }}
+          />
+      </Box>
+    );
+  };
+
   const generalSettings = () => {
     const { name, email, phoneNumber, timezone } = user.settings;
 
@@ -631,15 +658,15 @@ export default function UserSettings(props: Props) {
           </List>
         </Collapse>
 
-        {/* <Divider />
+        <Divider />
 
-        <ListItem button onClick={() => setMapsExpanded(!mapsExpanded)}>
+        <ListItemButton onClick={() => setMapsExpanded(!mapsExpanded)}>
           <ListItemIcon>
             <FieldsIcon />
           </ListItemIcon>
           <ListItemText primary={"Map Settings"} />
           {mapsExpanded ? <ExpandLess /> : <ExpandMore />}
-        </ListItem>
+        </ListItemButton>
         <Collapse in={mapsExpanded} timeout="auto" unmountOnExit>
           <List component="div">
             <ListItem>
@@ -648,7 +675,7 @@ export default function UserSettings(props: Props) {
               </ListItemText>
             </ListItem>
           </List>
-        </Collapse> */}
+        </Collapse>
       </List>
     );
   };