chore: spreadsheet view code refactor

web/components/core/views/spreadsheet-view/single-issue.tsx

@@ -58,6 +58,7 @@ type Props = {
   properties: Properties;
   handleEditIssue: (issue: IIssue) => void;
   handleDeleteIssue: (issue: IIssue) => void;
+  setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
   gridTemplateColumns: string;
   disableUserActions: boolean;
   user: ICurrentUserResponse | undefined;
@@ -74,6 +75,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   properties,
   handleEditIssue,
   handleDeleteIssue,
+  setCurrentProjectId,
   gridTemplateColumns,
   disableUserActions,
   user,
@@ -214,7 +216,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   const openPeekOverview = () => {
     const { query } = router;
-
+    setCurrentProjectId(issue.project_detail.id);
     router.push({
       pathname: router.pathname,
       query: { ...query, peekIssue: issue.id },

web/components/core/views/spreadsheet-view/spreadsheet-issues.tsx

@@ -15,6 +15,7 @@ type Props = {
   setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
   properties: Properties;
   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
   gridTemplateColumns: string;
   disableUserActions: boolean;
   user: ICurrentUserResponse | undefined;
@@ -31,6 +32,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
   gridTemplateColumns,
   properties,
   handleIssueAction,
+  setCurrentProjectId,
   disableUserActions,
   user,
   userAuth,
@@ -65,6 +67,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
         properties={properties}
         handleEditIssue={() => handleIssueAction(issue, "edit")}
         handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+        setCurrentProjectId={setCurrentProjectId}
         disableUserActions={disableUserActions}
         user={user}
         userAuth={userAuth}
@@ -86,6 +89,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
             gridTemplateColumns={gridTemplateColumns}
             properties={properties}
             handleIssueAction={handleIssueAction}
+            setCurrentProjectId={setCurrentProjectId}
             disableUserActions={disableUserActions}
             user={user}
             userAuth={userAuth}

web/components/core/views/spreadsheet-view/spreadsheet-view.tsx

@@ -43,6 +43,7 @@ export const SpreadsheetView: React.FC<Props> = ({
   userAuth,
 }) => {
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+  const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@@ -71,7 +72,7 @@ export const SpreadsheetView: React.FC<Props> = ({
     <>
       <IssuePeekOverview
         handleMutation={() => mutateIssues()}
-        projectId={projectId?.toString() ?? ""}
+        projectId={currentProjectId ?? ""}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={disableUserActions}
       />
@@ -89,6 +90,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                 projectId={issue.project_detail.id}
                 expandedIssues={expandedIssues}
                 setExpandedIssues={setExpandedIssues}
+                setCurrentProjectId={setCurrentProjectId}
                 gridTemplateColumns={gridTemplateColumns}
                 properties={properties}
                 handleIssueAction={handleIssueAction}
@@ -148,7 +150,9 @@ export const SpreadsheetView: React.FC<Props> = ({
             </div>
           </div>
         ) : (
+          <div className="flex flex-col justify-center items-center h-full w-full">
             <Spinner />
+          </div>
         )}
       </div>
     </>