first commit

common/resources/client/users/queries/use-follow-user.ts

@@ -0,0 +1,28 @@
+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 {User} from '@common/auth/user';
+
+interface Response extends BackendResponse {}
+
+interface Payload {
+  user: User;
+}
+
+export function useFollowUser() {
+  return useMutation({
+    mutationFn: (payload: Payload) => followUser(payload),
+    onSuccess: async (response, {user}) => {
+      await queryClient.invalidateQueries({queryKey: ['users']});
+      toast(message('Following :name', {values: {name: user.display_name}}));
+    },
+    onError: r => showHttpErrorToast(r),
+  });
+}
+
+function followUser({user}: Payload): Promise<Response> {
+  return apiClient.post(`users/${user.id}/follow`).then(r => r.data);
+}

common/resources/client/users/queries/use-followed-users.ts

@@ -0,0 +1,32 @@
+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 {User} from '@common/auth/user';
+
+interface Response extends BackendResponse {
+  ids: number[];
+}
+
+export function useFollowedUsers() {
+  const {user} = useAuth();
+  return useQuery({
+    queryKey: ['users', 'followed', 'ids'],
+    queryFn: () => fetchIds(),
+    enabled: !!user,
+  });
+}
+
+export function useIsUserFollowing(user: User) {
+  const {data, isLoading} = useFollowedUsers();
+  return {
+    isLoading,
+    isFollowing: !!data?.ids.includes(user.id),
+  };
+}
+
+function fetchIds() {
+  return apiClient
+    .get<Response>(`users/me/followed-users/ids`)
+    .then(response => response.data);
+}

common/resources/client/users/queries/use-normalized-model.ts

@@ -0,0 +1,27 @@
+import {useQuery} from '@tanstack/react-query';
+import {NormalizedModel} from '../../datatable/filters/normalized-model';
+import {apiClient} from '../../http/query-client';
+import {BackendResponse} from '../../http/backend-response/backend-response';
+
+interface Response extends BackendResponse {
+  model: NormalizedModel;
+}
+
+export function useNormalizedModel(
+  endpoint: string,
+  queryParams?: Record<string, string>,
+  queryOptions?: {enabled?: boolean},
+) {
+  return useQuery({
+    queryKey: [endpoint, queryParams],
+    queryFn: () => fetchModel(endpoint, queryParams),
+    ...queryOptions,
+  });
+}
+
+async function fetchModel(
+  endpoint: string,
+  params?: Record<string, string>,
+): Promise<Response> {
+  return apiClient.get(endpoint, {params}).then(r => r.data);
+}

common/resources/client/users/queries/use-normalized-models.ts

@@ -0,0 +1,38 @@
+import {
+  keepPreviousData,
+  useQuery,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import {NormalizedModel} from '../../datatable/filters/normalized-model';
+import {apiClient} from '../../http/query-client';
+import {BackendResponse} from '../../http/backend-response/backend-response';
+
+interface Response extends BackendResponse {
+  results: NormalizedModel[];
+}
+
+interface Params {
+  query?: string;
+  perPage?: number;
+  with?: string;
+}
+
+export function useNormalizedModels(
+  endpoint: string,
+  queryParams: Params,
+  queryOptions?: Omit<
+    UseQueryOptions<Response, unknown, Response, [string, Params]>,
+    'queryKey' | 'queryFn'
+  > | null,
+) {
+  return useQuery({
+    queryKey: [endpoint, queryParams],
+    queryFn: () => fetchModels(endpoint, queryParams),
+    placeholderData: keepPreviousData,
+    ...queryOptions,
+  });
+}
+
+async function fetchModels(endpoint: string, params: Params) {
+  return apiClient.get<Response>(endpoint, {params}).then(r => r.data);
+}

common/resources/client/users/queries/use-unfollow-user.ts

@@ -0,0 +1,30 @@
+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 {User} from '@common/auth/user';
+
+interface Response extends BackendResponse {}
+
+interface Payload {
+  user: User;
+}
+
+export function useUnfollowUser() {
+  return useMutation({
+    mutationFn: (payload: Payload) => unfollowUser(payload),
+    onSuccess: async (response, {user}) => {
+      await queryClient.invalidateQueries({queryKey: ['users']});
+      toast(
+        message('Stopped following :name', {values: {name: user.display_name}}),
+      );
+    },
+    onError: r => showHttpErrorToast(r),
+  });
+}
+
+function unfollowUser({user}: Payload): Promise<Response> {
+  return apiClient.post(`users/${user.id}/unfollow`).then(r => r.data);
+}