Feature/design improvements

cypress/integration/home.spec.js

@@ -12,7 +12,6 @@ describe("Home e2e", function () {
     cy.contains("Your Published Submissions").should("be.visible")
 
     cy.get("ul.MuiList-root").eq(0).children().should("have.length.at.most", 5)
-    cy.get("ul.MuiList-root").eq(1).children().should("have.length.at.most", 5)
 
     // Create a new Unpublished folder
     cy.get("button").contains("Create Submission").click()
@@ -82,16 +81,6 @@ describe("Home e2e", function () {
     cy.contains("Your draft submissions")
       .should("be.visible")
       .then($el => $el.click())
-
-    // Close unpublished folders list
-    cy.get("div.MuiCardActions-root")
-      .contains("Close")
-      .should("be.visible")
-      .then($btn => $btn.click())
-
-    // Check Overview submissions page is shown
-    cy.contains("Your Draft Submissions").should("be.visible")
-    cy.contains("Your Published Submissions").should("be.visible")
   })
 
   it("create a published folder, navigate to see folder details, delete object inside folder, navigate back to Overview submissions", () => {
@@ -157,15 +146,5 @@ describe("Home e2e", function () {
     cy.contains("Your published submissions")
       .should("be.visible")
       .then($el => $el.click())
-
-    // Close published folders list
-    cy.get("div.MuiCardActions-root")
-      .contains("Close")
-      .should("be.visible")
-      .then($btn => $btn.click())
-
-    // Check Overview submissions page is shown
-    cy.contains("Your Draft Submissions").should("be.visible")
-    cy.contains("Your Published Submissions").should("be.visible")
   })
 })

src/App.js

@@ -6,6 +6,8 @@ import CssBaseline from "@material-ui/core/CssBaseline"
 import { makeStyles } from "@material-ui/core/styles"
 import { Switch, Route, useLocation } from "react-router-dom"
 
+import SelectedFolderDetails from "components/Home/SelectedFolderDetails"
+import SubmissionFolderList from "components/Home/SubmissionFolderList"
 import Nav from "components/Nav"
 import Page401 from "views/ErrorPages/Page401"
 import Page403 from "views/ErrorPages/Page403"
@@ -14,7 +16,6 @@ import Page500 from "views/ErrorPages/Page500"
 import Home from "views/Home"
 import Login from "views/Login"
 import NewDraftWizard from "views/NewDraftWizard"
-// import Submissions from "views/Submissions"
 
 const useStyles = makeStyles(theme => ({
   content: {
@@ -82,12 +83,22 @@ const App = (): React$Element<typeof React.Fragment> => {
         </Route>
         <Route exact path="/home/drafts">
           <Container component="main" maxWidth="md" className={classes.content}>
-            <Home />
+            <SubmissionFolderList />
+          </Container>
+        </Route>
+        <Route path="/home/drafts/:folderId">
+          <Container component="main" maxWidth="md" className={classes.content}>
+            <SelectedFolderDetails />
           </Container>
         </Route>
         <Route exact path="/home/published">
           <Container component="main" maxWidth="md" className={classes.content}>
-            <Home />
+            <SubmissionFolderList />
+          </Container>
+        </Route>
+        <Route path="/home/published/:folderId">
+          <Container component="main" maxWidth="md" className={classes.content}>
+            <SelectedFolderDetails />
           </Container>
         </Route>
         <Route path="/error401">

src/components/Home/SelectedFolderDetails.js

@@ -0,0 +1,168 @@
+//@flow
+import React, { useEffect, useState } from "react"
+
+import CircularProgress from "@material-ui/core/CircularProgress"
+import Grid from "@material-ui/core/Grid"
+import { makeStyles } from "@material-ui/core/styles"
+// import { useDispatch } from "react-redux"
+import { useLocation } from "react-router-dom"
+
+import SubmissionDetailTable from "components/Home/SubmissionDetailTable"
+import WizardStatusMessageHandler from "components/NewDraftWizard/WizardForms/WizardStatusMessageHandler"
+import { FolderSubmissionStatus } from "constants/wizardFolder"
+import { ObjectStatus } from "constants/wizardObject"
+import { WizardStatus } from "constants/wizardStatus"
+// import { deleteObjectFromFolder } from "features/wizardSubmissionFolderSlice"
+import draftAPIService from "services/draftAPI"
+import folderAPIService from "services/folderAPI"
+import objectAPIService from "services/objectAPI"
+
+const useStyles = makeStyles(theme => ({
+  tableGrid: {
+    margin: theme.spacing(1, 0),
+  },
+  circularProgress: {
+    margin: theme.spacing(10, "auto"),
+  },
+}))
+
+const SelectedFolderDetails = (): React$Element<typeof Grid> => {
+  const classes = useStyles()
+  // const dispatch = useDispatch()
+  const [isFetchingFolder, setFetchingFolder] = useState(true)
+  const [connError, setConnError] = useState(false)
+  const [responseError, setResponseError] = useState({})
+  const [errorPrefix, setErrorPrefix] = useState("")
+  const [selectedFolder, setSelectedFolder] = useState({
+    folderTitle: "",
+    allObjects: [],
+    published: "",
+  })
+
+  const folderId = useLocation().pathname.split("/").pop()
+
+  const objectsArr = []
+
+  // Fetch folder data and map objects
+  useEffect(() => {
+    let isMounted = true
+    const getFolder = async () => {
+      const response = await folderAPIService.getFolderById(folderId)
+      if (isMounted) {
+        if (response.ok) {
+          const data = response.data
+          if (!data.published) {
+            for (let i = 0; i < data.drafts?.length; i += 1) {
+              const objectType = data.drafts[i].schema.includes("draft-")
+                ? data.drafts[i].schema.substr(6)
+                : data.drafts[i].schema
+              const response = await draftAPIService.getObjectByAccessionId(objectType, data.drafts[i].accessionId)
+              if (response.ok) {
+                const draftObjectDetails = {
+                  accessionId: data.drafts[i].accessionId,
+                  title: response.data.descriptor?.studyTitle,
+                  objectType,
+                  status: ObjectStatus.draft,
+                  lastModified: response.data.dateModified,
+                }
+                objectsArr.push(draftObjectDetails)
+              } else {
+                setConnError(true)
+                setResponseError(response)
+                setErrorPrefix("Fetching folder error.")
+              }
+            }
+          }
+          for (let j = 0; j < data.metadataObjects?.length; j += 1) {
+            const objectType = data.metadataObjects[j].schema
+            const response = await objectAPIService.getObjectByAccessionId(
+              objectType,
+              data.metadataObjects[j].accessionId
+            )
+            if (response.ok) {
+              const submittedObjectDetails = {
+                accessionId: data.metadataObjects[j].accessionId,
+                title: response.data.descriptor?.studyTitle,
+                objectType,
+                status: ObjectStatus.submitted,
+                lastModified: response.data.dateModified,
+              }
+              objectsArr.push(submittedObjectDetails)
+            } else {
+              setConnError(true)
+              setResponseError(response)
+              setErrorPrefix("Fetching folder error.")
+            }
+          }
+          setSelectedFolder({ folderTitle: data.name, allObjects: objectsArr, published: data.published })
+
+          setFetchingFolder(false)
+        } else {
+          setConnError(true)
+          setResponseError(response)
+          setErrorPrefix("Fetching folders error.")
+        }
+      }
+    }
+    getFolder()
+    return () => {
+      isMounted = false
+    }
+  }, [])
+
+  // Delete object from current folder
+  const handleDeleteObject = async (objectId: string, objectType: string, objectStatus: string) => {
+    console.log(objectStatus)
+    const service = objectStatus === ObjectStatus.draft ? draftAPIService : objectAPIService
+    const response = await service.deleteObjectByAccessionId(objectType, objectId)
+    if (response.ok) {
+      const updatedFolder = { ...selectedFolder }
+      updatedFolder.allObjects = selectedFolder.allObjects.filter(item => item.accessionId !== objectId)
+      setSelectedFolder(updatedFolder)
+    } else {
+      setConnError(true)
+      setResponseError(JSON.parse(response))
+      setErrorPrefix("Can't delete object")
+    }
+  }
+
+  // const handleDeleteObject = (objectId: string, objectType: string, objectStatus: string) => {
+  //   setConnError(false)
+  //   dispatch(deleteObjectFromFolder(objectStatus, objectId, objectType))
+  //     .then(() => {
+  //       const updatedFolder = { ...selectedFolder }
+  //       updatedFolder.allObjects = selectedFolder.allObjects.filter(item => item.accessionId !== objectId)
+  //       setSelectedFolder(updatedFolder)
+  //     })
+  //     .catch(error => {
+  //       console.log(error)
+  //       setConnError(true)
+  //       setResponseError(JSON.parse(error))
+  //       setErrorPrefix("Can't delete object")
+  //     })
+  // }
+
+  return (
+    <Grid container direction="column" justify="space-between" alignItems="stretch" className={classes.tableGrid}>
+      {isFetchingFolder && <CircularProgress className={classes.circularProgress} size={50} thickness={2.5} />}
+      {!isFetchingFolder && (
+        <SubmissionDetailTable
+          bodyRows={selectedFolder.allObjects}
+          folderTitle={selectedFolder.folderTitle}
+          folderType={selectedFolder.published ? FolderSubmissionStatus.published : FolderSubmissionStatus.unpublished}
+          location={selectedFolder.published ? "published" : "drafts"}
+          onDelete={handleDeleteObject}
+        />
+      )}
+      {connError && (
+        <WizardStatusMessageHandler
+          successStatus={WizardStatus.error}
+          response={responseError}
+          prefixText={errorPrefix}
+        />
+      )}
+    </Grid>
+  )
+}
+
+export default SelectedFolderDetails

src/components/Home/SubmissionDetailTable.js

@@ -5,6 +5,7 @@ import Button from "@material-ui/core/Button"
 import Card from "@material-ui/core/Card"
 import CardContent from "@material-ui/core/CardContent"
 import CardHeader from "@material-ui/core/CardHeader"
+import Link from "@material-ui/core/Link"
 import ListItem from "@material-ui/core/ListItem"
 import ListItemIcon from "@material-ui/core/ListItemIcon"
 import ListItemText from "@material-ui/core/ListItemText"
@@ -20,6 +21,7 @@ import Typography from "@material-ui/core/Typography"
 import FolderIcon from "@material-ui/icons/Folder"
 import FolderOpenIcon from "@material-ui/icons/FolderOpen"
 import KeyboardBackspaceIcon from "@material-ui/icons/KeyboardBackspace"
+import { Link as RouterLink } from "react-router-dom"
 
 import { FolderSubmissionStatus } from "constants/wizardFolder"
 import type { ObjectDetails } from "types"
@@ -42,6 +44,9 @@ const useStyles = makeStyles(theme => ({
       cursor: "pointer",
     },
   },
+  headerLink: {
+    color: theme.palette.font.main,
+  },
   tableHeader: {
     padding: theme.spacing(1),
     backgroundColor: theme.palette.primary.main,
@@ -71,14 +76,13 @@ type SubmissionDetailTableProps = {
   folderTitle: string,
   bodyRows: Array<ObjectDetails>,
   folderType: string,
-  onClickCardHeader: () => void,
-  onDelete: (objectId: string, objectType: string, objectStatus: string) => void,
+  location: string,
+  onDelete: (objectId: string, objectType: string, objectStatus: string) => Promise<any>,
 }
 
 const SubmissionDetailTable = (props: SubmissionDetailTableProps): React.Node => {
   const classes = useStyles()
-  const { bodyRows, folderTitle, folderType, onClickCardHeader, onDelete } = props
-
+  const { bodyRows, folderTitle, folderType, location, onDelete } = props
   const getDateFormat = (date: string) => {
     const d = new Date(date)
     const day = d.getDate()
@@ -87,7 +91,6 @@ const SubmissionDetailTable = (props: SubmissionDetailTableProps): React.Node =>
     return `${day}.${month}.${year}`
   }
 
-  // Renders when current folder has the object(s)
   const CurrentFolder = () => (
     <CardContent>
       <TableContainer component={Paper}>
@@ -166,7 +169,6 @@ const SubmissionDetailTable = (props: SubmissionDetailTableProps): React.Node =>
     </CardContent>
   )
 
-  // Renders when current folder is empty
   const EmptyFolder = () => (
     <CardContent>
       <Typography align="center" variant="body2">
@@ -177,13 +179,15 @@ const SubmissionDetailTable = (props: SubmissionDetailTableProps): React.Node =>
 
   return (
     <Card className={classes.card} variant="outlined">
-      <CardHeader
-        className={classes.cardHeader}
-        avatar={<KeyboardBackspaceIcon className={classes.backIcon} />}
-        title={`Your ${folderType} submissions`}
-        titleTypographyProps={{ variant: "subtitle1", fontWeight: "fontWeightBold" }}
-        onClick={onClickCardHeader}
-      />
+      <Link component={RouterLink} to={`/home/${location}`} className={classes.headerLink}>
+        <CardHeader
+          className={classes.cardHeader}
+          avatar={<KeyboardBackspaceIcon className={classes.backIcon} />}
+          title={`Your ${folderType} submissions`}
+          titleTypographyProps={{ variant: "subtitle1", fontWeight: "fontWeightBold" }}
+        />
+      </Link>
+
       {bodyRows?.length > 0 ? <CurrentFolder /> : <EmptyFolder />}
     </Card>
   )