update file import

public/locales/en/createDataset.json

@@ -6,7 +6,12 @@
   },
   "requiredFields": "Asterisks indicate required fields",
   "datasetForm": {
-    "title": "Title"
+    "title": "Title",
+    "status": {
+      "submitting": "Submitting...",
+      "success": "Form submitted successfully!",
+      "failed": "Error: Submission failed."
+    }
   },
   "datasetFormStates": {
     "submitting": "Form Submitting",

src/dataset/domain/useCases/createDataset.ts

@@ -7,11 +7,11 @@ export interface FormValidationResult {
   errors: Record<keyof CreateDatasetFormFields, string | undefined>
 }
 
-export interface FormValidationService {
+export interface FormValidation {
   validateForm: (fields: CreateDatasetFormFields) => FormValidationResult
 }
 
-export const formValidationService: FormValidationService = {
+export const formValidation: FormValidation = {
   validateForm: (fields: CreateDatasetFormFields): FormValidationResult => {
     const errors: Record<keyof CreateDatasetFormFields, string | undefined> = {
       createDatasetTitle: undefined
@@ -28,10 +28,10 @@ export const formValidationService: FormValidationService = {
   }
 }
 
-export interface FormSubmissionService {
+export interface FormSubmission {
   submitFormData: (fields: CreateDatasetFormFields) => Promise<void>
 }
-export const formSubmissionService: FormSubmissionService = {
+export const formSubmission: FormSubmission = {
   submitFormData: async (fields: CreateDatasetFormFields): Promise<void> => {
     console.log('Submitting form data:', fields)
     const sendDataMock = (fields: CreateDatasetFormFields) => {

src/sections/create-dataset/CreateDatasetFactory.tsx

@@ -1,18 +1,11 @@
-import { CreateDatasetFormPresenter } from './CreateDatasetForm'
-import { formValidationService } from '../../dataset/domain/useCases/createDataset'
-import { formSubmissionService } from '../../dataset/domain/useCases/createDataset'
+import { CreateDatasetForm } from './CreateDatasetForm'
 import { ReactElement } from 'react'
-export const CreateDatasetForm: React.FC = () => {
-  return (
-    <CreateDatasetFormPresenter
-      formValidationService={formValidationService}
-      formSubmissionService={formSubmissionService}
-    />
-  )
+export const CreateDatasetFormPresenter: React.FC = () => {
+  return <CreateDatasetForm />
 }
 
 export class CreateDatasetFactory {
   static create(): ReactElement {
-    return <CreateDatasetForm />
+    return <CreateDatasetFormPresenter />
   }
 }

src/sections/create-dataset/CreateDatasetForm.tsx

@@ -1,31 +1,26 @@
-import React from 'react'
+import React, { ChangeEvent, FormEvent } from 'react'
 import { Alert, Button, Col, Form, Row } from '@iqss/dataverse-design-system'
 import { useTranslation } from 'react-i18next'
 import { RequiredFieldText } from '../../components/form/RequiredFieldText/RequiredFieldText'
 import { SeparationLine } from '../../components/layout/SeparationLine/SeparationLine'
-import { useCreateDatasetForm, SubmissionStatusEnums } from './CreateDatasetContext'
-import {
-  FormValidationService,
-  FormSubmissionService
-} from '../../dataset/domain/useCases/createDataset'
+import { useCreateDatasetForm, SubmissionStatusEnums } from './useCreateDatasetForm'
 import styles from '/src/sections/dataset/Dataset.module.scss'
-interface FormPresenterProps {
-  formValidationService: FormValidationService
-  formSubmissionService: FormSubmissionService
-}
-export const CreateDatasetFormPresenter: React.FC<FormPresenterProps> = ({
-  formValidationService,
-  formSubmissionService
-}: FormPresenterProps) => {
-  const {
-    formErrors,
-    submissionStatus,
-    handleCreateDatasetFieldChange,
-    handleCreateDatasetSubmit
-  } = useCreateDatasetForm({ formValidationService, formSubmissionService })
+
+export const CreateDatasetForm: React.FC = () => {
+  const { formErrors, submissionStatus, updateFormData, submitFormData } = useCreateDatasetForm()
 
   const { t } = useTranslation('createDataset')
 
+  const handleCreateDatasetFieldChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target
+    updateFormData({ [name]: value })
+  }
+
+  const handleCreateDatasetSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    submitFormData()
+  }
+
   return (
     <>
       <article>
@@ -35,11 +30,15 @@ export const CreateDatasetFormPresenter: React.FC<FormPresenterProps> = ({
         <SeparationLine />
         <div className={styles.container}>
           <RequiredFieldText />
-          {submissionStatus === SubmissionStatusEnums.IsSubmitting && <p>Submitting...</p>}
+          {submissionStatus === SubmissionStatusEnums.IsSubmitting && (
+            <p>{t('datasetForm.status.submitting')}</p>
+          )}
           {submissionStatus === SubmissionStatusEnums.SubmitComplete && (
-            <p>Form submitted successfully!</p>
+            <p>{t('datasetForm.status.success')}</p>
+          )}
+          {submissionStatus === SubmissionStatusEnums.Errored && (
+            <p>{t('datasetForm.status.fail')}</p>
           )}
-          {submissionStatus === SubmissionStatusEnums.Errored && <p>Error: Submission failed.</p>}
           <Form
             onSubmit={(event) => {
               handleCreateDatasetSubmit(event)

src/sections/create-dataset/useCreateDatasetForm.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import {
+  CreateDatasetFormFields,
+  FormValidationResult,
+  formSubmission,
+  formValidation
+} from '../../dataset/domain/useCases/createDataset'
+
+interface FormContextInterface {
+  fields: CreateDatasetFormFields
+}
+
+const defaultFormState: CreateDatasetFormFields = {
+  createDatasetTitle: ''
+}
+
+export enum SubmissionStatusEnums {
+  NotSubmitted = 'NotSubmitted',
+  IsSubmitting = 'IsSubmitting',
+  SubmitComplete = 'SubmitComplete',
+  Errored = 'Errored'
+}
+
+export function useCreateDatasetForm() {
+  const [formState, setFormState] = useState<FormContextInterface>({
+    fields: defaultFormState
+  })
+  const [submissionStatus, setSubmissionStatus] = useState<SubmissionStatusEnums>(
+    SubmissionStatusEnums.NotSubmitted
+  )
+  const [formErrors, setFormErrors] = useState<
+    Record<keyof CreateDatasetFormFields, string | undefined>
+  >({ createDatasetTitle: undefined })
+
+  const updateFormData = (updatedFormData: object) => {
+    setFormState((prevState) => ({
+      ...prevState,
+      fields: { ...prevState.fields, ...updatedFormData }
+    }))
+  }
+
+  const submitFormData = () => {
+    setSubmissionStatus(SubmissionStatusEnums.IsSubmitting)
+
+    const validationResult: FormValidationResult = formValidation.validateForm(formState.fields)
+
+    if (validationResult.isValid) {
+      formSubmission
+        .submitFormData(formState.fields)
+        .then(() => setSubmissionStatus(SubmissionStatusEnums.IsSubmitting))
+        .catch(() => setSubmissionStatus(SubmissionStatusEnums.Errored))
+        .finally(() => setSubmissionStatus(SubmissionStatusEnums.SubmitComplete))
+    } else {
+      setFormErrors(validationResult.errors)
+      setSubmissionStatus(SubmissionStatusEnums.Errored)
+    }
+  }
+
+  return {
+    formState,
+    formErrors,
+    submissionStatus,
+    updateFormData,
+    submitFormData
+  }
+}

src/stories/dataset/dataset-create/DatasetCreate.stories.tsx

@@ -1,16 +1,16 @@
 import type { StoryObj, Meta } from '@storybook/react'
-import { CreateDatasetForm } from '../../../sections/create-dataset/CreateDatasetFactory'
+import { CreateDatasetFormPresenter } from '../../../sections/create-dataset/CreateDatasetFactory'
 import { WithLayout } from '../../WithLayout'
 import { WithI18next } from '../../WithI18next'
 
-const meta: Meta<typeof CreateDatasetForm> = {
+const meta: Meta<typeof CreateDatasetFormPresenter> = {
   title: 'Pages/Create Dataset',
-  component: CreateDatasetForm,
+  component: CreateDatasetFormPresenter,
   decorators: [WithI18next, WithLayout]
 }
 export default meta
-type Story = StoryObj<typeof CreateDatasetForm>
+type Story = StoryObj<typeof CreateDatasetFormPresenter>
 
 export const Default: Story = {
-  render: () => <CreateDatasetForm />
+  render: () => <CreateDatasetFormPresenter />
 }

tests/component/views/create-dataset/CreateDataset.spec.tsx

@@ -1,10 +1,9 @@
-// import DatasetCreate from '../../../../src/sections/create-dataset/CreateDatasetContext'
-import { CreateDatasetForm } from '../../../../src/sections/create-dataset/CreateDatasetFactory'
+import { CreateDatasetFormPresenter } from '../../../../src/sections/create-dataset/CreateDatasetFactory'
 import { mount } from 'cypress/react18'
 
 describe('Form component', () => {
   it('renders the Create Dataset page and its contents', () => {
-    mount(<CreateDatasetForm />)
+    cy.customMount(<CreateDatasetFormPresenter />)
     cy.findByText(/Create Dataset/i).should('exist')
 
     cy.findByLabelText(/Title/i).should('exist')
@@ -15,8 +14,8 @@ describe('Form component', () => {
   })
 
   it('can submit a valid form', () => {
-    cy.log('Submit form')
-    mount(<CreateDatasetForm />)
+    // cy.log('Submit form')
+    mount(<CreateDatasetFormPresenter />)
     cy.findByLabelText(/Title/i)
       .should('exist')
       .type('Test Dataset Title')