From 2ea49ef74d0eb94c2bf402f3c529a540a7f29041 Mon Sep 17 00:00:00 2001 From: maksim hodasevich <47758224+dogfrogfog@users.noreply.github.com> Date: Tue, 30 Jul 2024 19:06:31 +0200 Subject: [PATCH] simplify structure (#118) --- src/app/archive/page.tsx | 6 +++--- src/app/cart/page.tsx | 4 ++-- src/app/catalog/page.tsx | 2 +- src/app/not-found.tsx | 2 +- src/app/product/[...productParams]/page.tsx | 21 +++++-------------- src/components/layouts/CoreLayout.tsx | 10 ++++----- src/components/layouts/HeroContextLayout.tsx | 2 +- src/components/sections/AdsSection.tsx | 2 +- .../{cart => sections/Cart}/CartItemRow.tsx | 2 +- .../{cart => sections/Cart}/CartPopup.tsx | 2 +- .../Cart}/CartProductsList.tsx | 2 +- .../Cart}/ProductAmountButtons.tsx | 0 .../Cart}/TotalPrice/SelectedCurrency.tsx | 0 .../Cart}/TotalPrice/index.tsx | 0 .../{ => sections}/Filters/Category.tsx | 4 ++-- .../Filters/FilterOptionButtons.tsx | 0 .../{ => sections}/Filters/Order.tsx | 4 ++-- .../{ => sections}/Filters/Size.tsx | 4 ++-- .../{ => sections}/Filters/Sort.tsx | 2 +- .../{ => sections}/Filters/index.tsx | 0 .../Filters/useFilterQueryParams.ts | 0 .../Footer/CurrencyPopover.tsx | 0 .../{global => sections}/Footer/index.tsx | 0 .../ArchiveMediaItem.tsx | 2 +- .../ProductMediaItem.tsx | 2 +- .../FullscreenImagesCarousel}/index.tsx | 2 +- .../{global => sections}/Header/index.tsx | 2 +- .../Header/useMobileMenu.tsx | 0 src/components/sections/HeroSection.tsx | 2 +- .../MeasurementsModalContent.tsx | 2 ++ .../sections/MeasurementsModal/index.tsx | 18 ++++++++++++++++ .../ProductsGridSection/ProductItem.tsx | 2 +- .../{global => ui}/Image/ImageContainer.tsx | 0 src/components/{global => ui}/Image/index.tsx | 0 34 files changed, 55 insertions(+), 46 deletions(-) rename src/components/{cart => sections/Cart}/CartItemRow.tsx (97%) rename src/components/{cart => sections/Cart}/CartPopup.tsx (96%) rename src/components/{cart => sections/Cart}/CartProductsList.tsx (96%) rename src/components/{cart => sections/Cart}/ProductAmountButtons.tsx (100%) rename src/components/{cart => sections/Cart}/TotalPrice/SelectedCurrency.tsx (100%) rename src/components/{cart => sections/Cart}/TotalPrice/index.tsx (100%) rename src/components/{ => sections}/Filters/Category.tsx (92%) rename src/components/{ => sections}/Filters/FilterOptionButtons.tsx (100%) rename src/components/{ => sections}/Filters/Order.tsx (87%) rename src/components/{ => sections}/Filters/Size.tsx (87%) rename src/components/{ => sections}/Filters/Sort.tsx (93%) rename src/components/{ => sections}/Filters/index.tsx (100%) rename src/components/{ => sections}/Filters/useFilterQueryParams.ts (100%) rename src/components/{global => sections}/Footer/CurrencyPopover.tsx (100%) rename src/components/{global => sections}/Footer/index.tsx (100%) rename src/components/{global/MediaProvider => sections/FullscreenImagesCarousel}/ArchiveMediaItem.tsx (93%) rename src/components/{global/MediaProvider => sections/FullscreenImagesCarousel}/ProductMediaItem.tsx (94%) rename src/components/{global/MediaProvider => sections/FullscreenImagesCarousel}/index.tsx (92%) rename src/components/{global => sections}/Header/index.tsx (95%) rename src/components/{global => sections}/Header/useMobileMenu.tsx (100%) rename src/components/{product => sections/MeasurementsModal}/MeasurementsModalContent.tsx (99%) create mode 100644 src/components/sections/MeasurementsModal/index.tsx rename src/components/{global => ui}/Image/ImageContainer.tsx (100%) rename src/components/{global => ui}/Image/index.tsx (100%) diff --git a/src/app/archive/page.tsx b/src/app/archive/page.tsx index 0ed1a6b3..a6813c9b 100644 --- a/src/app/archive/page.tsx +++ b/src/app/archive/page.tsx @@ -1,8 +1,8 @@ import CoreLayout from "@/components/layouts/CoreLayout"; import { serviceClient } from "@/lib/api"; -import { MediaProvider } from "@/components/global/MediaProvider"; -import { ArchiveMediaItem } from "@/components/global/MediaProvider/ArchiveMediaItem"; +import { FullscreenImagesCarousel } from "@/components/sections/FullscreenImagesCarousel"; +import { ArchiveMediaItem } from "@/components/sections/FullscreenImagesCarousel/ArchiveMediaItem"; export default async function Page() { const { archives } = await serviceClient.GetArchivesPaged({ @@ -23,7 +23,7 @@ export default async function Page() { {/* todo: fix images. make sure all the images have known size + add scroll when there are more images */} {a.items && ( - x.archiveItem?.media!)} ItemComponent={ArchiveMediaItem} /> diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx index 73f9de49..c30bc7f1 100644 --- a/src/app/cart/page.tsx +++ b/src/app/cart/page.tsx @@ -1,11 +1,11 @@ import { Suspense } from "react"; -import CartProductsList from "@/components/cart/CartProductsList"; +import CartProductsList from "@/components/sections/Cart/CartProductsList"; import CoreLayout from "@/components/layouts/CoreLayout"; import { CartProductsSkeleton } from "@/components/ui/Skeleton"; import Button from "@/components/ui/Button"; import { ButtonStyle } from "@/components/ui/Button/styles"; import Link from "next/link"; -import TotalPrice from "@/components/cart/TotalPrice"; +import TotalPrice from "@/components/sections/Cart/TotalPrice"; import { getCookieCart } from "@/lib/utils/cart"; export const dynamic = "force-dynamic"; diff --git a/src/app/catalog/page.tsx b/src/app/catalog/page.tsx index 4f13f962..79e6fafc 100644 --- a/src/app/catalog/page.tsx +++ b/src/app/catalog/page.tsx @@ -1,5 +1,5 @@ import CatalogSection from "@/components/sections/CatalogSection"; -import Filters from "@/components/Filters"; +import Filters from "@/components/sections/Filters"; import CoreLayout from "@/components/layouts/CoreLayout"; import { CATALOG_LIMIT } from "@/constants"; import { serviceClient } from "@/lib/api"; diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index b4bdb597..23dae35c 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -1,4 +1,4 @@ -import Header from "@/components/global/Header"; +import Header from "@/components/sections/Header"; import Button from "@/components/ui/Button"; import { ButtonStyle } from "@/components/ui/Button/styles"; import Link from "next/link"; diff --git a/src/app/product/[...productParams]/page.tsx b/src/app/product/[...productParams]/page.tsx index d1cfc724..6ecb01de 100644 --- a/src/app/product/[...productParams]/page.tsx +++ b/src/app/product/[...productParams]/page.tsx @@ -1,12 +1,9 @@ import { addCartProduct } from "@/actions/cart"; import AddToCartForm from "@/components/forms/AddToCartForm"; -import { MediaProvider } from "@/components/global/MediaProvider"; -import { ProductMediaItem } from "@/components/global/MediaProvider/ProductMediaItem"; -import Modal from "@/components/ui/Modal"; +import { FullscreenImagesCarousel } from "@/components/sections/FullscreenImagesCarousel"; +import { ProductMediaItem } from "@/components/sections/FullscreenImagesCarousel/ProductMediaItem"; import CoreLayout from "@/components/layouts/CoreLayout"; -import MeasurementsModalContent from "@/components/product/MeasurementsModalContent"; -import Button from "@/components/ui/Button"; -import { ButtonStyle } from "@/components/ui/Button/styles"; +import MeasurementsModal from "@/components/sections/MeasurementsModal"; import { CURRENCY_MAP, MAX_LIMIT } from "@/constants"; import { serviceClient } from "@/lib/api"; import { notFound } from "next/navigation"; @@ -62,7 +59,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
{product?.media && (
- @@ -80,15 +77,7 @@ export default async function ProductPage({ params }: ProductPageProps) { {product?.product?.productDisplay?.productBody?.description}
- - measurements - - } - > - - +
{baseCurrencyPrice && diff --git a/src/components/layouts/CoreLayout.tsx b/src/components/layouts/CoreLayout.tsx index 562e9b02..0a57b21a 100644 --- a/src/components/layouts/CoreLayout.tsx +++ b/src/components/layouts/CoreLayout.tsx @@ -1,12 +1,12 @@ -import CartPopup from "@/components/cart/CartPopup"; -import Footer from "@/components/global/Footer"; -import Header from "@/components/global/Header"; +import CartPopup from "@/components/sections/Cart/CartPopup"; +import Footer from "@/components/sections/Footer"; +import Header from "@/components/sections/Header"; import Button from "@/components/ui/Button"; import { ButtonStyle } from "@/components/ui/Button/styles"; import Link from "next/link"; import { Suspense } from "react"; -import CartProductsList from "../cart/CartProductsList"; -import TotalPrice from "../cart/TotalPrice"; +import CartProductsList from "@/components/sections/Cart/CartProductsList"; +import TotalPrice from "@/components/sections/Cart/TotalPrice"; import { getCookieCart } from "@/lib/utils/cart"; export default function CoreLayout({ diff --git a/src/components/layouts/HeroContextLayout.tsx b/src/components/layouts/HeroContextLayout.tsx index c4518418..707c7732 100644 --- a/src/components/layouts/HeroContextLayout.tsx +++ b/src/components/layouts/HeroContextLayout.tsx @@ -1,5 +1,5 @@ import { serviceClient } from "@/lib/api"; -import { HeroContextProvider } from "../contexts/HeroContext"; +import { HeroContextProvider } from "@/components/contexts/HeroContext"; type Props = { children: React.ReactNode; diff --git a/src/components/sections/AdsSection.tsx b/src/components/sections/AdsSection.tsx index 041abd8e..e897ff7a 100644 --- a/src/components/sections/AdsSection.tsx +++ b/src/components/sections/AdsSection.tsx @@ -1,5 +1,5 @@ import { common_HeroItem } from "@/api/proto-http/frontend"; -import Image from "@/components/global/Image"; +import Image from "@/components/ui/Image"; import { calculateAspectRatio } from "@/lib/utils"; export default function AdsSection({ diff --git a/src/components/cart/CartItemRow.tsx b/src/components/sections/Cart/CartItemRow.tsx similarity index 97% rename from src/components/cart/CartItemRow.tsx rename to src/components/sections/Cart/CartItemRow.tsx index d51e59bb..6bb83124 100644 --- a/src/components/cart/CartItemRow.tsx +++ b/src/components/sections/Cart/CartItemRow.tsx @@ -1,6 +1,6 @@ import { changeCartProductQuantity, removeCartProduct } from "@/actions/cart"; import type { common_ProductFull } from "@/api/proto-http/frontend"; -import ImageComponent from "../global/Image"; +import ImageComponent from "@/components/ui/Image"; import ProductAmountButtons from "./ProductAmountButtons"; export default function CartItemRow({ diff --git a/src/components/cart/CartPopup.tsx b/src/components/sections/Cart/CartPopup.tsx similarity index 96% rename from src/components/cart/CartPopup.tsx rename to src/components/sections/Cart/CartPopup.tsx index e4657032..73e52194 100644 --- a/src/components/cart/CartPopup.tsx +++ b/src/components/sections/Cart/CartPopup.tsx @@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"; import { useClickAway } from "@uidotdev/usehooks"; import Link from "next/link"; import { useState } from "react"; -import { ButtonStyle } from "../ui/Button/styles"; +import { ButtonStyle } from "@/components/ui/Button/styles"; export default function CartPopup({ children, diff --git a/src/components/cart/CartProductsList.tsx b/src/components/sections/Cart/CartProductsList.tsx similarity index 96% rename from src/components/cart/CartProductsList.tsx rename to src/components/sections/Cart/CartProductsList.tsx index f917f804..cc8f5e63 100644 --- a/src/components/cart/CartProductsList.tsx +++ b/src/components/sections/Cart/CartProductsList.tsx @@ -1,4 +1,3 @@ -import CartItemRow from "@/components/cart/CartItemRow"; import Button from "@/components/ui/Button"; import { serviceClient } from "@/lib/api"; import { @@ -6,6 +5,7 @@ import { getCookieCart, } from "@/lib/utils/cart"; import Link from "next/link"; +import CartItemRow from "./CartItemRow"; export default async function CartProductsList() { const cartData = getCookieCart(); diff --git a/src/components/cart/ProductAmountButtons.tsx b/src/components/sections/Cart/ProductAmountButtons.tsx similarity index 100% rename from src/components/cart/ProductAmountButtons.tsx rename to src/components/sections/Cart/ProductAmountButtons.tsx diff --git a/src/components/cart/TotalPrice/SelectedCurrency.tsx b/src/components/sections/Cart/TotalPrice/SelectedCurrency.tsx similarity index 100% rename from src/components/cart/TotalPrice/SelectedCurrency.tsx rename to src/components/sections/Cart/TotalPrice/SelectedCurrency.tsx diff --git a/src/components/cart/TotalPrice/index.tsx b/src/components/sections/Cart/TotalPrice/index.tsx similarity index 100% rename from src/components/cart/TotalPrice/index.tsx rename to src/components/sections/Cart/TotalPrice/index.tsx diff --git a/src/components/Filters/Category.tsx b/src/components/sections/Filters/Category.tsx similarity index 92% rename from src/components/Filters/Category.tsx rename to src/components/sections/Filters/Category.tsx index 11bd58fa..84e1cf53 100644 --- a/src/components/Filters/Category.tsx +++ b/src/components/sections/Filters/Category.tsx @@ -1,7 +1,7 @@ "use client"; -import { useHeroContext } from "../contexts/HeroContext"; -import GenericPopover from "../ui/Popover"; +import { useHeroContext } from "@/components/contexts/HeroContext"; +import GenericPopover from "@/components/ui/Popover"; import useFilterQueryParams from "./useFilterQueryParams"; import FilterOptionButtons from "./FilterOptionButtons"; diff --git a/src/components/Filters/FilterOptionButtons.tsx b/src/components/sections/Filters/FilterOptionButtons.tsx similarity index 100% rename from src/components/Filters/FilterOptionButtons.tsx rename to src/components/sections/Filters/FilterOptionButtons.tsx diff --git a/src/components/Filters/Order.tsx b/src/components/sections/Filters/Order.tsx similarity index 87% rename from src/components/Filters/Order.tsx rename to src/components/sections/Filters/Order.tsx index 4de26ab6..76552d58 100644 --- a/src/components/Filters/Order.tsx +++ b/src/components/sections/Filters/Order.tsx @@ -1,7 +1,7 @@ "use client"; -import { useHeroContext } from "../contexts/HeroContext"; -import GenericPopover from "../ui/Popover"; +import { useHeroContext } from "@/components/contexts/HeroContext"; +import GenericPopover from "@/components/ui/Popover"; import useFilterQueryParams from "./useFilterQueryParams"; import FilterOptionButtons from "./FilterOptionButtons"; diff --git a/src/components/Filters/Size.tsx b/src/components/sections/Filters/Size.tsx similarity index 87% rename from src/components/Filters/Size.tsx rename to src/components/sections/Filters/Size.tsx index 0a2caacf..84c48acf 100644 --- a/src/components/Filters/Size.tsx +++ b/src/components/sections/Filters/Size.tsx @@ -1,6 +1,6 @@ "use client"; -import { useHeroContext } from "../contexts/HeroContext"; -import GenericPopover from "../ui/Popover"; +import { useHeroContext } from "@/components/contexts/HeroContext"; +import GenericPopover from "@/components/ui/Popover"; import useFilterQueryParams from "./useFilterQueryParams"; import FilterOptionButtons from "./FilterOptionButtons"; diff --git a/src/components/Filters/Sort.tsx b/src/components/sections/Filters/Sort.tsx similarity index 93% rename from src/components/Filters/Sort.tsx rename to src/components/sections/Filters/Sort.tsx index d6fa2c43..9f81c385 100644 --- a/src/components/Filters/Sort.tsx +++ b/src/components/sections/Filters/Sort.tsx @@ -1,7 +1,7 @@ "use client"; import GenericPopover from "@/components/ui/Popover"; -import { useHeroContext } from "../contexts/HeroContext"; +import { useHeroContext } from "@/components/contexts/HeroContext"; import useFilterQueryParams from "./useFilterQueryParams"; import FilterOptionButtons from "./FilterOptionButtons"; diff --git a/src/components/Filters/index.tsx b/src/components/sections/Filters/index.tsx similarity index 100% rename from src/components/Filters/index.tsx rename to src/components/sections/Filters/index.tsx diff --git a/src/components/Filters/useFilterQueryParams.ts b/src/components/sections/Filters/useFilterQueryParams.ts similarity index 100% rename from src/components/Filters/useFilterQueryParams.ts rename to src/components/sections/Filters/useFilterQueryParams.ts diff --git a/src/components/global/Footer/CurrencyPopover.tsx b/src/components/sections/Footer/CurrencyPopover.tsx similarity index 100% rename from src/components/global/Footer/CurrencyPopover.tsx rename to src/components/sections/Footer/CurrencyPopover.tsx diff --git a/src/components/global/Footer/index.tsx b/src/components/sections/Footer/index.tsx similarity index 100% rename from src/components/global/Footer/index.tsx rename to src/components/sections/Footer/index.tsx diff --git a/src/components/global/MediaProvider/ArchiveMediaItem.tsx b/src/components/sections/FullscreenImagesCarousel/ArchiveMediaItem.tsx similarity index 93% rename from src/components/global/MediaProvider/ArchiveMediaItem.tsx rename to src/components/sections/FullscreenImagesCarousel/ArchiveMediaItem.tsx index cdbfc3ab..b46da9c0 100644 --- a/src/components/global/MediaProvider/ArchiveMediaItem.tsx +++ b/src/components/sections/FullscreenImagesCarousel/ArchiveMediaItem.tsx @@ -1,7 +1,7 @@ "use client"; import { common_MediaFull } from "@/api/proto-http/frontend"; -import GlobalImage from "@/components/global/Image"; +import GlobalImage from "@/components/ui/Image"; import { calculateAspectRatio } from "@/lib/utils"; import { PhotoView } from "react-photo-view"; diff --git a/src/components/global/MediaProvider/ProductMediaItem.tsx b/src/components/sections/FullscreenImagesCarousel/ProductMediaItem.tsx similarity index 94% rename from src/components/global/MediaProvider/ProductMediaItem.tsx rename to src/components/sections/FullscreenImagesCarousel/ProductMediaItem.tsx index a1352650..3151e845 100644 --- a/src/components/global/MediaProvider/ProductMediaItem.tsx +++ b/src/components/sections/FullscreenImagesCarousel/ProductMediaItem.tsx @@ -1,7 +1,7 @@ "use client"; import { common_MediaFull } from "@/api/proto-http/frontend"; -import GlobalImage from "@/components/global/Image"; +import GlobalImage from "@/components/ui/Image"; import { calculateAspectRatio } from "@/lib/utils"; import { PhotoView } from "react-photo-view"; diff --git a/src/components/global/MediaProvider/index.tsx b/src/components/sections/FullscreenImagesCarousel/index.tsx similarity index 92% rename from src/components/global/MediaProvider/index.tsx rename to src/components/sections/FullscreenImagesCarousel/index.tsx index bfc04864..68ef83a5 100644 --- a/src/components/global/MediaProvider/index.tsx +++ b/src/components/sections/FullscreenImagesCarousel/index.tsx @@ -4,7 +4,7 @@ import { common_MediaFull } from "@/api/proto-http/frontend"; import { PhotoProvider } from "react-photo-view"; import "react-photo-view/dist/react-photo-view.css"; -export function MediaProvider({ +export function FullscreenImagesCarousel({ mediaList, ItemComponent, }: { diff --git a/src/components/global/Header/index.tsx b/src/components/sections/Header/index.tsx similarity index 95% rename from src/components/global/Header/index.tsx rename to src/components/sections/Header/index.tsx index 41860131..20ce1399 100644 --- a/src/components/global/Header/index.tsx +++ b/src/components/sections/Header/index.tsx @@ -1,7 +1,7 @@ "use client"; import Link from "next/link"; -import Image from "@/components/global/Image"; +import Image from "@/components/ui/Image"; import useMobileMenu from "./useMobileMenu"; import Button from "@/components/ui/Button"; diff --git a/src/components/global/Header/useMobileMenu.tsx b/src/components/sections/Header/useMobileMenu.tsx similarity index 100% rename from src/components/global/Header/useMobileMenu.tsx rename to src/components/sections/Header/useMobileMenu.tsx diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx index e90b1936..8e67a7d8 100644 --- a/src/components/sections/HeroSection.tsx +++ b/src/components/sections/HeroSection.tsx @@ -1,5 +1,5 @@ import { common_HeroItem } from "@/api/proto-http/frontend"; -import Image from "@/components/global/Image"; +import Image from "@/components/ui/Image"; export default function Hero({ media }: common_HeroItem) { if (!media) return null; diff --git a/src/components/product/MeasurementsModalContent.tsx b/src/components/sections/MeasurementsModal/MeasurementsModalContent.tsx similarity index 99% rename from src/components/product/MeasurementsModalContent.tsx rename to src/components/sections/MeasurementsModal/MeasurementsModalContent.tsx index c73193f6..880377c4 100644 --- a/src/components/product/MeasurementsModalContent.tsx +++ b/src/components/sections/MeasurementsModal/MeasurementsModalContent.tsx @@ -1,8 +1,10 @@ "use client"; + import { useLockBodyScroll } from "@uidotdev/usehooks"; export default function MeasurementsModalContent() { useLockBodyScroll(); + return (
Image placeholder
diff --git a/src/components/sections/MeasurementsModal/index.tsx b/src/components/sections/MeasurementsModal/index.tsx new file mode 100644 index 00000000..cbc54995 --- /dev/null +++ b/src/components/sections/MeasurementsModal/index.tsx @@ -0,0 +1,18 @@ +import Button from "@/components/ui/Button"; +import { ButtonStyle } from "@/components/ui/Button/styles"; +import Modal from "@/components/ui/Modal"; +import MeasurementsModalContent from "./MeasurementsModalContent"; + +export default function Component() { + return ( + + measurements + + } + > + + + ); +} diff --git a/src/components/sections/ProductsGridSection/ProductItem.tsx b/src/components/sections/ProductsGridSection/ProductItem.tsx index 05164374..fefa7168 100644 --- a/src/components/sections/ProductsGridSection/ProductItem.tsx +++ b/src/components/sections/ProductsGridSection/ProductItem.tsx @@ -1,5 +1,5 @@ import type { common_Product } from "@/api/proto-http/frontend"; -import Image from "@/components/global/Image"; +import Image from "@/components/ui/Image"; import Button from "@/components/ui/Button"; import { CURRENCY_MAP } from "@/constants"; import { cn } from "@/lib/utils"; diff --git a/src/components/global/Image/ImageContainer.tsx b/src/components/ui/Image/ImageContainer.tsx similarity index 100% rename from src/components/global/Image/ImageContainer.tsx rename to src/components/ui/Image/ImageContainer.tsx diff --git a/src/components/global/Image/index.tsx b/src/components/ui/Image/index.tsx similarity index 100% rename from src/components/global/Image/index.tsx rename to src/components/ui/Image/index.tsx