setNewValue(v)}
placeholder={t("settings.account.password.newPassword")}
/>
- {error && theme.colors.red })}>{error}
}
-
+ {error && (
+ theme.colors.red })}>{error}
+ )}
+
@@ -118,7 +98,7 @@ export const SettingsContainer = ({
theme.background,
- borderRadius: px(imageBorderRadius),
+ borderRadius: px(6),
})}
>
{Children.map(children, (x, i) => (
@@ -135,34 +115,34 @@ export const SettingsContainer = ({
);
};
-export const useSetting = (setting: Setting) => {
+export const useSetting = (
+ setting: Setting,
+) => {
const account = useAccount();
-
- const queryClient = useQueryClient();
const { mutateAsync } = useMutation({
- mutationFn: async (update: Partial) =>
- await queryFn({
- path: ["auth", "me"],
- method: "PATCH",
- body: { settings: { ...account!.settings, ...update } },
- }),
- onMutate: async (newSettings) => {
- const next = { ...account!, settings: { ...account!.settings, ...newSettings } };
- await queryClient.cancelQueries({ queryKey: ["auth", "me"] });
- const previous = queryClient.getQueryData(["auth", "me"]);
- queryClient.setQueryData(["auth", "me"], next);
- return { previous, next };
- },
- onError: (_, __, context) => {
- queryClient.setQueryData(["auth", "me"], context!.previous);
- },
- onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["auth", "me"] }),
+ method: "PATCH",
+ path: ["auth", "users", "me"],
+ compute: (update: Partial) => ({
+ body: {
+ claims: {
+ settings: { ...account!.claims.settings, ...update },
+ },
+ },
+ }),
+ optimistic: (update) => ({
+ ...account,
+ claims: {
+ ...account!.claims,
+ settings: { ...account!.claims.settings, ...update },
+ },
+ }),
+ invalidate: ["auth", "users", "me"],
});
if (!account) return null;
return [
- account.settings[setting],
- async (value: User["settings"][Setting]) => {
+ account.claims.settings[setting],
+ async (value: User["claims"]["settings"][Setting]) => {
await mutateAsync({ [setting]: value });
},
] as const;
diff --git a/front/src/ui/settings/general.tsx b/front/src/ui/settings/general.tsx
new file mode 100644
index 00000000..6266eff8
--- /dev/null
+++ b/front/src/ui/settings/general.tsx
@@ -0,0 +1,72 @@
+// import Theme from "@material-symbols/svg-400/outlined/dark_mode.svg";
+import Language from "@material-symbols/svg-400/outlined/language.svg";
+import Android from "@material-symbols/svg-400/rounded/android.svg";
+import Public from "@material-symbols/svg-400/rounded/public.svg";
+import { useTranslation } from "react-i18next";
+import { Link, Select } from "~/primitives";
+import { supportedLanguages } from "~/providers/translations.compile";
+import { useLanguageName } from "~/track-utils";
+import { Preference, SettingsContainer } from "./base";
+
+export const GeneralSettings = () => {
+ const { t, i18n } = useTranslation();
+ // const theme = useUserTheme("auto");
+ const getLanguageName = useLanguageName();
+
+ return (
+
+ {/* */}
+ {/* */}
+
+
+
+ );
+};
+
+export const About = () => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/front/src/ui/settings/index.tsx b/front/src/ui/settings/index.tsx
new file mode 100644
index 00000000..f1865a6a
--- /dev/null
+++ b/front/src/ui/settings/index.tsx
@@ -0,0 +1,20 @@
+import { ScrollView } from "react-native";
+import { ts } from "~/primitives";
+import { useAccount } from "~/providers/account-context";
+import { AccountSettings } from "./account";
+import { About, GeneralSettings } from "./general";
+// import { OidcSettings } from "./oidc";
+import { PlaybackSettings } from "./playback";
+
+export const SettingsPage = () => {
+ const account = useAccount();
+ return (
+
+
+ {account && }
+ {account && }
+ {/* {account && } */}
+
+
+ );
+};
diff --git a/front/src/ui/settings/oidc.tsx b/front/src/ui/settings/oidc.tsx
new file mode 100644
index 00000000..0f18fd60
--- /dev/null
+++ b/front/src/ui/settings/oidc.tsx
@@ -0,0 +1,108 @@
+// import {
+// type QueryIdentifier,
+// type ServerInfo,
+// ServerInfoP,
+// queryFn,
+// useAccount,
+// useFetch,
+// } from "@kyoo/models";
+// import { Button, IconButton, Link, Skeleton, tooltip, ts } from "@kyoo/primitives";
+// import { useTranslation } from "react-i18next";
+// import { ImageBackground } from "react-native";
+// import { rem, useYoshiki } from "yoshiki/native";
+// import { ErrorView } from "../errors";
+// import { Preference, SettingsContainer } from "./base";
+//
+// import Badge from "@material-symbols/svg-400/outlined/badge.svg";
+// import Remove from "@material-symbols/svg-400/outlined/close.svg";
+// import OpenProfile from "@material-symbols/svg-400/outlined/open_in_new.svg";
+// import { useMutation, useQueryClient } from "@tanstack/react-query";
+//
+// export const OidcSettings = () => {
+// const account = useAccount()!;
+// const { css } = useYoshiki();
+// const { t } = useTranslation();
+// const { data, error } = useFetch(OidcSettings.query());
+// const queryClient = useQueryClient();
+// const { mutateAsync: unlinkAccount } = useMutation({
+// mutationFn: async (provider: string) =>
+// await queryFn({
+// path: ["auth", "login", provider],
+// method: "DELETE",
+// }),
+// onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["auth", "me"] }),
+// });
+//
+// return (
+//
+// {error ? (
+//
+// ) : data ? (
+// Object.entries(data.oidc).map(([id, x]) => {
+// const acc = account.externalId[id];
+// return (
+//
+// )
+// }
+// >
+// {acc ? (
+// <>
+// {acc.profileUrl && (
+//
+// )}
+// unlinkAccount(id)}
+// {...tooltip(t("settings.oidc.delete", { provider: x.displayName }))}
+// />
+//
+// ) : (
+//
+// )}
+//