first commit

resources/client/user-lists/requests/use-add-to-watchlist.ts

@@ -0,0 +1,34 @@
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useMutation} from '@tanstack/react-query';
+import {toast} from '@common/ui/toast/toast';
+import {message} from '@common/i18n/message';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {showHttpErrorToast} from '@common/utils/http/show-http-error-toast';
+import {Title} from '@app/titles/models/title';
+import {useCurrentUserWatchlist} from '@app/user-lists/requests/use-current-user-watchlist';
+
+interface Response extends BackendResponse {}
+
+export function useAddToWatchlist() {
+  const {data} = useCurrentUserWatchlist();
+  return useMutation({
+    mutationFn: (payload: Title) =>
+      addToWatchlist(data!.watchlist!.id, payload),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['channel', 'watchlist'],
+      });
+      toast(message('Added to your watchlist'));
+    },
+    onError: r => showHttpErrorToast(r),
+  });
+}
+
+function addToWatchlist(listId: number, payload: Title): Promise<Response> {
+  return apiClient
+    .post(`channel/${listId}/add`, {
+      itemId: payload.id,
+      itemType: payload.model_type,
+    })
+    .then(r => r.data);
+}

resources/client/user-lists/requests/use-all-user-lists.ts

@@ -0,0 +1,31 @@
+import {useQuery} from '@tanstack/react-query';
+import {apiClient} from '@common/http/query-client';
+import {useAuth} from '@common/auth/use-auth';
+import {PaginatedBackendResponse} from '@common/http/backend-response/pagination-response';
+import {Channel} from '@common/channels/channel';
+import {DatatableDataQueryKey} from '@common/datatable/requests/paginated-resources';
+
+export interface FetchAllUserListsResponse
+  extends PaginatedBackendResponse<Channel> {}
+
+export function useAllUserLists() {
+  const {user} = useAuth();
+  const params = {
+    userId: user?.id,
+    type: 'list',
+    perPage: 100,
+    loadItemsCount: true,
+    loadFirstItems: true,
+  };
+  return useQuery({
+    queryKey: DatatableDataQueryKey('channel', params),
+    queryFn: () => fetchLists(params),
+    enabled: !!user,
+  });
+}
+
+function fetchLists(params: Record<string, any>) {
+  return apiClient
+    .get<FetchAllUserListsResponse>(`channel`, {params})
+    .then(response => response.data);
+}

resources/client/user-lists/requests/use-create-list.ts

@@ -0,0 +1,39 @@
+import {useMutation} from '@tanstack/react-query';
+import {UseFormReturn} from 'react-hook-form';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {toast} from '@common/ui/toast/toast';
+import {useTrans} from '@common/i18n/use-trans';
+import {onFormQueryError} from '@common/errors/on-form-query-error';
+import {message} from '@common/i18n/message';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {Channel} from '@common/channels/channel';
+import {DatatableDataQueryKey} from '@common/datatable/requests/paginated-resources';
+import {CreateChannelPayload} from '@common/admin/channels/requests/use-create-channel';
+
+interface Response extends BackendResponse {
+  channel: Channel;
+}
+
+export function useCreateList(form: UseFormReturn<CreateChannelPayload>) {
+  const {trans} = useTrans();
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: (payload: CreateChannelPayload) => createList(payload),
+    onSuccess: async response => {
+      await queryClient.invalidateQueries({
+        queryKey: DatatableDataQueryKey('channel'),
+      });
+      toast(trans(message('List created')));
+      navigate(`../${response.channel.id}/edit`, {
+        replace: true,
+        relative: 'path',
+      });
+    },
+    onError: err => onFormQueryError(err, form),
+  });
+}
+
+function createList(payload: CreateChannelPayload) {
+  return apiClient.post<Response>('channel', payload).then(r => r.data);
+}

resources/client/user-lists/requests/use-current-user-watchlist.ts

@@ -0,0 +1,39 @@
+import {useQuery} from '@tanstack/react-query';
+import {apiClient} from '@common/http/query-client';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useAuth} from '@common/auth/use-auth';
+import {Title} from '@app/titles/models/title';
+import {Episode} from '@app/titles/models/episode';
+
+interface Response extends BackendResponse {
+  watchlist: {
+    id: number;
+    items: {
+      title: Record<number, boolean>;
+      episode: Record<number, boolean>;
+    };
+  };
+}
+
+export function useCurrentUserWatchlist() {
+  const {user} = useAuth();
+  return useQuery({
+    queryKey: ['channel', 'watchlist', 'compact'],
+    queryFn: () => fetchWatchlist(),
+    enabled: !!user,
+  });
+}
+
+export function useIsItemWatchlisted(item: Title | Episode) {
+  const query = useCurrentUserWatchlist();
+  return {
+    isLoading: query.isLoading && query.fetchStatus !== 'idle',
+    isWatchlisted: !!query.data?.watchlist?.items[item.model_type]?.[item.id],
+  };
+}
+
+function fetchWatchlist() {
+  return apiClient
+    .get<Response>(`users/me/watchlist`)
+    .then(response => response.data);
+}

resources/client/user-lists/requests/use-delete-list.ts

@@ -0,0 +1,31 @@
+import {useMutation} from '@tanstack/react-query';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {toast} from '@common/ui/toast/toast';
+import {useTrans} from '@common/i18n/use-trans';
+import {message} from '@common/i18n/message';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {showHttpErrorToast} from '@common/utils/http/show-http-error-toast';
+
+interface Response extends BackendResponse {}
+
+interface Payload {
+  listId: number | string;
+}
+
+export function useDeleteList() {
+  const {trans} = useTrans();
+  return useMutation({
+    mutationFn: (payload: Payload) => deleteList(payload),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({queryKey: ['channel']});
+      toast(trans(message('List deleted')));
+    },
+    onError: err => showHttpErrorToast(err),
+  });
+}
+
+function deleteList(payload: Payload) {
+  return apiClient
+    .delete<Response>(`channel/${payload.listId}`)
+    .then(r => r.data);
+}

resources/client/user-lists/requests/use-remove-from-watchlist.ts

@@ -0,0 +1,37 @@
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useMutation} from '@tanstack/react-query';
+import {toast} from '@common/ui/toast/toast';
+import {message} from '@common/i18n/message';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {showHttpErrorToast} from '@common/utils/http/show-http-error-toast';
+import {Title} from '@app/titles/models/title';
+import {useCurrentUserWatchlist} from '@app/user-lists/requests/use-current-user-watchlist';
+
+interface Response extends BackendResponse {}
+
+export function useRemoveFromWatchlist() {
+  const {data} = useCurrentUserWatchlist();
+  return useMutation({
+    mutationFn: (payload: Title) =>
+      removeFromWatchlist(data!.watchlist.id, payload),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['channel', 'watchlist'],
+      });
+      toast(message('Removed from your watchlist'));
+    },
+    onError: r => showHttpErrorToast(r),
+  });
+}
+
+function removeFromWatchlist(
+  listId: number,
+  payload: Title,
+): Promise<Response> {
+  return apiClient
+    .post(`channel/${listId}/remove`, {
+      itemId: payload.id,
+      itemType: payload.model_type,
+    })
+    .then(r => r.data);
+}

resources/client/user-lists/requests/use-update-list.ts

@@ -0,0 +1,44 @@
+import {useMutation} from '@tanstack/react-query';
+import {UseFormReturn} from 'react-hook-form';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {toast} from '@common/ui/toast/toast';
+import {useTrans} from '@common/i18n/use-trans';
+import {onFormQueryError} from '@common/errors/on-form-query-error';
+import {message} from '@common/i18n/message';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useParams} from 'react-router-dom';
+import {DatatableDataQueryKey} from '@common/datatable/requests/paginated-resources';
+import {Channel} from '@common/channels/channel';
+import {CreateChannelPayload} from '@common/admin/channels/requests/use-create-channel';
+
+interface Response extends BackendResponse {
+  list: Channel;
+}
+
+export function useUpdateList(form: UseFormReturn<CreateChannelPayload>) {
+  const {trans} = useTrans();
+  const {slugOrId} = useParams();
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: (payload: CreateChannelPayload) =>
+      createList(payload, slugOrId!),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: DatatableDataQueryKey('channel'),
+      });
+      toast(trans(message('List updated')));
+      navigate(`../../`, {
+        replace: true,
+        relative: 'path',
+      });
+    },
+    onError: err => onFormQueryError(err, form),
+  });
+}
+
+function createList(payload: CreateChannelPayload, listId: string) {
+  return apiClient
+    .put<Response>(`channel/${listId}`, payload)
+    .then(r => r.data);
+}