From 3e1172e440db6ea5156d6cc1ae9ab02963cb3dce Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Tue, 9 May 2023 00:53:15 -0400 Subject: [PATCH 1/4] Refactor: switch data fetching from server side to client --- src/components/BeerIndex/BeerCard.tsx | 4 +- src/components/BreweryById/BreweryPostMap.tsx | 2 + src/components/BreweryIndex/BreweryCard.tsx | 2 +- src/components/ui/LocationMarker.tsx | 10 +-- src/components/ui/maps/ControlPanel.tsx | 12 +++ .../brewery-posts/useBreweryMapPagePosts.ts | 58 ++++++++++++++ src/pages/api/breweries/map/index.ts | 68 ++++++++++++++++ src/pages/breweries/map.tsx | 79 ++++++------------- .../types/BreweryPostMapQueryResult.ts | 14 ++++ 9 files changed, 188 insertions(+), 61 deletions(-) create mode 100644 src/components/ui/maps/ControlPanel.tsx create mode 100644 src/hooks/data-fetching/brewery-posts/useBreweryMapPagePosts.ts create mode 100644 src/pages/api/breweries/map/index.ts create mode 100644 src/services/BreweryPost/types/BreweryPostMapQueryResult.ts diff --git a/src/components/BeerIndex/BeerCard.tsx b/src/components/BeerIndex/BeerCard.tsx index 620af43..d1c3d77 100644 --- a/src/components/BeerIndex/BeerCard.tsx +++ b/src/components/BeerIndex/BeerCard.tsx @@ -51,7 +51,9 @@ const BeerCard: FC<{ post: z.infer }> = ({ post }) = )}
- {!!user && } + {!!user && !isLoading && ( + + )}
diff --git a/src/components/BreweryById/BreweryPostMap.tsx b/src/components/BreweryById/BreweryPostMap.tsx index 2543122..44295be 100644 --- a/src/components/BreweryById/BreweryPostMap.tsx +++ b/src/components/BreweryById/BreweryPostMap.tsx @@ -4,6 +4,7 @@ import { FC, useMemo } from 'react'; import Map, { Marker } from 'react-map-gl'; import LocationMarker from '../ui/LocationMarker'; +import ControlPanel from '../ui/maps/ControlPanel'; interface BreweryMapProps { latitude: number; @@ -45,6 +46,7 @@ const BreweryPostMap: FC = ({ latitude, longitude }) => { mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN as string} scrollZoom > + {pin} diff --git a/src/components/BreweryIndex/BreweryCard.tsx b/src/components/BreweryIndex/BreweryCard.tsx index 63cc934..bded816 100644 --- a/src/components/BreweryIndex/BreweryCard.tsx +++ b/src/components/BreweryIndex/BreweryCard.tsx @@ -41,7 +41,7 @@ const BreweryCard: FC<{ brewery: z.infer }> = ({
{!isLoading && liked by {likeCount} users} - {user && ( + {!!user && !isLoading && ( )}
diff --git a/src/components/ui/LocationMarker.tsx b/src/components/ui/LocationMarker.tsx index 1688288..ba394c6 100644 --- a/src/components/ui/LocationMarker.tsx +++ b/src/components/ui/LocationMarker.tsx @@ -7,14 +7,14 @@ interface LocationMarkerProps { } const sizeClasses: Record, `text-${string}`> = { - sm: 'text-2xl', - md: 'text-3xl', - lg: 'text-4xl', - xl: 'text-5xl', + sm: 'text-lg', + md: 'text-xl', + lg: 'text-2xl', + xl: 'text-3xl', }; const LocationMarker: FC = ({ size = 'md', color = 'blue' }) => { - return ; + return ; }; export default React.memo(LocationMarker); diff --git a/src/components/ui/maps/ControlPanel.tsx b/src/components/ui/maps/ControlPanel.tsx new file mode 100644 index 0000000..cb422f6 --- /dev/null +++ b/src/components/ui/maps/ControlPanel.tsx @@ -0,0 +1,12 @@ +import { FC, memo } from 'react'; +import { FullscreenControl, NavigationControl, ScaleControl } from 'react-map-gl'; + +const ControlPanel: FC = () => ( + <> + + + + +); + +export default memo(ControlPanel); diff --git a/src/hooks/data-fetching/brewery-posts/useBreweryMapPagePosts.ts b/src/hooks/data-fetching/brewery-posts/useBreweryMapPagePosts.ts new file mode 100644 index 0000000..ca91166 --- /dev/null +++ b/src/hooks/data-fetching/brewery-posts/useBreweryMapPagePosts.ts @@ -0,0 +1,58 @@ +import BreweryPostMapQueryResult from '@/services/BreweryPost/types/BreweryPostMapQueryResult'; +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import useSWRInfinite from 'swr/infinite'; +import { z } from 'zod'; + +const useBreweryMapPagePosts = ({ pageSize }: { pageSize: number }) => { + const fetcher = async (url: string) => { + const response = await fetch(url); + + if (!response.ok) { + throw new Error(response.statusText); + } + + const json = await response.json(); + + const count = response.headers.get('X-Total-Count'); + + const parsed = APIResponseValidationSchema.safeParse(json); + if (!parsed.success) { + throw new Error('API response validation failed'); + } + + const parsedPayload = z + .array(BreweryPostMapQueryResult) + .safeParse(parsed.data.payload); + if (!parsedPayload.success) { + throw new Error('API payload validation failed'); + } + + const pageCount = Math.ceil((count as string, 10) / pageSize); + + return { breweryPosts: parsedPayload.data, pageCount }; + }; + + const { data, error, isLoading, setSize, size } = useSWRInfinite( + (index) => `/api/breweries/map?page_num=${index + 1}&page_size=${pageSize}`, + fetcher, + ); + + const breweryPosts = data?.flatMap((d) => d.breweryPosts) ?? []; + const pageCount = data?.[0].pageCount ?? 0; + + const isLoadingMore = size > 0 && data && typeof data[size - 1] === 'undefined'; + const isAtEnd = !(size < data?.[0].pageCount!); + + return { + breweries: breweryPosts, + isLoading, + isLoadingMore, + isAtEnd, + size, + setSize, + pageCount, + error: error as unknown, + }; +}; + +export default useBreweryMapPagePosts; diff --git a/src/pages/api/breweries/map/index.ts b/src/pages/api/breweries/map/index.ts new file mode 100644 index 0000000..5a75e0e --- /dev/null +++ b/src/pages/api/breweries/map/index.ts @@ -0,0 +1,68 @@ +import validateRequest from '@/config/nextConnect/middleware/validateRequest'; +import DBClient from '@/prisma/DBClient'; +import BreweryPostMapQueryResult from '@/services/BreweryPost/types/BreweryPostMapQueryResult'; + +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { NextApiRequest, NextApiResponse } from 'next'; +import { createRouter } from 'next-connect'; +import { z } from 'zod'; + +interface GetBreweryPostsRequest extends NextApiRequest { + query: { + page_num: string; + page_size: string; + }; +} + +const getBreweryPosts = async ( + req: GetBreweryPostsRequest, + res: NextApiResponse>, +) => { + const pageNum = parseInt(req.query.page_num, 10); + const pageSize = parseInt(req.query.page_size, 10); + + const skip = (pageNum - 1) * pageSize; + const take = pageSize; + + const breweryPosts: z.infer[] = + await DBClient.instance.breweryPost.findMany({ + select: { + location: { + select: { coordinates: true, city: true, country: true, stateOrProvince: true }, + }, + id: true, + name: true, + }, + skip, + take, + }); + const breweryPostCount = await DBClient.instance.breweryPost.count(); + + res.setHeader('X-Total-Count', breweryPostCount); + + res.status(200).json({ + message: 'Brewery posts retrieved successfully', + statusCode: 200, + payload: breweryPosts, + success: true, + }); +}; + +const router = createRouter< + GetBreweryPostsRequest, + NextApiResponse> +>(); + +router.get( + validateRequest({ + querySchema: z.object({ + page_num: z.string().regex(/^\d+$/), + page_size: z.string().regex(/^\d+$/), + }), + }), + getBreweryPosts, +); + +const handler = router.handler(); + +export default handler; diff --git a/src/pages/breweries/map.tsx b/src/pages/breweries/map.tsx index cfa5854..826a62a 100644 --- a/src/pages/breweries/map.tsx +++ b/src/pages/breweries/map.tsx @@ -1,46 +1,31 @@ -import { GetServerSideProps, NextPage } from 'next'; -import { useMemo, useState } from 'react'; -import Map, { - FullscreenControl, - Marker, - NavigationControl, - Popup, - ScaleControl, -} from 'react-map-gl'; +import { NextPage } from 'next'; +import { useEffect, useMemo, useState } from 'react'; +import Map, { Marker, Popup } from 'react-map-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; -import DBClient from '@/prisma/DBClient'; import LocationMarker from '@/components/ui/LocationMarker'; import Link from 'next/link'; import Head from 'next/head'; import useGeolocation from '@/hooks/utilities/useGeolocation'; +import BreweryPostMapQueryResult from '@/services/BreweryPost/types/BreweryPostMapQueryResult'; +import { z } from 'zod'; +import useBreweryMapPagePosts from '@/hooks/data-fetching/brewery-posts/useBreweryMapPagePosts'; +import ControlPanel from '@/components/ui/maps/ControlPanel'; type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>; -interface BreweryMapPageProps { - breweries: { - location: { - city: string; - stateOrProvince: string | null; - country: string | null; - coordinates: number[]; - }; - id: string; - name: string; - }[]; -} +const BreweryMapPage: NextPage = () => { + const [popupInfo, setPopupInfo] = useState | null>(null); -const BreweryMapPage: NextPage = ({ breweries }) => { - const windowIsDefined = typeof window !== 'undefined'; - const themeIsDefined = windowIsDefined && !!window.localStorage.getItem('theme'); + const [theme, setTheme] = useState<'light' | 'dark'>('light'); - const [popupInfo, setPopupInfo] = useState( - null, - ); + useEffect(() => { + setTheme(localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'); + }, []); - const theme = ( - windowIsDefined && themeIsDefined ? window.localStorage.getItem('theme') : 'light' - ) as 'light' | 'dark'; + const { breweries } = useBreweryMapPagePosts({ pageSize: 50 }); const mapStyles: MapStyles = { light: 'mapbox://styles/mapbox/light-v10', @@ -52,11 +37,12 @@ const BreweryMapPage: NextPage = ({ breweries }) => { <> {breweries.map((brewery) => { const [longitude, latitude] = brewery.location.coordinates; + return ( { e.originalEvent.stopPropagation(); setPopupInfo(brewery); @@ -71,16 +57,16 @@ const BreweryMapPage: NextPage = ({ breweries }) => { [breweries], ); - const { coords, error } = useGeolocation(); + const { coords, error: geoError } = useGeolocation(); const userLocationPin = useMemo( () => - coords && !error ? ( + coords && !geoError ? ( ) : null, - [coords, error], + [coords, geoError], ); return ( @@ -94,15 +80,14 @@ const BreweryMapPage: NextPage = ({ breweries }) => {
- - - + {pins} {userLocationPin} {popupInfo && ( @@ -112,7 +97,7 @@ const BreweryMapPage: NextPage = ({ breweries }) => { latitude={popupInfo.location.coordinates[1]} onClose={() => setPopupInfo(null)} > -
+
= ({ breweries }) => { }; export default BreweryMapPage; - -export const getServerSideProps: GetServerSideProps = async () => { - const breweries = await DBClient.instance.breweryPost.findMany({ - select: { - location: { - select: { coordinates: true, city: true, country: true, stateOrProvince: true }, - }, - id: true, - name: true, - }, - }); - - return { props: { breweries } }; -}; diff --git a/src/services/BreweryPost/types/BreweryPostMapQueryResult.ts b/src/services/BreweryPost/types/BreweryPostMapQueryResult.ts new file mode 100644 index 0000000..e0c9cf5 --- /dev/null +++ b/src/services/BreweryPost/types/BreweryPostMapQueryResult.ts @@ -0,0 +1,14 @@ +import { z } from "zod"; + +const BreweryPostMapQueryResult = z.object({ + location: z.object({ + coordinates: z.array(z.number()), + city: z.string(), + country: z.string().nullable(), + stateOrProvince: z.string().nullable(), + }), + id: z.string(), + name: z.string(), +}); + +export default BreweryPostMapQueryResult; From 55afcdec70da617b5f263359fc788aae46249adf Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Tue, 9 May 2023 08:36:05 -0400 Subject: [PATCH 2/4] Begin work on account page --- src/pages/account/index.tsx | 57 +++++++++++++++++++++++++++++++++++-- 1 file changed, 54 insertions(+), 3 deletions(-) diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx index bdf5020..4ee92a8 100644 --- a/src/pages/account/index.tsx +++ b/src/pages/account/index.tsx @@ -1,13 +1,64 @@ +import UserContext from '@/contexts/userContext'; +import withPageAuthRequired from '@/util/withPageAuthRequired'; import { NextPage } from 'next'; +import { useContext } from 'react'; +import { Tab } from '@headlessui/react'; +import Head from 'next/head'; + interface AccountPageProps {} const AccountPage: NextPage = () => { + const { user } = useContext(UserContext); + return ( -
-

Account Page

-
+ <> + + Your Account | The Biergarten App + + +
+
+
+
+
+
+ +
+

Hello, {user?.username}!

+

Welcome to your account page.

+
+
+ +
+ + + + Settings + + + Account Info + + + Your Posts + + + + Content 1 + Content 2 + Content 3 + + +
+
+
+ ); }; export default AccountPage; + +export const getServerSideProps = withPageAuthRequired(); From 2eb2626d54f0bd298d01d8592c411d81a27a9fe4 Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Thu, 11 May 2023 22:20:51 -0400 Subject: [PATCH 3/4] Updates to user schema, account page Renamed isAccountVerified to accountIsVerified, add account info to account page --- src/pages/account/index.tsx | 159 ++++++++++++++++-- src/pages/api/users/confirm.ts | 2 +- .../migrations/20230510010306_/migration.sql | 9 + src/prisma/schema.prisma | 2 +- src/services/User/createNewUser.ts | 2 +- src/services/User/findUserById.ts | 2 +- src/services/User/schema/GetUserSchema.ts | 2 +- .../User/updateUserToBeConfirmedById.ts | 4 +- 8 files changed, 160 insertions(+), 22 deletions(-) create mode 100644 src/prisma/migrations/20230510010306_/migration.sql diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx index 4ee92a8..0a925da 100644 --- a/src/pages/account/index.tsx +++ b/src/pages/account/index.tsx @@ -1,16 +1,121 @@ -import UserContext from '@/contexts/userContext'; import withPageAuthRequired from '@/util/withPageAuthRequired'; import { NextPage } from 'next'; -import { useContext } from 'react'; -import { Tab } from '@headlessui/react'; +import { FC, useState } from 'react'; +import { Switch, Tab } from '@headlessui/react'; import Head from 'next/head'; +import FormInfo from '@/components/ui/forms/FormInfo'; +import FormLabel from '@/components/ui/forms/FormLabel'; +import FormError from '@/components/ui/forms/FormError'; +import FormTextInput from '@/components/ui/forms/FormTextInput'; +import { zodResolver } from '@hookform/resolvers/zod'; +import GetUserSchema from '@/services/User/schema/GetUserSchema'; +import { useForm } from 'react-hook-form'; +import { z } from 'zod'; +import DBClient from '@/prisma/DBClient'; -interface AccountPageProps {} +interface AccountPageProps { + user: z.infer; +} -const AccountPage: NextPage = () => { - const { user } = useContext(UserContext); +const AccountInfo: FC<{ + user: z.infer; +}> = ({ user }) => { + const { register, handleSubmit, formState, reset } = useForm< + z.infer + >({ + resolver: zodResolver(GetUserSchema), + defaultValues: { + username: 'test', + email: 'test@example.com', + firstName: 'test', + lastName: 'icle', + dateOfBirth: new Date(), + }, + }); + const [inEditMode, setInEditMode] = useState(false); + + return ( +
+
+
+ + { + setInEditMode((editMode) => !editMode); + reset(); + }} + id="edit-toggle" + /> +
+ +
{})}> +
+ + Username + {formState.errors.username?.message} + + + + Email + {''} + + + +
+
+ + First Name + {formState.errors.firstName?.message} + + +
+
+ + Last Name + {formState.errors.lastName?.message} + + +
+
+
+ {inEditMode && } +
+
+
+ ); +}; + +const AccountPage: NextPage = ({ user }) => { return ( <> @@ -28,7 +133,7 @@ const AccountPage: NextPage = () => {
-

Hello, {user?.username}!

+

Hello, {user.username}!

Welcome to your account page.

@@ -36,19 +141,17 @@ const AccountPage: NextPage = () => {
- - Settings - - + Account Info - + Your Posts - Content 1 - Content 2 + + + Content 3 @@ -61,4 +164,30 @@ const AccountPage: NextPage = () => { export default AccountPage; -export const getServerSideProps = withPageAuthRequired(); +export const getServerSideProps = withPageAuthRequired(async (context, session) => { + const { id } = session; + + const user: z.infer | null = + await DBClient.instance.user.findUnique({ + where: { id }, + select: { + username: true, + email: true, + accountIsVerified: true, + firstName: true, + lastName: true, + dateOfBirth: true, + id: true, + createdAt: true, + }, + }); + + if (!user) { + return { redirect: { destination: '/login', permanent: false } }; + } + return { + props: { + user: JSON.parse(JSON.stringify(user)), + }, + }; +}); diff --git a/src/pages/api/users/confirm.ts b/src/pages/api/users/confirm.ts index bdcd0c6..af3f7fa 100644 --- a/src/pages/api/users/confirm.ts +++ b/src/pages/api/users/confirm.ts @@ -27,7 +27,7 @@ const confirmUser = async (req: ConfirmUserRequest, res: NextApiResponse) => { throw new ServerError('Could not confirm user.', 401); } - if (user.isAccountVerified) { + if (user.accountIsVerified) { throw new ServerError('User is already verified.', 400); } diff --git a/src/prisma/migrations/20230510010306_/migration.sql b/src/prisma/migrations/20230510010306_/migration.sql new file mode 100644 index 0000000..2a591a2 --- /dev/null +++ b/src/prisma/migrations/20230510010306_/migration.sql @@ -0,0 +1,9 @@ +/* + Warnings: + + - You are about to drop the column `isAccountVerified` on the `User` table. All the data in the column will be lost. + +*/ +-- AlterTable +ALTER TABLE "User" DROP COLUMN "isAccountVerified", +ADD COLUMN "accountIsVerified" BOOLEAN NOT NULL DEFAULT false; diff --git a/src/prisma/schema.prisma b/src/prisma/schema.prisma index 6a84268..d9e0c98 100644 --- a/src/prisma/schema.prisma +++ b/src/prisma/schema.prisma @@ -21,7 +21,7 @@ model User { email String @unique createdAt DateTime @default(now()) @db.Timestamptz(3) updatedAt DateTime? @updatedAt @db.Timestamptz(3) - isAccountVerified Boolean @default(false) + accountIsVerified Boolean @default(false) dateOfBirth DateTime beerPosts BeerPost[] beerTypes BeerType[] diff --git a/src/services/User/createNewUser.ts b/src/services/User/createNewUser.ts index 6af41b4..c77c82f 100644 --- a/src/services/User/createNewUser.ts +++ b/src/services/User/createNewUser.ts @@ -30,7 +30,7 @@ const createNewUser = async ({ lastName: true, dateOfBirth: true, createdAt: true, - isAccountVerified: true, + accountIsVerified: true, }, }); diff --git a/src/services/User/findUserById.ts b/src/services/User/findUserById.ts index 0396f6a..211317f 100644 --- a/src/services/User/findUserById.ts +++ b/src/services/User/findUserById.ts @@ -14,7 +14,7 @@ const findUserById = async (id: string) => { lastName: true, dateOfBirth: true, createdAt: true, - isAccountVerified: true, + accountIsVerified: true, }, }); diff --git a/src/services/User/schema/GetUserSchema.ts b/src/services/User/schema/GetUserSchema.ts index 68b86a4..5e1df4e 100644 --- a/src/services/User/schema/GetUserSchema.ts +++ b/src/services/User/schema/GetUserSchema.ts @@ -9,7 +9,7 @@ const GetUserSchema = z.object({ firstName: z.string(), lastName: z.string(), dateOfBirth: z.coerce.date(), - isAccountVerified: z.boolean(), + accountIsVerified: z.boolean(), }); export default GetUserSchema; diff --git a/src/services/User/updateUserToBeConfirmedById.ts b/src/services/User/updateUserToBeConfirmedById.ts index 6aa0fcd..34478f7 100644 --- a/src/services/User/updateUserToBeConfirmedById.ts +++ b/src/services/User/updateUserToBeConfirmedById.ts @@ -5,12 +5,12 @@ import { z } from 'zod'; const updateUserToBeConfirmedById = async (id: string) => { const user: z.infer = await DBClient.instance.user.update({ where: { id }, - data: { isAccountVerified: true, updatedAt: new Date() }, + data: { accountIsVerified: true, updatedAt: new Date() }, select: { id: true, username: true, email: true, - isAccountVerified: true, + accountIsVerified: true, createdAt: true, firstName: true, lastName: true, From 9574bbaeb912bb55864b8f2b9cec6b975d7e2889 Mon Sep 17 00:00:00 2001 From: Aaron William Po Date: Thu, 11 May 2023 22:21:49 -0400 Subject: [PATCH 4/4] Feat: Update user validation schema to include username/email check The validation schema will throw an error if the username or email is already found in the database. --- src/components/RegisterUserForm.tsx | 6 +- .../nextConnect/middleware/validateRequest.ts | 18 ++- src/pages/account/index.tsx | 10 +- src/pages/api/users/check-email.ts | 43 ++++++++ src/pages/api/users/check-username.ts | 43 ++++++++ src/prisma/seed/create/createNewUsers.ts | 11 +- src/requests/valdiateEmail.ts | 25 +++++ src/requests/validateUsername.ts | 25 +++++ .../User/schema/CreateUserValidationSchema.ts | 104 +++++++++++------- 9 files changed, 226 insertions(+), 59 deletions(-) create mode 100644 src/pages/api/users/check-email.ts create mode 100644 src/pages/api/users/check-username.ts create mode 100644 src/requests/valdiateEmail.ts create mode 100644 src/requests/validateUsername.ts diff --git a/src/components/RegisterUserForm.tsx b/src/components/RegisterUserForm.tsx index f5cdd58..a8ecf26 100644 --- a/src/components/RegisterUserForm.tsx +++ b/src/components/RegisterUserForm.tsx @@ -1,5 +1,7 @@ import sendRegisterUserRequest from '@/requests/sendRegisterUserRequest'; -import CreateUserValidationSchema from '@/services/User/schema/CreateUserValidationSchema'; +import CreateUserValidationSchema, { + CreateUserValidationSchemaWithUsernameAndEmailCheck, +} from '@/services/User/schema/CreateUserValidationSchema'; import { zodResolver } from '@hookform/resolvers/zod'; import { useRouter } from 'next/router'; import { FC, useState } from 'react'; @@ -18,7 +20,7 @@ const RegisterUserForm: FC = () => { const router = useRouter(); const { reset, register, handleSubmit, formState } = useForm< z.infer - >({ resolver: zodResolver(CreateUserValidationSchema) }); + >({ resolver: zodResolver(CreateUserValidationSchemaWithUsernameAndEmailCheck) }); const { errors } = formState; const [serverResponseError, setServerResponseError] = useState(''); diff --git a/src/config/nextConnect/middleware/validateRequest.ts b/src/config/nextConnect/middleware/validateRequest.ts index 37f5bfd..a3db126 100644 --- a/src/config/nextConnect/middleware/validateRequest.ts +++ b/src/config/nextConnect/middleware/validateRequest.ts @@ -3,6 +3,11 @@ import { NextApiRequest, NextApiResponse } from 'next'; import { NextHandler } from 'next-connect'; import { z } from 'zod'; +interface ValidateRequestArgs { + bodySchema?: z.ZodSchema; + querySchema?: z.ZodSchema; +} + /** * Middleware to validate the request body and/or query against a zod schema. * @@ -18,15 +23,8 @@ import { z } from 'zod'; * @param args.querySchema The query schema to validate against. * @throws ServerError with status code 400 if the request body or query is invalid. */ -const validateRequest = - ({ - bodySchema, - querySchema, - }: { - bodySchema?: z.ZodSchema; - querySchema?: z.ZodSchema; - }) => - async (req: NextApiRequest, res: NextApiResponse, next: NextHandler) => { +const validateRequest = ({ bodySchema, querySchema }: ValidateRequestArgs) => { + return (req: NextApiRequest, res: NextApiResponse, next: NextHandler) => { if (bodySchema) { const parsed = bodySchema.safeParse(JSON.parse(JSON.stringify(req.body))); if (!parsed.success) { @@ -42,8 +40,8 @@ const validateRequest = } req.query = parsed.data; } - return next(); }; +}; export default validateRequest; diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx index 0a925da..0a68738 100644 --- a/src/pages/account/index.tsx +++ b/src/pages/account/index.tsx @@ -26,11 +26,11 @@ const AccountInfo: FC<{ >({ resolver: zodResolver(GetUserSchema), defaultValues: { - username: 'test', - email: 'test@example.com', - firstName: 'test', - lastName: 'icle', - dateOfBirth: new Date(), + username: user.username, + email: user.email, + firstName: user.firstName, + lastName: user.lastName, + dateOfBirth: user.dateOfBirth, }, }); diff --git a/src/pages/api/users/check-email.ts b/src/pages/api/users/check-email.ts new file mode 100644 index 0000000..d122d1e --- /dev/null +++ b/src/pages/api/users/check-email.ts @@ -0,0 +1,43 @@ +import NextConnectOptions from '@/config/nextConnect/NextConnectOptions'; + +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { NextApiRequest, NextApiResponse } from 'next'; +import { createRouter } from 'next-connect'; +import { z } from 'zod'; +import validateRequest from '@/config/nextConnect/middleware/validateRequest'; +import findUserByEmail from '@/services/User/findUserByEmail'; + +const CheckEmailRequestQuerySchema = z.object({ + email: z.string(), +}); + +interface CheckEmailRequestSchema extends NextApiRequest { + query: z.infer; +} + +const router = createRouter< + CheckEmailRequestSchema, + NextApiResponse> +>(); + +const checkEmail = async (req: NextApiRequest, res: NextApiResponse) => { + const { email: emailToCheck } = req.query; + + const email = await findUserByEmail(emailToCheck as string); + + res.json({ + success: true, + payload: { emailIsTaken: !!email }, + statusCode: 200, + message: 'Getting username availability.', + }); +}; + +router.get( + validateRequest({ querySchema: z.object({ email: z.string().email() }) }), + checkEmail, +); + +const handler = router.handler(NextConnectOptions); + +export default handler; diff --git a/src/pages/api/users/check-username.ts b/src/pages/api/users/check-username.ts new file mode 100644 index 0000000..ebf4f60 --- /dev/null +++ b/src/pages/api/users/check-username.ts @@ -0,0 +1,43 @@ +import NextConnectOptions from '@/config/nextConnect/NextConnectOptions'; + +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { NextApiRequest, NextApiResponse } from 'next'; +import { createRouter } from 'next-connect'; +import { z } from 'zod'; +import validateRequest from '@/config/nextConnect/middleware/validateRequest'; +import findUserByUsername from '@/services/User/findUserByUsername'; + +const CheckUsernameRequestQuerySchema = z.object({ + username: z.string(), +}); + +interface CheckUsernameRequestSchema extends NextApiRequest { + query: z.infer; +} + +const router = createRouter< + CheckUsernameRequestSchema, + NextApiResponse> +>(); + +const checkUsername = async (req: NextApiRequest, res: NextApiResponse) => { + const { username: usernameToCheck } = req.query; + + const user = await findUserByUsername(usernameToCheck as string); + + res.json({ + success: true, + payload: { usernameIsTaken: !!user }, + statusCode: 200, + message: 'Getting username availability.', + }); +}; + +router.get( + validateRequest({ querySchema: z.object({ username: z.string() }) }), + checkUsername, +); + +const handler = router.handler(NextConnectOptions); + +export default handler; diff --git a/src/prisma/seed/create/createNewUsers.ts b/src/prisma/seed/create/createNewUsers.ts index aa55174..a8a6c54 100644 --- a/src/prisma/seed/create/createNewUsers.ts +++ b/src/prisma/seed/create/createNewUsers.ts @@ -53,7 +53,16 @@ const createNewUsers = async ({ numberOfUsers }: CreateNewUsersArgs) => { const dateOfBirth = faker.date.birthdate({ mode: 'age', min: 19 }); const createdAt = faker.date.past(1); - const user = { firstName, lastName, email, username, dateOfBirth, createdAt, hash }; + const user = { + firstName, + lastName, + email, + username, + dateOfBirth, + createdAt, + hash, + accountIsVerified: true, + }; data.push(user); } diff --git a/src/requests/valdiateEmail.ts b/src/requests/valdiateEmail.ts new file mode 100644 index 0000000..b10f0a7 --- /dev/null +++ b/src/requests/valdiateEmail.ts @@ -0,0 +1,25 @@ +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { z } from 'zod'; + +const validateEmail = async (email: string) => { + const response = await fetch(`/api/users/check-email?email=${email}`); + const json = await response.json(); + + const parsed = APIResponseValidationSchema.safeParse(json); + + if (!parsed.success) { + return false; + } + + const parsedPayload = z + .object({ usernameIsTaken: z.boolean() }) + .safeParse(parsed.data.payload); + + if (!parsedPayload.success) { + return false; + } + + return !parsedPayload.data.usernameIsTaken; +}; + +export default validateEmail; diff --git a/src/requests/validateUsername.ts b/src/requests/validateUsername.ts new file mode 100644 index 0000000..264c010 --- /dev/null +++ b/src/requests/validateUsername.ts @@ -0,0 +1,25 @@ +import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; +import { z } from 'zod'; + +const validateUsername = async (username: string) => { + const response = await fetch(`/api/users/check-username?username=${username}`); + const json = await response.json(); + + const parsed = APIResponseValidationSchema.safeParse(json); + + if (!parsed.success) { + return false; + } + + const parsedPayload = z + .object({ usernameIsTaken: z.boolean() }) + .safeParse(parsed.data.payload); + + if (!parsedPayload.success) { + return false; + } + + return !parsedPayload.data.usernameIsTaken; +}; + +export default validateUsername; diff --git a/src/services/User/schema/CreateUserValidationSchema.ts b/src/services/User/schema/CreateUserValidationSchema.ts index 850f815..feffe4a 100644 --- a/src/services/User/schema/CreateUserValidationSchema.ts +++ b/src/services/User/schema/CreateUserValidationSchema.ts @@ -1,53 +1,75 @@ +import validateEmail from '@/requests/valdiateEmail'; +import validateUsername from '@/requests/validateUsername'; import sub from 'date-fns/sub'; import { z } from 'zod'; const minimumDateOfBirth = sub(new Date(), { years: 19 }); -const CreateUserValidationSchema = z - .object({ - email: z.string().email({ message: 'Email must be a valid email address.' }), - // use special characters, numbers, and uppercase letters - password: z +const CreateUserValidationSchema = z.object({ + // use special characters, numbers, and uppercase letters + password: z + .string() + .min(8, { message: 'Password must be at least 8 characters.' }) + .refine((password) => /[A-Z]/.test(password), { + message: 'Password must contain at least one uppercase letter.', + }) + .refine((password) => /[0-9]/.test(password), { + message: 'Password must contain at least one number.', + }) + .refine((password) => /[^a-zA-Z0-9]/.test(password), { + message: 'Password must contain at least one special character.', + }), + confirmPassword: z.string(), + firstName: z + .string() + .min(1, { message: 'First name must not be empty.' }) + .max(20, { message: 'First name must be less than 20 characters.' }) + .refine((firstName) => /^[a-zA-Z]+$/.test(firstName), { + message: 'First name must only contain letters.', + }), + lastName: z + .string() + .min(1, { message: 'Last name must not be empty.' }) + .max(20, { message: 'Last name must be less than 20 characters.' }) + .refine((lastName) => /^[a-zA-Z]+$/.test(lastName), { + message: 'Last name must only contain letters.', + }), + dateOfBirth: z.string().refine( + (dateOfBirth) => { + const parsedDateOfBirth = new Date(dateOfBirth); + return parsedDateOfBirth <= minimumDateOfBirth; + }, + { message: 'You must be at least 19 years old to register.' }, + ), +}); + +export default CreateUserValidationSchema.extend({ + username: z + .string() + .min(1, { message: 'Username must not be empty.' }) + .max(20, { message: 'Username must be less than 20 characters.' }), + + email: z.string().email({ message: 'Email must be a valid email address.' }), +}).refine((data) => data.password === data.confirmPassword, { + message: 'Passwords do not match.', + path: ['confirmPassword'], +}); + +export const CreateUserValidationSchemaWithUsernameAndEmailCheck = + CreateUserValidationSchema.extend({ + email: z .string() - .min(8, { message: 'Password must be at least 8 characters.' }) - .refine((password) => /[A-Z]/.test(password), { - message: 'Password must contain at least one uppercase letter.', - }) - .refine((password) => /[0-9]/.test(password), { - message: 'Password must contain at least one number.', - }) - .refine((password) => /[^a-zA-Z0-9]/.test(password), { - message: 'Password must contain at least one special character.', - }), - confirmPassword: z.string(), - firstName: z - .string() - .min(1, { message: 'First name must not be empty.' }) - .max(20, { message: 'First name must be less than 20 characters.' }) - .refine((firstName) => /^[a-zA-Z]+$/.test(firstName), { - message: 'First name must only contain letters.', - }), - lastName: z - .string() - .min(1, { message: 'Last name must not be empty.' }) - .max(20, { message: 'Last name must be less than 20 characters.' }) - .refine((lastName) => /^[a-zA-Z]+$/.test(lastName), { - message: 'Last name must only contain letters.', + .email({ message: 'Email must be a valid email address.' }) + .refine(async (email) => validateEmail(email), { + message: 'Email is already taken.', }), username: z .string() .min(1, { message: 'Username must not be empty.' }) - .max(20, { message: 'Username must be less than 20 characters.' }), - dateOfBirth: z.string().refine( - (dateOfBirth) => { - const parsedDateOfBirth = new Date(dateOfBirth); - return parsedDateOfBirth <= minimumDateOfBirth; - }, - { message: 'You must be at least 19 years old to register.' }, - ), - }) - .refine((data) => data.password === data.confirmPassword, { + .max(20, { message: 'Username must be less than 20 characters.' }) + .refine(async (username) => validateUsername(username), { + message: 'Username is already taken.', + }), + }).refine((data) => data.password === data.confirmPassword, { message: 'Passwords do not match.', path: ['confirmPassword'], }); - -export default CreateUserValidationSchema;