Merge pull request #201 from Amsterdam/feature/WON-81-add-case-state

WON-81

src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx

@@ -1,9 +1,9 @@
+import { Heading } from "@amsterdam/design-system-react"
+import { styled } from "styled-components"
 import { useWorkflows } from "app/state/rest"
 import { Table, SmallSkeleton } from "app/components"
-import { styled } from "styled-components"
 import getColumns from "./columns"
 
-
 type Props = {
   caseId: Components.Schemas.Case["id"]
 }
@@ -19,29 +19,31 @@ const TableWrapper = styled.div`
 
 export const Workflows: React.FC<Props> = ({ caseId }) => {
   const [data, { isBusy }] = useWorkflows(caseId)
-  const workflows = data ?? []
+  const workflows = data ?? ([] as Components.Schemas.CaseWorkflow[])
   const columns = getColumns(caseId)
 
   if (isBusy) {
-    return <SmallSkeleton height={ 4 } />
+    return <SmallSkeleton height={4} />
   }
   return (
     <Wrapper>
-      { workflows?.length > 0 ? (
-        workflows.map(({ id, tasks = [] }) => (
-          <TableWrapper key={ `${ id }` }>
+      {workflows?.length > 0 ? (
+        workflows.map(({ id, state, tasks = [] }) => (
+          <TableWrapper key={`${ id }`}>
+            {state?.name ? <Heading level={4}>{state.name}</Heading> : <></>}
             <Table
-              columns={ columns }             
-              data={ tasks }
-              pagination={ false }
+              columns={columns}
+              data={tasks}
+              pagination={false}
               emptyPlaceholder="Geen taken beschikbaar."
             />
           </TableWrapper>
         ))
-      ) : <></>}
+      ) : (
+        <></>
+      )}
     </Wrapper>
   )
 }
 
 export default Workflows
-