🏗️ Added react-toastify

src/client/components/App.tsx

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

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -11,6 +11,8 @@ 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;
@@ -76,7 +78,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[]
@@ -206,6 +208,7 @@ export const AcquisitionPanel = (
 
   return (
     <>
+    <button onClick={notify}>Notify !</button>
       <div className="mt-5">
         {!isEmpty(hubs?.data) ? (
           <Form

src/client/store/index.ts

@@ -5,6 +5,7 @@ import { SOCKET_BASE_URI } from "../constants/endpoints";
 import { produce } from "immer";
 import { QueryClient } from "@tanstack/react-query";
 
+
 /*  Broadly, this file sets up:
  *    1. The zustand-based global client state
  *    2. socket.io client
@@ -129,6 +130,10 @@ socketIOInstance.on("LS_COVER_EXTRACTION_FAILED", (data) => {
   }));
 });
 
+socketIOInstance.on("searchResultsAvailable", (data) => {
+  console.log(data);
+});
+
 // 1b.  Clear the localStorage sessionId upon receiving the
 //      LS_IMPORT_QUEUE_DRAINED event
 socketIOInstance.on("LS_IMPORT_QUEUE_DRAINED", (data) => {