fixed avatar and phone number settigns

src/user/UserSettings.tsx

@@ -3,7 +3,7 @@ import { AppBar, Box, Button, CircularProgress, Collapse, Divider, FormControl,
 import ResponsiveDialog from "common/ResponsiveDialog";
 import UserAvatar from "./UserAvatar";
 import { useGlobalState, useUserAPI } from "providers";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { makeStyles } from "@mui/styles";
 import { blue } from "@mui/material/colors";
 import ShareObject from "./ShareObject";
@@ -13,6 +13,7 @@ import SearchSelect from "common/SearchSelect";
 import {Option as OptionType} from "common/SearchSelect";
 import moment from "moment";
 import { IconPicker } from "common/IconPicker";
+import { MuiTelInput } from "mui-tel-input";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -62,6 +63,22 @@ export default function UserSettings(props: Props) {
   const [avatarExpanded, setAvatarExpanded] = useState<boolean>(false);
   const [avatarUrl, setAvatarUrl] = useState<string>("");
 
+  console.log(user.settings.avatar)
+
+  useEffect(() => {
+    function changeIcon(icon: string | undefined) {
+      let updatedUser = User.clone(user);
+      updatedUser.settings.avatar = icon ? icon : user.settings.name;
+      setUser(updatedUser);
+    }
+    if (avatarUrl === "") {
+      // changeIcon(user.settings.name);
+    } else {
+      changeIcon(avatarUrl);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [avatarUrl]);
+
   const submit = () => {
     userAPI
       .updateUser(user.id(), user.protobuf())
@@ -104,6 +121,12 @@ export default function UserSettings(props: Props) {
     setUser(updatedUser);
   };
 
+  const changePhoneNumber = (newPhoneNumber: string) => {
+    let updatedUser = User.clone(user);
+    updatedUser.settings.phoneNumber = newPhoneNumber;
+    setUser(updatedUser);
+  };
+
   const generalSettings = () => {
     const { name, email, phoneNumber, timezone } = user.settings;
 
@@ -132,6 +155,7 @@ export default function UserSettings(props: Props) {
         <Grid2>
           <TextField
             label="Preferred Name"
+            fullWidth
             value={name}
             helperText={"Email: " + email}
             onChange={event => changeName(event.target.value.toString())}
@@ -142,19 +166,12 @@ export default function UserSettings(props: Props) {
             <FormLabel component="legend" htmlFor="phone-number-input">
               Phone Number
             </FormLabel>
-            {/* <MuiPhoneNumber
-              onChange={(value: string) => changePhoneNumber(value)}
-              value={phoneNumber}
-              onlyCountries={["ca", "us"]}
-              defaultCountry={"ca"}
-              countryCodeEditable={false}
-            /> */}
-            lol
+            <MuiTelInput value={phoneNumber} onChange={changePhoneNumber} />
           </FormControl>
         </Grid2>
 
-        <Grid2 size={{xs: 12}}>
-          <Box minWidth="250px">
+        <Grid2 size={{ xs: 12 }}>
+          <Box>
             <SearchSelect
               label="Timezone"
               selected={{ label: timezone, value: timezone } as OptionType}