feat(frontend): allow importing from media tracker

apps/frontend/src/pages/settings.tsx

@@ -3,41 +3,66 @@ import useUser from "@/lib/hooks/useUser";
 import LoggedIn from "@/lib/layouts/LoggedIn";
 import { gqlClient } from "@/lib/services/api";
 import {
+	Anchor,
 	Box,
 	Button,
+	Card,
 	Container,
+	Group,
 	PasswordInput,
 	Stack,
 	Tabs,
 	TextInput,
+	Title,
 } from "@mantine/core";
 import { useForm, zodResolver } from "@mantine/form";
 import { notifications } from "@mantine/notifications";
 import {
+	DeployMediaTrackerImportDocument,
+	type DeployMediaTrackerImportMutationVariables,
 	UpdateUserDocument,
 	type UpdateUserMutationVariables,
 } from "@ryot/generated/graphql/backend/graphql";
-import { IconDatabaseImport, IconUser } from "@tabler/icons-react";
+import {
+	IconDatabaseImport,
+	IconExternalLink,
+	IconUser,
+} from "@tabler/icons-react";
 import { useMutation } from "@tanstack/react-query";
 import type { ReactElement } from "react";
 import { z } from "zod";
 
-const formSchema = z.object({
+const updateProfileFormSchema = z.object({
 	username: z.string().optional(),
 	password: z.string().optional(),
 	email: z.string().optional(),
 });
-type FormSchema = z.infer<typeof formSchema>;
+type UpdateProfileFormSchema = z.infer<typeof updateProfileFormSchema>;
+
+const mediaTrackerImportFormSchema = z.object({
+	apiUrl: z.string().url(),
+	apiKey: z.string(),
+});
+type MediaTrackerImportFormSchema = z.infer<
+	typeof mediaTrackerImportFormSchema
+>;
 
 const Page: NextPageWithLayout = () => {
-	const form = useForm<FormSchema>({ validate: zodResolver(formSchema) });
+	const updateProfileForm = useForm<UpdateProfileFormSchema>({
+		validate: zodResolver(updateProfileFormSchema),
+	});
+	const mediaTrackerImportForm = useForm<MediaTrackerImportFormSchema>({
+		validate: zodResolver(mediaTrackerImportFormSchema),
+	});
+
 	useUser((data) => {
-		form.setValues({
+		updateProfileForm.setValues({
 			email: data.email,
 			username: data.name,
 		});
-		form.resetDirty();
+		updateProfileForm.resetDirty();
 	});
+
 	const updateUser = useMutation({
 		mutationFn: async (variables: UpdateUserMutationVariables) => {
 			const { updateUser } = await gqlClient.request(
@@ -55,6 +80,25 @@ const Page: NextPageWithLayout = () => {
 		},
 	});
 
+	const deploymediaTrackerImport = useMutation({
+		mutationFn: async (
+			variables: DeployMediaTrackerImportMutationVariables,
+		) => {
+			const { deployMediaTrackerImport } = await gqlClient.request(
+				DeployMediaTrackerImportDocument,
+				variables,
+			);
+			return deployMediaTrackerImport;
+		},
+		onSuccess: () => {
+			notifications.show({
+				title: "Success",
+				message: "Your import has started. Check back later.",
+				color: "green",
+			});
+		},
+	});
+
 	return (
 		<Container size="xs">
 			<Stack>
@@ -70,24 +114,24 @@ const Page: NextPageWithLayout = () => {
 					<Tabs.Panel value="profile">
 						<Box
 							component="form"
-							onSubmit={form.onSubmit((values) => {
+							onSubmit={updateProfileForm.onSubmit((values) => {
 								updateUser.mutate({ input: values });
 							})}
 						>
 							<Stack>
 								<TextInput
 									label="Username"
-									{...form.getInputProps("username")}
+									{...updateProfileForm.getInputProps("username")}
 									autoFocus
 								/>
 								<TextInput
 									label="Email"
-									{...form.getInputProps("email")}
+									{...updateProfileForm.getInputProps("email")}
 									autoFocus
 								/>
 								<PasswordInput
 									label="Password"
-									{...form.getInputProps("password")}
+									{...updateProfileForm.getInputProps("password")}
 								/>
 								<Button type="submit" loading={updateUser.isLoading} w="100%">
 									Update
@@ -96,7 +140,50 @@ const Page: NextPageWithLayout = () => {
 						</Box>
 					</Tabs.Panel>
 					<Tabs.Panel value="import">
-						<Stack>Imports</Stack>
+						<Stack>
+							<Box>
+								<Card
+									shadow="sm"
+									radius="md"
+									withBorder
+									padding={"sm"}
+									component="form"
+									onSubmit={mediaTrackerImportForm.onSubmit((values) => {
+										deploymediaTrackerImport.mutate({ input: values });
+									})}
+								>
+									<Group align="center">
+										<Title order={3}>Media Tracker</Title>
+										<Anchor
+											href="https://github.com/bonukai/MediaTracker"
+											target="_blank"
+										>
+											<IconExternalLink size="1rem" />
+										</Anchor>
+									</Group>
+
+									<TextInput
+										label="Instance Url"
+										{...mediaTrackerImportForm.getInputProps("apiUrl")}
+									/>
+									<PasswordInput
+										label="API Key"
+										{...mediaTrackerImportForm.getInputProps("apiKey")}
+									/>
+
+									<Button
+										variant="light"
+										color="blue"
+										fullWidth
+										mt="md"
+										type="submit"
+										radius="md"
+									>
+										Import
+									</Button>
+								</Card>
+							</Box>
+						</Stack>
 					</Tabs.Panel>
 				</Tabs>
 			</Stack>