move clientIdMapStore logics from Report.tsx to store/index.ts

Author: Victoria Ivanova

frontend/src/pages/Report/Report.tsx

@@ -2,12 +2,12 @@ import { useEffect } from "react";
 
 import { formatDistanceToNow } from "date-fns";
 import { ru } from "date-fns/locale";
-import { useUnit, useStoreMap } from "effector-react";
+import { useUnit } from "effector-react";
 import { useParams, useNavigate } from "react-router-dom";
 
 import { useReportPageSocket } from "@/hooks/useReportPageSocket";
 import { useSocketEvent } from "@/hooks/useSocketEvent";
-import { $allBugsStore } from "@/store";
+import { $combinedBugsStore } from "@/store";
 import { createLocalBugEvent } from "@/store/localBugs";
 import {
   $initialReportStore,
@@ -18,7 +18,6 @@ import {
   saveTitleEvent,
   updateReportPathIdEvent,
 } from "@/store/report";
-import { BugClientEntity } from "@/types/bug";
 import { SocketEvent } from "@/webSocketApi/models";
 
 import Bug from "./components/Bug/Bug";
@@ -29,40 +28,7 @@ const ReportPage = () => {
   const initialReport = useUnit($initialReportStore);
   const title = useUnit($titleStore);
   const creatorUserName = useUnit($creatorUserNameStore);
-
-  const allBugs = useStoreMap({
-    store: $allBugsStore,
-    keys: [reportId],
-    fn: ([bugsData, localBugs], [currentReportId]) => {
-      if (!currentReportId) return [];
-
-      const { bugs, reportBugs } = bugsData;
-      const bugIds = reportBugs[Number(currentReportId)] || [];
-
-      // 1) Собираем мапу bug.id → clientId для любого локального багa
-      const clientIdMap: Record<number, number> = {};
-      localBugs.forEach((bug) => {
-        // у вас в store и локальный, и промоушн лежат, нам нужна обоих запись
-        clientIdMap[bug.id] = bug.clientId;
-      });
-
-      // 2) Берём бекендовые баги и подставляем правильный clientId
-      const bugsFromStore = bugIds
-        .map((id: number) => bugs[id])
-        .filter(Boolean)
-        .map((bug) => ({
-          ...bug,
-          clientId: clientIdMap[bug.id] ?? bug.id, // ← вот здесь ключ сохраняется прежним
-        }));
-
-      // 3) К этим добавляем только ещё непромоушненные локальные
-      const pendingLocals = localBugs.filter(
-        (bug) => bug.reportId === Number(currentReportId) && bug.isLocalOnly
-      );
-
-      return [...bugsFromStore, ...pendingLocals];
-    },
-  });
+  const allBugs = useUnit($combinedBugsStore);
 
   useReportPageSocket();
   useSocketEvent(SocketEvent.ReportPatch, (patch) =>
@@ -110,7 +76,7 @@ const ReportPage = () => {
         пользователем <strong>{creatorUserName || "Загрузка..."}</strong>
       </div>
       <div className="flex flex-col gap-2">
-        {allBugs.map((bug: BugClientEntity) => (
+        {allBugs.map((bug) => (
           <Bug key={bug.clientId} bug={bug} />
         ))}
         <button

frontend/src/store/bugs.ts

@@ -125,7 +125,7 @@ export const $bugsStore = createStore<Record<number, BugClientEntity>>({})
   .reset(clearBugsEvent);
 
 // Список id багов для каждого репорта
-export const $reportBugsStore = createStore<Record<number, number[]>>({})
+export const $reportBugIdsStore = createStore<Record<number, number[]>>({})
   .on(setBugsEvent, (state, { reportId, bugs }) => ({
     ...state,
     [reportId]: bugs.map((bug) => bug.id),
@@ -146,8 +146,8 @@ export const $reportBugsStore = createStore<Record<number, number[]>>({})
 // Combined store из всех багов и id багов для каждого репорта
 export const $bugsData = combine(
   $bugsStore,
-  $reportBugsStore,
-  (bugs, reportBugs) => ({ bugs, reportBugs })
+  $reportBugIdsStore,
+  (bugs, reportBugIds) => ({ bugs, reportBugIds })
 );
 
 /** Сэмплы */

frontend/src/store/index.ts

@@ -1,7 +1,11 @@
-import { sample, combine } from "effector";
+import { sample, combine, createStore } from "effector";
 
 import { $bugsData } from "./bugs";
-import { $localBugsStore, clearLocalBugEvent } from "./localBugs";
+import {
+  $localBugsStore,
+  clearLocalBugEvent,
+  promoteLocalBugToBackendEvent,
+} from "./localBugs";
 import {
   $creatorUserIdStore,
   $pastResponsibleUserIdStore,
@@ -16,7 +20,45 @@ import { $user } from "./user";
 import { setBugsEvent } from "./commonEvents";
 
 const $src = combine({ user: $user, reportPath: $reportPathStore });
-export const $allBugsStore = combine($bugsData, $localBugsStore);
+
+// Мапа для сопоставления id c с бэка с clientId для промотированных багов
+// Нужна, чтобы запоминать clientId бага, который был только на фронтенде, но появился на бэке
+// clientId используем на ui как react key, чтобы не перерисовывать полностью компонент Bug
+export const $clientIdMapStore = createStore<Record<number, number>>({})
+  .on(promoteLocalBugToBackendEvent, (state, { tempClientId, backendBug }) => ({
+    ...state,
+    [backendBug.id]: tempClientId,
+  }))
+  .reset(clearLocalBugEvent);
+
+// Стор для багов с бэка и локальных
+export const $combinedBugsStore = combine(
+  $bugsData,
+  $localBugsStore,
+  $clientIdMapStore,
+  (bugsData, localBugs, clientIdMap) => {
+    const { bugs, reportBugIds } = bugsData;
+
+    const allBugIds = Object.values(reportBugIds).flat();
+
+    // Обрабатываем backend баги
+    const bugsFromStore = allBugIds.map((id: number) => {
+      const bug = bugs[id];
+
+      return bug.clientId
+        ? bug
+        : {
+            ...bug,
+            clientId: clientIdMap[bug.id] || bug.id,
+          };
+    });
+
+    // Добавляем только локальные фронтовые баги
+    const pendingLocals = localBugs.filter((bug) => bug.isLocalOnly);
+
+    return bugsFromStore.concat(pendingLocals);
+  }
+);
 
 // заполнение сторов при открытии страницы создания репорта
 sample({