From 65a254d808f908bc2bb7259b3b8bcc0040e50709 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Wed, 10 Jan 2024 19:31:14 +0100 Subject: [PATCH] Allow username and email to be changed --- front/apps/web/package.json | 1 + front/apps/web/src/pages/_app.tsx | 33 +-- front/packages/models/src/query.tsx | 2 +- front/packages/primitives/src/button.tsx | 12 +- front/packages/primitives/src/select.web.tsx | 17 +- front/packages/ui/package.json | 2 + front/packages/ui/src/settings/index.tsx | 243 +++++++++++++++---- front/translations/en.json | 3 +- front/translations/fr.json | 3 +- front/yarn.lock | 3 + 10 files changed, 247 insertions(+), 72 deletions(-) diff --git a/front/apps/web/package.json b/front/apps/web/package.json index 380ccc91..412d11db 100644 --- a/front/apps/web/package.json +++ b/front/apps/web/package.json @@ -14,6 +14,7 @@ "format:fix": "prettier --write --ignore-path .gitignore '!src/utils/jotai-utils.tsx' ." }, "dependencies": { + "@gorhom/portal": "^1.0.14", "@kyoo/models": "workspace:^", "@kyoo/primitives": "workspace:^", "@kyoo/ui": "workspace:^", diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx index 67d108b1..f59ad22a 100755 --- a/front/apps/web/src/pages/_app.tsx +++ b/front/apps/web/src/pages/_app.tsx @@ -44,6 +44,7 @@ import { withTranslations } from "../i18n"; import arrayShuffle from "array-shuffle"; import { Tooltip } from "react-tooltip"; import { getCurrentAccount, readCookie, updateAccount } from "@kyoo/models/src/account-internal"; +import { PortalProvider } from "@gorhom/portal"; const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" }); @@ -136,21 +137,23 @@ const App = ({ Component, pageProps }: AppProps) => { - - - } - randomItems={[]} - {...layoutProps} - /> - + + + + } + randomItems={[]} + {...layoutProps} + /> + + diff --git a/front/packages/models/src/query.tsx b/front/packages/models/src/query.tsx index 36e57c89..bd9d0ee1 100644 --- a/front/packages/models/src/query.tsx +++ b/front/packages/models/src/query.tsx @@ -45,7 +45,7 @@ export const queryFn = async ( | { path: (string | false | undefined | null)[]; body?: object; - method: "GET" | "POST" | "DELETE"; + method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE"; authenticated?: boolean; apiUrl?: string; timeout?: number; diff --git a/front/packages/primitives/src/button.tsx b/front/packages/primitives/src/button.tsx index ee8f7403..971d7d6d 100644 --- a/front/packages/primitives/src/button.tsx +++ b/front/packages/primitives/src/button.tsx @@ -53,8 +53,16 @@ export const Button = forwardRef< props as any, )} > -

{text}

- {icon} + +

{text}

+ {icon} + ); }); diff --git a/front/packages/primitives/src/select.web.tsx b/front/packages/primitives/src/select.web.tsx index 80e1bef9..6bc3a60d 100644 --- a/front/packages/primitives/src/select.web.tsx +++ b/front/packages/primitives/src/select.web.tsx @@ -31,6 +31,7 @@ import { useYoshiki } from "yoshiki"; import { PressableFeedback } from "./links"; import { P } from "./text"; import { focusReset, ts } from "./utils"; +import { View } from "react-native"; export const Select = ({ label, @@ -68,10 +69,18 @@ export const Select = ({ }, })} > -

{}

- - - + +

{}

+ + + + diff --git a/front/packages/ui/package.json b/front/packages/ui/package.json index d7a662d0..1d12c760 100644 --- a/front/packages/ui/package.json +++ b/front/packages/ui/package.json @@ -8,12 +8,14 @@ "@kyoo/primitives": "workspace:^" }, "devDependencies": { + "@gorhom/portal": "^1.0.14", "@shopify/flash-list": "^1.6.3", "@types/react": "18.2.39", "react-native-uuid": "^2.0.1", "typescript": "^5.3.2" }, "peerDependencies": { + "@gorhom/portal": "*", "@kesha-antonov/react-native-background-downloader": "*", "@material-symbols/svg-400": "*", "@shopify/flash-list": "^1.3.1", diff --git a/front/packages/ui/src/settings/index.tsx b/front/packages/ui/src/settings/index.tsx index ab8f4573..5bf97200 100644 --- a/front/packages/ui/src/settings/index.tsx +++ b/front/packages/ui/src/settings/index.tsx @@ -19,25 +19,43 @@ */ import { + Account, + MutationParam, QueryIdentifier, QueryPage, User, UserP, + queryFn, setUserTheme, useAccount, useUserTheme, } from "@kyoo/models"; -import { Container, H1, HR, Icon, P, Select, SubP, imageBorderRadius, ts } from "@kyoo/primitives"; +import { + Button, + Container, + H1, + HR, + Icon, + Input, + P, + Select, + SubP, + SwitchVariant, + imageBorderRadius, + ts, +} from "@kyoo/primitives"; import { DefaultLayout } from "../layout"; -import { Children, ReactElement, ReactNode } from "react"; +import { Children, ReactElement, ReactNode, useState, useTransition } from "react"; import { useTranslation } from "react-i18next"; import { ScrollView, View } from "react-native"; -import { px, rem, useYoshiki } from "yoshiki/native"; +import { Portal } from "@gorhom/portal"; +import { percent, px, rem, useYoshiki } from "yoshiki/native"; import Theme from "@material-symbols/svg-400/outlined/dark_mode.svg"; import Username from "@material-symbols/svg-400/outlined/badge.svg"; import Mail from "@material-symbols/svg-400/outlined/mail.svg"; import Password from "@material-symbols/svg-400/outlined/password.svg"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; const Preference = ({ icon, @@ -89,20 +107,164 @@ const SettingsContainer = ({ return (

{title}

- theme.variant.background, borderRadius: px(imageBorderRadius) })} - > - {Children.map(children, (x, i) => ( - <> - {i !== 0 &&
} - {x} - - ))} - + + {({ css }) => ( + theme.background, + borderRadius: px(imageBorderRadius), + })} + > + {Children.map(children, (x, i) => ( + <> + {i !== 0 &&
} + {x} + + ))} + + )} + ); }; +const ChangePopup = ({ + label, + icon, + inital, + apply, + close, +}: { + label: string; + icon: Icon; + inital: string; + apply: (v: string) => Promise; + close: () => void; +}) => { + const { t } = useTranslation(); + const [value, setValue] = useState(inital); + + return ( + + + {({ css }) => ( + theme.themeOverlay, + })} + > + theme.background, + })} + > + + +

{label}

+ + setValue(v)} /> + +