Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Samuel/pww 25 #10

Merged
merged 6 commits into from
Nov 17, 2024
Merged

Samuel/pww 25 #10

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
32443ff
Create upload file button
samthomp14 Oct 27, 2024
3aa4473
Update CreateWorkshop.tsx
samthomp14 Nov 3, 2024
35eb0b9
Add title and description box to file upload
samthomp14 Nov 3, 2024
95e2c45
Rename file upload functions
samthomp14 Nov 3, 2024
7d9c063
Create section to display files uploaded
samthomp14 Nov 3, 2024
d51b006
Merge branch 'main' into samuel/PWW-25
charlotteconze Nov 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 155 additions & 18 deletions app/src/pages/CreateWorkshop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,149 @@
import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
import Navbar from "../components/Navbar";
import React, { useState } from "react"
import { Formik, Form, Field } from "formik"
import * as Yup from "yup"
import Navbar from "../components/Navbar"
import Modal from "../components/Modal"
import AsyncSubmit from "../components/AsyncSubmit"

const CreateWorkshop = () => {
// Initial form values
const [isModal, setIsModal] = useState(false)
const [fileTitles, setFileTitles] = useState<string[]>([])
const [fileAdded, setFileAdded] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const [success, setSuccess] = useState(false)
const [errorMessage, setErrorMessage] = useState("")

const initialValues = {
name: "",
description: "",
};
}

// Validation schema using Yup
const validationSchema = Yup.object().shape({
name: Yup.string().required("Name is required"),
description: Yup.string().required("Description is required"),
});
})

// Handle form submission
const handleSubmit = (values: any) => {
console.log(values);
};
console.log("Workshop values:", values)
}

const fileUploadInitialValues = {
title: "",
desc: "",
file: "",
}

const fileValidationSchema = Yup.object().shape({
title: Yup.string().required("Title is required"),
desc: Yup.string().required("Description is required"),
file: Yup.mixed().required("Please select a file"),
})

const handleFileSubmit = async (values: any, { resetForm }: any) => {
setIsLoading(true)
setErrorMessage("")

try {
const finalData = {
title: values.title,
desc: values.desc,
file: values.file,
}
setFileTitles((prev) => [...prev, values.title])
setFileAdded(true)
console.log("File submitted:", finalData)
setSuccess(true)
resetForm()
} catch (error) {
setErrorMessage("Error uploading file.")
console.error(error)
} finally {
setIsLoading(false)
}
}

return (
<>
{isModal && (
<Modal
header="Add New Files"
subheader="Select Files to Upload"
action={() => setIsModal(false)}
body={
<Formik
initialValues={fileUploadInitialValues}
validationSchema={fileValidationSchema}
onSubmit={handleFileSubmit}
>
{({ errors, touched, isSubmitting }) => (
<Form>
<div className="Form-group">
<label htmlFor="title">Title</label>
<Field
className="Form-input-box"
type="text"
id="title"
name="title"
/>
{errors.title && touched.title && (
<div className="Form-error">{errors.title}</div>
)}
</div>

<div className="Form-group">
<label htmlFor="desc">Description</label>
<Field
as="textarea"
className="Form-input-box"
id="desc"
name="desc"
rows="4"
/>
{errors.desc && touched.desc && (
<div className="Form-error">{errors.desc}</div>
)}
</div>

<div className="Form-group">
<label htmlFor="file">File</label>
<Field
className="Form-input-box"
type="file"
id="file"
name="file"
/>
{errors.file && touched.file && (
<div className="Form-error">{errors.file}</div>
)}
</div>

<button
type="submit"
className="Button Button-color--dark-1000 Width--100"
disabled={isSubmitting || Object.keys(errors).length > 0}
>
{isSubmitting ? (
<AsyncSubmit loading={isLoading} />
) : (
"Upload File"
)}
</button>

{errorMessage && (
<div className="Form-error">{errorMessage}</div>
)}
{success && (
<div className="Form-success">
File uploaded successfully!
</div>
)}
</Form>
)}
</Formik>
}
/>
)}

<Navbar />
<h1>Create Workshop</h1>
<Formik
Expand All @@ -40,7 +161,6 @@ const CreateWorkshop = () => {
placeholder="Name"
className="Form-input-box"
/>
{/* Display error message if name field is invalid */}
{errors.name && touched.name && (
<div className="Form-error">{errors.name}</div>
)}
Expand All @@ -54,24 +174,41 @@ const CreateWorkshop = () => {
placeholder="Description"
className="Form-input-box"
/>
{/* Display error message if description field is invalid */}
{errors.description && touched.description && (
<div className="Form-error">{errors.description}</div>
)}
</div>

{fileAdded && (
<div>
<h3>Uploaded Files:</h3>
<ul>
{fileTitles.map((title, index) => (
<li key={index}>{title}</li>
))}
</ul>
</div>
)}

<div
onClick={() => setIsModal(true)}
className="Button Button-color--dark-1000 Margin-top--10"
>
Add New Files
</div>

<button
type="submit"
className="Button Button-color--dark-1000 Width--100"
disabled={isSubmitting} // Disable button while form is submitting
className="Button Button-color--dark-1000 Width--100 Margin-top--10"
disabled={isSubmitting}
>
{isSubmitting ? "Submitting..." : "Create Workshop"}
</button>
</Form>
)}
</Formik>
</>
);
};
)
}

export default CreateWorkshop;
export default CreateWorkshop
Loading