brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed avatar and phone number settigns

Browse source
This commit is contained in:
Carter 2024-11-27 14:02:06 -06:00
parent 1da5faf59c
commit 15c3c8b536
3 changed files with 103 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

73
package-lock.json generated
View file

@ -21,12 +21,14 @@
"lodash": "^4.17.21",
"moment": "^2.30.1",
"moment-timezone": "^0.5.46",
"mui-tel-input": "^7.0.0",
"notistack": "^3.0.1",
"protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-image": "^4.1.0",
"react-infinite-scroller": "^1.2.6",
"react-phone-input-2": "^2.15.1",
"react-router-dom": "^6.28.0"
},
"devDependencies": {
@ -3759,6 +3761,12 @@
"node": ">= 0.8.0"
}
},
"node_modules/libphonenumber-js": {
"version": "1.11.15",
"resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.11.15.tgz",
"integrity": "sha512-M7+rtYi9l5RvMmHyjyoF3BHHUpXTYdJ0PezZGHNs0GyW1lO+K7jxlXpbdIb7a56h0nqLYdjIw+E+z0ciGaJP7g==",
"license": "MIT"
},
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@ -3783,12 +3791,36 @@
"version": "4.17.21",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"license": "MIT"
},
"node_modules/lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
"license": "MIT"
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"node_modules/lodash.reduce": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
"integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw==",
"license": "MIT"
},
"node_modules/lodash.startswith": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
"integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww==",
"license": "MIT"
},
"node_modules/long": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
@ -3907,6 +3939,29 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
},
"node_modules/mui-tel-input": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/mui-tel-input/-/mui-tel-input-7.0.0.tgz",
"integrity": "sha512-kLxFmuoSwX5qG3PRO2BQ2hNquy8JfQBOofBhtoQsiRwPsAtwW77OIzQPmXPnftRjuc7uYJt6PW7oVeqx7wkK3g==",
"license": "MIT",
"dependencies": {
"@types/node": "^22.9.0",
"libphonenumber-js": "^1.11.14"
},
"peerDependencies": {
"@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0",
"@mui/material": "^6.0.0",
"@types/react": "^18.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@ -4275,6 +4330,24 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
},
"node_modules/react-phone-input-2": {
"version": "2.15.1",
"resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
"integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
"license": "MIT",
"dependencies": {
"classnames": "^2.2.6",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.reduce": "^4.6.0",
"lodash.startswith": "^4.2.1",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
"react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
}
},
"node_modules/react-refresh": {
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

2
package.json
View file

@ -30,12 +30,14 @@
"lodash": "^4.17.21",
"moment": "^2.30.1",
"moment-timezone": "^0.5.46",
"mui-tel-input": "^7.0.0",
"notistack": "^3.0.1",
"protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-image": "^4.1.0",
"react-infinite-scroller": "^1.2.6",
"react-phone-input-2": "^2.15.1",
"react-router-dom": "^6.28.0"
},
"devDependencies": {

39
src/user/UserSettings.tsx
View file

@ -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}