Skip to content

Commit

Permalink
Merge pull request #26 from podcodar/vitorschelb/parsing-form
Browse files Browse the repository at this point in the history 
Implement Onboarding Form Validation
  • Loading branch information
@vitorschelb
vitorschelb authored Jun 6, 2023
2 parents a3aeb48 + a6ff4fa commit f06d93c
Show file tree
Hide file tree
Showing 7 changed files with 178 additions and 52 deletions.
3 changes: 1 addition & 2 deletions jest.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ const config = {
testEnvironment: "jest-environment-jsdom",
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/src/$1",
}

},
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
Expand Down
6 changes: 5 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
"dependencies": {
"@headlessui/react": "^1.7.14",
"@heroicons/react": "^2.0.18",
"@hookform/resolvers": "^3.1.0",
"@next/bundle-analyzer": "^13.4.4",
"@prisma/client": "4.15.0",
"@types/node": "18.16.3",
"@types/react": "18.2.1",
"@types/react-dom": "18.2.3",
Expand All @@ -35,7 +37,9 @@
"next-auth": "^4.22.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.0.2"
"react-hook-form": "^7.44.2",
"typescript": "5.0.2",
"zod": "^3.21.4"
},
"devDependencies": {
"@mermaid-js/mermaid-cli": "^10.1.0",
Expand Down
39 changes: 35 additions & 4 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

76 changes: 56 additions & 20 deletions src/components/OnboardingForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
"use client";
import { genders, educationLevels } from "@/shared/onboarding";
import { formSchema } from "@/shared/onboarding";
import { FormSchema } from "@/shared/onboarding";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
Input,
Label,
Expand All @@ -6,12 +12,23 @@ import {
Title,
Textarea,
} from "@/shared/components";
import { genders, educationLevels } from "@/shared/onboarding";

export default function OnboardingForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormSchema>({
resolver: zodResolver(formSchema),
});

function onSubmit(data: FormSchema) {
console.log(data);
}

return (
<div className="absolute h-screen w-screen z-10 top-0 left-0 bg-slate-800 overflow-auto">
<Form>
<Form onSubmit={handleSubmit(onSubmit)}>
<div className=" border-gray-900/10">
<Title> Formulário de Inscrição</Title>

Expand All @@ -21,9 +38,10 @@ export default function OnboardingForm() {
<div className="mt-2">
<Input
id="nome-social"
name="nome-social"
type="text"
{...register("nomeSocial")}
/>
{errors.nomeSocial && <span>{errors.nomeSocial.message}</span>}
</div>
</div>

Expand All @@ -33,7 +51,7 @@ export default function OnboardingForm() {
<Select
defaultValue={""}
id="gender"
name="gender"
{...register("gender")}
>
{genders.map((gender) => (
<option key={gender} value={gender}>
Expand All @@ -50,9 +68,10 @@ export default function OnboardingForm() {
<div className="mt-2">
<Input
id="idade"
name="idade"
type="text"
type="number"
{...register("idade")}
/>
{errors.idade && <span>{errors.idade.message}</span>}
</div>
</div>

Expand All @@ -62,44 +81,50 @@ export default function OnboardingForm() {
<Input
className="placeholder-gray-400"
id="telefone"
name="telefone"
placeholder="(00) 00000-0000"
type="text"
placeholder="00 00000 0000"
type="number"
{...register("telefone")}
/>
</div>
{errors.telefone && <span>{errors.telefone.message}</span>}
</div>

<div className="sm:col-span-22">
<Label htmlFor="pais">País</Label>
<div className="mt-2">
<Input
id="pais"
name="pais"
type="text"
{...register("pais")}
/>
</div>
{errors.pais && <span>{errors.pais.message}</span>}
</div>

<div className="sm:col-span-2">
<Label htmlFor="cidade-estado">Cidade/Estado</Label>
<div className="mt-2">
<Input
id="cidade-estado"
name="cidade-estado"
type="text"
{...register("cidadeEstado")}
/>
</div>
{errors.cidadeEstado && (
<span>{errors.cidadeEstado.message}</span>
)}
</div>

<div className="sm:col-span-2">
<Label htmlFor="email">Email</Label>
<div className="mt-2">
<Input
id="email"
name="email"
type="email"
{...register("email")}
/>
</div>
{errors.email && <span>{errors.email.message}</span>}
</div>

<div className="sm:col-span-2">
Expand All @@ -125,9 +150,9 @@ export default function OnboardingForm() {
<div className="mt-2">
<Input
id="profissao"
name="profissao"
placeholder="Opcional"
type="text"
{...register("profissao")}
/>
</div>
</div>
Expand All @@ -137,9 +162,9 @@ export default function OnboardingForm() {
<div className="mt-2">
<Input
id="empresa-organizacao"
name="empresa-organizacao"
placeholder="Opcional"
type="text"
{...register("empresaOrganizacao")}
/>
</div>
</div>
Expand All @@ -149,9 +174,9 @@ export default function OnboardingForm() {
<div className="mt-2">
<Input
id="github-portifolio"
name="github-portifolio"
placeholder="Opcional"
type="text"
{...register("githubPortifolio")}
/>
</div>
</div>
Expand All @@ -161,40 +186,51 @@ export default function OnboardingForm() {
<div className="mt-2">
<Input
id="linkedin"
name="linkedin"
placeholder="Opcional"
type="text"
{...register("linkedin")}
/>
</div>
</div>
</div>
</div>
<button type="submit"> Enviar </button>
</Form>

<Form>
<Form onSubmit={handleSubmit(onSubmit)}>
<div className="sm:col-span-2">
<Label className="text-lg mb-8" htmlFor="q-one">
Estamos ansiosos para conhecê-lo melhor! Por favor, compartilhe um
pouco da sua experiência e nos conte quais são as áreas da
tecnologia que mais despertam o seu interesse.
</Label>
<div className="mt-2">
<Textarea id="q-one" rows={5} />
<Textarea
id="q-one"
rows={5}
{...register("qOne")}
/>
</div>
</div>
<button type="submit"> Enviar </button>
</Form>

<Form>
<Form onSubmit={handleSubmit(onSubmit)}>
<div className="sm:col-span-2">
<Label className="text-lg mb-8" htmlFor="q-two">
Por favor, compartilhe conosco o motivo pelo qual você deseja
ingressar na PodCodar, o que espera aprender ou vivenciar
participando da comunidade?
</Label>
<div className="mt-2">
<Textarea id="q-two" rows={5} />
<Textarea
id="q-two"
rows={5}
{...register("qTwo")}
/>
</div>
</div>
<button type="submit"> Enviar </button>
</Form>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/TaskList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function ExpandableTaskItem({ item }: { item: TaskItem }) {

useEffect(() => {
storage.set(isChecked);
}, [isChecked]);
}, [isChecked, storage]);

const icon = (
<span className="block h-6 w-6">
Expand Down
Loading

1 comment on commit f06d93c

@vercel
Copy link

@vercel vercel bot commented on f06d93c Jun 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

app – ./

app-zeta-two.vercel.app
app-git-main-podcodar.vercel.app
app-podcodar.vercel.app
app.podcodar.com

Please sign in to comment.