generated from clerk/t3-turbo-and-clerk
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/FernandoNarvaez1904/ecommerce
- Loading branch information
Showing
21 changed files
with
548 additions
and
186 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { atom } from "jotai"; | ||
| import { atomFamily, atomWithStorage, createJSONStorage } from "jotai/utils"; | ||
| import { productsAtom, singleProductAtomFamily } from "./products"; | ||
|
|
||
| export const cartAtom = atomWithStorage<Record<number, number>>( | ||
| "cart", | ||
| {}, | ||
| createJSONStorage(() => localStorage), | ||
| ); | ||
|
|
||
| export const cartItemQuantityAtomFamily = atomFamily((id: number) => | ||
| atom( | ||
| (get) => { | ||
| return get(cartAtom)[id] ?? 0; | ||
| }, | ||
| (get, set, newValue: number) => { | ||
| const currentCart = get(cartAtom); | ||
| set(cartAtom, { ...currentCart, [id]: newValue }); | ||
| }, | ||
| ), | ||
| ); | ||
|
|
||
| export const cartTotalAtom = atom((get) => { | ||
| const currentCart = get(cartAtom); | ||
| const products = get(productsAtom); | ||
|
|
||
| const ids = Object.keys(currentCart); | ||
| let total = 0; | ||
|
|
||
| for (const pr of products) { | ||
| if (ids.includes(pr.id.toString())) { | ||
| total += (currentCart[pr.id] ?? 0) * pr.price.toNumber(); | ||
| } | ||
| } | ||
|
|
||
| return total; | ||
| }); | ||
|
|
||
| export const addItemToCartAtom = atomFamily( | ||
| ({ id, quantity }: { id: number; quantity: number }) => | ||
| atom(null, async (get, set) => { | ||
| const currentCart = get(cartAtom); | ||
| const currentQuantity = currentCart[id]; | ||
| const currentItemStock = | ||
| get(singleProductAtomFamily(id))?.stock.toNumber() ?? 0; | ||
|
|
||
| const q = currentQuantity ? currentQuantity + quantity : quantity; | ||
|
|
||
| if (q < 1) { | ||
| set(cartAtom, { ...currentCart, [id]: 1 }); | ||
| } else if (q <= currentItemStock) { | ||
| set(cartAtom, { ...currentCart, [id]: q }); | ||
| } else { | ||
| set(cartAtom, { ...currentCart, [id]: currentItemStock }); | ||
| } | ||
| }), | ||
| ); | ||
|
|
||
| export const deleteItemFromCartAtom = atomFamily(({ id }: { id: number }) => | ||
| atom(null, async (_, set) => { | ||
| set(cartAtom, async (prev) => { | ||
| const { [id]: toDelete, ...rest } = await prev; | ||
| return { ...rest }; | ||
| }); | ||
| }), | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { AppRouter } from "@acme/api"; | ||
| import { inferProcedureOutput } from "@trpc/server"; | ||
| import { atom } from "jotai"; | ||
| import { atomFamily } from "jotai/utils"; | ||
|
|
||
| export const productsAtom = atom< | ||
| inferProcedureOutput<AppRouter["item"]["all"]> | ||
| >([]); | ||
|
|
||
| export const singleProductAtomFamily = atomFamily((id: number) => | ||
| atom((get) => { | ||
| const product = get(productsAtom).filter((product) => product.id === id)[0]; | ||
| if (!product) return null; | ||
| return product; | ||
| }), | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { createStore } from "jotai"; | ||
|
|
||
| const jotaiStore = createStore(); | ||
|
|
||
| export default jotaiStore; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 85 additions & 38 deletions
123
apps/nextjs/src/components/RegisterForm/RegisterForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,94 @@ | ||
| import styles from "./RegisterForm.module.css"; | ||
| import { useRouter } from "next/router"; | ||
| import { z } from "zod"; | ||
| import { zodResolver } from "@hookform/resolvers/zod"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { useSignUp } from "@clerk/nextjs"; | ||
| import { useState } from "react"; | ||
|
|
||
| const signUpFormValidator = z.object({ | ||
| email: z.string().email(), | ||
| password: z.string().min(8, "Password must be at least 8 characters"), | ||
| }); | ||
|
|
||
| export type SignUpFormSchema = Zod.infer<typeof signUpFormValidator>; | ||
|
|
||
| function RegisterForm() { | ||
| const router = useRouter(); | ||
|
|
||
| const { register, handleSubmit, setError, formState } = | ||
| useForm<SignUpFormSchema>({ | ||
| resolver: zodResolver(signUpFormValidator), | ||
| mode: "onBlur", | ||
| }); | ||
| const { signUp, setActive } = useSignUp(); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
|
|
||
| const onSubmit = handleSubmit(async (vals) => { | ||
| if (!signUp) return; | ||
| setIsLoading(true); | ||
|
|
||
| try { | ||
| const result = await signUp.create({ | ||
| emailAddress: vals.email, | ||
| password: vals.password, | ||
| }); | ||
|
|
||
| if (result?.status === "missing_requirements") { | ||
| alert("mising"); | ||
| } | ||
|
|
||
| if (result?.status === "complete") { | ||
| setActive({ session: result.createdSessionId }); | ||
| router.push("/"); | ||
| } | ||
| } catch (err) { | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| setError("root", { message: err.errors[0].message }); | ||
| } | ||
| setIsLoading(false); | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <form action="" method="post"> | ||
| <div className={styles.container}> | ||
| <h1>Sign Up</h1> | ||
| <hr /> | ||
|
|
||
| <label htmlFor="email">Email</label> | ||
| <input type="text" placeholder="Enter Email" name="email" required /> | ||
|
|
||
| <label htmlFor="psw">Password</label> | ||
| <input | ||
| type="password" | ||
| placeholder="Enter Password" | ||
| name="psw" | ||
| required | ||
| /> | ||
|
|
||
| <label htmlFor="psw-repeat"> Repeat Password </label> | ||
| <input | ||
| type="password" | ||
| placeholder="Repeat Password" | ||
| name="psw-repeat" | ||
| required | ||
| /> | ||
| <div className={styles.buttonDiv}> | ||
| <button | ||
| type="button" | ||
| className={styles.cancelbtn} | ||
| onClick={() => router.back()} | ||
| > | ||
| Cancel | ||
| </button> | ||
| <button type="submit" className={styles.signupbtn}> | ||
| Sign Up | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <main className={styles.container}> | ||
| <h1>Sign Up</h1> | ||
| <hr /> | ||
| {formState.errors.root && ( | ||
| <p className={styles.errorMsg}>{formState.errors.root?.message}</p> | ||
| )} | ||
|
|
||
| <form onSubmit={onSubmit}> | ||
| <label htmlFor="email">Email</label> | ||
| <input | ||
| type="email" | ||
| placeholder="[email protected]" | ||
| required | ||
| {...register("email")} | ||
| /> | ||
| <label htmlFor="psw">Password</label> | ||
| <input | ||
| type="password" | ||
| placeholder="Enter Password" | ||
| required | ||
| {...register("password")} | ||
| /> | ||
| {/* <div className={styles.buttonDiv}> */} | ||
| <button | ||
| type={"submit"} | ||
| className={styles.signupbtn} | ||
| disabled={isLoading} | ||
| > | ||
| Sign Up | ||
| </button> | ||
| {/* <button onClick={() => router.push(`/login`)}> Cancel </button> | ||
| </div> */} | ||
| </form> | ||
| </> | ||
|
|
||
| <p> | ||
| have an account? <a onClick={() => router.push(`/login`)}>Log in</a> | ||
| </p> | ||
| </main> | ||
| ); | ||
| } | ||
| export default RegisterForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.