Skip to content

Commit

Permalink
Resolve merge conflict by keeping changes from feat/HNG-External-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
The Hanifah committed Jul 30, 2024
2 parents e68296c + c7394d4 commit 6bebac0
Show file tree
Hide file tree
Showing 6 changed files with 148 additions and 65 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
"lenis": "^1.1.6",
"lucide-react": "^0.400.0",
"moment": "^2.30.1",
"next": "14.2.5",
"next-auth": "5.0.0-beta.20",
"next": "^14.2.5",
"next-auth": "5.0.0-beta.19",
"next-nprogress-bar": "^2.3.13",
"react": "^18",
"react-day-picker": "^8.10.1",
Expand Down
2 changes: 1 addition & 1 deletion pnpm-lock.yaml

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

94 changes: 68 additions & 26 deletions src/app/(auth-routes)/register/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@

import { zodResolver } from "@hookform/resolvers/zod";
import { DialogContent, DialogTitle } from "@radix-ui/react-dialog";
import { signIn } from "next-auth/react";
import axios from "axios";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { SubmitHandler, useForm } from "react-hook-form";
import { z } from "zod";

import CustomButton from "~/components/common/common-button/common-button";
Expand Down Expand Up @@ -42,14 +43,19 @@ const formSchema = z.object({
type FormData = z.infer<typeof formSchema>;

const SignUp = () => {
const [apiUrl, setApiUrl] = useState("");
const router = useRouter();
const [apiUrl, setApiUrl] = useState(
"https://deployment.api-nestjs.boilerplate.hng.tech/api/v1/auth/register",
);
const { toast } = useToast();

useEffect(() => {
const fetchApiUrl = async () => {
try {
const url = await getApiUrl();
setApiUrl(url);
// eslint-disable-next-line no-console
console.log("API URL set to:", url);
} catch {
toast({
title: "Error",
Expand All @@ -62,23 +68,62 @@ const SignUp = () => {
fetchApiUrl();
}, [toast]);

// eslint-disable-next-line prettier/prettier


const form = useForm<FormData>({
resolver: zodResolver(formSchema),
});

const [open, setOpen] = useState(false);

const handleFormSubmit = () => {
form.handleSubmit(() => {
if (form.formState.isValid) {
setOpen(true);
const handleSubmit = async (data: FormData) => {
try {
if (!apiUrl) {
throw new Error("API URL is not available");
}
})();
};

const handleSubmit = () => {
form.handleSubmit(handleFormSubmit)();
const nameParts = data.fullname.trim().split(/\s+/);
const first_name = nameParts[0];
const last_name = nameParts.slice(1).join("");

const apiData = {
first_name,
last_name,
email: data.email,
password: data.password,
};

const response = await axios.post(`${apiUrl}`, apiData);
if (response.status === 200 || response.status === 201) {
toast({
title: "Success",
description: "Account created successfully!",
});
// Redirect to login page or dashboard
router.push("/login");
}
} catch (error: unknown) {
if (axios.isAxiosError(error)) {
toast({
title: "Error",
description:
error.response?.data?.message ||
"Failed to create account. Please try again.",
variant: "destructive",
});
} else {
toast({
title: "Error",
description: "An unexpected error occurred. Please try again.",
variant: "destructive",
});
}
}
};

const onSubmit: SubmitHandler<FormData> = (data) => handleSubmit(data);

return (
<div>
<div className="flex flex-col items-center gap-2">
Expand All @@ -92,7 +137,11 @@ const SignUp = () => {
isDisabled={!apiUrl}
variant="outline"
isLeftIconVisible={true}
onClick={() => signIn("google")}
href={
apiUrl === ""
? undefined
: `${apiUrl}/api/v1/auth/social/google?provider=google`
}
icon={
<svg
width="25"
Expand Down Expand Up @@ -125,7 +174,11 @@ const SignUp = () => {
<CustomButton
isDisabled={!apiUrl}
variant="outline"
href={apiUrl === "" ? undefined : `${apiUrl}/api/v1/auth/facebook`}
href={
apiUrl === ""
? undefined
: `${apiUrl}/api/v1/auth/social/facebook?provider=facebook`
}
isLeftIconVisible={true}
icon={
<svg
Expand Down Expand Up @@ -154,13 +207,7 @@ const SignUp = () => {
</div>
<div className="mx-auto py-4 md:w-2/4">
<Form {...form}>
<form
className="space-y-8"
onSubmit={(event) => {
event.preventDefault();
handleSubmit();
}}
>
<form className="space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="fullname"
Expand Down Expand Up @@ -222,12 +269,7 @@ const SignUp = () => {
</FormItem>
)}
/>
<CustomButton
variant="primary"
type="submit"
className="w-full"
onClick={handleSubmit}
>
<CustomButton variant="primary" type="submit" className="w-full">
Create Account
</CustomButton>
<DialogDemo open={open} onOpenChanged={setOpen}>
Expand Down
27 changes: 15 additions & 12 deletions src/app/(landing-routes)/career/[slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import { Plus } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";

import { Breadcrumb } from "~/components/common/breadcrumb";
Expand Down Expand Up @@ -43,7 +44,7 @@ const JobDetails = () => {
<main className="mx-auto max-w-7xl px-5 py-10 md:px-10 lg:px-10 xl:px-10">
<Breadcrumb pages={pages} maxPages={isSmallScreen ? 2 : 3} />

<div className="mb-4 mt-8 grid w-full auto-rows-min grid-cols-1 pb-2 md:grid-cols-3">
<div className="mb-4 mt-[60px] grid w-full auto-rows-min grid-cols-1 pb-2 md:grid-cols-3">
<div className="col-span-1 mb-6 sm:col-span-2 md:mr-16 xl:mr-40">
<div className="flex flex-col justify-start">
<h1 className="mb-3 text-3xl font-bold text-neutral-dark-2 md:text-[38px]">
Expand Down Expand Up @@ -209,17 +210,19 @@ const JobDetails = () => {
</div>
</div>

<div className="my-10 mb-40 flex flex-row items-center justify-center">
<CustomButton
variant="primary"
size="lg"
icon={isSmallScreen ? undefined : <Plus />}
isLeftIconVisible={isSmallScreen}
isDisabled={false}
className={`h-[50px] w-[250px]`}
>
Apply Now
</CustomButton>
<div className="my-10 mb-8 flex flex-row items-center justify-center">
<Link href="mailto:[email protected]" passHref>
<CustomButton
variant="primary"
size="lg"
icon={isSmallScreen ? undefined : <Plus />}
isLeftIconVisible={isSmallScreen}
isDisabled={false}
className={`h-[50px] w-[250px]`}
>
Apply Now
</CustomButton>
</Link>
</div>
</main>
);
Expand Down
48 changes: 24 additions & 24 deletions src/app/(landing-routes)/help-center/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,64 +15,64 @@ const HelpCenter = () => {

return (
<div className="w-full bg-background">
<div className="w-full bg-primary/10">
<div className="w-full">
<div className="mx-auto w-full max-w-[1349px]">
<section
className="flex w-full flex-col items-center justify-center gap-4 px-6 py-[24px] text-center md:px-0 md:py-24"
className="flex w-full flex-col items-center justify-center gap-4 px-6 py-[14px] text-center md:px-0 md:py-8"
aria-labelledby="help-center-heading"
>
<span
id="help-center-heading"
className="font-inter text-xl font-medium text-neutral-600"
className="font-inter rounded-lg bg-[#F1F1F1] p-2.5 text-xl font-medium text-neutral-600"
>
Help Center
</span>
<div className="flex h-48 flex-col items-center justify-center gap-5 self-stretch">
<div className="flex h-40 flex-col items-center justify-center gap-6 self-stretch pb-3">
<h1
className="text-4xl font-bold text-neutral-950 md:text-5xl lg:text-6xl"
role="heading"
aria-level={1}
>
How can we help You?
How can <span className="text-orange-500">we</span> help You?
</h1>
<p className="text-center text-base font-normal text-neutral-600 md:text-lg">
Find advice and answers from our support team
</p>
<div className="group flex h-[45px] w-full items-center justify-start overflow-hidden rounded-full border border-slate-300 bg-white px-2 py-[2px] text-xs font-normal leading-none text-neutral-600 focus-within:ring-1 focus-within:ring-primary focus-within:ring-offset-0 md:w-[600px]">
<Search className="flex h-8 w-8 items-center justify-center p-1 text-muted-foreground" />
<Input
isButtonVisible={false}
className="w-full border-none bg-transparent px-2 py-2 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
type="text"
placeholder="Search on any topic..."
aria-label="Search on any topic"
/>
</div>
</div>
<div className="group mb-8 flex h-[45px] w-full items-center justify-start overflow-hidden rounded-full border border-slate-300 bg-background px-2 py-[2px] text-xs font-normal leading-none text-neutral-600 focus-within:ring-1 focus-within:ring-primary focus-within:ring-offset-0 md:w-[600px]">
<Search className="flex h-8 w-8 items-center justify-center p-1 text-muted-foreground" />
<Input
isButtonVisible={false}
className="w-full border-none bg-background px-2 py-2 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
type="text"
placeholder="Search on any topic..."
aria-label="Search on any topic"
/>
</div>
</section>
</div>
</div>

<div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
<section
className="flex flex-col items-center justify-start gap-7 py-24"
className="flex flex-col items-center justify-start gap-7 pb-12 sm:pb-24"
aria-labelledby="browse-topics-heading"
>
<span
id="browse-topics-heading"
className="mb-4 text-center text-2xl font-bold text-orange-500"
className="mb-4 text-center text-[24px] font-bold text-orange-500 md:text-[1.75em]"
>
Browse by topics
</span>

<TopicsAccordions />
</section>

<section className="pt-12">
<div className="mb-20 grid w-full grid-cols-1 gap-y-10 lg:grid-cols-2">
<section className="pt-0 sm:pt-12">
<div className="mb-14 grid w-full grid-cols-1 gap-y-10 sm:mb-16 lg:grid-cols-2">
<div className="flex flex-col gap-3">
<h1
className="self-stretch text-4xl font-semibold text-neutral-600"
className="self-stretch text-2xl font-semibold text-neutral-600 sm:text-4xl"
role="heading"
aria-level={1}
>
Expand All @@ -85,7 +85,7 @@ const HelpCenter = () => {

<Link
href="/contact-us"
className="align-center flex w-[150px] justify-center rounded-md bg-primary py-4 text-background"
className="align-center flex w-[150px] justify-center rounded-md border border-[#0F172A] bg-[#fff] px-4 py-2 text-[#0F172A]"
>
Contact us
</Link>
Expand All @@ -96,12 +96,12 @@ const HelpCenter = () => {
</section>
</div>

<div className="bg-white py-40">
<div className="pb-12 pt-10 sm:pb-24 sm:pt-20">
<div className="mx-auto max-w-7xl px-5 text-center md:px-10 lg:px-10 xl:px-10">
<h1 className="mg-4 text-3xl font-bold text-orange-500">
<h1 className="mg-4 mb-4 text-3xl font-bold text-orange-500">
Didn’t find an answer?
</h1>
<p className="mb-3 text-lg font-normal text-neutral-600">
<p className="mb-4 text-lg font-normal text-neutral-600">
Contact us for more inquiries and information about our services.
</p>

Expand Down
38 changes: 38 additions & 0 deletions src/components/layouts/pagination/PaginationHook.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
// usePagination.ts
import { useEffect, useState } from "react";

interface UsePaginationProperties {
totalItems: number;
itemsPerPage: number;
initialPage?: number;
}

interface UsePaginationReturn {
currentPage: number;
pageCount: number;
changePage: (page: number) => void;
}

export function usePagination({
totalItems,
itemsPerPage,
initialPage = 1,
}: UsePaginationProperties): UsePaginationReturn {
const [currentPage, setCurrentPage] = useState<number>(initialPage);
const [pageCount, setPageCount] = useState<number>(0);

useEffect(() => {
setPageCount(Math.ceil(totalItems / itemsPerPage));
}, [totalItems, itemsPerPage]);

const changePage = (page: number) => {
const pageNumber = Math.max(1, Math.min(page, pageCount));
setCurrentPage(pageNumber);
};

return {
currentPage,
pageCount,
changePage,
};
}

0 comments on commit 6bebac0

Please sign in to comment.