rusty-replay 0.0.4

package/apps/web/api/event/use-mutation-event-status.ts

@@ -0,0 +1,198 @@
+import {
+  useMutation,
+  UseMutationOptions,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { ResponseError } from '../types';
+import {
+  EventReportListContext,
+  EventReportListResponse,
+  EventReportResponse,
+  EventStatus,
+} from './types';
+import axiosInstance from '../axios';
+import { eventKeys } from './keys';
+import { PaginatedResponse } from '../types';
+
+export function useMutationEventStatus({
+  projectId,
+  options,
+}: {
+  projectId: number;
+  options?: UseMutationOptions<
+    EventReportListResponse[],
+    ResponseError,
+    EventStatus,
+    EventReportListContext
+  >;
+}) {
+  const queryClient = useQueryClient();
+  const listQueryKey = eventKeys.list(projectId);
+  const mutationFn = (data: EventStatus) =>
+    axiosInstance
+      .put(eventKeys.status(projectId), data)
+      .then((res) => res.data);
+
+  return useMutation({
+    mutationKey: [eventKeys.status(projectId)],
+    mutationFn,
+    onMutate: async (newData) => {
+      const { eventIds, status } = newData;
+
+      await queryClient.cancelQueries({ queryKey: [listQueryKey] });
+
+      const previousQueries = queryClient.getQueriesData<
+        PaginatedResponse<EventReportListResponse>
+      >({
+        queryKey: [listQueryKey],
+      });
+
+      const previousDetailQueries: Record<
+        number,
+        EventReportResponse | undefined
+      > = {};
+      eventIds.forEach((id) => {
+        const key = [`/api/projects/${projectId}/events/${id}`];
+        previousDetailQueries[id] =
+          queryClient.getQueryData<EventReportResponse>(key);
+      });
+
+      queryClient.setQueriesData<PaginatedResponse<EventReportListResponse>>(
+        { queryKey: [listQueryKey] },
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            content: old.content.map((evt) =>
+              eventIds.includes(evt.id) ? { ...evt, status } : evt
+            ),
+          };
+        }
+      );
+
+      eventIds.forEach((id) => {
+        const detailKey = [eventKeys.detail(projectId, id)];
+        queryClient.setQueryData<EventReportResponse>(detailKey, (old) => {
+          if (!old) return old;
+          return { ...old, status };
+        });
+      });
+
+      return { previousQueries, previousDetailQueries };
+    },
+    onError: (err, newData, context) => {
+      context?.previousQueries.forEach(([key, data]) => {
+        queryClient.setQueryData(key, data);
+      });
+      if (context?.previousDetailQueries) {
+        Object.entries(context.previousDetailQueries).forEach(([id, data]) => {
+          const detailKey = [`/api/projects/${projectId}/events/${id}`];
+          queryClient.setQueryData(detailKey, data);
+        });
+      }
+    },
+    ...options,
+  });
+}
+
+// import {
+//   useMutation,
+//   UseMutationOptions,
+//   useQueryClient,
+// } from '@tanstack/react-query';
+// import {
+//   EventReportListResponse,
+//   EventReportResponse,
+//   EventStatus,
+//   EventStatusContext,
+// } from './types';
+// import { PaginatedResponse, ResponseError } from '../types';
+// import { eventKeys } from './keys';
+// import axiosInstance from '../axios';
+// import { toast } from '@workspace/ui/components/sonner';
+
+// export function useMutationEventStatus({
+//   projectId,
+//   options,
+// }: {
+//   projectId: number;
+//   options?: UseMutationOptions<
+//     EventReportListResponse[],
+//     ResponseError,
+//     EventStatus,
+//     EventStatusContext
+//   >;
+// }) {
+//   const queryClient = useQueryClient();
+//   const queryKey = eventKeys.list(projectId);
+//   // const detailQueryKey = `/api/projects/${projectId}/events/${eventId}`;
+//   const mutationKey = eventKeys.status(projectId);
+//   const mutationFn =  (data: EventStatus) =>
+//      axiosInstance.put(mutationKey, data).then((res) => res.data);
+
+//   return useMutation({
+//     mutationKey: [mutationKey],
+//     mutationFn,
+//     onMutate: async (newStatus) => {
+//       await queryClient.cancelQueries({
+//         queryKey: [queryKey],
+//       });
+//       await queryClient.cancelQueries({
+//         queryKey: [detailQueryKey],
+//       });
+
+//       const previousQueries = queryClient.getQueriesData<
+//         PaginatedResponse<EventReportListResponse>
+//       >({
+//         queryKey: [queryKey],
+//       });
+
+//       const previousDetailQuery = queryClient.getQueryData<EventReportResponse>(
+//         [detailQueryKey]
+//       );
+
+//       queryClient.setQueriesData<PaginatedResponse<EventReportListResponse>>(
+//         {
+//           queryKey: [queryKey],
+//         },
+//         (old) => {
+//           if (!old) return old;
+
+//           return {
+//             ...old,
+//             content: old.content.map((event) =>
+//               event.id === eventId
+//                 ? { ...event, status: newStatus.status }
+//                 : event
+//             ),
+//           };
+//         }
+//       );
+
+//       queryClient.setQueryData<EventReportResponse>([detailQueryKey], (old) => {
+//         if (!old) return old;
+//         return {
+//           ...old,
+//           status: newStatus.status,
+//         };
+//       });
+
+//       return { previousQueries, previousDetailQuery };
+//     },
+//     onError: (err, newStatus, context) => {
+//       if (context?.previousQueries) {
+//         context.previousQueries.forEach(([queryKey, data]) => {
+//           queryClient.setQueryData(queryKey, data);
+//         });
+//       }
+
+//       if (context?.previousDetailQuery) {
+//         queryClient.setQueryData([detailQueryKey], context.previousDetailQuery);
+//       }
+
+//       console.error(err);
+//       toast.error('Failed to update status');
+//     },
+//     ...options,
+//   });
+// }

package/apps/web/api/event/use-query-event-detail.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+import { UseQueryCustomOptions } from '../types';
+import { EventReportResponse } from './types';
+import axiosInstance from '../axios';
+import { eventKeys } from './keys';
+
+export function useQueryEventDetail({
+  projectId,
+  eventId,
+  options,
+}: {
+  projectId: number;
+  eventId: number;
+  options?: UseQueryCustomOptions<void, EventReportResponse>;
+}) {
+  const queryKey = eventKeys.detail(projectId, eventId);
+  const queryFn = async () =>
+    await axiosInstance.get(queryKey).then((res) => res.data);
+
+  return useQuery({
+    queryKey: [queryKey],
+    queryFn,
+    ...options,
+  });
+}

package/apps/web/api/event/use-query-event-list.ts

@@ -0,0 +1,42 @@
+import { useQuery } from '@tanstack/react-query';
+import { PaginatedResponse, UseQueryCustomOptions } from '../types';
+import { EventQuery, EventReportListResponse } from './types';
+import axiosInstance from '../axios';
+import { eventKeys } from './keys';
+
+export function useQueryErrorList({
+  projectId,
+  eventQuery,
+  options,
+}: {
+  projectId: number;
+  eventQuery: EventQuery;
+  options?: UseQueryCustomOptions<
+    void,
+    PaginatedResponse<EventReportListResponse>
+  >;
+}) {
+  const queryParams = new URLSearchParams();
+
+  if (eventQuery.search) queryParams.append('search', eventQuery.search);
+  if (eventQuery.page) queryParams.append('page', String(eventQuery.page));
+  if (eventQuery.pageSize)
+    queryParams.append('pageSize', String(eventQuery.pageSize));
+  if (eventQuery.startDate)
+    queryParams.append('startDate', eventQuery.startDate);
+  if (eventQuery.endDate) queryParams.append('endDate', eventQuery.endDate);
+
+  // const fullUrl = `/api/projects/${projectId}/events${queryString ? `?${queryString}` : ''}`;
+  const fullUrl = eventKeys.list(projectId, queryParams);
+
+  const queryKey = [eventKeys.list(projectId), eventQuery];
+
+  const queryFn = async () =>
+    axiosInstance.get(fullUrl).then((res) => res.data);
+
+  return useQuery({
+    queryKey,
+    queryFn,
+    ...options,
+  });
+}

package/apps/web/api/health-check/index.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { UseMutationCustomOptions } from '../types';
+import axiosInstance from '../axios';
+
+export function healthCheck({
+  enabled = false,
+  options,
+}: {
+  enabled: boolean;
+  options?: UseMutationCustomOptions<string, void>;
+}) {
+  const queryKey = '/health-check';
+
+  return useQuery({
+    queryKey: [queryKey],
+    queryFn: async () =>
+      await axiosInstance.get(queryKey).then((res) => res.data),
+    enabled,
+    ...options,
+  });
+}

package/apps/web/api/project/keys.ts

@@ -0,0 +1,4 @@
+export const projectKeys = {
+  list: () => `/api/projects`,
+  userList: (projectId: number) => `/api/projects/${projectId}/users`,
+};

package/apps/web/api/project/types.ts

@@ -0,0 +1,28 @@
+import { BaseTimeEntity } from '../types';
+
+export interface Project extends BaseTimeEntity {
+  id: number;
+  name: string;
+  apiKey: string;
+  description: string;
+}
+
+export interface ProjectCreateRequest {
+  name: string;
+  description?: string | null;
+}
+
+export interface ProjectResponse extends BaseTimeEntity {
+  id: number;
+  name: string;
+  apiKey: string;
+  description: string | null;
+}
+
+export interface ProjectMemberResponse {
+  userId: number;
+  username: string;
+  email: string;
+  role: string;
+  jointedAt: string;
+}

package/apps/web/api/project/use-create-project.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import axiosInstance from '../axios';
+import { ProjectCreateRequest, ProjectResponse } from './types';
+import { toast } from '@workspace/ui/components/sonner';
+import { UseMutationCustomOptions } from '../types';
+import { projectKeys } from './keys';
+
+export function useCreateProject(
+  options?: UseMutationCustomOptions<ProjectResponse, ProjectCreateRequest>
+) {
+  const queryClient = useQueryClient();
+
+  const mutationKey = `/api/projects`;
+  const mutationFn = async (data: ProjectCreateRequest) =>
+    await axiosInstance.post(mutationKey, data).then((res) => res.data);
+
+  return useMutation({
+    mutationKey: [mutationKey],
+    mutationFn,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: [projectKeys.list()],
+      });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+    ...options,
+  });
+}

package/apps/web/api/project/use-query-project-list.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { UseQueryCustomOptions } from '../types';
+import { Project } from './types';
+import axiosInstance from '../axios';
+import { projectKeys } from './keys';
+
+export function useQueryProjectList(
+  options?: UseQueryCustomOptions<void, Project[]>
+) {
+  const queryKey = projectKeys.list();
+  const queryFn = async () =>
+    await axiosInstance.get(queryKey).then((res) => res.data);
+
+  return useQuery({
+    queryKey: [queryKey],
+    queryFn,
+    ...options,
+  });
+}

package/apps/web/api/project/use-query-project-users.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { projectKeys } from './keys';
+import { UseQueryCustomOptions } from '../types';
+import { ProjectMemberResponse } from './types';
+import axiosInstance from '../axios';
+
+export function useQueryProjectUsers({
+  projectId,
+  options,
+}: {
+  projectId: number;
+  options?: UseQueryCustomOptions<void, ProjectMemberResponse[]>;
+}) {
+  const queryKey = projectKeys.userList(projectId);
+  const queryFn = async () =>
+    await axiosInstance.get(queryKey).then((res) => res.data);
+
+  return useQuery({
+    queryKey: [queryKey],
+    queryFn,
+    ...options,
+  });
+}

package/apps/web/api/types.ts

@@ -0,0 +1,44 @@
+import {
+  QueryKey,
+  UseMutationOptions,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { ERROR_CODE } from './error-code';
+
+type ResponseError = AxiosError<{
+  errorCode: keyof typeof ERROR_CODE;
+  message: string;
+}>;
+
+type UseMutationCustomOptions<TData = unknown, TVariables = unknown> = Omit<
+  UseMutationOptions<TData, ResponseError, TVariables, unknown>,
+  'mutationFn'
+>;
+type UseQueryCustomOptions<TQueryFnData = unknown, TData = TQueryFnData> = Omit<
+  UseQueryOptions<TQueryFnData, ResponseError, TData, QueryKey>,
+  'queryKey'
+>;
+
+interface BaseTimeEntity {
+  createdAt: string;
+  updatedAt: string | null;
+}
+
+interface PaginatedResponse<T> {
+  content: T[];
+  page: number;
+  pageSize: number;
+  totalElements: number;
+  filteredElements: number;
+  totalPages: number;
+  hasNext: boolean;
+}
+
+export type {
+  ResponseError,
+  UseMutationCustomOptions,
+  UseQueryCustomOptions,
+  BaseTimeEntity,
+  PaginatedResponse,
+};

package/apps/web/app/(auth)/layout.tsx

@@ -0,0 +1,5 @@
+import React, { ReactNode } from 'react';
+
+export default function layout({ children }: { children: ReactNode }) {
+  return <div>{children}</div>;
+}

package/apps/web/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { healthCheck } from '@/api/health-check';
+import { LoginForm } from '@/components/login-form';
+import { Button } from '@workspace/ui/components/button';
+
+export default function SignInPage() {
+  const { data, refetch } = healthCheck({ enabled: false });
+
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+        <Button size={'sm'} onClick={() => refetch()}>
+          health check
+        </Button>
+      </div>
+    </div>
+  );
+}

package/apps/web/app/(auth)/sign-up/page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function SignUpPage() {
+  return <div>SignUpPage</div>;
+}

package/apps/web/app/(project)/project/[project_id]/issues/[issue_id]/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import EventDetail from '@/components/event-list/event-detail';
+import { useGetEventParams } from '@/components/project/hooks/use-get-event-params';
+import { useGetProjectParams } from '@/components/project/hooks/use-get-project-params';
+import React from 'react';
+
+export default function ErrorDetailPage() {
+  const { projectId } = useGetProjectParams();
+  const { eventId } = useGetEventParams();
+
+  return (
+    <div>
+      <EventDetail params={{ eventId, projectId }} />
+    </div>
+  );
+}

package/apps/web/app/(project)/project/[project_id]/issues/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import EventList from '@/components/event-list/event-list';
+import { useGetProjectParams } from '@/components/project/hooks/use-get-project-params';
+import React from 'react';
+
+export default function ErrorListPage() {
+  const { projectId } = useGetProjectParams();
+
+  return (
+    <div>
+      <EventList projectId={projectId} />
+    </div>
+  );
+}

package/apps/web/app/(project)/project/[project_id]/page.tsx

@@ -0,0 +1,10 @@
+import ProjectDetail from '@/components/project/project-detail';
+import React from 'react';
+
+export default function ProjectDetailPage() {
+  return (
+    <div>
+      <ProjectDetail />
+    </div>
+  );
+}

package/apps/web/app/(project)/project/page.tsx

@@ -0,0 +1,10 @@
+import ProjectList from '@/components/project/project-list';
+import React from 'react';
+
+export default function ProjectListPage() {
+  return (
+    <div>
+      <ProjectList />
+    </div>
+  );
+}

package/apps/web/app/(report)/error-list/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import React from 'react';
+
+export default function ErrorListPage() {
+  return <div>ErrorListPage</div>;
+}

package/apps/web/app/layout.tsx

@@ -0,0 +1,35 @@
+import { Geist, Geist_Mono } from 'next/font/google';
+
+import '@workspace/ui/globals.css';
+import { Providers } from '@/components/providers';
+import { Toaster } from '@workspace/ui/components/sonner';
+import DefaultLayout from '@/components/layouts/default-layout';
+
+const fontSans = Geist({
+  subsets: ['latin'],
+  variable: '--font-sans',
+});
+
+const fontMono = Geist_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased  `}
+      >
+        <Providers>
+          <DefaultLayout>{children}</DefaultLayout>
+          <Toaster />
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/apps/web/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Home</div>;
+}