Merge branch 'auth_stuff' into staging_environment

src/providers/auth.tsx

@@ -16,8 +16,6 @@ export default function AuthWrapper(props: Props) {
     const url = new URL(window.location.href);
 
     const isManualLoginPage = url.pathname.includes("/login");
-    console.log(url.pathname)
-    console.log(isManualLoginPage)
 
     if (isManualLoginPage) {
       const options: RedirectLoginOptions = {
@@ -33,7 +31,7 @@ export default function AuthWrapper(props: Props) {
       if (parsed.email && parsed.email !== "") {
         options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
       }
-      console.log(options.authorizationParams)
+      
       loginWithRedirect(options)
 
     } else if (!isAuthenticated && !isLoading) {

src/user/UserSettings.tsx

@@ -10,10 +10,10 @@ 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, 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, TextField, Theme, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography } from "@mui/material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import UserAvatar from "./UserAvatar";
-import { useGlobalState, useUserAPI } from "providers";
+import { useGlobalState, useSnackbar, useUserAPI } from "providers";
 import { useEffect, useState } from "react";
 import { makeStyles } from "@mui/styles";
 import { blue } from "@mui/material/colors";
@@ -26,8 +26,11 @@ import moment from "moment";
 import { IconPicker } from "common/IconPicker";
 import { MuiTelInput } from "mui-tel-input";
 import { useThemeMode } from "theme/AppThemeProvider";
-import ContractsIcon from "products/CommonIcons/contractIcon";
+// import ContractsIcon from "products/CommonIcons/contractIcon";
+import UnitsIcon from "@mui/icons-material/Category";
 import { setThemeType } from "theme";
+import { IsAdaptiveAgriculture } from "services/whiteLabel";
+import { setDistanceUnit, setGrainUnit, setPressureUnit, setTemperatureUnit } from "utils";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -71,14 +74,16 @@ export default function UserSettings(props: Props) {
   const [sharing, setSharing] = useState(false)
   const userAPI = useUserAPI();
   const classes = useStyles()
+  const { success } = useSnackbar();
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [user, setUser] = useState<User>(globalState.user);
   const [profileExpanded, setProfileExpanded] = useState<boolean>(false);
   const [avatarExpanded, setAvatarExpanded] = useState<boolean>(false);
   const [notificationsExpanded, setNotificationsExpanded] = useState<boolean>(false);
+  const [unitsExpanded, setUnitsExpanded] = useState<boolean>(false);
   const [avatarUrl, setAvatarUrl] = useState<string>("");
-  const [themeValue, setThemeValue] = useState<"light" | "dark" | "system">(themeMode.mode)
+  // const [themeValue, setThemeValue] = useState<"light" | "dark" | "system">(themeMode.mode)
 
   useEffect(() => {
     function changeIcon(icon: string | undefined) {
@@ -99,11 +104,11 @@ export default function UserSettings(props: Props) {
       .updateUser(user.id(), user.protobuf())
       .then(() => {
         dispatch({ key: "user", value: user });
-        // success("User settings successfully updated!");
+        success("User settings successfully updated!");
-        // setTemperatureUnit(user.settings.temperatureUnit);
+        setTemperatureUnit(user.settings.temperatureUnit);
-        // setPressureUnit(user.settings.pressureUnit);
+        setPressureUnit(user.settings.pressureUnit);
-        // setDistanceUnit(user.settings.distanceUnit);
+        setDistanceUnit(user.settings.distanceUnit);
-        // setGrainUnit(user.settings.grainUnit);
+        setGrainUnit(user.settings.grainUnit);
       })
       .catch((error: any) => {
         error("Error occurred while updating your profile");
@@ -362,6 +367,160 @@ export default function UserSettings(props: Props) {
     setThemeType(theme)
   };
 
+  const changePressureUnit = (value: any) => {
+    let updatedUser = User.clone(user);
+    let pressureUnit: pond.PressureUnit;
+    switch (value) {
+      case 1:
+        pressureUnit = pond.PressureUnit.PRESSURE_UNIT_KILOPASCALS;
+        break;
+      case 2:
+        pressureUnit = pond.PressureUnit.PRESSURE_UNIT_INCHES_OF_WATER;
+        break;
+      default:
+        pressureUnit = pond.PressureUnit.PRESSURE_UNIT_UNKNOWN;
+        break;
+    }
+    updatedUser.settings.pressureUnit = pressureUnit;
+    setUser(updatedUser);
+  };
+
+  const changeTemperatureUnit = (value: any) => {
+    let updatedUser = User.clone(user);
+    let temperatureUnit: pond.TemperatureUnit;
+    switch (value) {
+      case 1:
+        temperatureUnit = pond.TemperatureUnit.TEMPERATURE_UNIT_CELSIUS;
+        break;
+      case 2:
+        temperatureUnit = pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT;
+        break;
+      default:
+        temperatureUnit = pond.TemperatureUnit.TEMPERATURE_UNIT_UNKNOWN;
+        break;
+    }
+    updatedUser.settings.temperatureUnit = temperatureUnit;
+    setUser(updatedUser);
+  };
+
+  const changeDistanceUnit = (value: any) => {
+    let updatedUser = User.clone(user);
+    let distanceUnit: pond.DistanceUnit;
+    switch (value) {
+      case 1:
+        distanceUnit = pond.DistanceUnit.DISTANCE_UNIT_FEET;
+        break;
+      case 2:
+        distanceUnit = pond.DistanceUnit.DISTANCE_UNIT_METERS;
+        break;
+      default:
+        distanceUnit = pond.DistanceUnit.DISTANCE_UNIT_UNKNOWN;
+        break;
+    }
+    updatedUser.settings.distanceUnit = distanceUnit;
+    setUser(updatedUser);
+  };
+
+  const changeGrainUnit = (value: any) => {
+    let updatedUser = User.clone(user);
+    let grainUnit: pond.GrainUnit;
+    switch (value) {
+      case 1:
+        grainUnit = pond.GrainUnit.GRAIN_UNIT_BUSHELS;
+        break;
+      case 2:
+        grainUnit = pond.GrainUnit.GRAIN_UNIT_WEIGHT;
+        break;
+      default:
+        grainUnit = pond.GrainUnit.GRAIN_UNIT_UNKNOWN;
+        break;
+    }
+    updatedUser.settings.grainUnit = grainUnit;
+    setUser(updatedUser);
+  };
+
+  const unitPreferences = () => {
+    const { pressureUnit, temperatureUnit, distanceUnit, grainUnit } = user.settings;
+    return (
+      <Grid2 container>
+        <Grid2 size={{ xs: 12 }}>
+          <TextField
+            select
+            fullWidth
+            id="pressureUnit"
+            name="pressureUnit"
+            label="Pressure Unit"
+            value={pressureUnit ? pressureUnit : pond.PressureUnit.PRESSURE_UNIT_INCHES_OF_WATER}
+            onChange={event => changePressureUnit(event.target.value)}
+            margin="normal"
+            variant="outlined"
+            InputLabelProps={{ shrink: true }}>
+            <MenuItem value={pond.PressureUnit.PRESSURE_UNIT_KILOPASCALS}>
+              Kilopascals (kPa)
+            </MenuItem>
+            <MenuItem value={pond.PressureUnit.PRESSURE_UNIT_INCHES_OF_WATER}>
+              Inches of Water (iwg)
+            </MenuItem>
+          </TextField>
+        </Grid2>
+        <Grid2 size={{ xs: 12 }}>
+          <TextField
+            select
+            fullWidth
+            id="temperatureUnit"
+            name="temperatureUnit"
+            label="Temperature Unit"
+            value={
+              temperatureUnit ? temperatureUnit : pond.TemperatureUnit.TEMPERATURE_UNIT_CELSIUS
+            }
+            onChange={event => changeTemperatureUnit(event.target.value)}
+            margin="normal"
+            variant="outlined"
+            InputLabelProps={{ shrink: true }}>
+            <MenuItem value={pond.TemperatureUnit.TEMPERATURE_UNIT_CELSIUS}>Celsius (°C)</MenuItem>
+            <MenuItem value={pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT}>
+              Fahrenheit (°F)
+            </MenuItem>
+          </TextField>
+        </Grid2>
+        <Grid2 size={{ xs: 12 }}>
+          <TextField
+            select
+            fullWidth
+            id="distanceUnit"
+            name="distanceUnit"
+            label="Distance Unit"
+            value={distanceUnit ? distanceUnit : pond.DistanceUnit.DISTANCE_UNIT_METERS}
+            onChange={event => changeDistanceUnit(event.target.value)}
+            margin="normal"
+            variant="outlined"
+            InputLabelProps={{ shrink: true }}>
+            <MenuItem value={pond.DistanceUnit.DISTANCE_UNIT_METERS}>Meters (m)</MenuItem>
+            <MenuItem value={pond.DistanceUnit.DISTANCE_UNIT_FEET}>Feet (ft)</MenuItem>
+          </TextField>
+        </Grid2>
+        {IsAdaptiveAgriculture() && (
+          <Grid2 size={{ xs: 12 }}>
+            <TextField
+              select
+              fullWidth
+              id="grainUnit"
+              name="grainUnit"
+              label="Grain Unit"
+              value={grainUnit ? grainUnit : pond.GrainUnit.GRAIN_UNIT_BUSHELS}
+              onChange={event => changeGrainUnit(event.target.value)}
+              margin="normal"
+              variant="outlined"
+              InputLabelProps={{ shrink: true }}>
+              <MenuItem value={pond.GrainUnit.GRAIN_UNIT_BUSHELS}>Bushels (bu)</MenuItem>
+              <MenuItem value={pond.GrainUnit.GRAIN_UNIT_WEIGHT}>Tonnes (mT)</MenuItem>
+            </TextField>
+          </Grid2>
+        )}
+      </Grid2>
+    );
+  };
+
   const themeToggle = () => {
     return (
       <ToggleButtonGroup
@@ -453,15 +612,15 @@ export default function UserSettings(props: Props) {
           </List>
         </Collapse>
 
-        {/* <Divider />
+        <Divider />
 
-        <ListItem button onClick={() => setUnitsExpanded(!unitsExpanded)}>
+        <ListItemButton onClick={() => setUnitsExpanded(!unitsExpanded)}>
           <ListItemIcon>
             <UnitsIcon />
           </ListItemIcon>
           <ListItemText primary="Preferred Units" />
           {unitsExpanded ? <ExpandLess /> : <ExpandMore />}
-        </ListItem>
+        </ListItemButton>
         <Collapse in={unitsExpanded} timeout="auto" unmountOnExit>
           <List component="div">
             <ListItem>
@@ -472,7 +631,7 @@ export default function UserSettings(props: Props) {
           </List>
         </Collapse>
 
-        <Divider />
+        {/* <Divider />
 
         <ListItem button onClick={() => setMapsExpanded(!mapsExpanded)}>
           <ListItemIcon>