From 18ff6fe71bc51acadeddb640fe77e0cf7ec2212c Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sat, 17 Feb 2024 19:40:03 +0100 Subject: [PATCH] Move admin's user list to specific file --- front/packages/ui/src/admin/index.tsx | 148 +---------------------- front/packages/ui/src/admin/users.tsx | 164 ++++++++++++++++++++++++++ 2 files changed, 168 insertions(+), 144 deletions(-) create mode 100644 front/packages/ui/src/admin/users.tsx diff --git a/front/packages/ui/src/admin/index.tsx b/front/packages/ui/src/admin/index.tsx index ff0031d5..73ff5498 100644 --- a/front/packages/ui/src/admin/index.tsx +++ b/front/packages/ui/src/admin/index.tsx @@ -18,151 +18,11 @@ * along with Kyoo. If not, see . */ -import { QueryIdentifier, QueryPage, User, UserP, queryFn } from "@kyoo/models"; -import { Alert, Avatar, Icon, IconButton, Menu, P, Skeleton, tooltip, ts } from "@kyoo/primitives"; -import { ScrollView, View } from "react-native"; +import { QueryPage } from "@kyoo/models"; +import { ts } from "@kyoo/primitives"; +import { ScrollView } from "react-native"; import { DefaultLayout } from "../layout"; -import { SettingsContainer } from "../settings/base"; -import { useTranslation } from "react-i18next"; -import { InfiniteFetch } from "../fetch-infinite"; -import { Layout, WithLoading } from "../fetch"; -import { px, useYoshiki } from "yoshiki/native"; - -import UserI from "@material-symbols/svg-400/rounded/account_circle.svg"; -import Admin from "@material-symbols/svg-400/rounded/shield_person.svg"; -import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg"; -import Delete from "@material-symbols/svg-400/rounded/delete.svg"; -import { useMutation, useQueryClient } from "@tanstack/react-query"; - -const UserGrid = ({ - isLoading, - id, - username, - avatar, - isAdmin, - ...props -}: WithLoading<{ id: string; username: string; avatar: string; isAdmin: boolean }>) => { - const { css } = useYoshiki(); - const { t } = useTranslation(); - const queryClient = useQueryClient(); - const { mutateAsync } = useMutation({ - mutationFn: async (update: Partial) => - await queryFn({ - path: ["users", id], - method: "PATCH", - body: update, - }), - onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["users"] }), - }); - - return ( - - - - - -

{username}

- - - - - mutateAsync({ - permissions: ["overall.read"], - }) - } - /> - - mutateAsync({ - permissions: [ - "overall.read", - "overall.write", - "overall.create", - "overall.delete", - "admin.read", - "admin.write", - "admin.create", - "admin.delete", - ], - }) - } - /> - - { - Alert.alert( - t("admin.users.delete"), - t("login.delete-confirmation"), - [ - { text: t("misc.cancel"), style: "cancel" }, - { - text: t("misc.delete"), - onPress: async () => { - await queryFn({ path: ["users", id], method: "DELETE" }); - await queryClient.invalidateQueries({ queryKey: ["users"] }); - }, - style: "destructive", - }, - ], - { - cancelable: true, - icon: "warning", - }, - ); - }} - /> - - - - ); -}; - -UserGrid.layout = { - size: px(150), - numColumns: { xs: 2, sm: 3, md: 5, lg: 6, xl: 7 }, - gap: { xs: ts(1), sm: ts(2), md: ts(4) }, - layout: "grid", -} satisfies Layout; - -const UserList = () => { - const { t } = useTranslation(); - - return ( - - - {(user) => ( - - )} - - - ); -}; - -UserList.query = (): QueryIdentifier => ({ - parser: UserP, - path: ["users"], - infinite: true, -}); +import { UserList } from "./users"; export const AdminPage: QueryPage = () => { return ( diff --git a/front/packages/ui/src/admin/users.tsx b/front/packages/ui/src/admin/users.tsx new file mode 100644 index 00000000..328762df --- /dev/null +++ b/front/packages/ui/src/admin/users.tsx @@ -0,0 +1,164 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { QueryIdentifier, User, UserP, queryFn } from "@kyoo/models"; +import { Alert, Avatar, Icon, IconButton, Menu, P, Skeleton, tooltip, ts } from "@kyoo/primitives"; +import { useTranslation } from "react-i18next"; +import { View } from "react-native"; +import { px, useYoshiki } from "yoshiki/native"; +import { Layout, WithLoading } from "../fetch"; +import { InfiniteFetch } from "../fetch-infinite"; +import { SettingsContainer } from "../settings/base"; + +import UserI from "@material-symbols/svg-400/rounded/account_circle.svg"; +import Delete from "@material-symbols/svg-400/rounded/delete.svg"; +import MoreVert from "@material-symbols/svg-400/rounded/more_vert.svg"; +import Admin from "@material-symbols/svg-400/rounded/shield_person.svg"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; + +export const UserGrid = ({ + isLoading, + id, + username, + avatar, + isAdmin, + ...props +}: WithLoading<{ id: string; username: string; avatar: string; isAdmin: boolean }>) => { + const { css } = useYoshiki(); + const { t } = useTranslation(); + const queryClient = useQueryClient(); + const { mutateAsync } = useMutation({ + mutationFn: async (update: Partial) => + await queryFn({ + path: ["users", id], + method: "PATCH", + body: update, + }), + onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["users"] }), + }); + + return ( + + + + + +

{username}

+ + + + + mutateAsync({ + permissions: ["overall.read"], + }) + } + /> + + mutateAsync({ + permissions: [ + "overall.read", + "overall.write", + "overall.create", + "overall.delete", + "admin.read", + "admin.write", + "admin.create", + "admin.delete", + ], + }) + } + /> + + { + Alert.alert( + t("admin.users.delete"), + t("login.delete-confirmation"), + [ + { text: t("misc.cancel"), style: "cancel" }, + { + text: t("misc.delete"), + onPress: async () => { + await queryFn({ path: ["users", id], method: "DELETE" }); + await queryClient.invalidateQueries({ queryKey: ["users"] }); + }, + style: "destructive", + }, + ], + { + cancelable: true, + icon: "warning", + }, + ); + }} + /> + + + + ); +}; + +UserGrid.layout = { + size: px(150), + numColumns: { xs: 2, sm: 3, md: 5, lg: 6, xl: 7 }, + gap: { xs: ts(1), sm: ts(2), md: ts(4) }, + layout: "grid", +} satisfies Layout; + +export const UserList = () => { + const { t } = useTranslation(); + + return ( + + + {(user) => ( + + )} + + + ); +}; + +UserList.query = (): QueryIdentifier => ({ + parser: UserP, + path: ["users"], + infinite: true, +});