From feb0e40559f056f3fd74ddf0ef150f4775f0a3f7 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Thu, 23 Mar 2023 18:10:28 +0530
Subject: [PATCH] refactor: state with group 'completed' or 'cancelled' are
 collapsed by default (#506)

---
 .../components/core/board-view/all-boards.tsx |   5 +-
 .../core/board-view/single-board.tsx          | 196 +++++++++---------
 2 files changed, 106 insertions(+), 95 deletions(-)

diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index 4ee6175d2..ea2bb7147 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -76,7 +76,10 @@ export const AllBoards: React.FC<Props> = ({
 
                   if (groupedByIssues[singleGroup].length === 0)
                     return (
-                      <div className="flex items-center justify-between gap-2 rounded bg-white p-2 shadow">
+                      <div
+                        key={index}
+                        className="flex items-center justify-between gap-2 rounded bg-white p-2 shadow"
+                      >
                         <div className="flex items-center gap-2">
                           {currentState &&
                             getStateGroupIcon(currentState.group, "16", "16", currentState.color)}
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index e987c700d..52c3d7021 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
@@ -58,6 +58,11 @@ export const SingleBoard: React.FC<Props> = ({
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
+  useEffect(() => {
+    if (currentState?.group === "completed" || currentState?.group === "cancelled")
+      setIsCollapsed(false);
+  }, [currentState]);
+
   return (
     <div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96 bg-gray-50"}`}>
       <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
@@ -68,102 +73,105 @@ export const SingleBoard: React.FC<Props> = ({
           isCollapsed={isCollapsed}
           setIsCollapsed={setIsCollapsed}
         />
-        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
-          {(provided, snapshot) => (
-            <div
-              className={`relative h-full overflow-y-auto p-1  ${
-                snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
-              } ${!isCollapsed ? "hidden" : "block"}`}
-              ref={provided.innerRef}
-              {...provided.droppableProps}
-            >
-              {orderBy !== "sort_order" && (
-                <>
-                  <div
-                    className={`absolute ${
-                      snapshot.isDraggingOver ? "block" : "hidden"
-                    } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-gray-100 opacity-50`}
-                  />
-                  <div
-                    className={`absolute ${
-                      snapshot.isDraggingOver ? "block" : "hidden"
-                    } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-white p-2 text-xs`}
-                  >
-                    This board is ordered by {replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
-                  </div>
-                </>
-              )}
-              {groupedByIssues?.[groupTitle].map((issue, index) => (
-                <Draggable
-                  key={issue.id}
-                  draggableId={issue.id}
-                  index={index}
-                  isDragDisabled={isNotAllowed}
-                >
-                  {(provided, snapshot) => (
-                    <SingleBoardIssue
-                      key={index}
-                      provided={provided}
-                      snapshot={snapshot}
-                      type={type}
-                      index={index}
-                      selectedGroup={selectedGroup}
-                      issue={issue}
-                      groupTitle={groupTitle}
-                      properties={properties}
-                      editIssue={() => handleEditIssue(issue)}
-                      makeIssueCopy={() => makeIssueCopy(issue)}
-                      handleDeleteIssue={handleDeleteIssue}
-                      handleTrashBox={handleTrashBox}
-                      removeIssue={() => {
-                        if (removeIssue && issue.bridge_id) removeIssue(issue.bridge_id);
-                      }}
-                      userAuth={userAuth}
-                    />
-                  )}
-                </Draggable>
-              ))}
-              <span
-                style={{
-                  display: orderBy === "sort_order" ? "inline" : "none",
-                }}
+        {isCollapsed && (
+          <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
+            {(provided, snapshot) => (
+              <div
+                className={`relative h-full overflow-y-auto p-1  ${
+                  snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
+                } ${!isCollapsed ? "hidden" : "block"}`}
+                ref={provided.innerRef}
+                {...provided.droppableProps}
               >
-                {provided.placeholder}
-              </span>
-              {type === "issue" ? (
-                <button
-                  type="button"
-                  className="flex items-center gap-2 font-medium text-theme outline-none"
-                  onClick={addIssueToState}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                  Add Issue
-                </button>
-              ) : (
-                <CustomMenu
-                  customButton={
-                    <button
-                      type="button"
-                      className="flex items-center gap-2 font-medium text-theme outline-none"
+                {orderBy !== "sort_order" && (
+                  <>
+                    <div
+                      className={`absolute ${
+                        snapshot.isDraggingOver ? "block" : "hidden"
+                      } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-gray-100 opacity-50`}
+                    />
+                    <div
+                      className={`absolute ${
+                        snapshot.isDraggingOver ? "block" : "hidden"
+                      } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-white p-2 text-xs`}
                     >
-                      <PlusIcon className="h-4 w-4" />
-                      Add Issue
-                    </button>
-                  }
-                  optionsPosition="left"
-                  noBorder
+                      This board is ordered by{" "}
+                      {replaceUnderscoreIfSnakeCase(orderBy ?? "created_at")}
+                    </div>
+                  </>
+                )}
+                {groupedByIssues?.[groupTitle].map((issue, index) => (
+                  <Draggable
+                    key={issue.id}
+                    draggableId={issue.id}
+                    index={index}
+                    isDragDisabled={isNotAllowed}
+                  >
+                    {(provided, snapshot) => (
+                      <SingleBoardIssue
+                        key={index}
+                        provided={provided}
+                        snapshot={snapshot}
+                        type={type}
+                        index={index}
+                        selectedGroup={selectedGroup}
+                        issue={issue}
+                        groupTitle={groupTitle}
+                        properties={properties}
+                        editIssue={() => handleEditIssue(issue)}
+                        makeIssueCopy={() => makeIssueCopy(issue)}
+                        handleDeleteIssue={handleDeleteIssue}
+                        handleTrashBox={handleTrashBox}
+                        removeIssue={() => {
+                          if (removeIssue && issue.bridge_id) removeIssue(issue.bridge_id);
+                        }}
+                        userAuth={userAuth}
+                      />
+                    )}
+                  </Draggable>
+                ))}
+                <span
+                  style={{
+                    display: orderBy === "sort_order" ? "inline" : "none",
+                  }}
                 >
-                  <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
-                  {openIssuesListModal && (
-                    <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                      Add an existing issue
-                    </CustomMenu.MenuItem>
-                  )}
-                </CustomMenu>
-              )}
-            </div>
-          )}
-        </StrictModeDroppable>
+                  {provided.placeholder}
+                </span>
+                {type === "issue" ? (
+                  <button
+                    type="button"
+                    className="flex items-center gap-2 font-medium text-theme outline-none"
+                    onClick={addIssueToState}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    Add Issue
+                  </button>
+                ) : (
+                  <CustomMenu
+                    customButton={
+                      <button
+                        type="button"
+                        className="flex items-center gap-2 font-medium text-theme outline-none"
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        Add Issue
+                      </button>
+                    }
+                    optionsPosition="left"
+                    noBorder
+                  >
+                    <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
+                    {openIssuesListModal && (
+                      <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                        Add an existing issue
+                      </CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
+                )}
+              </div>
+            )}
+          </StrictModeDroppable>
+        )}
       </div>
     </div>
   );