🗒️ Added scaffold for the toast notification

src/client/components/App.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { Outlet } from "react-router-dom";
 import { Navbar2 } from "./shared/Navbar2";
-import {ToastContainer} from "react-toastify";
+import { ToastContainer } from "react-toastify";
 import "../assets/scss/App.scss";
 
 export const App = (): ReactElement => {
@@ -9,7 +9,7 @@ export const App = (): ReactElement => {
     <>
       <Navbar2 />
       <Outlet />
-      <ToastContainer />
+      <ToastContainer stacked hideProgressBar />
     </>
   );
 };

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -11,8 +11,7 @@ import { useShallow } from "zustand/react/shallow";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints";
-import {toast} from "react-toastify";
+
-import 'react-toastify/dist/ReactToastify.min.css';
 
 interface IAcquisitionPanelProps {
   query: any;
@@ -78,7 +77,7 @@ export const AcquisitionPanel = (
   const { comicObjectId } = props;
   const issueName = props.query.issue.name || "";
   const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
- const notify = () => toast("Wow so easy !");
+
   const [dcppQuery, setDcppQuery] = useState({});
   const [airDCPPSearchResults, setAirDCPPSearchResults] = useState<
     SearchResult[]
@@ -140,6 +139,7 @@ export const AcquisitionPanel = (
   });
 
   socketIOInstance.on("searchResultUpdated", ({ updatedResult }: any) => {
+    console.log("endh");
     // ...update properties of the existing result in the UI
     const bundleToUpdateIndex = airDCPPSearchResults?.findIndex(
       (bundle) => bundle.result.id === updatedResult.result.id,
@@ -208,7 +208,6 @@ export const AcquisitionPanel = (
 
   return (
     <>
-    <button onClick={notify}>Notify !</button>
       <div className="mt-5">
         {!isEmpty(hubs?.data) ? (
           <Form

src/client/store/index.ts

@@ -4,7 +4,8 @@ import io from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { produce } from "immer";
 import { QueryClient } from "@tanstack/react-query";
-
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.min.css";
 
 /*  Broadly, this file sets up:
  *    1. The zustand-based global client state
@@ -83,6 +84,7 @@ if (!isNil(sessionId)) {
     "call",
     "socket.resumeSession",
     {
+      namespace: "/",
       sessionId,
     },
     (data) => console.log(data),
@@ -131,7 +133,8 @@ socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
 });
 
 socketIOInstance.on("searchResultsAvailable", (data) => {
-  console.log(data);
+  const results = Object.keys(data?.results).length;
+  toast(`${results} results found for query: ${data.query}`);
 });
 
 // 1b.  Clear the localStorage sessionId upon receiving the