Refactor: Code

Ali-Raza764 · May 27, 2024 · 6de72f3 · 6de72f3
1 parent 28b4e8f
commit 6de72f3
Show file tree

Hide file tree

Showing 75 changed files with 1,924 additions and 661 deletions.
diff --git a/Readme b/Readme
@@ -0,0 +1,2 @@
+1. The app is made by implementing modern features of nextjs.
+2. Each component of any page is responsible for fetching and mutating its own data.
diff --git a/actions/user.action.js b/actions/user.action.js
diff --git a/actions/user.actions.js b/actions/user.actions.js
@@ -0,0 +1,30 @@
+"use server";
+import User from "@/lib/schemas/UserSchema";
+import dbConnect from "@/utils/dbConnect";
+
+export const CreateUser = async (payload) => {
+ const email = payload.email;
+ const conn = await dbConnect();
+
+ const existingUser = await User.findOne({ email });
+ if (existingUser) {
+ return JSON.parse(
+ JSON.stringify({
+ message: "User Already Exists",
+ status: 400,
+ })
+ );
+ }
+
+ const users = await User.create(payload);
+
+ const data = JSON.stringify(users);
+ console.log("users ", users);
+ return JSON.parse(
+ JSON.stringify({
+ status: 200,
+ success: true,
+ data: data,
+ })
+ );
+};
diff --git a/app/(auth)/layout.js b/app/(auth)/layout.js
@@ -0,0 +1,14 @@
+export const metadata = {
+ title: "Authentication",
+ description: "Authenticdate yourself to use Pendrive",
+};
+
+export default function RootLayout({ children }) {
+ return (
+ <html lang="en">
+ <body>
+ {children}
+ </body>
+ </html>
+ );
+}
diff --git a/app/(auth)/onboarding/OnboardingForm.jsx b/app/(auth)/onboarding/OnboardingForm.jsx
@@ -0,0 +1,109 @@
+"use client";
+import { CreateUser } from "@/actions/user.actions";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+
+const OnboardingForm = ({ email, name, id }) => {
+ const [formData, setFormData] = useState({
+ name: name || "",
+ email: email || "",
+ address: "",
+ phone: "",
+ });
+ const router = useRouter();
+ const [loading, setLoading] = useState(false);
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData({
+ ...formData,
+ [name]: value,
+ });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+ const res = await CreateUser({
+ email: formData.email,
+ name: formData.name,
+ address: formData.address,
+ phone: formData.phone,
+ AuthId: id,
+ });
+ setLoading(false);
+ if (res.status === 200) {
+ router.push("/");
+ }
+ };
+
+ return (
+ <form
+ onSubmit={handleSubmit}
+ className="max-w-md mx-auto p-4 shadow-md rounded bg-white"
+ >
+
+ <div className="mb-4">
+ <label className="block text-gray-700">Name</label>
+ <input
+ type="text"
+ name="name"
+ value={formData.name}
+ onChange={handleChange}
+ className="w-full p-2 border border-gray-300 rounded mt-1"
+ required
+ disabled={loading}
+ />
+ </div>
+
+ <div className="mb-4">
+ <label className="block text-gray-700">Email</label>
+ <input
+ type="email"
+ name="email"
+ value={formData.email}
+ onChange={handleChange}
+ className="w-full p-2 border border-gray-300 rounded mt-1"
+ required
+ disabled={loading}
+ />
+ </div>
+
+ <div className="mb-4">
+ <label className="block text-gray-700">Address</label>
+ <input
+ type="text"
+ name="address"
+ value={formData.address}
+ onChange={handleChange}
+ className="w-full p-2 border border-gray-300 rounded mt-1"
+ required
+ disabled={loading}
+ />
+ </div>
+
+ <div className="mb-4">
+ <label className="block text-gray-700">Phone Number</label>
+ <input
+ type="tel"
+ name="phone"
+ value={formData.phone}
+ onChange={handleChange}
+ className="w-full p-2 border border-gray-300 rounded mt-1"
+ required
+ disabled={loading}
+ />
+ </div>
+
+ <button
+ type="submit"
+ className="w-full p-2 bg-blue-600 text-white rounded mt-2 hover:bg-blue-700 transition"
+ disabled={loading}
+ >
+ Submit
+ </button>
+ </form>
+ );
+};
+
+export default OnboardingForm;
diff --git a/app/(auth)/onboarding/page.jsx b/app/(auth)/onboarding/page.jsx
@@ -0,0 +1,19 @@
+import { currentUser } from "@clerk/nextjs/server";
+import OnboardingForm from "./OnboardingForm";
+
+const OnBoardingPage = async () => {
+ const { primaryEmailAddress, fullName, id } = await currentUser();
+
+ return (
+ <div className="w-full h-screen">
+ <h1 className="text-3xl font-bold font-sans">OnBoarding</h1>
+ <OnboardingForm
+ email={primaryEmailAddress.emailAddress}
+ name={fullName}
+ id={id}
+ />
+ </div>
+ );
+};
+
+export default OnBoardingPage;
diff --git a/app/(auth)/sign-in/[[...sign-in]]/page.jsx b/app/(auth)/sign-in/[[...sign-in]]/page.jsx
@@ -0,0 +1,34 @@
+import { SignIn } from "@clerk/nextjs";
+import Image from "next/image";
+
+const SignInPage = () => {
+ return (
+ <div className="w-full lg:h-screen flex items-center flex-row lg:p-0">
+ <div className="w-full h-screen hidden lg:flex items-center justify-center">
+ <Image
+ height={700}
+ width={700}
+ src={"/images/image.png"}
+ alt="Image-1"
+ />
+ </div>
+ <div className="h-full w-full flex items-center justify-center py-11">
+ <SignIn
+ appearance={{
+ elements: {
+ card: "bg-gray-50",
+ formButtonPrimary:
+ "bg-red-500 border-none outline-none text-white p-2",
+ input: "p-2",
+ socialButtonsBlockButton: "p-2",
+ footerActionText: "text-md font-semibold",
+ footerActionLink: "text-red-500 text-md font-bold",
+ },
+ }}
+ />
+ </div>
+ </div>
+ );
+};
+
+export default SignInPage;
diff --git a/app/(auth)/sign-up/[[...sign-up]]/page.jsx b/app/(auth)/sign-up/[[...sign-up]]/page.jsx
@@ -0,0 +1,33 @@
+import { SignUp } from "@clerk/nextjs";
+import Image from "next/image";
+
+export default function SignUpPage() {
+ return (
+ <div className="w-full h-screen flex items-center flex-row">
+ <div className="w-full h-full hidden md:flex items-center justify-center">
+ <Image
+ height={700}
+ width={700}
+ src={"/images/image.png"}
+ alt="Image-1"
+ />
+ </div>
+ <div className="h-full w-full flex items-center justify-center flex-col py-11">
+ <SignUp
+
+ appearance={{
+ elements: {
+ card: "bg-gray-50",
+ formButtonPrimary:
+ "bg-red-500 border-none outline-none text-white p-2",
+ input: "p-2",
+ socialButtonsBlockButton: "p-2",
+ footerActionText: "text-md font-semibold",
+ footerActionLink: "text-red-500 text-md font-bold",
+ },
+ }}
+ />
+ </div>
+ </div>
+ );
+}
diff --git a/app/(root)/_components/home/AllProductsCarousel.jsx b/app/(root)/_components/home/AllProductsCarousel.jsx
@@ -0,0 +1,39 @@
+import ItemsCarousel from "@/components/reuseable/ItemsCarousel";
+import ProductItem from "@/components/reuseable/ProductItem";
+
+
+const AllProductsCarousel = () => {
+ const dummyArray = Array.from({ length: 10 }, (v, k) => k);
+
+ return (
+ <>
+ <div className="w-full flex flex-col items-center justify-center relative my-11">
+ <ItemsCarousel title={"Our Products"} text={"Explore Our Products"}>
+ {dummyArray.map((item) => (
+ <div className="embla__slide" key={item}>
+ <div className="flex flex-col items-center justify-center">
+ <ProductItem />
+ </div>
+ </div>
+ ))}
+ </ItemsCarousel>
+ </div>
+ <div className="w-full flex flex-col items-center justify-center relative my-11">
+ <ItemsCarousel>
+ {dummyArray.map((item) => (
+ <div className="embla__slide" key={item}>
+ <div className="flex flex-col items-center justify-center">
+ <ProductItem />
+ </div>
+ </div>
+ ))}
+ </ItemsCarousel>
+ <button className="px-11 text-xl py-2 bg-red-500 rounded-md w-max text-white">
+ View All Products
+ </button>
+ </div>
+ </>
+ );
+};
+
+export default AllProductsCarousel;
diff --git a/app/(root)/_components/home/CategorySideBar/CategoryItem.jsx b/app/(root)/_components/home/CategorySideBar/CategoryItem.jsx
@@ -0,0 +1,20 @@
+import Link from "next/link";
+import React from "react";
+
+const CategoryItem = ({ name, icon, link }) => {
+ return (
+ <Link
+ href={link}
+ className="flex flex-col items-center justify-center hover:bg-gray-200 transition"
+ >
+ <div className="md:hidden ">{icon}</div>
+ <div
+ className="px-4 py-1 text-md w-max "
+ >
+ {name}
+ </div>
+ </Link>
+ );
+};
+
+export default CategoryItem;
diff --git a/app/(root)/_components/home/CategorySideBar/categories.js b/app/(root)/_components/home/CategorySideBar/categories.js
@@ -0,0 +1,30 @@
+import { FaCottonBureau, FaShoppingBag } from "react-icons/fa";
+import { MdComputer, MdKitchen, MdWoman } from "react-icons/md";
+const categories = [
+ {
+ name: "Fashion",
+ link: "/categories/fashion",
+ icon: <FaShoppingBag size={40} />,
+ },
+ {
+ name: "Computers",
+ link: "/categories/computers",
+ icon: <MdComputer size={40} />,
+ },
+ {
+ name: "Embriodery",
+ link: "/categories/embriodery",
+ icon: <FaCottonBureau size={40} />,
+ },
+ {
+ name: "HouseHold",
+ link: "/categories/household",
+ icon: <MdKitchen size={40} />,
+ },
+ {
+ name: "Women",
+ link: "/categories/women",
+ icon: <MdWoman size={40} />,
+ },
+];
+export default categories;
diff --git a/components/feed/CategorySideBar/index.jsx → ...components/home/CategorySideBar/index.jsx b/components/feed/CategorySideBar/index.jsx → ...components/home/CategorySideBar/index.jsx
@@ -1,36 +1,8 @@
 import React from "react";
 import CategoryItem from "./CategoryItem";
-import { FaCottonBureau, FaEmber, FaShoppingBag } from "react-icons/fa";
-import { MdComputer, MdKitchen, MdWoman } from "react-icons/md";
+import categories from "./categories";
 
 const CategorySideBar = ({ children }) => {
- const categories = [
- {
- name: "Fashion",
- link: "/categories/fashion",
- icon: <FaShoppingBag size={40} />,
- },
- {
- name: "Computers",
- link: "/categories/computers",
- icon: <MdComputer size={40} />,
- },
- {
- name: "Embriodery",
- link: "/categories/embriodery",
- icon: <FaCottonBureau size={40} />,
- },
- {
- name: "HouseHold",
- link: "/categories/household",
- icon: <MdKitchen size={40} />,
- },
- {
- name: "Women",
- link: "/categories/women",
- icon: <MdWoman size={40} />,
- },
- ];
  return (
  <div className="flex items-center w-full flex-col md:flex-row py-4">
  <div className="md:w-1/5 md:border-r border-gray-500 flex md:flex-col items-center justify-center py-4 md:py-8 gap-y-2 w-full overflow-x-scroll md:overflow-x-hidden">

diff --git a/components/feed/FeaturedProduct/index.jsx → ...oot)/_components/home/FeaturedProduct.jsx b/components/feed/FeaturedProduct/index.jsx → ...oot)/_components/home/FeaturedProduct.jsx
diff --git a/components/feed/Hero/HeroItem.jsx → ...(root)/_components/home/Hero/HeroItem.jsx b/components/feed/Hero/HeroItem.jsx → ...(root)/_components/home/Hero/HeroItem.jsx
diff --git a/components/feed/Hero/index.jsx → app/(root)/_components/home/Hero/index.jsx b/components/feed/Hero/index.jsx → app/(root)/_components/home/Hero/index.jsx