Add create/update playlist mutations and form

src/renderer/features/playlists/components/create-playlist-form.tsx

@@ -0,0 +1,76 @@
+import { Group, Stack } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { CreatePlaylistQuery } from '/@/renderer/api/types';
+import { Button, Switch, TextInput, toast } from '/@/renderer/components';
+import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
+
+interface CreatePlaylistFormProps {
+  onCancel: () => void;
+}
+
+export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
+  const mutation = useCreatePlaylist();
+
+  const form = useForm<CreatePlaylistQuery>({
+    initialValues: {
+      comment: '',
+      name: '',
+      public: false,
+      rules: undefined,
+    },
+  });
+
+  const handleSubmit = form.onSubmit((values) => {
+    mutation.mutate(
+      { query: values },
+      {
+        onError: (err) => {
+          toast.error({ message: err.message, title: 'Error creating playlist' });
+        },
+        onSuccess: () => {
+          toast.success({ message: 'Playlist created successfully' });
+          onCancel();
+        },
+      },
+    );
+  });
+
+  const isSubmitDisabled = !form.values.name || mutation.isLoading;
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack>
+        <TextInput
+          data-autofocus
+          required
+          label="Name"
+          {...form.getInputProps('name')}
+        />
+        <TextInput
+          label="Description"
+          {...form.getInputProps('comment')}
+        />
+        <Switch
+          label="Is Public?"
+          {...form.getInputProps('public')}
+        />
+      </Stack>
+      <Group position="right">
+        <Button
+          variant="subtle"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          disabled={isSubmitDisabled}
+          loading={mutation.isLoading}
+          type="submit"
+          variant="filled"
+        >
+          Save
+        </Button>
+      </Group>
+    </form>
+  );
+};

src/renderer/features/playlists/index.ts

@@ -1 +1,2 @@
 export * from './queries/playlist-list-query';
+export * from './components/create-playlist-form';

src/renderer/features/playlists/mutations/create-playlist-mutation.ts

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { HTTPError } from 'ky';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { CreatePlaylistArgs, RawCreatePlaylistResponse } from '/@/renderer/api/types';
+import { MutationOptions } from '/@/renderer/lib/react-query';
+import { useCurrentServer } from '/@/renderer/store';
+
+export const useCreatePlaylist = (options?: MutationOptions) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+
+  return useMutation<
+    RawCreatePlaylistResponse,
+    HTTPError,
+    Omit<CreatePlaylistArgs, 'server'>,
+    null
+  >({
+    mutationFn: (args) => api.controller.createPlaylist({ ...args, server }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || ''));
+    },
+    ...options,
+  });
+};

src/renderer/features/playlists/mutations/update-playlist-mutation.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { HTTPError } from 'ky';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { RawUpdatePlaylistResponse, UpdatePlaylistArgs } from '/@/renderer/api/types';
+import { MutationOptions } from '/@/renderer/lib/react-query';
+import { useCurrentServer } from '/@/renderer/store';
+
+export const useUpdatePlaylist = (options?: MutationOptions) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+
+  return useMutation<
+    RawUpdatePlaylistResponse,
+    HTTPError,
+    Omit<UpdatePlaylistArgs, 'server'>,
+    null
+  >({
+    mutationFn: (args) => api.controller.updatePlaylist({ ...args, server }),
+    onSuccess: (data) => {
+      queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || ''));
+
+      if (data?.id) {
+        queryClient.invalidateQueries(queryKeys.playlists.detail(server?.id || '', data.id));
+      }
+    },
+    ...options,
+  });
+};