Docs/predefined values and data types

architecture.md

@@ -11,6 +11,105 @@ Form components are crucial part of the application:
 - All submissions and folder creation are made with `react-hook-form`. Latter uses form as a reference so submission can be triggered outside the form.
 - Form for json schema based forms are created with custom json schema parser, which builds `react-hook-form` based forms from given json schema. Json schema-based forms are validated against json schema with `Ajv`. React-hook-form is used for performance reasons: it uses uncontrolled components so adding a lot of fields to array doesn't slow rendering of the application.
 
+### Constants
+
+Folder `src/constants` holds all the constants used in the application. The constants are uniquely defined and separated into different files according to its related context. For example, the file `constants/wizardObject.js` contains unique constants regarding to `wizardObject` such as: `ObjectTypes, ObjectStatus, etc.`
+
+The purposes of using these `constants` are:
+
+- to avoid hard coding the values of variables repeatedly
+- to keep the consistency when defining the values of variables
+- to reuse those predefined values across the application
+
+Example of defining and using a constant:
+
+- First, define the constant object `ObjectSubmissionTypes` in `constants/wizardObject.js`
+
+```
+export const ObjectSubmissionTypes = {
+  form: "Form",
+  xml: "XML",
+  existing: "Existing",
+}
+```
+
+- Then, use this constant in `WizardComponents/WizardObjectIndex`:
+
+```
+import { ObjectSubmissionTypes } from "constants/wizardObject"
+
+  switch (currentSubmissionType) {
+    case ObjectSubmissionTypes.form: {
+      target = "form"
+      break
+    }
+    case ObjectSubmissionTypes.xml: {
+      target = "XML upload"
+      break
+    }
+    case ObjectSubmissionTypes.existing: {
+      target = "drafts"
+      break
+    }
+  }
+```
+
+### Commonly used data types
+
+All commonly used data types of variables are defined in the file `index.js` in folder `src/types`. The purposes are:
+
+- to avoid hard coding the same data types frequently in different files
+- to keep track and consistency of the data types across different files
+
+For example:
+
+- declare and export these data types in `src/types/index.js`
+
+```
+export type ObjectInsideFolder = {
+  accessionId: string,
+  schema: string,
+}
+
+export type ObjectTags = {
+  submissionType: string,
+  fileName?: string,
+}
+
+export type ObjectInsideFolderWithTags = ObjectInsideFolder & { tags: ObjectTags }
+```
+
+- import and reuse the data types in different files:
+  - Reuse type `ObjectInsideFolder` in `features/wizardSubmissionFolderSlice.js`:
+
+```
+import type { ObjectInsideFolder } from "types"
+
+export const addObjectToFolder = (
+  folderID: string,
+  objectDetails: ObjectInsideFolder
+) => {}
+
+export const addObjectToDrafts = (
+  folderID: string,
+  objectDetails: ObjectInsideFolder
+) => {}
+```
+
+- Reuse type `ObjectInsideFolderWithTags` consequently in both `WizardComponents/WizardSavedObjectsList.js` and `WizardSteps/WizardShowSummaryStep.js`:
+
+```
+import type { ObjectInsideFolderWithTags } from "types"
+
+type WizardSavedObjectsListProps = { submissions: Array<ObjectInsideFolderWithTags> }
+```
+
+```
+import type { ObjectInsideFolderWithTags } from "types"
+
+type GroupedBySchema = {| [Schema]: Array<ObjectInsideFolderWithTags> |}
+```
+
 ## Redux store
 
 Redux is handled with [Redux Toolkit](https://redux-toolkit.js.org/) and app is using following redux toolkit features:

src/__tests__/WizardAddObjectStep.test.js

@@ -8,7 +8,7 @@ import { toMatchDiffSnapshot } from "snapshot-diff"
 
 import WizardAddObjectStep from "../components/NewDraftWizard/WizardSteps/WizardAddObjectStep"
 
-import { ObjectSubmissionTypes, ObjectSubmissionsArray, ObjectTypes } from "constants/object"
+import { ObjectSubmissionTypes, ObjectSubmissionsArray, ObjectTypes } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 
@@ -18,6 +18,16 @@ describe("WizardAddObjectStep", () => {
   it("should not render any cards if no selected object type", () => {
     const store = mockStore({
       objectType: "",
+      objectsArray: [
+        ObjectTypes.study,
+        ObjectTypes.sample,
+        ObjectTypes.experiment,
+        ObjectTypes.run,
+        ObjectTypes.analysis,
+        ObjectTypes.dac,
+        ObjectTypes.policy,
+        ObjectTypes.dataset,
+      ],
       submissionType: ObjectSubmissionTypes.xml,
       submissionFolder: {
         name: "folder name",
@@ -41,6 +51,16 @@ describe("WizardAddObjectStep", () => {
       ObjectSubmissionsArray.forEach(typeName => {
         const store = mockStore({
           objectType: ObjectTypes.study,
+          objectsArray: [
+            ObjectTypes.study,
+            ObjectTypes.sample,
+            ObjectTypes.experiment,
+            ObjectTypes.run,
+            ObjectTypes.analysis,
+            ObjectTypes.dac,
+            ObjectTypes.policy,
+            ObjectTypes.dataset,
+          ],
           submissionType: typeName,
           submissionFolder: {
             description: "Test",

src/__tests__/WizardAlert.test.js

@@ -7,7 +7,7 @@ import configureStore from "redux-mock-store"
 
 import WizardAlert from "../components/NewDraftWizard/WizardComponents/WizardAlert"
 
-import { ObjectSubmissionsArray } from "constants/object"
+import { ObjectSubmissionsArray } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 

src/__tests__/WizardDraftObjectPicker.test.js

@@ -8,7 +8,7 @@ import thunk from "redux-thunk"
 
 import WizardDraftObjectPicker from "../components/NewDraftWizard/WizardComponents/WizardDraftObjectPicker"
 
-import { ObjectSubmissionTypes, ObjectTypes } from "constants/object"
+import { ObjectSubmissionTypes, ObjectTypes } from "constants/wizardObject"
 
 const middlewares = [thunk]
 const mockStore = configureStore(middlewares)

src/__tests__/WizardFillObjectDetailsForm.test.js

@@ -7,7 +7,7 @@ import configureStore from "redux-mock-store"
 
 import WizardFillObjectDetailsForm from "../components/NewDraftWizard/WizardForms/WizardFillObjectDetailsForm"
 
-import { ObjectSubmissionTypes, ObjectTypes } from "constants/object"
+import { ObjectSubmissionTypes, ObjectTypes } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 

src/__tests__/WizardFooter.test.js

@@ -8,7 +8,7 @@ import configureStore from "redux-mock-store"
 
 import WizardFooter from "../components/NewDraftWizard/WizardComponents/WizardFooter"
 
-import { ObjectSubmissionTypes } from "constants/object"
+import { ObjectSubmissionTypes } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 

src/__tests__/WizardObjectIndex.test.js

@@ -7,13 +7,23 @@ import configureStore from "redux-mock-store"
 
 import WizardObjectIndex from "../components/NewDraftWizard/WizardComponents/WizardObjectIndex"
 
-import { ObjectTypes } from "constants/object"
+import { ObjectTypes } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 
 describe("WizardObjectIndex", () => {
-  it("should render badge with number correctly", () => {
+  it("should render badge with number correctly", async () => {
     const store = mockStore({
+      objectsArray: [
+        ObjectTypes.study,
+        ObjectTypes.sample,
+        ObjectTypes.experiment,
+        ObjectTypes.run,
+        ObjectTypes.analysis,
+        ObjectTypes.dac,
+        ObjectTypes.policy,
+        ObjectTypes.dataset,
+      ],
       submissionFolder: {
         drafts: [
           { accessionId: "TESTID1234", schema: `draft-${ObjectTypes.study}` },
@@ -23,12 +33,14 @@ describe("WizardObjectIndex", () => {
         ],
       },
     })
+
     render(
       <Provider store={store}>
         <WizardObjectIndex />
       </Provider>
     )
-    const badge = screen.queryAllByTestId("badge")
+
+    const badge = await screen.queryAllByTestId("badge")
     expect(badge).toHaveLength(8)
     const studyBadge = screen.queryAllByTestId("badge")[0]
     expect(studyBadge).toHaveTextContent(2)

src/__tests__/WizardSavedObjectsList.test.js

@@ -7,7 +7,7 @@ import configureStore from "redux-mock-store"
 
 import WizardSavedObjectsList from "../components/NewDraftWizard/WizardComponents/WizardSavedObjectsList"
 
-import { ObjectTypes, ObjectSubmissionTypes } from "constants/object"
+import { ObjectTypes, ObjectSubmissionTypes } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 

src/__tests__/WizardShowSummaryStep.test.js

@@ -8,7 +8,7 @@ import { toMatchDiffSnapshot } from "snapshot-diff"
 
 import WizardShowSummaryStep from "../components/NewDraftWizard/WizardSteps/WizardShowSummaryStep"
 
-import { ObjectTypes } from "constants/object"
+import { ObjectTypes } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 
@@ -20,6 +20,16 @@ describe("WizardShowSummaryStep", () => {
 
   beforeEach(() => {
     store = mockStore({
+      objectsArray: [
+        ObjectTypes.study,
+        ObjectTypes.sample,
+        ObjectTypes.experiment,
+        ObjectTypes.run,
+        ObjectTypes.analysis,
+        ObjectTypes.dac,
+        ObjectTypes.policy,
+        ObjectTypes.dataset,
+      ],
       submissionFolder: {
         description: "AWD",
         id: "FOL90524783",

src/__tests__/WizardStepper.test.js

@@ -7,7 +7,7 @@ import configureStore from "redux-mock-store"
 
 import WizardStepper from "../components/NewDraftWizard/WizardComponents/WizardStepper"
 
-import { ObjectSubmissionTypes } from "constants/object"
+import { ObjectSubmissionTypes } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 

src/__tests__/WizardUploadObjectXMLForm.test.js

@@ -9,7 +9,7 @@ import { toMatchDiffSnapshot } from "snapshot-diff"
 
 import WizardUploadObjectXMLForm from "../components/NewDraftWizard/WizardForms/WizardUploadObjectXMLForm"
 
-import { ObjectSubmissionTypes, ObjectTypes } from "constants/object"
+import { ObjectSubmissionTypes, ObjectTypes } from "constants/wizardObject"
 
 const mockStore = configureStore([])
 

src/components/Home/SubmissionDetailTable.js

@@ -21,7 +21,7 @@ import FolderIcon from "@material-ui/icons/Folder"
 import FolderOpenIcon from "@material-ui/icons/FolderOpen"
 import KeyboardBackspaceIcon from "@material-ui/icons/KeyboardBackspace"
 
-import { FolderSubmissionStatus } from "constants/folder"
+import { FolderSubmissionStatus } from "constants/wizardFolder"
 import type { ObjectDetails } from "types"
 
 const useStyles = makeStyles(theme => ({

src/components/Home/SubmissionIndexCard.js

@@ -16,7 +16,7 @@ import Typography from "@material-ui/core/Typography"
 import FolderIcon from "@material-ui/icons/Folder"
 import FolderOpenIcon from "@material-ui/icons/FolderOpen"
 
-import { FolderSubmissionStatus } from "constants/folder"
+import { FolderSubmissionStatus } from "constants/wizardFolder"
 import type { FolderDetailsWithId } from "types"
 
 const useStyles = makeStyles(theme => ({

src/components/NewDraftWizard/WizardComponents/WizardAddObjectCard.js

@@ -8,7 +8,7 @@ import { useSelector } from "react-redux"
 import WizardDraftObjectPicker from "components/NewDraftWizard/WizardComponents/WizardDraftObjectPicker"
 import WizardFillObjectDetailsForm from "components/NewDraftWizard/WizardForms/WizardFillObjectDetailsForm"
 import WizardUploadObjectXMLForm from "components/NewDraftWizard/WizardForms/WizardUploadObjectXMLForm"
-import { ObjectSubmissionTypes } from "constants/object"
+import { ObjectSubmissionTypes } from "constants/wizardObject"
 
 const useStyles = makeStyles(theme => ({
   card: {

src/components/NewDraftWizard/WizardComponents/WizardAlert.js

@@ -10,7 +10,7 @@ import DialogTitle from "@material-ui/core/DialogTitle"
 import Alert from "@material-ui/lab/Alert"
 import { useDispatch, useSelector } from "react-redux"
 
-import { ObjectSubmissionTypes, ObjectStatus } from "constants/object"
+import { ObjectSubmissionTypes, ObjectStatus } from "constants/wizardObject"
 import { WizardStatus } from "constants/wizardStatus"
 import { resetDraftStatus } from "features/draftStatusSlice"
 import { setAlert, resetAlert } from "features/wizardAlertSlice"

src/components/NewDraftWizard/WizardComponents/WizardDraftObjectPicker.js

@@ -16,7 +16,7 @@ import { useSelector, useDispatch } from "react-redux"
 
 import WizardStatusMessageHandler from "../WizardForms/WizardStatusMessageHandler"
 
-import { ObjectSubmissionTypes, ObjectStatus } from "constants/object"
+import { ObjectSubmissionTypes, ObjectStatus } from "constants/wizardObject"
 import { WizardStatus } from "constants/wizardStatus"
 import { resetFocus } from "features/focusSlice"
 import { setCurrentObject } from "features/wizardCurrentObjectSlice"