diff --git a/package-lock.json b/package-lock.json index bc6b43f..5dcde9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index c0afe29..3ebf2cf 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/user/UserSettings.tsx b/src/user/UserSettings.tsx index 09f3132..c91ff00 100644 --- a/src/user/UserSettings.tsx +++ b/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(false); const [avatarUrl, setAvatarUrl] = useState(""); + 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) { changeName(event.target.value.toString())} @@ -142,19 +166,12 @@ export default function UserSettings(props: Props) { Phone Number - {/* changePhoneNumber(value)} - value={phoneNumber} - onlyCountries={["ca", "us"]} - defaultCountry={"ca"} - countryCodeEditable={false} - /> */} - lol + - - + +