🖼️ Updated screenshot links in README

* 🔧 Fixed the response object in reducers and components https://github.com/rishighan/threetwo/issues/64

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

* #️⃣ Added a key prop to MetadataPanel in global search results

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

* 🔧 Fixed DOMNesting issues

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

* 🔧 Fixed the response in wanted reducer action

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

* ➕ Committing the reducer

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

* 🔧 Fixes for DOMNesting issues on the Downloads page

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

---------

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

README.md

@@ -6,13 +6,13 @@ ThreeTwo! _aims to be_ a comic book curation app.
 
 ### Screenshots
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Dashboard.png)
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/Dashboard.png)
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Library.png)
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/Library.png)
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/DC%2B%2B%20integration.png)
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/DC%2B%2B%20integration.png)
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/ComicVine%20Matching.png)
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/ComicVine%20Matching.png)
 
 
 ### 🦄 Early Development Support Channel

src/client/actions/fileops.actions.tsx

@@ -301,7 +301,7 @@ export const searchIssue = (query, options) => async (dispatch) => {
     case "wantedComicsPage":
       dispatch({
         type: WANTED_COMICS_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
       });
       break;
     case "globalSearchBar":
@@ -314,13 +314,13 @@ export const searchIssue = (query, options) => async (dispatch) => {
     case "libraryPage":
       dispatch({
         type: SS_SEARCH_RESULTS_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
       });
       break;
     case "volumesPage":
       dispatch({
         type: VOLUMES_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
       });
       break;
 

src/client/components/Dashboard/RecentlyImported.tsx

@@ -83,14 +83,14 @@ export const RecentlyImported = ({
                     {/* Raw file presence  */}
                     {isNil(rawFileDetails) && (
                       <span className="icon custom-icon is-small has-text-danger mr-2">
-                        <img src="/src/client/img/missing-file.svg" />
+                        <img src="/src/client/assets/img/missing-file.svg" />
                       </span>
                     )}
                     {/* ComicInfo.xml presence */}
                     {!isNil(comicInfo) && !isEmpty(comicInfo) && (
                       <span className="icon custom-icon is-small has-text-danger">
                         <img
-                          src="/src/client/img/comicinfoxml.svg"
+                          src="/src/client/assets/img/comicinfoxml.svg"
                           alt={"ComicInfo.xml file detected."}
                         />
                       </span>

src/client/components/Dashboard/WantedComicsList.tsx

@@ -87,7 +87,7 @@ export const WantedComicsList = ({
                   )}
                   {!isEmpty(locg) && (
                     <span className="icon custom-icon">
-                      <img src="/src/client/img/locglogo.svg" />
+                      <img src="/src/client/assets/img/locglogo.svg" />
                     </span>
                   )}
                   {/* Issue type */}

src/client/components/Downloads/Downloads.tsx

@@ -3,7 +3,6 @@ import { getTransfers } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import { isEmpty, isNil, isUndefined } from "lodash";
-import { searchIssue } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";
 
@@ -47,7 +46,6 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
       })
       setBundles(foo);
     }
-
   }, [issueBundles])
 
   return !isNil(bundles) ?
@@ -56,9 +54,9 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
         <h1 className="title">Downloads</h1>
         <div className="columns">
           <div className="column is-half">
-            {bundles.map(bundle => {
+            {bundles.map((bundle, idx) => {
               console.log(bundle);
-              return <>
+              return <div key={idx}>
                 <MetadataPanel
                   data={bundle}
                   imageStyle={{ maxWidth: 80 }}
@@ -70,30 +68,33 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
                     margin: "0 0 8px 0",
                   }} />
 
-                  <table className="table is-size-7">
+                <table className="table is-size-7">
+                  <thead>
                     <tr>
                       <th>Name</th>
                       <th>Size</th>
                       <th>Type</th>
                       <th>Bundle ID</th>
                     </tr>
-
+                  </thead>
-                    {bundle.acquisition.directconnect.downloads.map((bundle) => {
+                  <tbody>
-                      return(<tr>
+                    {bundle.acquisition.directconnect.downloads.map((bundle, idx) => {
+                      return (<tr key={idx}>
                         <td>{bundle.name}</td>
                         <td>{bundle.size}</td>
                         <td>{bundle.type.str}</td>
                         <td><span className="tag is-warning">{bundle.bundleId}</span></td>
                       </tr>)
                     })}
-                  </table>
+                  </tbody>
+                </table>
                 {/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */}
-              </>
+              </div>
             })}
           </div>
         </div>
       </section>
-    </div> : <div>asd</div>;
+    </div> : <div>There are no downloads.</div>;
 };
 
 export default Downloads;

src/client/components/GlobalSearchBar/SearchBar.tsx

@@ -61,9 +61,10 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
             margin: "60px 0 0 350px",
           }}
         >
-          {map(searchResults, (result) => (
+          {map(searchResults, (result, idx) => (
             <MetadataPanel
               data={result}
+              key={idx}
               imageStyle={{ maxWidth: 70 }}
               titleStyle={{ fontSize: "0.8rem" }}
               tagsStyle={{ fontSize: "0.7rem" }}

src/client/components/Library/Library.tsx

@@ -19,10 +19,7 @@ export const Library = (): ReactElement => {
   const searchResults = useSelector(
     (state: RootState) => state.fileOps.libraryComics,
   );
-  const searchError = useSelector((state: RootState) => {
+  const searchError = useSelector((state: RootState) => state.fileOps.librarySearchError);
-    console.log(state);
-    return state.fileOps.librarySearchError;
-  });
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(
@@ -221,9 +218,9 @@ export const Library = (): ReactElement => {
           <div>
             <div className="library">
               <T2Table
-                totalPages={searchResults.hits.total.value}
+                totalPages={searchResults.total.value}
                 columns={columns}
-                sourceData={searchResults?.hits?.hits}
+                sourceData={searchResults?.hits}
                 rowClickHandler={navigateToComicDetail}
                 paginationHandlers={{
                   nextPage,

src/client/components/Volumes/Volumes.tsx

@@ -166,8 +166,8 @@ export const Volumes = (props): ReactElement => {
           <div>
             <div className="library">
               <T2Table
-                sourceData={volumes?.hits?.hits}
+                sourceData={volumes?.hits}
-                totalPages={volumes.hits.hits.length}
+                totalPages={volumes.hits.length}
                 paginationHandlers={{
                   nextPage: () => {},
                   previousPage: () => {},

src/client/components/WantedComics/WantedComics.tsx

@@ -73,8 +73,8 @@ export const WantedComics = (props): ReactElement => {
           id: "downloadDetails",
           accessorKey: "acquisition",
           cell: data => <ol>
-            {data.getValue().directconnect.downloads.map(download => {
+            {data.getValue().directconnect.downloads.map((download, idx) => {
-              return <li className="is-size-7">{download.name}</li>;
+              return <li className="is-size-7" key={idx}>{download.name}</li>;
             })}
           </ol>
         },

src/client/components/shared/T2Table.tsx

@@ -20,8 +20,6 @@ export const T2Table = (tableOptions): ReactElement => {
       pageIndex: 1,
       pageSize: 15,
     });
-    console.log(sourceData)
-
 
   const pagination = useMemo(
     () => ({
@@ -81,12 +79,12 @@ export const T2Table = (tableOptions): ReactElement => {
             {/* <p>{totalPages} comics in all</p> */}
           </div>
           <div className="field has-addons">
-            <p className="control">
+            <div className="control">
               <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
-            </p>
+            </div>
-            <p className="control">
+            <div className="control">
               <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
-            </p>
+            </div>
 
             <div className="field has-addons ml-5">
               <p className="control">

src/client/reducers/fileops.reducer.ts

@@ -246,7 +246,7 @@ function fileOpsReducer(state = initialState, action) {
     case WANTED_COMICS_FETCHED: {
       const foo = [];
       if (!isUndefined(action.data.hits)) {
-        map(action.data.hits.hits, ({ _source }) => {
+        map(action.data.hits, ({ _source }) => {
           foo.push(_source);
         });
       }

yarn.lock

@@ -6021,9 +6021,9 @@ htmlparser2@^6.1.0:
     entities "^2.0.0"
 
 http-cache-semantics@^4.1.0:
-  version "4.1.0"
+  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
-  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
+  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
 
 http-errors@2.0.0:
   version "2.0.0"