🏗️ Added react-toastify

package.json

@@ -53,7 +53,7 @@
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
     "qs": "^6.10.5",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
     "react-day-picker": "^8.10.0",
@@ -70,13 +70,11 @@
     "react-select-async-paginate": "^0.7.2",
     "react-sliding-pane": "^7.1.0",
     "react-textarea-autosize": "^8.3.4",
-    "reapop": "^4.2.1",
+    "react-toastify": "^10.0.5",
     "socket.io-client": "^4.3.2",
     "styled-components": "^6.1.0",
     "threetwo-ui-typings": "^1.0.14",
-
     "vite": "^5.2.7",
-
     "vite-plugin-html": "^3.2.0",
     "websocket": "^1.0.34",
     "zustand": "^4.4.6"

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) => {

yarn.lock

@@ -4484,6 +4484,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -6081,9 +6086,7 @@ focus-trap@^7.5.4:
   dependencies:
     tabbable "^6.2.0"
 
-
 follow-redirects@^1.15.6:
-
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
   integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
@@ -9213,7 +9216,14 @@ react-textarea-autosize@^8.3.4:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-transition-group@4.4.5, react-transition-group@^4.3.0:
+react-toastify@^10.0.5:
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.5.tgz#6b8f8386060c5c856239f3036d1e76874ce3bd1e"
+  integrity sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==
+  dependencies:
+    clsx "^2.1.0"
+
+react-transition-group@^4.3.0:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -9223,10 +9233,10 @@ react-transition-group@4.4.5, react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -9285,13 +9295,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-reapop@^4.2.1:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/reapop/-/reapop-4.2.2.tgz#cf096fb9f136440a61d93b247bc993f699469ef8"
-  integrity sha512-pyiCVda0YAzXk727LEOYjAqqWn6xXmIacVXBGDRlq3RCWZixX7WhWS3E6yv2ZWBzEIbyXO0ZRmvxMYnuA3A7Qg==
-  dependencies:
-    react-transition-group "4.4.5"
-
 recast@^0.23.1, recast@^0.23.3:
   version "0.23.4"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.23.4.tgz#ca1bac7bfd3011ea5a28dfecb5df678559fb1ddf"
@@ -10690,12 +10693,10 @@ vite-plugin-html@^3.2.0:
     node-html-parser "^5.3.3"
     pathe "^0.2.0"
 
-
 vite@^5.2.7:
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.7.tgz#e1b8a985eb54fcb9467d7f7f009d87485016df6e"
   integrity sha512-k14PWOKLI6pMaSzAuGtT+Cf0YmIx12z9YGon39onaJNy8DLBfBJrzg9FQEmkAM5lpHBZs9wksWAsyF/HkpEwJA==
-
   dependencies:
     esbuild "^0.20.1"
     postcss "^8.4.38"