-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Matt Mangan
committed
Dec 12, 2023
1 parent
f402382
commit 6a9cdce
Showing
6 changed files
with
143 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| // containers/FormContainer.tsx | ||
|
|
||
| import React, { useState, ChangeEvent, FormEvent } from 'react' | ||
| import { FormInputElement } from '@iqss/dataverse-design-system/src/lib/components/form/form-group/form-element/FormInput' | ||
| import CreateDatasetUseCase from './CreateDatasetUseCase' | ||
| import CreateDatasetFormPresenter from './CreateDataset' | ||
|
|
||
| const CreateDatasetContainer: React.FC = () => { | ||
| const [formData, setFormData] = useState({ | ||
| createDatasetTitle: '' | ||
| }) | ||
|
|
||
| const [submitComplete, setSubmitComplete] = useState(false) | ||
|
|
||
| const [submitting, setSubmitting] = useState(false) | ||
|
|
||
| const handleCreateDatasetFieldChange = (event: ChangeEvent<FormInputElement>): void => { | ||
| const { name, value } = event.target | ||
| setFormData((prevData) => ({ | ||
| ...prevData, | ||
| [name]: value | ||
| })) | ||
| } | ||
|
|
||
| const handleCreateDatasetSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => { | ||
| event.preventDefault() | ||
|
|
||
| const formUseCase = new CreateDatasetUseCase() | ||
|
|
||
| console.log('handleCreateDatasetSubmit() formData | ', formData) | ||
|
|
||
| if (formUseCase.validateCreateDatasetFormData(formData)) { | ||
| try { | ||
| setSubmitting(true) | ||
| console.log('Status: Submitting | ', submitting) | ||
|
|
||
| // Simulate an asynchronous operation, e.g., API call | ||
| await new Promise((resolve) => setTimeout(resolve, 3000)) | ||
| const result = await formUseCase.submitCreateDatasetFormData(formData) | ||
| console.log(result) | ||
| setSubmitComplete(true) | ||
| // Handle success, e.g., show a success message | ||
| } catch (error) { | ||
| console.error('Error submitting form:', error) | ||
| // Handle error, e.g., show an error message | ||
| } finally { | ||
| setSubmitting(false) | ||
| } | ||
| } else { | ||
| // Handle validation error, e.g., show validation messages | ||
| console.error('Form validation failed') | ||
| } | ||
| // Explicitly return a Promise<void> | ||
| return Promise.resolve() | ||
| } | ||
|
|
||
| return ( | ||
| // TODO: conditional view, needs to be lower in the component heirarchy | ||
| // {submitting && <div>Submtting Form...</div>} | ||
| <> | ||
| {submitting && <p>Submitting...</p>} | ||
| {!submitting && ( | ||
| <CreateDatasetFormPresenter | ||
| submitComplete={submitComplete} | ||
| formData={formData} | ||
| handleCreateDatasetFieldChange={handleCreateDatasetFieldChange} | ||
| // TODO: Fix using IIFE (Immediately-invoked Function Expression) | ||
| // eslint-disable-next-line @typescript-eslint/no-misused-promises | ||
| handleCreateDatasetSubmit={handleCreateDatasetSubmit} | ||
| submitting={submitting} | ||
| /> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default CreateDatasetContainer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| // usecases/FormUseCase.js | ||
|
|
||
| 'use strict' | ||
|
|
||
| interface CreateDatasetFormData { | ||
| createDatasetTitle: string | ||
| } | ||
|
|
||
| class CreateDatasetUseCase { | ||
| validateCreateDatasetFormData(formData: CreateDatasetFormData): boolean { | ||
| // Add your validation logic here | ||
| // For simplicity, assuming all fields are required | ||
| return formData.createDatasetTitle !== undefined && formData.createDatasetTitle.trim() !== '' | ||
| } | ||
|
|
||
| async submitCreateDatasetFormData(_formData: CreateDatasetFormData): Promise<string> { | ||
| // Add your business logic for form submission here | ||
| // For simplicity, returning a success message | ||
| return Promise.resolve('Form submitted successfully!') | ||
| } | ||
| } | ||
|
|
||
| export default CreateDatasetUseCase |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters