Refactoring (#18)

* fix typings, fix error when updating report

* Upgrade vite to ^6.2.5 to fix 2 Dependabot alerts in frontend/package-lock.json

---------

Co-authored-by: Victoria Ivanova <victoria.i@ati.su>

Author: vikaiv

frontend/package-lock.json

@@ -42,7 +42,7 @@
     "tailwindcss": "^4.0.16",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0"
+    "vite": "^6.2.5"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"

frontend/package.json

@@ -77,7 +77,6 @@ export type CreateReportRequest = {
 export type UpdateReportRequest = {
   title: string | null;
   status: ReportStatuses | null;
-  responsibleUserId: string | null;
 };
 
 export type SearchResponse = {

frontend/src/api/reports/models.ts

@@ -125,10 +125,7 @@ const ReportHeader = () => {
         {!isNewReport && isReportChanged && reportForm.responsible?.id && (
           <div className="flex gap-2 justify-end">
             <CancelButton isChanged={isReportChanged} onReset={reset} />
-            <SaveButton
-              isChanged={isReportChanged}
-              onSave={() => updateReport()}
-            />
+            <SaveButton isChanged={isReportChanged} onSave={updateReport} />
           </div>
         )}
       </div>

frontend/src/pages/Report/components/ReportHeader/ReportHeader.tsx

@@ -6,11 +6,24 @@ import {
   sample,
 } from "effector";
 import { fetchReport, createReport, updateReport } from "@/api/reports";
-import { NewReport, Report } from "@/types/report";
-import { User } from "@/types/user";
 import { ReportStatuses } from "@/const";
+import { User } from "@/types/user";
+import { NewReport, ReportFormUIData, Report } from "@/types/report";
 import { ReportResponse } from "@/api/reports/models";
 
+const defaultFormData = {
+  id: null,
+  title: "",
+  status: ReportStatuses.IN_PROGRESS,
+  responsible: null,
+  participants: [],
+  responsibleId: "",
+  creator: null,
+  createdAt: null,
+  updatedAt: null,
+  bugs: [],
+};
+
 const convertBackResponseToStoreModel = (reportResponse: ReportResponse) => ({
   id: reportResponse.id,
   title: reportResponse.title || "",
@@ -47,15 +60,22 @@ export const createReportFx = createEffect(async (newReport: NewReport) => {
   return data;
 });
 
-export const updateReportFx = createEffect(async (currentReport: Report) => {
-  if (!currentReport.responsible || !currentReport.id) return;
-  const payload = {
-    title: currentReport.title,
-    status: currentReport.status,
-    responsibleUserId: currentReport.responsible.id,
-  };
-  return await updateReport(payload, currentReport.id);
-});
+export const updateReportFx = createEffect(
+  async (report: {
+    id: number | null;
+    title: string | null;
+    status: ReportStatuses | null;
+    responsibleId: string | null;
+  }) => {
+    if (!report.id) return;
+    const payload = {
+      title: report.title,
+      status: report.status,
+      responsible: report.responsibleId,
+    };
+    return await updateReport(payload, report.id);
+  }
+);
 
 export const updateReportEvent = createEvent();
 export const clearReport = createEvent();
@@ -65,47 +85,31 @@ export const updateTitle = createEvent<string>();
 export const updateStatus = createEvent<number>();
 export const updateResponsible = createEvent<User | null>();
 
-export const setIsNewReport = createEvent<boolean>();
+export const setIsNewReport = createEvent();
 
-export const $isNewReport = createStore<boolean>(true)
+export const $isNewReport = createStore(true)
   .on(setIsNewReport, (_, isNew) => isNew)
   .reset(clearReport);
 
 export const $isReportChanged = createStore(false).reset(clearReport);
 
-export const $initialReportForm = createStore<Report>({
-  id: null,
-  title: "",
-  status: ReportStatuses.IN_PROGRESS,
-  responsible: null,
-  responsibleId: "",
-  creator: null,
-  createdAt: null,
-  updatedAt: null,
-  participants: [],
-  bugs: [],
-})
+export const $initialReportForm = createStore<Report>(defaultFormData)
   .on(fetchReportFx.doneData, (_, report) =>
     convertBackResponseToStoreModel(report)
   )
   .reset(clearReport);
 
-// Текущее состояние репорта (изменяемые данные, вводимые в форму)
-export const $reportForm = createStore<Report>({
-  id: null,
-  title: "",
-  status: ReportStatuses.IN_PROGRESS,
-  responsible: null,
-  participants: [],
-  responsibleId: "",
-  creator: null,
-  createdAt: null,
-  updatedAt: null,
-  bugs: [],
-})
-  .on(fetchReportFx.doneData, (_, report) =>
-    convertBackResponseToStoreModel(report)
-  )
+// Текущее состояние репорта (изменяемые данные)
+export const $reportForm = createStore<ReportFormUIData>(defaultFormData)
+  .on(fetchReportFx.doneData, (_, report) => {
+    return {
+      id: report.id,
+      title: report.title || "",
+      status: report.status || 0,
+      responsible: report.responsible || {},
+      participants: report.participants || [],
+    };
+  })
   .on(updateTitle, (state, title) => ({ ...state, title }))
   .on(updateResponsible, (state, responsible) => ({ ...state, responsible }))
   .on(updateStatus, (state, status) => ({ ...state, status }))
@@ -152,32 +156,26 @@ sample({
 });
 
 sample({
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  // todo fix ts-ignore
-  source: $combinedForm, // Здесь объект { reportForm, initialForm }
+  source: $combinedForm, // { reportForm, initialForm }
   clock: updateReportEvent,
   fn: ({ reportForm, initialForm }) => {
-    // Используем правильные имена
-    if (!initialForm) return null;
+    const responsibleId = reportForm.responsible?.id || null;
+    const initialResponsibleId = initialForm.responsible?.id || null;
 
-    const updatedReport: Partial<typeof reportForm> = {
+    const diff = {
       id: reportForm.id,
-      title:
-        reportForm.title !== initialForm.title ? reportForm.title : undefined,
+      title: reportForm.title !== initialForm.title ? reportForm.title : null,
       status:
-        reportForm.status !== initialForm.status
-          ? reportForm.status
-          : undefined,
-      responsible:
-        reportForm.responsible?.id !== initialForm.responsible?.id
-          ? reportForm.responsible
-          : undefined,
+        reportForm.status !== initialForm.status ? reportForm.status : null,
+      responsibleId:
+        responsibleId &&
+        initialResponsibleId &&
+        initialResponsibleId !== responsibleId
+          ? responsibleId
+          : null,
     };
 
-    return Object.values(updatedReport).some((value) => value !== undefined)
-      ? updatedReport
-      : null;
+    return diff;
   },
   target: updateReportFx,
 });

frontend/src/store/report.ts

@@ -2,6 +2,7 @@ import { Bug, NewBug } from "./bug";
 import { User } from "./user";
 import { ReportStatuses } from "../const/index";
 
+// модель стора со всеми данными по репорту
 export type Report = {
   id: number | null;
   title: string;
@@ -15,13 +16,20 @@ export type Report = {
   bugs: Bug[];
 };
 
+// модель только с параметрами, необходимыми для создания нового репорта
 export type NewReport = {
   title: string;
   status: ReportStatuses;
   responsibleId: string;
-  // todo: нужно убрать опциональность у след. параметров и назначать их при создании стора
-  responsible?: User;
-  creator?: User;
-  participants?: User[] | never[];
   bugs: NewBug[];
 };
+
+// модель для редактирования полей самого репорта с параметрами, вводимыми с фронта
+// багов в этой модели нет, потому что интерфейс бага описан в bug.ts
+export type ReportFormUIData = {
+  id: number | null;
+  title: string;
+  status: ReportStatuses;
+  responsible: User | null;
+  participants: User[] | null;
+};