tryfix(OUT-2112): shifted clientDetailsAppBridge rendering from server component to sidebar

Author: arpandhakal

src/app/detail/[task_id]/[user_type]/page.tsx

@@ -111,15 +111,6 @@ export default async function TaskDetailPage({
 
   return (
     <DetailStateUpdate isRedirect={!!searchParams.isRedirect} token={token} tokenPayload={tokenPayload} task={task}>
-      {params.user_type === UserType.CLIENT_USER && !getPreviewMode(tokenPayload) && (
-        <ClientDetailAppBridge
-          portalUrl={workspace.portalUrl}
-          handleTaskComplete={async (workflowState) => {
-            'use server'
-            await clientUpdateTask(token, task_id, workflowState.id)
-          }}
-        />
-      )}
       <RealTime tokenPayload={tokenPayload}>
         <EscapeHandler />
         <ResponsiveStack>
@@ -212,6 +203,7 @@ export default async function TaskDetailPage({
             <Sidebar
               task_id={task_id}
               selectedAssigneeId={task?.assigneeId}
+              userType={user_type}
               selectedWorkflowState={task?.workflowState}
               updateWorkflowState={async (workflowState) => {
                 'use server'

src/app/detail/ui/ClientDetailAppBridge.tsx

@@ -9,35 +9,32 @@ import { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 
 interface DetailAppBridgeProps {
-  handleTaskComplete: (workflowState: WorkflowStateResponse) => void
+  handleTaskComplete: () => void
+  isTaskCompleted: boolean
   portalUrl?: string
 }
 
-export const ClientDetailAppBridge = ({ handleTaskComplete, portalUrl }: DetailAppBridgeProps) => {
-  const { activeTask, workflowStates } = useSelector(selectTaskBoard)
-  const completedWorkflowState = workflowStates.find((state) => state.type === 'completed')
-  const isTaskCompleted = activeTask?.workflowStateId === completedWorkflowState?.id
-
-  console.log(portalUrl)
-
+export const ClientDetailAppBridge = ({ handleTaskComplete, isTaskCompleted, portalUrl }: DetailAppBridgeProps) => {
   const [awake, setAwake] = useState(false)
 
+  console.log(isTaskCompleted)
+
   useEffect(() => {
     setTimeout(() => {
       setAwake(true)
     }, 0)
   }, [])
 
   const handleMarkAsDone = useCallback(() => {
-    completedWorkflowState && handleTaskComplete(completedWorkflowState)
+    handleTaskComplete()
     // "awaken" callback using one more render to avoid hydration issues
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [awake])
 
   usePrimaryCta(
     {
       label: 'Mark as Done',
-      icon: Icons.PLUS,
+      icon: Icons.CHECK,
       onClick: handleMarkAsDone,
     },
     { portalUrl },

src/app/detail/ui/Sidebar.tsx

@@ -18,7 +18,7 @@ import store from '@/redux/store'
 import { DateStringSchema } from '@/types/date'
 import { UpdateTaskRequest } from '@/types/dto/tasks.dto'
 import { WorkflowStateResponse } from '@/types/dto/workflowStates.dto'
-import { IAssigneeCombined, InputValue, Sizes } from '@/types/interfaces'
+import { IAssigneeCombined, InputValue, Sizes, UserType } from '@/types/interfaces'
 import { getAssigneeId, getAssigneeName, getUserIds, UserIdsType } from '@/utils/assignee'
 import { createDateFromFormattedDateString, formatDate } from '@/utils/dateHelper'
 import { getSelectedUserIds, getSelectorAssignee, getSelectorAssigneeFromTask } from '@/utils/selector'
@@ -28,6 +28,7 @@ import { Box, Skeleton, Stack, styled, Typography } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { z } from 'zod'
+import { ClientDetailAppBridge } from '@/app/detail/ui/ClientDetailAppBridge'
 
 const StyledText = styled(Typography)(({ theme }) => ({
   color: theme.color.gray[500],
@@ -41,6 +42,7 @@ export const Sidebar = ({
   updateTask,
   disabled,
   workflowDisabled,
+  userType,
 }: {
   task_id: string
   selectedWorkflowState: WorkflowStateResponse
@@ -50,6 +52,7 @@ export const Sidebar = ({
   updateTask: (payload: UpdateTaskRequest) => void
   disabled: boolean
   workflowDisabled?: false
+  userType: UserType
 }) => {
   const { activeTask, workflowStates, assignee, previewMode } = useSelector(selectTaskBoard)
   const { showSidebar, showConfirmAssignModal } = useSelector(selectTaskDetails)
@@ -74,6 +77,10 @@ export const Sidebar = ({
 
   const statusValue = _statusValue as WorkflowStateResponse //typecasting
 
+  const completedWorkflowState = workflowStates.find((state) => state.type === 'completed')
+
+  const isTaskCompleted = activeTask?.workflowStateId === completedWorkflowState?.id
+
   useEffect(() => {
     if (activeTask && workflowStates && updateStatusValue) {
       const currentTask = activeTask
@@ -406,6 +413,15 @@ export const Sidebar = ({
           title="Reassign task?"
         />
       </StyledModal>
+      {userType == UserType.CLIENT_USER && !previewMode && (
+        <ClientDetailAppBridge
+          isTaskCompleted={isTaskCompleted}
+          handleTaskComplete={() => {
+            completedWorkflowState && updateStatusValue(completedWorkflowState)
+            completedWorkflowState && updateWorkflowState(completedWorkflowState)
+          }}
+        />
+      )}
     </Box>
   )
 }