Completed report receiving updates from ongoing analysis (#85)

CHANGELOG.md

@@ -22,6 +22,7 @@ _Can be run using `npm run codetotal:beta`_
   - Add a button in report toolbar to show code for snippet & file analysis
   - Add a report progress bar
   - Optimize new analysis dialog, drawer and linters list components' renders
+  - Fix completed report receiving updates from ongoing analysis
 - Back-End
   - Bug fix: SBOM packages not showing up in report page. Async parsing of packages information in SBOM module
   - Retry calls to pypi or npm in case first attempts are failing

packages/app/src/report/actions/clear-report-actions.ts

@@ -0,0 +1,10 @@
+import { ReportStore } from "../stores/fe-report-store";
+
+export const clearReport = () => {
+  const { unsubscribe, reset } = ReportStore.getState();
+  // unsubscribe from updates
+  unsubscribe && unsubscribe();
+
+  // reset state
+  reset();
+};

packages/app/src/report/actions/init-report-action.ts

@@ -6,9 +6,6 @@ import { subscribeToReportProgress } from "./subscribe-report-action";
 
 export const initReport = async (requestId: string) => {
   try {
-    // reset report store
-    ReportStore.getState().reset();
-
     // fetch report
     const res = await axios.get(`${ApiUrl}/report/${requestId}`);
 

packages/app/src/report/actions/subscribe-report-action.ts

@@ -5,9 +5,6 @@ import { subscribe } from "../utils/ws-client";
 let unsubscribe: () => void;
 
 export const subscribeToReportProgress = (requestId: string) => {
-  // unsubscribe from previous connection
-  unsubscribe && unsubscribe();
-
   // clear previous error
   ReportStore.setState({ wsError: undefined });
 

packages/app/src/report/components/ReportPage.tsx

@@ -1,6 +1,7 @@
 import { FC, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { AnalysisErrorDialog } from "../../common/AnalysisErrorDialog";
+import { clearReport } from "../actions/clear-report-actions";
 import { initReport } from "../actions/init-report-action";
 import { LinterDrawer } from "./drawer/LinterDrawer";
 import { CodeDialog } from "./header/CodeDialog";
@@ -24,6 +25,10 @@ const ReportPage: FC = () => {
     })();
   }, [requestId, navigate]);
 
+  useEffect(() => {
+    return clearReport;
+  });
+
   return (
     <div style={{ paddingBlockEnd: 60 }}>
       <ReportHeader ready />