🙋🏽‍♂️ Wanted comics section on dashboard

src/client/components/Dashboard/Dashboard.tsx

@@ -2,16 +2,21 @@ import React, { ReactElement, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
+import { WantedComicsList } from "./WantedComicsList";
 import { VolumeGroups } from "./VolumeGroups";
 import { PullList } from "./PullList";
-import { getComicBooks } from "../../actions/fileops.actions";
+import {
+  fetchVolumeGroups,
+  getComicBooks,
+} from "../../actions/fileops.actions";
 import { getLibraryStatistics } from "../../actions/comicinfo.actions";
-import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { isEmpty, isUndefined, map } from "lodash";
 import prettyBytes from "pretty-bytes";
 
 export const Dashboard = (): ReactElement => {
   const dispatch = useDispatch();
   useEffect(() => {
+    dispatch(fetchVolumeGroups());
     dispatch(
       getComicBooks({
         paginationOptions: {
@@ -19,13 +24,30 @@ export const Dashboard = (): ReactElement => {
           limit: 5,
           sort: { updatedAt: "-1" },
         },
+        predicate: { "acquisition.wanted": false },
+        comicStatus: "recent",
+      }),
+    );
+    dispatch(
+      getComicBooks({
+        paginationOptions: {
+          page: 0,
+          limit: 5,
+          sort: { updatedAt: "-1" },
+        },
+        predicate: { "acquisition.wanted": true },
+        comicStatus: "wanted",
       }),
     );
     dispatch(getLibraryStatistics());
-  }, [dispatch]);
+  }, []);
+
   const recentComics = useSelector(
     (state: RootState) => state.fileOps.recentComics,
   );
+  const wantedComics = useSelector(
+    (state: RootState) => state.fileOps.wantedComics,
+  );
   const volumeGroups = useSelector(
     (state: RootState) => state.fileOps.comicVolumeGroups,
   );
@@ -153,8 +175,9 @@ export const Dashboard = (): ReactElement => {
                 </dl>
               </div>
             </div>
+            <WantedComicsList comics={wantedComics} />
             <RecentlyImported comicBookCovers={recentComics} />
-            {!isNil(volumeGroups) ? <VolumeGroups /> : null}
+            <VolumeGroups volumeGroups={volumeGroups} />
           </>
         ) : (
           <ZeroState