From cf167be8da0e2d2859e4a5d4ec46da2ae0be096e Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 4 Mar 2022 15:43:27 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fixed=20object=20orchestration?=
 =?UTF-8?q?=20for=20volumes=20in=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dashboard/VolumeGroups.tsx     | 42 +++++++++----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/client/components/Dashboard/VolumeGroups.tsx b/src/client/components/Dashboard/VolumeGroups.tsx
index c0a6d98..e78a362 100644
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/src/client/components/Dashboard/VolumeGroups.tsx
@@ -1,4 +1,4 @@
-import { map } from "lodash";
+import { map, unionBy } from "lodash";
 import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
 import { Link } from "react-router-dom";
@@ -11,6 +11,8 @@ export const VolumeGroups = (props): ReactElement => {
     700: 2,
     500: 1,
   };
+  // Till mongo gives us back the deduplicated results with the ObjectId
+  const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
   return (
     <section className="volumes-container mt-4">
       <div className="content">
@@ -22,29 +24,25 @@ export const VolumeGroups = (props): ReactElement => {
         className="volumes-grid"
         columnClassName="volumes-grid-column"
       >
-        {map(props.volumeGroups, (data) => {
-          return map(data.data, (group) => {
-            return (
-              <div className="stack" key={group.id}>
-                <img src={group.volume.image.small_url} />
-                <div className="content">
-                  <div className="stack-title is-size-8">
-                    <Link to={`/volume/details/${group.id}`}>
-                      {ellipsize(group.volume.name, 18)}
-                    </Link>
-                  </div>
-                  <div className="control">
-                    <span className="tags has-addons">
-                      <span className="tag is-primary is-light">Issues</span>
-                      <span className="tag">
-                        {group.volume.count_of_issues}
-                      </span>
-                    </span>
-                  </div>
+        {map(deduplicatedGroups, (data) => {
+          return (
+            <div className="stack" key={data._id}>
+              <img src={data.volumes.image.small_url} />
+              <div className="content">
+                <div className="stack-title is-size-8">
+                  <Link to={`/volume/details/${data._id}`}>
+                    {ellipsize(data.volumes.name, 18)}
+                  </Link>
+                </div>
+                <div className="control">
+                  <span className="tags has-addons">
+                    <span className="tag is-primary is-light">Issues</span>
+                    <span className="tag">{data.volumes.count_of_issues}</span>
+                  </span>
                 </div>
               </div>
-            );
-          });
+            </div>
+          );
         })}
       </Masonry>
     </section>