diff --git a/src/app/company/setup/page.tsx b/src/app/company/setup/page.tsx index 826f688..4155f7e 100644 --- a/src/app/company/setup/page.tsx +++ b/src/app/company/setup/page.tsx @@ -1,24 +1,32 @@ "use client"; -import React, { useRef, useEffect } from "react"; +import React, { useRef, useEffect, useState } from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import Image from "next/image"; -// import { gql, useMutation } from "@apollo/client"; -// import { CREATE_COMPANY} from "@/lib/graphql/mutations"; +import { type FetchResult, useMutation } from "@apollo/client"; +import { CREATE_COMPANY } from "@/lib/graphql/mutations"; import Loader from "@/components/layout/Loader"; +import { router } from "next/client"; +import { toast } from "@/components/ui/use-toast"; -type Inputs = { +type DisplayInputs = { "Full Company Name": string; "CEO Email": string; "CEO Name": string; "CEO Password": string; }; -function Setup() { - const [step, setStep] = React.useState(0); +type MutationInputs = { + companyName: string; + ownerEmail: string; + ownerName: string; + ownerPassword: string; +}; - const [inputs, setInputs] = React.useState({ +function Setup() { + const [step, setStep] = useState(0); + const [inputs, setInputs] = useState({ "Full Company Name": "", "CEO Email": "", "CEO Name": "", @@ -26,106 +34,134 @@ function Setup() { }); const placeholders = ["Full Company Name", "CEO Email", "CEO Name", "CEO Password"]; - const input: React.MutableRefObject = useRef(null); - const [error, setError] = React.useState(""); - // const [createCompany, { data, loading, error: mutationError }] = useMutation(CREATE_COMPANY); + const input = useRef(null); + const [error, setError] = useState(""); + const [createCompany, { loading, error: mutationError }] = useMutation(CREATE_COMPANY); + const nextStep = () => { - if (input.current?.value === "") { + if (input.current?.value === null) { setError("Please fill in the input field"); return; - } else if (input.current?.validity.valid === false) { + } + if (step === 1 && input.current?.validity.valid === false) { setError("Please enter a valid email"); return; - } else { - setError(""); - setStep(step + 1); } + setError(""); + setStep((prev) => prev + 1); }; + const submit = async () => { - if (input.current?.value === "") { + if (input.current?.value === null) { setError("Please fill in the input field"); return; - } else setError(""); + } if (input.current?.validity.valid === false) { setError("Please enter a valid password"); return; - } else { - setError(""); - console.info("submitting", inputs); - - setStep(4); - // await createCompany({ variables: inputs }).then((res) => { - // console.log("done", res); - // }); + } + + const allInputsFilled = Object.values(inputs).every((value) => value.trim() !== ""); + if (!allInputsFilled) { + setError("Please fill in all fields"); + return; + } + + setError(""); + console.info("submitting", inputs); + + const mutationInputs: MutationInputs = { + companyName: inputs["Full Company Name"], + ownerEmail: inputs["CEO Email"], + ownerName: inputs["CEO Name"], + ownerPassword: inputs["CEO Password"] + }; + + try { + const res: FetchResult<{ createCompany: string }> = await createCompany({ variables: mutationInputs }); + if (res.data?.createCompany.includes("200") === true) { + toast({ + title: "Company created!", + description: "You can now login to your account", + variant: "default", + className: "border-emerald-300" + }); + setTimeout(() => { + void router.push("/login"); + }, 1000); + } else { + setError("An error occurred while creating the company: " + res.data?.createCompany); + } + } catch (err) { + console.error("Mutation error:", err); + setError("An error occurred while creating the company"); } }; + useEffect(() => { - const onKeyDown = (e: KeyboardEvent) => { + const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter") { - if (step === 3) - submit().catch((err) => { - console.error(err); - }); - else nextStep(); + if (step === 3) { + void submit(); + } else { + nextStep(); + } } }; - window.addEventListener("keydown", onKeyDown); + window.addEventListener("keydown", handleKeyDown); return () => { - window.removeEventListener("keydown", onKeyDown); + window.removeEventListener("keydown", handleKeyDown); }; - }, [step]); + }, [step, inputs]); + + if (loading || step === 4) return ; + return ( -
-
- {""} -

MeetMate

+
+
+ +

MeetMate

-
- {step === 4 ? ( - - ) : ( - - { - setInputs({ ...inputs, [placeholders[step]]: e.target.value }); - }} - placeholder={placeholders[step]} - className={"border-0 text-lg font-medium text-foreground focus-visible:ring-0"} - /> - - -
-

{error}

- {step > 0 && ( - - )} - {step < 3 && ( - - )} - {step === 3 && ( - - )} -
-
- )} +
+ { + setInputs((prev) => ({ ...prev, [placeholders[step]]: e.target.value })); + }} + placeholder={placeholders[step]} + className="border-0 text-lg font-medium text-foreground focus-visible:ring-0" + /> + + +
+

{error !== "" || (mutationError !== null && mutationError?.message)}

+ {step > 0 && ( + + )} + {step < 3 && ( + + )} + {step === 3 && ( + + )} +
); diff --git a/src/app/dashboard/bookings/page.tsx b/src/app/dashboard/bookings/page.tsx index aab986e..bca9d4c 100644 --- a/src/app/dashboard/bookings/page.tsx +++ b/src/app/dashboard/bookings/page.tsx @@ -104,7 +104,7 @@ function Bookings() { useEffect(() => { if (false) setAppointments([]); - setCompanies([]); + if (false) setCompanies([]); }, []); const [filteredAppointments, setFilteredAppointments] = useState(appointments); diff --git a/src/lib/authActions.ts b/src/lib/authActions.ts index b5650cf..f460808 100644 --- a/src/lib/authActions.ts +++ b/src/lib/authActions.ts @@ -67,7 +67,7 @@ export async function refreshAccessToken(refreshToken?: string) { }); return res.access_Token; } - } else if (response.status === 401 || response.status === 403) { + } else if (response.status === 401 || response.status === 403 || response.status === 500) { return undefined; } else { throw new Error("There was a problem refreshing the access token: " + response.statusText); @@ -86,10 +86,10 @@ export async function getUser(accessToken?: string): Promise { if (response.ok) { return (await response.json()) as User; - } else if (response.status === 403) { + } else if (response.status === 403 || response.status === 500) { return null; } else { - throw new Error("There was a problem fetching the user: " + response.statusText); + throw new Error("There was a problem fetching the user: " + response.statusText + " " + response.status); } } diff --git a/src/middleware.ts b/src/middleware.ts index 8ed807c..5bb620a 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -32,7 +32,7 @@ export async function middleware(req: NextRequest) { response = NextResponse.redirect(new URL("/company/dashboard", req.url)); } else if ( req.nextUrl.pathname.startsWith("/company/dashboard") && - !["COMPANY_MEMBER", "COMPANY_ADMIN"].includes(user.role) + !["COMPANY_MEMBER", "COMPANY_OWNER"].includes(user.role) ) { response = NextResponse.redirect(new URL("/dashboard", req.url)); }