-
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.
- Loading branch information
1 parent
9d7cba2
commit 52d534b
Showing
53 changed files
with
1,225 additions
and
54 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,48 @@ | ||
| 'use server' | ||
|
|
||
| import { getStockAndPrices } from "@/app/admin/(admin)/product/products/products.utils" | ||
| import { GET } from "@/libs/db" | ||
| import { ProductClassType, ProductType, VariantType } from "@/libs/definations" | ||
| import { wait } from "@/libs/utils" | ||
|
|
||
| export async function getHomeProduct() { | ||
| await wait() | ||
|
|
||
| const getDate = (product: ProductType) => product.updateDate || product.createDate | ||
|
|
||
| const products = await GET<ProductType>('products', { isDelete: false }) | ||
| const sortedProducts = products.sort((a, b) => { | ||
| if (getDate(a) < getDate(b)) return 1 | ||
| if (getDate(a) > getDate(b)) return -1 | ||
| return 0 | ||
| }) | ||
|
|
||
| const variants = await GET<VariantType>('product_variants', { isDelete: false }) | ||
|
|
||
| const latest = sortedProducts.slice(0, 5) | ||
| const result: ProductType[] = [] | ||
| for await (const product of latest) { | ||
| const productClasses = await GET<ProductClassType>('product_class', { product_id: product.id, isDelete: false }) | ||
| const { stockTotal, minPrice, maxPrice } = getStockAndPrices(productClasses) | ||
|
|
||
| if (productClasses.length) { | ||
|
|
||
| for await (const pClass of productClasses) { | ||
| if (pClass.variant_1_id) { | ||
| pClass.variant1 = variants.find(item => item.id == pClass.variant_1_id) | ||
| } | ||
| if (pClass.variant_2_id) { | ||
| pClass.variant2 = variants.find(item => item.id == pClass.variant_2_id) | ||
| } | ||
| } | ||
|
|
||
| product.classes = productClasses | ||
| product.price = minPrice | ||
| product.minPrice = minPrice | ||
| product.maxPrice = maxPrice | ||
| product.quantity = stockTotal | ||
| } | ||
| result.push(product) | ||
| } | ||
| return result | ||
| } |
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,96 @@ | ||
| 'use client' | ||
|
|
||
| import clsx from 'clsx' | ||
| import { Product } from '../products/products.client' | ||
| import styles from './home.module.css' | ||
| import { ProductType } from "@/libs/definations" | ||
| import Link from 'next/link' | ||
| import { ArrowRightIcon, TicketIcon } from '@heroicons/react/24/outline' | ||
| import Image from 'next/image' | ||
| import IntroImg from '@/app/assets/icons/welcome.svg' | ||
|
|
||
| export function SearchBar() { | ||
| return ( | ||
| <div className={styles.searchContainer}> | ||
| <div className={styles.searchBar}></div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export function Categories() { | ||
| const categories = [1,2,3,4,5,6] | ||
| return ( | ||
| <div className={styles.categories}> | ||
| <div className={styles.slideContainer}> | ||
| { | ||
| categories.map(item => ( | ||
| <div className={clsx(styles.slideItem, styles.categoryItem)} key={item}> | ||
| <Link href={`/products`} className={styles.category}> | ||
| <TicketIcon /> | ||
| Category | ||
| </Link> | ||
| </div> | ||
| )) | ||
| } | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export function ProductSlide({ products }: { products: ProductType[] }) { | ||
|
|
||
| return ( | ||
| <div className={styles.latestProducts}> | ||
| <div className={styles.slideContainer}> | ||
| <div className={clsx(styles.slideItem, styles.slideItemStart)}> | ||
| <div className={styles.introCard}> | ||
| <div className={styles.introMedia}> | ||
| <Image src={IntroImg} width={200} height={150} alt='intro' /> | ||
| </div> | ||
| <div className={styles.introMessage}> | ||
| <span>Discover Joy </span>in Every Cart – Your One-Stop Shop for Style, Savings, and Smiles! | ||
| </div> | ||
| </div> | ||
| </div> | ||
| { | ||
| products.map(item => ( | ||
| <div className={styles.slideItem} key={item.id}> | ||
| <Product product={item} /> | ||
| </div> | ||
| )) | ||
| } | ||
| <div className={clsx(styles.slideItem, styles.slideItemEnd)}> | ||
| <Link href="/products" className={styles.goButton}> | ||
| <ArrowRightIcon /> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export function ProductSlideSkeleton() { | ||
| return ( | ||
| <div className={clsx(styles.latestProducts, "skeleton")}> | ||
| <div className={styles.slideContainer}> | ||
| <div className={clsx(styles.slideItem, styles.slideItemStart)}> | ||
| <div className={styles.introCard}> | ||
| <div className={styles.introMedia}> | ||
| <Image src={IntroImg} width={200} height={150} alt='intro' /> | ||
| </div> | ||
| <div className={styles.introMessage}> | ||
| <span>Discover Joy </span>in Every Cart – Your One-Stop Shop for Style, Savings, and Smiles! | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={styles.slideItem}></div> | ||
| <div className={styles.slideItem}></div> | ||
| <div className={clsx(styles.slideItem, styles.slideItemEnd)}> | ||
| <Link href="/products" className={styles.goButton}> | ||
| <ArrowRightIcon /> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
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,14 @@ | ||
| "use server" | ||
|
|
||
| import { getHomeProduct } from "./home.actions" | ||
| import { ProductSlide } from "./home.client" | ||
|
|
||
| export async function ServerLatestProducts() { | ||
| const products = await getHomeProduct() | ||
|
|
||
| console.log(products) | ||
|
|
||
| return ( | ||
| <ProductSlide products={products} /> | ||
| ) | ||
| } |
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,17 +1,22 @@ | ||
|
|
||
| import { PageContainer, PageTitle } from '@/components/user/utils/utils.client' | ||
| import { PageContainer, PageSubTitle, PageTitle } from '@/components/user/utils/utils.client' | ||
| import styles from './home.module.css' | ||
| import Link from 'next/link' | ||
| import { Suspense } from 'react' | ||
| import { ServerLatestProducts } from './home.server' | ||
| import { Categories, ProductSlideSkeleton, SearchBar } from './home.client' | ||
|
|
||
| export default async function Home() { | ||
| return ( | ||
| <PageContainer> | ||
| <PageTitle title='Start Shopping' /> | ||
| <div className={styles.linkContainer}> | ||
| <div className={styles.card}> | ||
| <Link className={styles.link} href="/products">Go to products</Link> | ||
| </div> | ||
| </div> | ||
| <SearchBar /> | ||
| <PageSubTitle title='Categories' /> | ||
| <Categories /> | ||
| <PageSubTitle title='Popular Products' /> | ||
| <Suspense fallback={<ProductSlideSkeleton />}> | ||
| <ServerLatestProducts /> | ||
| </Suspense> | ||
| </PageContainer> | ||
| ) | ||
| } |
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,14 +1,18 @@ | ||
| 'use server' | ||
|
|
||
| import { redirect } from "next/navigation" | ||
| import { isLogined } from "../user.actions" | ||
| import { getUser } from "../user.actions" | ||
| import { LogoutForm } from "./account.client" | ||
| import { PageTitle } from "@/components/user/utils/utils.client" | ||
|
|
||
| export async function ServerLogoutForm() { | ||
| const is = await isLogined() | ||
| if (!is) redirect('/') | ||
| const user = await getUser() | ||
| if (!user) redirect('/') | ||
|
|
||
| return ( | ||
| <LogoutForm /> | ||
| <> | ||
| <PageTitle title={`Hi ${user.name}`} /> | ||
| <LogoutForm /> | ||
| </> | ||
| ) | ||
| } |
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.