From 52395d0563e726e7407cf8930e1af63965702570 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Sat, 4 Nov 2023 01:56:23 +0530
Subject: [PATCH] chore : dropdown loading state added and project card avatar
 fix (#2643)

* chore: project card avatar rendering fix

* chore: state, assignee and label dropdown loading state added
---
 .../issue-layouts/properties/assignee.tsx     | 62 +++++++++--------
 .../issue-layouts/properties/labels.tsx       | 68 ++++++++++---------
 .../issues/issue-layouts/properties/state.tsx | 62 +++++++++--------
 web/components/project/card.tsx               |  2 +-
 4 files changed, 102 insertions(+), 92 deletions(-)

diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
index ee545f3a5..b436e274f 100644
--- a/web/components/issues/issue-layouts/properties/assignee.tsx
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -47,11 +47,17 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
 
   const projectMembers = projectId ? projectStore?.members?.[projectId] : undefined;
 
-  const fetchProjectMembers = () =>
-    workspaceSlug && projectId && projectStore.fetchProjectMembers(workspaceSlug, projectId);
+  const fetchProjectMembers = () => {
+    setIsLoading(true);
+    if (workspaceSlug && projectId)
+      workspaceSlug &&
+        projectId &&
+        projectStore.fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
 
   const options = (projectMembers ?? [])?.map((member) => ({
     value: member.member.id,
@@ -128,7 +134,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           className={`flex items-center justify-between gap-1 w-full text-xs ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
           } ${buttonClassName}`}
-          onClick={() => fetchProjectMembers()}
+          onClick={() => !projectMembers && fetchProjectMembers()}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -152,33 +158,31 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
             />
           </div>
           <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-            {filteredOptions ? (
-              filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ active, selected }) =>
-                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active && !selected ? "bg-custom-background-80" : ""
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                    }
-                  >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && <Check className={`h-3.5 w-3.5`} />}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : (
-                <span className="flex items-center gap-2 p-1">
-                  <p className="text-left text-custom-text-200 ">No matching results</p>
-                </span>
-              )
-            ) : (
+            {isLoading ? (
               <p className="text-center text-custom-text-200">Loading...</p>
+            ) : filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      active && !selected ? "bg-custom-background-80" : ""
+                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      {option.content}
+                      {selected && <Check className={`h-3.5 w-3.5`} />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <span className="flex items-center gap-2 p-1">
+                <p className="text-left text-custom-text-200 ">No matching results</p>
+              </span>
             )}
           </div>
         </div>
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index d54b67a9c..596237ef4 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -51,11 +51,15 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
 
   const projectLabels = projectId && projectStore?.labels?.[projectId];
 
-  const fetchProjectLabels = () =>
-    workspaceSlug && projectId && projectStore.fetchProjectLabels(workspaceSlug, projectId);
+  const fetchProjectLabels = () => {
+    setIsLoading(true);
+    if (workspaceSlug && projectId)
+      projectStore.fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
 
   const options = (projectLabels ? projectLabels : []).map((label) => ({
     value: label.id,
@@ -131,10 +135,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
         )
       ) : (
         <div
-                className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
-                  noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
-                }`}
-              >
+          className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
+            noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+          }`}
+        >
           Select labels
         </div>
       )}
@@ -161,7 +165,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
-          onClick={() => fetchProjectLabels()}
+          onClick={() => !projectLabels && fetchProjectLabels()}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -186,33 +190,31 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             />
           </div>
           <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-            {filteredOptions ? (
-              filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ active, selected }) =>
-                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active ? "bg-custom-background-80" : ""
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                    }
-                  >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && <Check className={`h-3.5 w-3.5`} />}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : (
-                <span className="flex items-center gap-2 p-1">
-                  <p className="text-left text-custom-text-200 ">No matching results</p>
-                </span>
-              )
-            ) : (
+            {isLoading ? (
               <p className="text-center text-custom-text-200">Loading...</p>
+            ) : filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      active ? "bg-custom-background-80" : ""
+                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      {option.content}
+                      {selected && <Check className={`h-3.5 w-3.5`} />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <span className="flex items-center gap-2 p-1">
+                <p className="text-left text-custom-text-200 ">No matching results</p>
+              </span>
             )}
           </div>
         </div>
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
index 35fea87ae..5bd0edb18 100644
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -47,14 +47,20 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
   const [query, setQuery] = useState("");
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<Boolean>(false);
 
   const projectStates: IState[] = [];
   const projectStatesByGroup = projectId && projectStore?.states?.[projectId];
   if (projectStatesByGroup)
     for (const group in projectStatesByGroup) projectStates.push(...projectStatesByGroup[group]);
 
-  const fetchProjectStates = () =>
-    workspaceSlug && projectId && projectStore.fetchProjectStates(workspaceSlug, projectId);
+  const fetchProjectStates = () => {
+    setIsLoading(true);
+    if (workspaceSlug && projectId)
+      workspaceSlug &&
+        projectId &&
+        projectStore.fetchProjectStates(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
 
   const dropdownOptions = projectStates?.map((state) => ({
     value: state.id,
@@ -113,7 +119,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
               className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
                 disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
               } ${buttonClassName}`}
-              onClick={() => fetchProjectStates()}
+              onClick={() => !projectStatesByGroup && fetchProjectStates()}
             >
               {label}
               {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -137,33 +143,31 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
                 />
               </div>
               <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-                {filteredOptions ? (
-                  filteredOptions.length > 0 ? (
-                    filteredOptions.map((option) => (
-                      <Combobox.Option
-                        key={option.value}
-                        value={option.value}
-                        className={({ active, selected }) =>
-                          `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                            active ? "bg-custom-background-80" : ""
-                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                        }
-                      >
-                        {({ selected }) => (
-                          <>
-                            {option.content}
-                            {selected && <Check className="h-3.5 w-3.5" />}
-                          </>
-                        )}
-                      </Combobox.Option>
-                    ))
-                  ) : (
-                    <span className="flex items-center gap-2 p-1">
-                      <p className="text-left text-custom-text-200 ">No matching results</p>
-                    </span>
-                  )
-                ) : (
+                {isLoading ? (
                   <p className="text-center text-custom-text-200">Loading...</p>
+                ) : filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          {option.content}
+                          {selected && <Check className="h-3.5 w-3.5" />}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))
+                ) : (
+                  <span className="flex items-center gap-2 p-1">
+                    <p className="text-left text-custom-text-200 ">No matching results</p>
+                  </span>
                 )}
               </div>
             </div>
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 0a684ac7f..3993a74e9 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -181,7 +181,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
                 <div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
                   <AvatarGroup showTooltip={false}>
                     {projectMembersIds.map((memberId) => {
-                      const member = project.members?.find((m) => m.id === memberId);
+                      const member = project.members?.find((m) => m.member_id === memberId);
 
                       if (!member) return null;