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

Add application question for prior bootcamps or programs #645

Merged
merged 3 commits into from
Dec 1, 2024
Merged

Add application question for prior bootcamps or programs #645

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ba4e53
Add application question for prior bootcamps or programs
jonulak Nov 30, 2024
8047b39
Add question for concurrent courses or programs
jonulak Nov 30, 2024
02243a9
Update placeholder text
jonulak Dec 1, 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
108 changes: 91 additions & 17 deletions src/components/forms/apply-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@ import { useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import axios from "axios";
import Input from "@ui/form-elements/input";
import Checkbox from "@ui/form-elements/checkbox";
import TextArea from "@ui/form-elements/textarea";
import Button from "@ui/button";
import { hasKey } from "@utils/methods";
import Feedback from "@ui/form-elements/feedback";
import { linkedinRegex, githubRegex } from "@utils/formValidations";
import { motion } from "framer-motion";

interface IFormValues {
firstName: string;
Expand All @@ -19,6 +22,10 @@ interface IFormValues {
branchOfService: string;
yearJoined: string;
yearSeparated: string;
hasAttendedPreviousCourse: boolean;
previousCourses: string;
willAttendAnotherCourse: boolean;
otherCourses: string;
linkedInAccountName: string;
githubAccountName: string;
preworkLink: string;
Expand All @@ -34,8 +41,13 @@ const ApplyForm = () => {
handleSubmit,
formState: { errors },
reset,
watch,
} = useForm<IFormValues>();

const watchHasAttendedPreviousCourses = watch("hasAttendedPreviousCourse", false);
const watchWillAttendAnotherCourse = watch("willAttendAnotherCourse", false);


const onSubmit: SubmitHandler<IFormValues> = async (data) => {
try {
await axios.post("/api/apply", data);
Expand Down Expand Up @@ -219,7 +231,67 @@ const ApplyForm = () => {
})}
/>
</div>
<div className="tw-mb-7.5">
<Checkbox
label="Have you previously attended any coding bootcamps or tech education programs?"
id="hasAttendedPreviousCourse"
{...register("hasAttendedPreviousCourse")}
/>
<br />
{watchHasAttendedPreviousCourses && (
<motion.div
layout
className="tw-mb-7.5"
initial={{ opacity: 0, scale: 0.4 }}
animate={{ opacity: 1, scale: 1 }}
>
<label htmlFor="previousCourses" className="tw-text-heading tw-text-md">
List previous courses *
</label>
<TextArea
id="previousCourses"
placeholder="Fundamentals of Spouse Stealing"
bg="light"
feedbackText={errors?.previousCourses?.message}
state={hasKey(errors, "previousCourses") ? "error" : "success"}
showState={!!hasKey(errors, "previousCourses")}
{...register("previousCourses", {
required: "List previous coursework or uncheck the box",
})}
/>
</motion.div>
)}
<motion.div layout>
<Checkbox
label="Will you be attending any other courses or programs concurrently with Vets Who Code?"
id="willAttendAnotherCourse"
{...register("willAttendAnotherCourse")}
/>
<br />
</motion.div>
{watchWillAttendAnotherCourse && (
<motion.div
layout
className="tw-mb-7.5"
initial={{ opacity: 0, scale: 0.4 }}
animate={{ opacity: 1, scale: 1 }}
>
<label htmlFor="otherCourses" className="tw-text-heading tw-text-md">
List concurrent courses/programs *
</label>
<TextArea
id="otherCourses"
placeholder="Fundamentals of Spouse Stealing"
bg="light"
feedbackText={errors?.otherCourses?.message}
state={hasKey(errors, "otherCourses") ? "error" : "success"}
showState={!!hasKey(errors, "otherCourses")}
{...register("otherCourses", {
required: "List concurrent coursework or uncheck the box",
})}
/>
</motion.div>
)}
<motion.div layout className="tw-mb-7.5">
<label htmlFor="linkedInAccountName" className="tw-text-heading tw-text-md">
LinkedIn Account Name *
</label>
Expand All @@ -239,8 +311,8 @@ const ApplyForm = () => {
},
})}
/>
</div>
<div className="tw-mb-7.5">
</motion.div>
<motion.div layout className="tw-mb-7.5">
<label htmlFor="githubAccountName" className="tw-text-heading tw-text-md">
GitHub Account Name *
</label>
Expand All @@ -260,8 +332,8 @@ const ApplyForm = () => {
},
})}
/>
</div>
<div className="tw-mb-7.5">
</motion.div>
<motion.div layout className="tw-mb-7.5">
<label htmlFor="preworkLink" className="tw-text-heading tw-text-md">
Prework Link *
</label>
Expand All @@ -276,8 +348,8 @@ const ApplyForm = () => {
required: "Prework Link is required",
})}
/>
</div>
<div className="tw-mb-7.5">
</motion.div>
<motion.div layout className="tw-mb-7.5">
<label htmlFor="preworkRepo" className="tw-text-heading tw-text-md">
Prework Repository *
</label>
Expand All @@ -292,17 +364,19 @@ const ApplyForm = () => {
required: "Prework Repository is required",
})}
/>
</div>
</motion.div>

<Button
type="submit"
fullwidth
className="tw-mx-auto tw-w-full sm:tw-w-[200px] tw-mt-7.5"
>
Apply
</Button>
{message && <Feedback state="success">{message}</Feedback>}
{showEmojiRain && <EmojiRain />}
<motion.div layout>
<Button
type="submit"
fullwidth
className="tw-mx-auto tw-w-full sm:tw-w-[200px] tw-mt-7.5"
>
Apply
</Button>
{message && <Feedback state="success">{message}</Feedback>}
{showEmojiRain && <EmojiRain />}
</motion.div>
</form>
</div>
);
Expand Down
26 changes: 24 additions & 2 deletions src/pages/api/apply.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ interface ParsedBody {
branchOfService?: string;
yearJoined?: string;
yearSeparated?: string;
hasAttendedPreviousCourse?: boolean;
previousCourses?: string;
willAttendAnotherCourse?: boolean;
otherCourses?: string;
linkedInAccountName?: string;
githubAccountName?: string;
preworkLink?: string;
Expand All @@ -34,6 +38,8 @@ export default async function handler(req: Request, res: Response) {
"branchOfService",
"yearJoined",
"yearSeparated",
"hasAttendedPreviousCourse",
"willAttendAnotherCourse",
"linkedInAccountName",
"githubAccountName",
"preworkLink",
Expand All @@ -48,7 +54,7 @@ export default async function handler(req: Request, res: Response) {
}

// Construct the text message to be sent
const text = [
const items = [
`First Name: \`${parsedBody.firstName ?? ""}\``,
`Last Name: \`${parsedBody.lastName ?? ""}\``,
`Email: \`${parsedBody.email ?? ""}\``,
Expand All @@ -59,11 +65,27 @@ export default async function handler(req: Request, res: Response) {
`Branch of Service: \`${parsedBody.branchOfService ?? ""}\``,
`Year Joined: \`${parsedBody.yearJoined ?? ""}\``,
`Year Separated: \`${parsedBody.yearSeparated ?? ""}\``,
`Has attended previous bootcamp/programs: \`${
parsedBody.hasAttendedPreviousCourse ? "Yes" : "No"
}\``,
`Will do other courses/programs concurrently: \`${
parsedBody.willAttendAnotherCourse ? "Yes" : "No"
}\``,
`LinkedIn Account Name: \`${parsedBody.linkedInAccountName ?? ""}\``,
`GitHub Account Name: \`${parsedBody.githubAccountName ?? ""}\``,
`Prework Link: \`${parsedBody.preworkLink ?? ""}\``,
`Prework Repository: \`${parsedBody.preworkRepo ?? ""}\``,
].join("\n");
];

if (parsedBody.willAttendAnotherCourse && parsedBody.otherCourses !== "") {
items.splice(12, 0, `\`\`\`${parsedBody.otherCourses}\`\`\``);
}

if (parsedBody.hasAttendedPreviousCourse && parsedBody.previousCourses !== "") {
items.splice(11, 0, `\`\`\`${parsedBody.previousCourses}\`\`\``);
}

const text = items.join("\n");

// Send the payload to the configured Slack webhook URL
await axios.post(
Expand Down
Loading