-
- - {title} -
-
-
-
-
-
-
- @ Rp. {formatCurrencyToFixed(price)} x {amount}
-
-
-
+
+ + {product?.attributes.name} +
+
+
+
+
+
+
+ {formatCurrencyToFixed(+price)} x {quantity}
+
+
+
-
- Cart Empty
-
-
-
- ) : (
- -
- {items.map((item) => {
- return (
-
+
+ Cart Empty
+
+
+
+ ) : (
+ -
+ {cartItems.map((item) => {
+ return (
+
-
-
- - Shipping detail -
- {loading.isLoading &&
+
+
+
+
+ + Cart Totals +
+ {status === 'pending' &&
-
- {totalCartItems >= 1 && (
- - Subtotal ({totalCartItems} - {totalCartItems === 1 ? ' Item' : ' Items'} ) : -
- - Rp. {formatCurrencyToFixed(totalPriceAmount)} - -
-
- )}
-
- Shipping
- - Rp. {formatCurrencyToFixed(shippingCost)} - -
-
-
- );
-};
-
-export default TotalPricesOrder;
diff --git a/src/components/Cart/TotalPricesOrder.tsx b/src/components/Cart/TotalPricesOrder.tsx
new file mode 100644
index 0000000..649a64f
--- /dev/null
+++ b/src/components/Cart/TotalPricesOrder.tsx
@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+
+import { formatCurrencyToFixed } from '@utils/formatted';
+
+interface ITotalPricesOrderProps {
+ totalCartItems: number;
+ totalPriceAmount: number;
+}
+
+export default function TotalPricesOrder({
+ totalCartItems,
+ totalPriceAmount,
+}: ITotalPricesOrderProps) {
+ return (
+ <>
+ Total
- - Rp. - {formatCurrencyToFixed( - totalPriceAmount + (totalCartItems >= 1 ? shippingCost : 0) - )} - -
+
+ + Subtotal ( + + {totalCartItems > 99 ? '99+' : totalCartItems} + + {totalCartItems === 1 ? ' Item' : ' Items'} ) : +
+ + {formatCurrencyToFixed(totalPriceAmount)} + +
+
+
+ );
+}
diff --git a/src/components/Footer/BrandFooter.tsx b/src/components/Footer/BrandFooter.tsx
new file mode 100644
index 0000000..8c90655
--- /dev/null
+++ b/src/components/Footer/BrandFooter.tsx
@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+
+import { Image } from '@components/UI';
+
+import LogoImg from '@assets/image/logo/logo-no-background.svg';
+
+export default function BrandFooter() {
+ return (
+ Total
+ + {formatCurrencyToFixed(totalPriceAmount)} + ++ You have a more input life if you wear impressive clothes. +
+
-
- - Category -
--
- {categories.map((category) => {
- return (
-
- - - {category} - - - ); - })} -
-
- - Menu -
--
-
- - - Home - - -
- - - Shop - - - {isAuth && ( -
- - - My Account - - - )} - {isAuth ? ( -
- - unAuth(true, 'Logout Successfully')} - > - Logout - - - ) : ( -
- - - Login - - - )} -
+
+ + Category +
+-
+ {categories?.data.map((category) => {
+ return (
+
- + + {category?.attributes.name} + + + ); + })} +
+
+ + Menu +
+-
+
- + + Home + + +
- + + Shop + + + {isAuthenticated && ( +
- + + My Account + + + )} + {isAuthenticated ? ( +
- + + Logout + + + ) : ( +
- + + Login + + + )} +
- NewsLetter -
-Join our newsletter
- -+ NewsLetter +
++ Join our newsletter +
+ +-
-
-
-
-
- Instagram - -
- -
-
-
- Facebook - -
-
- Privacy Policy
- Term & Conditions
-
-
- urban fashion © {new Date().getFullYear()}
-
- -
+
-
+
+
+ Instagram + +
+ -
+
+
+ Facebook + +
+
+ Privacy Policy
+ Term & Conditions
+
+
+ urban fashion © {new Date().getFullYear()}
+
+ -
- {bestSellers.map((product) => {
- return (
-
- BestSellers -
- {loading.isLoading && ( -- {loading.loadingMessage} -
- )} - {error.isError && ( -- {error.errorMessage} -
- )} - {!loading.isLoading && !error.isError && bestSellersContent} --
+ {products?.data.slice(0, 4).map((product) => {
+ return (
+
+ BestSellers +
+ {status === 'pending' &&+ {errorMessage} +
+ )} + {status === 'fulfilled' && bestSellersContent} +
-
-
-
- Fashion
-
-
-
- Fashion
Products
-
- - Fashion is part of the daily air and it changes all the time, with - all the events. You can even see the approaching of a revolution in - clothes. You can see and feel everything in clothes. -
-
+
+
+
+ Fashion
+
+
+
+ Fashion
Products
+
+ + Fashion is part of the daily air and it changes all the time, with + all the events. You can even see the approaching of a revolution in + clothes. You can see and feel everything in clothes. +
+
+
{heroImage.map((image, index) => (
);
-};
-
-export default Hero;
+}
diff --git a/src/components/Home/OurPhilosophy.jsx b/src/components/Home/OurPhilosophy.jsx
deleted file mode 100644
index 9e5efc4..0000000
--- a/src/components/Home/OurPhilosophy.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { Image } from 'components/UI';
-
-import philosophyImage from 'assets/image/philosophy-image.webp';
-
-const OurPhilosophy = () => {
- return (
-
-
- );
-};
-
-export default OurPhilosophy;
diff --git a/src/components/Home/OurPhilosophy.tsx b/src/components/Home/OurPhilosophy.tsx
new file mode 100644
index 0000000..c765aee
--- /dev/null
+++ b/src/components/Home/OurPhilosophy.tsx
@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+
+import { Image } from '@components/UI';
+
+import philosophyImage from '@assets/image/philosophy-image.webp';
+
+export default function OurPhilosophy() {
+ return (
+
+
+ );
+}
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
deleted file mode 100644
index eef0e9c..0000000
--- a/src/components/Layout/Layout.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-
-import Navigation from 'components/Navigation/Navigation';
-import Footer from 'components/Footer/Footer';
-import { ScrollTop } from 'components/UI';
-
-const Layout = () => {
- return (
- <>
-
-
-
-
-
-
+
+
+
+
+
- {loading.isLoading ? (
-
- );
-};
-
-export default AccountDetails;
diff --git a/src/components/MyAccount/AccountDetails.tsx b/src/components/MyAccount/AccountDetails.tsx
new file mode 100644
index 0000000..f92e03a
--- /dev/null
+++ b/src/components/MyAccount/AccountDetails.tsx
@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+
+import Loading from '@components/UI/Loading';
+
+import { useAppSelector } from '@hooks/useReduxT';
+
+import { IUser } from 'types/types';
+
+interface IAccountDetailsProps extends IUser {}
+
+export default function AccountDetails({ user }: IAccountDetailsProps) {
+ const { status } = useAppSelector((state) => state.auth);
+
+ return (
+
+ {status === 'pending' &&
+ );
+}
diff --git a/src/components/Navigation/DropdownNav.jsx b/src/components/Navigation/DropdownNav.jsx
deleted file mode 100644
index 76f25f0..0000000
--- a/src/components/Navigation/DropdownNav.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import { Dropdown, Avatar } from 'flowbite-react';
-
-import { useAuth, useWish } from 'hooks/useStoreContext';
-
-import avatarImage from 'assets/image/avatar.webp';
-
-const DropdownNav = ({ onCloseMenu, className }) => {
- const { unAuth } = useAuth();
- const { wishListItems } = useWish();
-
- return (
-
-
- );
-};
-
-export default AddToCartModal;
diff --git a/src/components/ProductDetails/AddToCartModal.tsx b/src/components/ProductDetails/AddToCartModal.tsx
new file mode 100644
index 0000000..8048523
--- /dev/null
+++ b/src/components/ProductDetails/AddToCartModal.tsx
@@ -0,0 +1,59 @@
+import clsx from 'clsx';
+import { MdClose } from 'react-icons/md';
+import { useNavigate } from 'react-router-dom';
+
+import { Image, Modal } from '@components/UI';
+
+import { IProductData } from 'types/types';
+
+interface IAddToCartModalProps extends IProductData {
+ onCloseModalHandler: () => void;
+}
+
+export default function AddToCartModal({
+ data,
+ onCloseModalHandler,
+}: IAddToCartModalProps) {
+ const navigate = useNavigate();
+
+ const toCartHandler = () => navigate('/cart');
+
+ return (
+
+
+ );
+}
diff --git a/src/components/ProductDetails/OtherProduct.jsx b/src/components/ProductDetails/OtherProduct.jsx
deleted file mode 100644
index 4e5fc59..0000000
--- a/src/components/ProductDetails/OtherProduct.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import ProductItem from 'components/Shop/ProductItem';
-import useAxios from 'hooks/useAxios';
-
-const OtherProduct = () => {
- const [otherProduct, setOtherProduct] = useState([]);
- const { requestHttp, loading, error } = useAxios();
-
- useEffect(() => {
- requestHttp(
- {
- method: 'GET',
- url: `products?limit=4`,
- },
- (data) => setOtherProduct(data)
- );
- }, [requestHttp]);
-
- const otherProductContent = (
-
-
- );
-};
-
-export default OtherProduct;
diff --git a/src/components/ProductDetails/OtherProduct.tsx b/src/components/ProductDetails/OtherProduct.tsx
new file mode 100644
index 0000000..becd17d
--- /dev/null
+++ b/src/components/ProductDetails/OtherProduct.tsx
@@ -0,0 +1,66 @@
+import clsx from 'clsx';
+import { useParams } from 'react-router-dom';
+
+import ProductItem from '@components/Shop/ProductItem';
+import Loading from '@components/UI/Loading';
+
+import { useAppSelector } from '@hooks/useReduxT';
+
+export default function OtherProduct() {
+ const { productId } = useParams();
+
+ const { products, product, status, errorMessage } = useAppSelector(
+ (state) => state.products
+ );
+
+ const otherProductContent = (
+
+
+ );
+}
diff --git a/src/components/ProductDetails/ProductDetail.jsx b/src/components/ProductDetails/ProductDetail.jsx
deleted file mode 100644
index ef39121..0000000
--- a/src/components/ProductDetails/ProductDetail.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-
-import { Button, Image, Input } from 'components/UI';
-import { formatCurrency } from 'utils/formatCurrency';
-
-import { MdFavoriteBorder, MdFavorite, MdOutlineStar } from 'react-icons/md';
-
-const ProductDetail = ({
- title,
- rating,
- image,
- price,
- category,
- description,
- amount,
- onDecreaseAmount,
- onIncreaseAmount,
- onAddToCart,
- isOnWishList,
- onIsOnWishlist,
- setAmount,
-}) => {
- return (
-
-
- );
-};
-
-export default ProductDetail;
diff --git a/src/components/ProductDetails/ProductDetail.tsx b/src/components/ProductDetails/ProductDetail.tsx
new file mode 100644
index 0000000..7b0c0bf
--- /dev/null
+++ b/src/components/ProductDetails/ProductDetail.tsx
@@ -0,0 +1,160 @@
+import clsx from 'clsx';
+import { Carousel } from 'flowbite-react';
+import { MdFavorite, MdFavoriteBorder, MdOutlineStar } from 'react-icons/md';
+
+import { Image } from '@components/UI';
+
+import { formatCurrencyToFixed } from '@utils/formatted';
+
+import { IProductData } from 'types/types';
+
+interface IProductDetailProps extends IProductData {
+ quantity: number;
+ onDecreaseQuantity: () => void;
+ onIncreaseQuantity: () => void;
+ onAddToCart: () => void;
+ isOnWishList: boolean;
+ onIsOnWishlist: () => void;
+}
+
+export default function ProductDetail({
+ data,
+ quantity,
+ onIncreaseQuantity,
+ onDecreaseQuantity,
+ onAddToCart,
+ isOnWishList,
+ onIsOnWishlist,
+}: IProductDetailProps) {
+ return (
+
+
+ {data?.attributes.image.data.map((img) => (
+
+
+ );
+}
diff --git a/src/components/ProductDetails/Review.jsx b/src/components/ProductDetails/Review.jsx
deleted file mode 100644
index 95eb9cb..0000000
--- a/src/components/ProductDetails/Review.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-import ReviewList from './ReviewList';
-import { Button, Rating } from 'components/UI';
-
-const Review = () => {
- const [isReviewShow, setIsReviewShow] = useState(false);
- const [reviewData, setReviewData] = useState([]);
- const [rating, setRating] = useState(0);
-
- const inputRef = useRef();
-
- const showReviewInputHandler = () => {
- return setIsReviewShow((prevState) => !prevState);
- };
-
- const starsRatingHandler = (value) => setRating(value);
-
- const reviewSubmitHandler = (event) => {
- event.preventDefault();
- const reviewInput = inputRef.current.value;
-
- if (reviewInput.length === 0) {
- return;
- }
-
- const reviewMessage = {
- id: Date.now(),
- message: reviewInput,
- rating: rating,
- date: new Date().toLocaleString(),
- };
-
- setReviewData((prevState) => [...prevState, reviewMessage]);
-
- event.target.reset();
- setIsReviewShow(false);
- };
-
- const reviewList =
- reviewData.length === 0 ? (
-
-
- );
-};
-
-export default Review;
diff --git a/src/components/ProductDetails/Review.tsx b/src/components/ProductDetails/Review.tsx
new file mode 100644
index 0000000..f1a1124
--- /dev/null
+++ b/src/components/ProductDetails/Review.tsx
@@ -0,0 +1,111 @@
+import clsx from 'clsx';
+import { useRef, useState } from 'react';
+
+import { Rating } from '@components/UI';
+
+// import { useAppSelector } from '@hooks/useReduxT';
+// import ReviewList from './ReviewList';
+
+export default function Review() {
+ const [isReviewShow, setIsReviewShow] = useState(false);
+ // const [reviewData, setReviewData] = useState([]);
+ // const [rating, setRating] = useState(0);
+
+ const inputRef = useRef(null);
+
+ // const { isAuthenticated } = useAppSelector((state) => state.auth);
+
+ // const showReviewInputHandler = () => {
+ // return setIsReviewShow((prevState) => !prevState);
+ // };
+
+ // const starsRatingHandler = (value: number) => setRating(value);
+
+ const reviewSubmitHandler = (
+ event: React.SyntheticEvent
+ ) => {
+ event.preventDefault();
+ const reviewInput = inputRef.current?.value;
+
+ if (reviewInput?.length === 0) {
+ return;
+ }
+
+ // const reviewMessage = {
+ // id: Date.now(),
+ // message: revIewinput,
+ // rating: rating,
+ // date: new Date().toLocaleString(),
+ // };
+
+ // setReviewData((prevState) => [...prevState, reviewMessage]);
+
+ // event.target.reset();
+ setIsReviewShow(false);
+ };
+
+ const reviewList =
+ [].length === 0 ? (
+
+
+ );
+}
diff --git a/src/components/ProductDetails/ReviewList.jsx b/src/components/ProductDetails/ReviewList.jsx
deleted file mode 100644
index 55cfc1b..0000000
--- a/src/components/ProductDetails/ReviewList.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { MdOutlineStar } from 'react-icons/md';
-
-const ReviewList = ({ reviewData }) => {
- return (
-
+ ) => {
+ onFilteredProductValue(event.target.value);
+ };
+
+ return (
+
+ );
+}
diff --git a/src/components/Shop/ProductItem.jsx b/src/components/Shop/ProductItem.jsx
deleted file mode 100644
index cbbe67a..0000000
--- a/src/components/Shop/ProductItem.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import { Figure } from 'components/UI';
-
-const ProductItem = ({ product, linkTo }) => {
- return (
-
-
-
- );
-};
-
-export default ProductItem;
diff --git a/src/components/Shop/ProductItem.tsx b/src/components/Shop/ProductItem.tsx
new file mode 100644
index 0000000..4e3b8a2
--- /dev/null
+++ b/src/components/Shop/ProductItem.tsx
@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+
+import { Figure } from '@components/UI';
+
+import { IProduct } from 'types/types';
+
+interface IProductItemProps {
+ product: IProduct;
+ linkTo: string;
+}
+
+export default function ProductItem({ product, linkTo }: IProductItemProps) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/Shop/ProductList.jsx b/src/components/Shop/ProductList.jsx
deleted file mode 100644
index 74bb160..0000000
--- a/src/components/Shop/ProductList.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-
-import ProductItem from './ProductItem';
-import SortProduct from './SortProduct';
-import useAxios from 'hooks/useAxios';
-
-const sortProductsByPrice = (products, ascending) => {
- return products.sort((productA, productB) => {
- const { price: priceA } = productA;
- const { price: priceB } = productB;
- if (ascending) {
- return priceA - priceB;
- } else {
- return priceB - priceA;
- }
- });
-};
-
-const ProductList = () => {
- const [allProducts, setAllProducts] = useState([]);
-
- const { requestHttp, loading, error } = useAxios();
-
- const navigate = useNavigate();
- const location = useLocation();
-
- const filteredProduct = allProducts.filter((product) => {
- return product.category !== 'electronics';
- });
-
- const queryParams = new URLSearchParams(location.search);
-
- const isSortedProductList = queryParams.get('sort') === 'low-to-high';
-
- const sortedQuotes = sortProductsByPrice(
- filteredProduct,
- isSortedProductList
- );
-
- useEffect(() => {
- window.scrollTo({ top: 0, behavior: 'smooth' });
- requestHttp(
- {
- method: 'GET',
- url: 'products',
- },
- (data) => setAllProducts(data)
- );
- }, [requestHttp]);
-
- const productContent = (
-
-
- );
-};
-
-export default ProductList;
diff --git a/src/components/Shop/ProductList.tsx b/src/components/Shop/ProductList.tsx
new file mode 100644
index 0000000..43df982
--- /dev/null
+++ b/src/components/Shop/ProductList.tsx
@@ -0,0 +1,93 @@
+import clsx from 'clsx';
+import { useMemo, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import Loading from '@components/UI/Loading';
+
+import { useAppSelector } from '@hooks/useReduxT';
+
+import FilterProduct from './FilterProduct';
+import ProductItem from './ProductItem';
+import SortProduct from './SortProduct';
+
+export default function ProductList() {
+ const [filterValue, setFilterValue] = useState('all');
+ const { products, status, errorMessage } = useAppSelector(
+ (state) => state.products
+ );
+
+ const navigate = useNavigate();
+ const location = useLocation();
+ const queryParams = new URLSearchParams(location.search);
+
+ const isSortedProductList = queryParams.get('sort') === 'low-to-high';
+
+ const sortProductsByPrice = useMemo(() => {
+ const sortedProducts = products?.data
+ ?.slice()
+ ?.sort((productA, productB) => {
+ const { price: priceA } = productA.attributes;
+ const { price: priceB } = productB.attributes;
+ return isSortedProductList ? +priceA - +priceB : +priceB - +priceA;
+ });
+ return sortedProducts;
+ }, [isSortedProductList, products?.data]);
+
+ const FilterProductHandler = useMemo(() => {
+ if (filterValue === 'all') return sortProductsByPrice;
+ const filteredProducts = sortProductsByPrice?.filter(
+ (product) =>
+ product?.attributes.categories.data[0].attributes.name === filterValue
+ );
+ return filteredProducts;
+ }, [filterValue, sortProductsByPrice]);
+
+ const productContent = (
+
+
+ );
+}
diff --git a/src/components/Shop/SortProduct.jsx b/src/components/Shop/SortProduct.jsx
deleted file mode 100644
index b017dec..0000000
--- a/src/components/Shop/SortProduct.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-
-const SortProduct = ({ onNavigate, onSortedProduct }) => {
- const [sortProduct, setSortProduct] = useState('');
-
- const sortProductHandler = (event) => {
- setSortProduct(event.target.value);
- onNavigate({
- search: `?sort=${onSortedProduct ? 'high-to-low' : 'low-to-high'}`,
- });
- };
-
- return (
-
- );
-};
-
-export default SortProduct;
diff --git a/src/components/Shop/SortProduct.tsx b/src/components/Shop/SortProduct.tsx
new file mode 100644
index 0000000..7f0720b
--- /dev/null
+++ b/src/components/Shop/SortProduct.tsx
@@ -0,0 +1,59 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import { NavigateFunction } from 'react-router-dom';
+
+interface ISortProductProps {
+ onNavigate: NavigateFunction;
+ onSortedProduct: boolean;
+}
+
+export default function SortProduct({
+ onNavigate,
+ onSortedProduct,
+}: ISortProductProps) {
+ const [sortProduct, setSortProduct] = useState('');
+
+ const sortProductHandler = (event: React.ChangeEvent) => {
+ setSortProduct(event.target.value);
+ onNavigate({
+ search: `?sort=${onSortedProduct ? 'high-to-low' : 'low-to-high'}`,
+ });
+ };
+
+ return (
+
+ );
+}
diff --git a/src/components/UI/Button/index.jsx b/src/components/UI/Button/index.jsx
deleted file mode 100644
index b078e56..0000000
--- a/src/components/UI/Button/index.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-
-export const Button = ({
- children,
- className,
- type,
- onClick,
- onDoubleClick,
- onMouseEnter,
- onMouseLeave,
- disabled,
-}) => {
- return (
-
- );
-};
diff --git a/src/components/UI/Figure/index.jsx b/src/components/UI/Figure/index.jsx
deleted file mode 100644
index 5d142c8..0000000
--- a/src/components/UI/Figure/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { Image } from '../Image';
-import { formatCurrency } from 'utils/formatCurrency';
-
-export const Figure = ({ image, title, price, id, classImage }) => {
- return (
-
-
- {title}
-
-
- Rp {formatCurrency(price)}
-
-
- );
-};
diff --git a/src/components/UI/Figure/index.tsx b/src/components/UI/Figure/index.tsx
new file mode 100644
index 0000000..385f770
--- /dev/null
+++ b/src/components/UI/Figure/index.tsx
@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+
+import { formatCurrencyToFixed } from '@utils/formatted';
+
+import { Image } from '..';
+
+import { IProduct } from 'types/types';
+
+interface IFigureProps {
+ classImage?: string;
+ product: IProduct;
+}
+
+export function Figure({ product, classImage }: IFigureProps) {
+ return (
+
+
+ {product.attributes?.name}
+
+
+ {formatCurrencyToFixed(+product.attributes?.price)}
+
+
+ );
+}
diff --git a/src/components/UI/Image/index.jsx b/src/components/UI/Image/index.jsx
deleted file mode 100644
index 3b75b74..0000000
--- a/src/components/UI/Image/index.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export const Image = ({ src, alt, className }) => {
- return 
;
-};
diff --git a/src/components/UI/Image/index.tsx b/src/components/UI/Image/index.tsx
new file mode 100644
index 0000000..2bab7e0
--- /dev/null
+++ b/src/components/UI/Image/index.tsx
@@ -0,0 +1,8 @@
+type TImageProps = React.DetailedHTMLProps<
+ React.ImgHTMLAttributes,
+ HTMLImageElement
+>;
+
+export function Image({ ...props }: TImageProps) {
+ return ![]()
;
+}
diff --git a/src/components/UI/Input/index.jsx b/src/components/UI/Input/index.jsx
deleted file mode 100644
index b11cb60..0000000
--- a/src/components/UI/Input/index.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { forwardRef } from 'react';
-
-export const Input = forwardRef(
- (
- {
- type,
- id,
- className,
- name,
- placeholder,
- value,
- onChange,
- onFocus,
- onBlur,
- autoComplete,
- required,
- readOnly,
- },
- ref
- ) => {
- return (
-
- );
- }
-);
diff --git a/src/components/UI/Input/index.tsx b/src/components/UI/Input/index.tsx
new file mode 100644
index 0000000..d480e37
--- /dev/null
+++ b/src/components/UI/Input/index.tsx
@@ -0,0 +1,103 @@
+import clsx from 'clsx';
+import {
+ DetailedHTMLProps,
+ forwardRef,
+ InputHTMLAttributes,
+ LegacyRef,
+} from 'react';
+import { MdOutlineRemoveRedEye, MdRemoveRedEye } from 'react-icons/md';
+
+type RefType = HTMLInputElement | HTMLTextAreaElement;
+
+interface IInputFormProps
+ extends DetailedHTMLProps, RefType> {
+ title: string;
+ isTextArea?: boolean;
+ isPassword?: boolean;
+ isPassView?: boolean;
+ onViewPasswordHandler?: () => void;
+ className?: string;
+ errors?: React.ReactNode;
+}
+
+const Input = forwardRef(
+ (
+ {
+ title,
+ isTextArea,
+ isPassword,
+ isPassView,
+ onViewPasswordHandler,
+ className,
+ errors,
+ ...props
+ }: IInputFormProps,
+ ref
+ ) => {
+ let inputContent = (
+ }
+ className={clsx(
+ className,
+ 'w-full rounded border-2 bg-white-bone p-2 font-medium outline-none',
+ 'dark:bg-dark-brown dark:text-white-bone dark:placeholder:text-white-bone',
+ 'placeholder:text-sm focus:ring-0'
+ )}
+ />
+ );
+
+ if (isTextArea) {
+ inputContent = (
+
+ );
+ }
+ return (
+
- {children}
-
- );
-};
-
-export const Modal = ({ children, onCloseModalHandler }) => {
- return (
- <>
- {createPortal(
- {children} ,
- document.getElementById('modal-card')
- )}
-
- );
-};
diff --git a/src/components/UI/Modal/index.tsx b/src/components/UI/Modal/index.tsx
new file mode 100644
index 0000000..2254d36
--- /dev/null
+++ b/src/components/UI/Modal/index.tsx
@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { createPortal } from 'react-dom';
+
+interface IModalBackdropProps {
+ onCloseModalHandler: () => void;
+}
+
+interface IModalCardProps {
+ children: React.ReactNode;
+}
+
+type TModalProps = IModalBackdropProps & IModalCardProps;
+
+function ModalBackdrop({ onCloseModalHandler }: IModalBackdropProps) {
+ return (
+
+ );
+}
+
+function ModalCard({ children }: IModalCardProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export const Modal = ({ children, onCloseModalHandler }: TModalProps) => {
+ return (
+ <>
+ {createPortal(
+ {children} ,
+ document.getElementById('modal-card')!
+ )}
+
+ );
+};
diff --git a/src/components/UI/Rating/index.jsx b/src/components/UI/Rating/index.jsx
deleted file mode 100644
index e0b3fcc..0000000
--- a/src/components/UI/Rating/index.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useState } from 'react';
-
-import { Button } from '..';
-
-import { MdOutlineStar } from 'react-icons/md';
-
-export const Rating = ({ onRating }) => {
- const [rating, setRating] = useState(0);
- const [hover, setHover] = useState(0);
-
- const mouseEnterHandler = (index) => setHover(index);
- const mouseLeaveHandler = (rating) => setHover(rating);
- const resetRatingHandler = () => {
- setHover(0);
- setRating(0);
- };
-
- const ratingHandler = (index) => {
- setRating(index);
- onRating(index);
- };
-
- return (
- >;
+// value?: any;
+// onChange?: (_newValue: any, _actionMeta: ActionMeta) => void;
+// className: string;
+// placeholder: string;
+// name: string;
+// }
+
+// export function SelectItems({
+// options,
+// value,
+// onChange,
+// className,
+// placeholder,
+// name,
+// }: ISelectItemsProps) {
+// const colourStyles: StylesConfig> | undefined = {
+// menuList: (styles) => ({
+// ...styles,
+// background: '#E6E1DC',
+// }),
+// option: (styles, { isFocused, isSelected }) => ({
+// ...styles,
+// color: isFocused || isSelected ? '#E6E1DC' : undefined,
+// background: isFocused || isSelected ? '#3F362F' : undefined,
+// zIndex: 1,
+// }),
+// menu: (base) => ({
+// ...base,
+// zIndex: 100,
+// }),
+// control: (base, state) => ({
+// ...base,
+// background: '#E6E1DC',
+// borderRadius: state.isFocused ? '3px 3px 0 0' : 3,
+// // boxShadow: state.isFocused || undefined,
+// }),
+// };
+
+// return (
+//
+// );
+// }
diff --git a/src/components/UI/Toast/index.jsx b/src/components/UI/Toast/index.jsx
deleted file mode 100644
index 167708c..0000000
--- a/src/components/UI/Toast/index.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { useEffect } from 'react';
-import { Toast as ToastAlert } from 'flowbite-react';
-import { MdCheckCircleOutline, MdErrorOutline } from 'react-icons/md';
-
-export const Toast = ({
- children,
- icons,
- onSuccess,
- onSetSuccess,
- onError,
- onSetError,
-}) => {
- useEffect(() => {
- if (onError) {
- const errorTime = setTimeout(() => {
- onSetError({
- isError: false,
- errorMessage: '',
- });
- }, 1500);
- return () => {
- clearTimeout(errorTime);
- };
- }
- if (onSuccess) {
- const successTime = setTimeout(() => {
- onSetSuccess({
- isSuccess: false,
- successMessage: '',
- });
- }, 1500);
- return () => {
- clearTimeout(successTime);
- };
- }
- }, [onError, onSetError, onSuccess, onSetSuccess]);
-
- return (
-
-
- );
-};
diff --git a/src/components/UI/index.jsx b/src/components/UI/index.jsx
deleted file mode 100644
index 40d2e7b..0000000
--- a/src/components/UI/index.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export { Button } from './Button';
-export { Figure } from './Figure';
-export { Image } from './Image';
-export { Input } from './Input';
-export { LoginRegisterInput } from './LoginRegisterInput';
-export { Modal } from './Modal';
-export { Rating } from './Rating';
-export { ScrollTop } from './ScrollTop';
-export { SelectItems } from './SelectItems';
-export { Toast } from './Toast';
diff --git a/src/components/UI/index.tsx b/src/components/UI/index.tsx
new file mode 100644
index 0000000..e536bba
--- /dev/null
+++ b/src/components/UI/index.tsx
@@ -0,0 +1,6 @@
+export { Figure } from './Figure';
+export { Image } from './Image';
+export { Modal } from './Modal';
+export { Rating } from './Rating';
+export { ScrollTop } from './ScrollTop';
+// export { SelectItems } from './SelectItems';
diff --git a/src/components/UI/svg/Avatar.tsx b/src/components/UI/svg/Avatar.tsx
new file mode 100644
index 0000000..7b31ce6
--- /dev/null
+++ b/src/components/UI/svg/Avatar.tsx
@@ -0,0 +1,14 @@
+import { SVGProps } from 'react';
+export default function Avatar({ ...props }: SVGProps) {
+ return (
+
+ );
+}
diff --git a/src/components/UI/svg/Logo.tsx b/src/components/UI/svg/Logo.tsx
new file mode 100644
index 0000000..71eedec
--- /dev/null
+++ b/src/components/UI/svg/Logo.tsx
@@ -0,0 +1,103 @@
+import { SVGProps } from 'react';
+
+export default function Logo({ ...props }: SVGProps) {
+ return (
+
+ );
+}
diff --git a/src/components/Wishlist/Wishlist.jsx b/src/components/Wishlist/Wishlist.jsx
deleted file mode 100644
index 3227502..0000000
--- a/src/components/Wishlist/Wishlist.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import ProductItem from 'components/Shop/ProductItem';
-import { useWish } from '../../hooks/useStoreContext';
-import { Button } from 'components/UI';
-
-const Wishlist = () => {
- const { wishListItems } = useWish();
- const navigate = useNavigate();
-
- const gotoShopHandler = () => {
- navigate('/shop');
- };
-
- return (
- <>
-
-
-
- {wishListItems.length < 1 ? (
-
-
- );
-};
-
-export default Wishlist;
diff --git a/src/components/Wishlist/Wishlist.tsx b/src/components/Wishlist/Wishlist.tsx
new file mode 100644
index 0000000..df3f068
--- /dev/null
+++ b/src/components/Wishlist/Wishlist.tsx
@@ -0,0 +1,83 @@
+import clsx from 'clsx';
+import { useNavigate } from 'react-router-dom';
+
+import ProductItem from '@components/Shop/ProductItem';
+
+import { useAppSelector } from '@hooks/useReduxT';
+
+const Wishlist = () => {
+ const navigate = useNavigate();
+
+ const { wishlist } = useAppSelector((state) => state.wishlist);
+
+ const gotoShopHandler = () => {
+ navigate('/shop');
+ };
+
+ return (
+ <>
+
+
+
+ {wishlist?.length < 1 ? (
+
+
+ );
+};
+
+export default Wishlist;
diff --git a/src/context/AuthProvider.jsx b/src/context/AuthProvider.jsx
deleted file mode 100644
index 266eff6..0000000
--- a/src/context/AuthProvider.jsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, {
- useReducer,
- useEffect,
- useState,
- useCallback,
- useMemo,
-} from 'react';
-import jwt from 'jwt-decode';
-import { AuthContext } from './Context';
-
-const calculateAutoLogoutTime = (expireDate) => {
- const currentTimeInMilliseconds = new Date().getTime();
- const expireTimeInMilliseconds = new Date(expireDate).getTime();
-
- const remainingAutoLogoutTime =
- expireTimeInMilliseconds - currentTimeInMilliseconds;
-
- return remainingAutoLogoutTime;
-};
-
-const getStorageItems = () => {
- const authToken = localStorage.getItem('auth_token');
- const expireToken = localStorage.getItem('exp_token');
-
- const remainingTime = calculateAutoLogoutTime(expireToken);
-
- if (remainingTime <= 5000) {
- localStorage.removeItem('auth_token');
- localStorage.removeItem('exp_token');
- return null;
- }
- return {
- authToken,
- remainingTime,
- };
-};
-
-const authReducer = (state, action) => {
- switch (action.type) {
- case 'AUTH':
- return {
- isAuth: true,
- auth_token: action.payload,
- };
-
- case 'UN-AUTH':
- return {
- isAuth: false,
- auth_token: null,
- };
-
- default: {
- const localStorageToken = getStorageItems();
- return {
- isAuth: !!localStorageToken.authToken,
- auth_token: localStorageToken.authToken,
- };
- }
- }
-};
-
-let logoutTimer;
-
-const AuthProvider = ({ children }) => {
- const storageData = getStorageItems();
- let localStorageToken;
- if (storageData) localStorageToken = storageData.authToken;
- const [authState, dispatch] = useReducer(authReducer, {
- isAuth: !!localStorageToken,
- auth_token: localStorageToken,
- });
-
- const [authSuccess, setAuthSuccess] = useState({
- isSuccess: false,
- successMessage: '',
- });
-
- const [unAuthSuccess, setUnAuthSuccess] = useState({
- isSuccess: false,
- successMessage: '',
- });
-
- const unAuthHandler = useCallback((isUnAuth, successMessage) => {
- localStorage.removeItem('auth_token');
- localStorage.removeItem('exp_token');
- localStorage.removeItem('decode');
- dispatch({ type: 'UN-AUTH' });
- if (isUnAuth) {
- setUnAuthSuccess({
- isSuccess: isUnAuth,
- successMessage,
- });
- }
-
- if (logoutTimer) clearTimeout(logoutTimer);
- }, []);
-
- const authHandler = (token, successMessage, expireAuth) => {
- localStorage.setItem('auth_token', token);
- localStorage.setItem('decode', JSON.stringify(jwt(token)));
- localStorage.setItem('exp_token', expireAuth);
- dispatch({ type: 'AUTH', payload: token });
- setAuthSuccess({
- isSuccess: !!token,
- successMessage: successMessage,
- });
-
- const autoLogout = calculateAutoLogoutTime(expireAuth);
- logoutTimer = setTimeout(unAuthHandler, autoLogout);
- };
-
- useEffect(() => {
- if (storageData) {
- logoutTimer = setTimeout(unAuthHandler, storageData.remainingTime);
- }
- }, [unAuthHandler, storageData]);
-
- const value = useMemo(() => {
- return {
- authSuccess,
- setAuthSuccess,
- unAuthSuccess,
- setUnAuthSuccess,
- isAuth: authState.isAuth,
- auth: authHandler,
- unAuth: unAuthHandler,
- };
- }, [
- authSuccess,
- unAuthSuccess,
- authState.isAuth,
- authHandler,
- unAuthHandler,
- ]);
-
- return {children} ;
-};
-
-export default AuthProvider;
diff --git a/src/context/CartProvider.jsx b/src/context/CartProvider.jsx
deleted file mode 100644
index 2a950fd..0000000
--- a/src/context/CartProvider.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useMemo, useReducer } from 'react';
-import { CartContext } from './Context';
-
-const initCart = {
- items: [],
- totalPriceAmount: 0,
-};
-
-const cartReducer = (state, action) => {
- const existingItem = (state, action) => {
- const existingItemIndex = state.items.findIndex(
- (item) => item.id === action
- );
-
- const existingItem = state.items[existingItemIndex];
-
- return {
- existingItemIndex,
- existingItem,
- };
- };
-
- switch (action.type) {
- case 'ADD_ITEM': {
- const {
- existingItemIndex: existingCartItemIndex,
- existingItem: existingCartItem,
- } = existingItem(state, action.payload.id);
-
- const updatedTotalPrice =
- state.totalPriceAmount + action.payload.price * action.payload.amount;
-
- let updatedItems;
-
- if (existingCartItem) {
- const updatedItem = {
- ...existingCartItem,
- amount: existingCartItem.amount + action.payload.amount,
- };
-
- updatedItems = [...state.items];
- updatedItems[existingCartItemIndex] = updatedItem;
- } else {
- updatedItems = state.items.concat(action.payload);
- }
-
- return {
- items: updatedItems,
- totalPriceAmount: updatedTotalPrice,
- };
- }
-
- case 'DECREASE_ITEM': {
- const {
- existingItemIndex: existingRemoveItemsIndex,
- existingItem: existingItems,
- } = existingItem(state, action.payload);
- const removedTotalPriceAmount =
- state.totalPriceAmount - existingItems.price;
- const removedTotalPriceAmountToFixed =
- +removedTotalPriceAmount.toFixed(2);
-
- let removedItems;
-
- let removedItem = {
- ...existingItems,
- amount: existingItems.amount - 1,
- };
- removedItems = [...state.items];
- removedItems[existingRemoveItemsIndex] = removedItem;
-
- return {
- items: removedItems,
- totalPriceAmount: removedTotalPriceAmountToFixed,
- };
- }
-
- case 'DELETE_ITEM': {
- const { existingItem: existingDeleteItem } = existingItem(
- state,
- action.payload
- );
-
- const deleteTotalPriceAmount =
- state.totalPriceAmount -
- existingDeleteItem.price * existingDeleteItem.amount;
-
- const deleteItems = state.items.filter(
- (item) => item.id !== action.payload
- );
-
- return {
- items: deleteItems,
- totalPriceAmount: deleteTotalPriceAmount,
- };
- }
-
- default:
- return initCart;
- }
-};
-
-const CartProvider = ({ children }) => {
- const [cartState, dispatchCart] = useReducer(cartReducer, initCart);
-
- const addItemHandler = (item) => {
- dispatchCart({ type: 'ADD_ITEM', payload: item });
- };
-
- const decreaseItemHandler = (id) => {
- dispatchCart({ type: 'DECREASE_ITEM', payload: id });
- };
-
- const deleteItemHandler = (id) => {
- dispatchCart({ type: 'DELETE_ITEM', payload: id });
- };
-
- const { items, totalPriceAmount } = cartState;
-
- const value = useMemo(
- () => ({
- items,
- totalPriceAmount,
- addItem: addItemHandler,
- decreaseItem: decreaseItemHandler,
- deleteItem: deleteItemHandler,
- }),
- [
- items,
- totalPriceAmount,
- addItemHandler,
- decreaseItemHandler,
- deleteItemHandler,
- ]
- );
-
- return {children} ;
-};
-
-export default CartProvider;
diff --git a/src/context/Context.js b/src/context/Context.js
deleted file mode 100644
index beeb4ea..0000000
--- a/src/context/Context.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-export const CartContext = React.createContext({
- items: [],
- totalPriceAmount: 0,
- addItem: () => {},
- decreaseItem: () => {},
- deleteItem: () => {},
-});
-
-export const AuthContext = React.createContext({
- isAuth: false,
- auth: () => {},
- unAuth: () => {},
- authSuccess: {},
- setAuthSuccess: {},
- unAuthSuccess: {},
- setUnAuthSuccess: {},
-});
-
-export const WishlistContext = React.createContext({
- wishListItems: [],
- addToWishList: () => {},
- deleteWishList: () => {},
-});
diff --git a/src/context/ContextProvider.jsx b/src/context/ContextProvider.jsx
deleted file mode 100644
index d62fe68..0000000
--- a/src/context/ContextProvider.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import CartProvider from './CartProvider';
-import AuthProvider from './AuthProvider';
-import WishlistProvider from './WishlistProvider';
-
-const ContextProvider = ({ children }) => {
- return (
-
-
- {children}
-
-
- );
-};
-
-export default ContextProvider;
diff --git a/src/context/WishlistProvider.jsx b/src/context/WishlistProvider.jsx
deleted file mode 100644
index 40b32cf..0000000
--- a/src/context/WishlistProvider.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useMemo, useReducer } from 'react';
-
-import { WishlistContext } from './Context';
-
-const initState = {
- wishListItems: [],
-};
-
-const wishListReducer = (state, action) => {
- switch (action.type) {
- case 'ADD_WISHLIST': {
- const newWishListItem = [...state.wishListItems, action.payload];
- return {
- wishListItems: newWishListItem,
- };
- }
-
- case 'DELETE_WISHLIST': {
- const deletedWishList = state.wishListItems.filter(
- (item) => item.id !== action.payload
- );
-
- return {
- wishListItems: deletedWishList,
- };
- }
-
- default:
- return initState;
- }
-};
-
-const WishlistProvider = ({ children }) => {
- const [wishListState, dispatch] = useReducer(wishListReducer, initState);
-
- const addWishListHandler = (item) => {
- dispatch({ type: 'ADD_WISHLIST', payload: item });
- };
-
- const deleteWishListHandler = (id) => {
- dispatch({ type: 'DELETE_WISHLIST', payload: id });
- };
-
- const value = useMemo(
- () => ({
- wishListItems: wishListState.wishListItems,
- addToWishList: addWishListHandler,
- deleteWishList: deleteWishListHandler,
- }),
- [wishListState.wishListItems, addWishListHandler, deleteWishListHandler]
- );
-
- return (
-
- {children}
-
- );
-};
-
-export default WishlistProvider;
diff --git a/src/hooks/useAxios.js b/src/hooks/useAxios.js
deleted file mode 100644
index 255ecd4..0000000
--- a/src/hooks/useAxios.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import axios from 'axios';
-import { useCallback, useState } from 'react';
-
-const API = axios.create({ baseURL: 'https://fakestoreapi.com/' });
-
-const useAxios = () => {
- const [error, setError] = useState({
- isError: false,
- errorMessage: '',
- });
-
- const [loading, setLoading] = useState({
- isLoading: false,
- loadingMessage: '',
- });
-
- const requestHttp = useCallback(async (requestConfig, setRequestFunc) => {
- try {
- setLoading({
- isLoading: true,
- loadingMessage: 'Loading...',
- });
- const { method, url, dataReq } = requestConfig;
- const response = await API({
- method,
- url,
- data: dataReq ? dataReq : null,
- headers: {
- 'Content-Type': 'application/json',
- },
- });
-
- const data = await response.data;
- setRequestFunc(data);
- } catch (error) {
- if (error.response?.status === 400) {
- setError({
- isError: true,
- errorMessage: error.response?.data?.error,
- });
- } else if (error.response?.status === 401) {
- setError({ isError: true, errorMessage: 'Unauthorized' });
- } else if (error.response?.status === 409) {
- setError({ isError: true, errorMessage: 'Username Taken' });
- } else {
- setError({ isError: true, errorMessage: error.message });
- }
- }
- setLoading({ isLoading: false, loadingMessage: '' });
- }, []);
-
- return { requestHttp, loading, error, setError };
-};
-
-export default useAxios;
diff --git a/src/hooks/useDarkMode.js b/src/hooks/useDarkMode.ts
similarity index 92%
rename from src/hooks/useDarkMode.js
rename to src/hooks/useDarkMode.ts
index bb5e221..93eea67 100644
--- a/src/hooks/useDarkMode.js
+++ b/src/hooks/useDarkMode.ts
@@ -16,7 +16,7 @@ const useDarkMode = () => {
bodyElm.style.backgroundColor = '#E6E1DC';
}
- localStorage.setItem('theme', theme);
+ localStorage.setItem('urban-theme', theme);
}, [theme, colorTheme]);
return { colorTheme, setTheme };
diff --git a/src/hooks/useFormState.js b/src/hooks/useFormState.js
deleted file mode 100644
index 933baff..0000000
--- a/src/hooks/useFormState.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useState } from 'react';
-
-const useFormState = (formState) => {
- const [input, setInput] = useState(formState);
-
- const onChangeInputHandler = (event) => {
- const { name, value } = event.target;
-
- setInput((prevState) => ({ ...prevState, [name]: value }));
- };
-
- return {
- input,
- setInput,
- onChangeInputHandler,
- };
-};
-
-export default useFormState;
diff --git a/src/hooks/useReduxT.ts b/src/hooks/useReduxT.ts
new file mode 100644
index 0000000..ea32e0b
--- /dev/null
+++ b/src/hooks/useReduxT.ts
@@ -0,0 +1,10 @@
+import {
+ type TypedUseSelectorHook,
+ useDispatch,
+ useSelector,
+} from 'react-redux';
+
+import type { AppDispatch, RootState } from '@store/store';
+
+export const useAppDispatch = () => useDispatch();
+export const useAppSelector: TypedUseSelectorHook = useSelector;
diff --git a/src/hooks/useStoreContext.js b/src/hooks/useStoreContext.js
deleted file mode 100644
index 24eaf69..0000000
--- a/src/hooks/useStoreContext.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { AuthContext, CartContext, WishlistContext } from 'context/Context';
-import { useContext } from 'react';
-
-export const useCart = () => useContext(CartContext),
- useAuth = () => useContext(AuthContext),
- useWish = () => useContext(WishlistContext);
diff --git a/src/index.css b/src/index.css
index f177e8d..3624eaa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
+
@tailwind base;
@tailwind components;
@tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@layer base {
+ .layout {
+ @apply ml-auto mr-auto w-[90%] max-w-[68.75rem];
+ }
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
+ .grid-12 {
+ @apply grid w-full grid-cols-12;
+ }
+}
body {
background-color: #e6e1dc;
diff --git a/src/index.jsx b/src/index.jsx
deleted file mode 100644
index 8c95f98..0000000
--- a/src/index.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import App from './App';
-import ContextProvider from './context/ContextProvider';
-
-import './index.css';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-
-
-
-
-
-
-
-
-);
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..86c53bb
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { PersistGate } from 'redux-persist/integration/react';
+
+import Loading from '@components/UI/Loading';
+
+import './index.css';
+
+import App from './App';
+import { persistor, store } from './store/store';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+
+
+
+
+);
diff --git a/src/pages/CartPage/index.jsx b/src/pages/CartPage/index.jsx
deleted file mode 100644
index 15e2eef..0000000
--- a/src/pages/CartPage/index.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import CartList from 'components/Cart/CartList';
-import CartSummary from 'components/Cart/CartSummary';
-import { useCart } from 'hooks/useStoreContext';
-
-const Cart = () => {
- const { items } = useCart();
-
- const totalCartItems = items.reduce((curr, item) => {
- return curr + item.amount;
- }, 0);
-
- return (
-
-
- );
-};
-
-export default Cart;
diff --git a/src/pages/CartPage/index.tsx b/src/pages/CartPage/index.tsx
new file mode 100644
index 0000000..37187a4
--- /dev/null
+++ b/src/pages/CartPage/index.tsx
@@ -0,0 +1,132 @@
+import { loadStripe } from '@stripe/stripe-js';
+import clsx from 'clsx';
+import { useEffect, useMemo } from 'react';
+import { toast, Toaster } from 'react-hot-toast';
+import { useNavigate } from 'react-router-dom';
+
+import CartList from '@components/Cart/CartList';
+import CartSummary from '@components/Cart/CartSummary';
+import Loading from '@components/UI/Loading';
+
+import { paymentOrder } from '@store/orderSlice';
+import { fetchProducts } from '@store/productSlice';
+
+import { useAppDispatch, useAppSelector } from '@hooks/useReduxT';
+
+import { INewProductToCart, IProduct } from 'types/types';
+
+const stripePromise = loadStripe(
+ 'pk_test_51Ncl4SIAnOD2G6K2AeMVopSQwSHAIVZ6NIv3Ag2Zk0M7FtKFrM9jRO7CLUuWi04lomuazHhJWEsFzm4lFwE1gRe200V2395JAf'
+);
+
+export default function Cart() {
+ const navigate = useNavigate();
+
+ const dispatch = useAppDispatch();
+ const { isAuthenticated, user } = useAppSelector((state) => state.auth);
+ const { cart } = useAppSelector((state) => state.cart);
+ const { products, status, errorMessage } = useAppSelector(
+ (state) => state.products
+ );
+
+ useEffect(() => {
+ dispatch(fetchProducts());
+ }, [dispatch]);
+
+ const getProductById = (products: IProduct[], productId: number) => {
+ const productLookup = products.reduce((lookup, product) => {
+ lookup[product.id] = product;
+ return lookup;
+ }, {} as IProduct[]);
+ return productLookup[productId];
+ };
+
+ const cartWithProducts: INewProductToCart[] = useMemo(() => {
+ if (!products?.data) {
+ return [];
+ }
+ return cart.map((item) => ({
+ product_id: item.product_id,
+ price: item.price,
+ quantity: item.quantity,
+ email: user?.user.email as string,
+ product: getProductById(products.data, item.product_id),
+ }));
+ }, [cart, products?.data, user?.user.email]);
+
+ const totalCartItems = useMemo(
+ () =>
+ cart.reduce((curr, item) => {
+ return curr + item.quantity;
+ }, 0),
+ [cart]
+ );
+
+ const PaymentHandler = async () => {
+ if (!isAuthenticated) {
+ navigate('/login', { replace: true });
+ return;
+ }
+
+ try {
+ const stripe = await stripePromise;
+ const result = await dispatch(paymentOrder(cartWithProducts)).unwrap();
+ await stripe?.redirectToCheckout({
+ sessionId: result.stripeSession.id,
+ });
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error(error);
+ toast.error('Payment failed!', { duration: 3000 });
+ }
+ };
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/pages/HomePage/index.jsx b/src/pages/HomePage/index.jsx
deleted file mode 100644
index f0de740..0000000
--- a/src/pages/HomePage/index.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import Hero from 'components/Home/Hero';
-import ProductItem from 'components/Shop/ProductItem';
-import FashionProducts from 'components/Home/FashionProducts';
-import BestSellers from 'components/Home/BestSellers';
-import OurPhilosophy from 'components/Home/OurPhilosophy';
-import useAxios from 'hooks/useAxios';
-import { Toast } from 'components/UI';
-import { useAuth } from 'hooks/useStoreContext';
-
-const Home = () => {
- const [dataProduct, setDataProduct] = useState([]);
- const { requestHttp, loading, error } = useAxios();
- const { authSuccess, setAuthSuccess, unAuthSuccess, setUnAuthSuccess } =
- useAuth();
-
- useEffect(() => {
- window.scrollTo({ top: 0, behavior: 'smooth' });
- requestHttp(
- {
- method: 'GET',
- url: 'products?limit=2',
- headers: false,
- },
- (data) => setDataProduct(data)
- );
- }, [requestHttp]);
-
- const productContent = (
-
- {authSuccess.successMessage}
-
- )}
- {unAuthSuccess.isSuccess && (
-
- {unAuthSuccess.successMessage}
-
- )}
-
-
-
+
+
- {error.errorMessage}
-
- )}
-
-
-
- );
-};
-
-export default Login;
diff --git a/src/pages/MyAccountPage/index.jsx b/src/pages/MyAccountPage/index.jsx
deleted file mode 100644
index c7485ec..0000000
--- a/src/pages/MyAccountPage/index.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import AccountDetails from 'components/MyAccount/AccountDetails';
-import useAxios from 'hooks/useAxios';
-
-const MyAccount = () => {
- const [user, setUser] = useState({});
- const { requestHttp, loading } = useAxios();
-
- useEffect(() => {
- const decode = JSON.parse(localStorage.getItem('decode'));
- requestHttp(
- {
- method: 'GET',
- url: `users/${decode?.sub}`,
- },
- (data) => {
- setUser(data);
- }
- );
- }, [requestHttp]);
-
- return (
- <>
-
-
-
+
+
-
-
+
+
-
- );
-};
-
-export default Register;
diff --git a/src/pages/SignInPage/index.tsx b/src/pages/SignInPage/index.tsx
new file mode 100644
index 0000000..24f16b4
--- /dev/null
+++ b/src/pages/SignInPage/index.tsx
@@ -0,0 +1,144 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { toast, Toaster } from 'react-hot-toast';
+import { Link, useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
+import Input from '@components/UI/Input';
+
+import { loginUser } from '@store/authSlice';
+
+import { useAppDispatch, useAppSelector } from '@hooks/useReduxT';
+import { signInSchema } from '@utils/formSchema';
+
+type FormSchemaType = z.infer;
+
+export default function Login() {
+ const [isPassView, setIsPassView] = useState(false);
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(signInSchema),
+ });
+
+ const dispatch = useAppDispatch();
+ const { status, errorMessage } = useAppSelector((state) => state.auth);
+ const navigate = useNavigate();
+
+ const viewPasswordHandler = () => {
+ setIsPassView((prevState) => !prevState);
+ };
+
+ const loginSubmitHandler: SubmitHandler = async (
+ data,
+ event
+ ) => {
+ event?.preventDefault();
+
+ const loginInput = {
+ email: data.email,
+ password: data.password,
+ };
+
+ const res = await dispatch(loginUser(loginInput));
+
+ if (res.meta.requestStatus === 'fulfilled') {
+ navigate('/', { replace: true });
+ toast.success('Successfully logged in!', { duration: 3000 });
+ }
+
+ if (res.meta.requestStatus === 'rejected') {
+ toast.error(`${errorMessage}`, { duration: 3000 });
+ }
+
+ reset();
+ };
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/pages/SignUpPage/index.tsx b/src/pages/SignUpPage/index.tsx
new file mode 100644
index 0000000..13b0427
--- /dev/null
+++ b/src/pages/SignUpPage/index.tsx
@@ -0,0 +1,176 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { toast, Toaster } from 'react-hot-toast';
+import { Link, useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
+import Input from '@components/UI/Input';
+
+import { registerUser } from '@store/authSlice';
+
+import { useAppDispatch } from '@hooks/useReduxT';
+import { signUpSchema } from '@utils/formSchema';
+
+type FormSchemaType = z.infer;
+
+export default function Register() {
+ const [isPassView, setIsPassView] = useState(false);
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: zodResolver(signUpSchema),
+ });
+ const navigate = useNavigate();
+
+ const dispatch = useAppDispatch();
+
+ const viewPasswordHandler = () => {
+ setIsPassView((prevState) => !prevState);
+ };
+ const RegisterSubmitHandler: SubmitHandler = async (
+ data,
+ event
+ ) => {
+ event?.preventDefault();
+
+ const registerFormInput = {
+ username: data.username,
+ email: data.email,
+ password: data.password,
+ };
+
+ const res = await dispatch(registerUser(registerFormInput));
+
+ if (res.meta.requestStatus === 'fulfilled') {
+ navigate('/', { replace: true });
+ }
+ if (res.meta.requestStatus === 'rejected') {
+ toast.error('Failed to register new user!', { duration: 3000 });
+ }
+
+ reset();
+ };
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/store/authSlice.ts b/src/store/authSlice.ts
new file mode 100644
index 0000000..95dd7c4
--- /dev/null
+++ b/src/store/authSlice.ts
@@ -0,0 +1,111 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { AxiosError } from 'axios';
+
+import { login, register } from '@api/api';
+
+import { ILogin, IRegister, IUser } from 'types/types';
+
+export interface IAuthState {
+ isAuthenticated: boolean;
+ user: IUser | null;
+ status: 'pending' | 'fulfilled' | 'rejected' | 'idle';
+ errorMessage: string | null;
+ successMessage: string | null;
+}
+
+const initialState: IAuthState = {
+ isAuthenticated: false,
+ user: null,
+ status: 'idle',
+ errorMessage: null,
+ successMessage: null,
+};
+
+export const registerUser = createAsyncThunk(
+ 'auth/registerUser',
+ async ({ username, email, password }: IRegister, { rejectWithValue }) => {
+ try {
+ const response = await register({ username, email, password });
+ return response;
+ } catch (error) {
+ if (error instanceof Error) {
+ return rejectWithValue(error.message);
+ }
+ if (error instanceof AxiosError) {
+ return rejectWithValue(error.response?.data);
+ }
+ return rejectWithValue('Failed to register!');
+ }
+ }
+);
+
+export const loginUser = createAsyncThunk(
+ 'auth/loginUser',
+ async ({ email, password }: ILogin, { rejectWithValue }) => {
+ try {
+ const response = await login({ email, password });
+ return response;
+ } catch (error) {
+ if (error instanceof Error) {
+ return rejectWithValue(error.message);
+ }
+ if (error instanceof AxiosError) {
+ return rejectWithValue(error.response?.data);
+ }
+ return rejectWithValue('Failed to login!');
+ }
+ }
+);
+
+export const authSlice = createSlice({
+ name: 'auth',
+ initialState,
+ reducers: {
+ logoutHandler: (state) => {
+ state.isAuthenticated = false;
+ state.user = null;
+ state.status = 'idle';
+ },
+ },
+ extraReducers: (builder) => {
+ builder.addCase(registerUser.pending, (state) => {
+ state.status = 'pending';
+ state.errorMessage = null;
+ state.successMessage = null;
+ });
+ builder.addCase(registerUser.fulfilled, (state, action) => {
+ state.status = 'fulfilled';
+ state.isAuthenticated = !!action.payload.data?.user?.email;
+ state.user = action.payload.data;
+ state.successMessage = 'Successfully registered new user!';
+ });
+ builder.addCase(registerUser.rejected, (state) => {
+ state.status = 'rejected';
+ state.isAuthenticated = false;
+ state.user = null;
+ state.errorMessage = 'Failed to register new user!';
+ });
+
+ builder.addCase(loginUser.pending, (state) => {
+ state.status = 'pending';
+ state.errorMessage = null;
+ state.successMessage = null;
+ });
+ builder.addCase(loginUser.fulfilled, (state, action) => {
+ state.status = 'fulfilled';
+ state.isAuthenticated = !!action.payload.data?.user?.email;
+ state.user = action.payload.data;
+ state.successMessage = 'Successfully logged in!';
+ });
+ builder.addCase(loginUser.rejected, (state) => {
+ state.status = 'rejected';
+ state.isAuthenticated = false;
+ state.user = null;
+ state.errorMessage = 'Failed to login user!';
+ });
+ },
+});
+
+export const { logoutHandler } = authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/src/store/cartSlice.ts b/src/store/cartSlice.ts
new file mode 100644
index 0000000..5e124de
--- /dev/null
+++ b/src/store/cartSlice.ts
@@ -0,0 +1,75 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+import { INewProductToCart } from 'types/types';
+
+interface ICart {
+ cart: INewProductToCart[];
+ totalPrice: number;
+ status: 'idle' | 'pending' | 'fulfilled' | 'rejected';
+ errorMessage: string | null;
+ successMessage: string | null;
+}
+
+const initialState: ICart = {
+ cart: [],
+ totalPrice: 0,
+ status: 'idle',
+ errorMessage: null,
+ successMessage: null,
+};
+
+export const cartSlice = createSlice({
+ name: 'cart',
+ initialState,
+ reducers: {
+ addToCart: (state, action: PayloadAction) => {
+ const existingItemIndex = state.cart.findIndex(
+ (item) => item.product_id === action.payload.product_id
+ );
+
+ const existingItem = state.cart[existingItemIndex];
+
+ if (existingItem) {
+ state.cart[existingItemIndex].quantity += action.payload.quantity;
+ } else {
+ state.cart.push(action.payload);
+ }
+
+ state.totalPrice += +action.payload.price * action.payload.quantity;
+ },
+ decreaseFromCart: (state, action: PayloadAction) => {
+ const existingItemIndex = state.cart.findIndex(
+ (item) => item.product_id === action.payload
+ );
+
+ const existingItem = state.cart[existingItemIndex];
+
+ const removedTotalPrice = state.totalPrice - +existingItem.price;
+ const formattedRemovedTotalPrice = +removedTotalPrice.toFixed(2);
+
+ state.cart[existingItemIndex].quantity = +existingItem.quantity - 1;
+ state.totalPrice = formattedRemovedTotalPrice;
+ },
+ removeFromCart: (state, action: PayloadAction) => {
+ const existingItemIndex = state.cart.findIndex(
+ (item) => item.product_id === action.payload
+ );
+
+ const existingItem = state.cart[existingItemIndex];
+
+ const removedTotalPrice =
+ state.totalPrice - +existingItem.price * existingItem.quantity;
+ const formattedRemovedTotalPrice = +removedTotalPrice.toFixed(2);
+
+ state.cart = state.cart.filter(
+ (item) => item.product_id !== action.payload
+ );
+ state.totalPrice = formattedRemovedTotalPrice;
+ },
+ },
+});
+
+export const { addToCart, decreaseFromCart, removeFromCart } =
+ cartSlice.actions;
+
+export default cartSlice.reducer;
diff --git a/src/store/orderSlice.ts b/src/store/orderSlice.ts
new file mode 100644
index 0000000..a117f3a
--- /dev/null
+++ b/src/store/orderSlice.ts
@@ -0,0 +1,58 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+
+import { postPayment } from '@api/api';
+
+import { INewProductToCart } from 'types/types';
+
+interface IOrderState {
+ response: {
+ stripeSession: {
+ id: string;
+ };
+ };
+ status: 'idle' | 'pending' | 'fulfilled' | 'rejected';
+ errorMessage: string | null;
+ successMessage: string | null;
+}
+
+const initialState: IOrderState = {
+ response: {
+ stripeSession: {
+ id: '',
+ },
+ },
+ status: 'idle',
+ errorMessage: null,
+ successMessage: null,
+};
+
+export const paymentOrder = createAsyncThunk(
+ 'order/payment',
+ async (products: INewProductToCart[]) => {
+ const response = await postPayment(products);
+ return response.data;
+ }
+);
+
+export const orderSlice = createSlice({
+ name: 'order',
+ initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder.addCase(paymentOrder.pending, (state) => {
+ state.status = 'pending';
+ state.errorMessage = null;
+ });
+ builder.addCase(paymentOrder.fulfilled, (state, payload) => {
+ state.status = 'fulfilled';
+ state.response = payload.payload;
+ state.successMessage = 'Successfully placed order!';
+ });
+ builder.addCase(paymentOrder.rejected, (state) => {
+ state.status = 'rejected';
+ state.errorMessage = 'Failed to place order!';
+ });
+ },
+});
+
+export default orderSlice.reducer;
diff --git a/src/store/productSlice.ts b/src/store/productSlice.ts
new file mode 100644
index 0000000..974dd36
--- /dev/null
+++ b/src/store/productSlice.ts
@@ -0,0 +1,138 @@
+import { createAsyncThunk, createSlice, unwrapResult } from '@reduxjs/toolkit';
+
+import { getCategories, getProduct, getProducts } from '@api/api';
+
+import { ICategoriesData, IProductData, IProductsData } from 'types/types';
+
+interface IProductsState {
+ products: IProductsData | null;
+ categories: ICategoriesData | null;
+ product: IProductData | null;
+ status: 'idle' | 'pending' | 'fulfilled' | 'rejected';
+ errorMessage: string | null;
+ successMessage: string | null;
+}
+
+const initialState: IProductsState = {
+ products: null,
+ categories: null,
+ product: null,
+ status: 'idle',
+ errorMessage: null,
+ successMessage: null,
+};
+
+export const fetchProducts = createAsyncThunk(
+ 'products/fetchProducts',
+ async () => {
+ // try {
+ const response = await getProducts();
+ return response.data;
+ // } catch (error) {
+ // if (error instanceof Error) {
+ // return rejectWithValue(error.message);
+ // }
+ // if (error instanceof AxiosError) {
+ // return rejectWithValue(error.response?.data);
+ // }
+ // return rejectWithValue('Failed to fetch products!');
+ // }
+ }
+);
+
+export const fetchProduct = createAsyncThunk(
+ 'products/fetchProduct',
+ async (productId: string) => {
+ // try {
+ const response = await getProduct(productId);
+ return response.data;
+ // } catch (error) {
+ // if (error instanceof Error) {
+ // return rejectWithValue(error.message);
+ // }
+ // if (error instanceof AxiosError) {
+ // return rejectWithValue(error.response?.data);
+ // }
+ // return rejectWithValue('Failed to fetch product!');
+ // }
+ }
+);
+
+export const fetchCategories = createAsyncThunk(
+ 'products/fetchCategories',
+ async () => {
+ const response = await getCategories();
+ return response.data;
+ }
+);
+
+export const fetchAllProducts = createAsyncThunk(
+ 'products/fetchAllProducts',
+ async (productId: string | null, { dispatch }) => {
+ const promises = () => {
+ if (productId) {
+ return [
+ dispatch(fetchProducts()),
+ dispatch(fetchCategories()),
+ dispatch(fetchProduct(productId)),
+ ];
+ } else {
+ return [dispatch(fetchProducts()), dispatch(fetchCategories())];
+ }
+ };
+
+ const actions = await Promise.all(promises());
+ return actions.map(unwrapResult);
+ }
+);
+
+export const productSlice = createSlice({
+ name: 'products',
+ initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder.addCase(fetchProducts.pending, (state) => {
+ state.status = 'pending';
+ state.errorMessage = null;
+ });
+ builder.addCase(fetchProducts.fulfilled, (state, action) => {
+ state.status = 'fulfilled';
+ state.products = action.payload;
+ state.successMessage = 'Successfully fetched products!';
+ });
+ builder.addCase(fetchProducts.rejected, (state) => {
+ state.status = 'rejected';
+ state.errorMessage = 'Failed to get products!';
+ });
+
+ builder.addCase(fetchProduct.pending, (state) => {
+ state.status = 'pending';
+ state.errorMessage = null;
+ });
+ builder.addCase(fetchProduct.fulfilled, (state, action) => {
+ state.status = 'fulfilled';
+ state.product = action.payload;
+ state.successMessage = 'Successfully fetched product!';
+ });
+ builder.addCase(fetchProduct.rejected, (state) => {
+ state.status = 'rejected';
+ state.errorMessage = 'Failed to get product!';
+ });
+
+ builder.addCase(fetchCategories.pending, (state) => {
+ state.status = 'pending';
+ state.errorMessage = null;
+ });
+ builder.addCase(fetchCategories.fulfilled, (state, action) => {
+ state.status = 'fulfilled';
+ state.categories = action.payload;
+ state.successMessage = 'Successfully fetched product!';
+ });
+ builder.addCase(fetchCategories.rejected, (state) => {
+ state.status = 'rejected';
+ state.errorMessage = 'Failed to get product!';
+ });
+ },
+});
+
+export default productSlice.reducer;
diff --git a/src/store/store.ts b/src/store/store.ts
new file mode 100644
index 0000000..d03bbdd
--- /dev/null
+++ b/src/store/store.ts
@@ -0,0 +1,45 @@
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { persistReducer, persistStore } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+
+import authReducer from './authSlice';
+import cartReducer from './cartSlice';
+import orderReducer from './orderSlice';
+import productsReducer from './productSlice';
+import wishlistReducer from './wishlistSlice';
+
+const rootPersistConfig = {
+ key: 'root',
+ storage,
+ blacklist: ['products', 'order'],
+};
+
+const reducers = combineReducers({
+ auth: authReducer,
+ cart: cartReducer,
+ products: productsReducer,
+ wishlist: wishlistReducer,
+ order: orderReducer,
+});
+
+const persistedReducer = persistReducer(rootPersistConfig, reducers);
+
+export const store = configureStore({
+ reducer: persistedReducer,
+ devTools: import.meta.env.MODE === 'development',
+ middleware: (getDefaultMiddleware) =>
+ getDefaultMiddleware({
+ serializableCheck: {
+ // Ignore these action types
+ ignoredActions: ['persist/PERSIST', 'auth/loginUser/fulfilled'],
+ // Ignore these field paths in all actions
+ ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
+ // Ignore these paths in the state
+ ignoredPaths: ['register'],
+ },
+ }),
+});
+
+export const persistor = persistStore(store);
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/store/wishlistSlice.ts b/src/store/wishlistSlice.ts
new file mode 100644
index 0000000..48deb45
--- /dev/null
+++ b/src/store/wishlistSlice.ts
@@ -0,0 +1,48 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+import { IProduct } from 'types/types';
+
+interface IWishListState {
+ wishlist: IProduct[];
+ status: 'idle' | 'pending' | 'fulfilled' | 'rejected';
+ errorMessage: string | null;
+ successMessage: string | null;
+}
+
+const initialState: IWishListState = {
+ wishlist: [],
+ status: 'idle',
+ errorMessage: null,
+ successMessage: null,
+};
+
+export const wishlistSlice = createSlice({
+ name: 'wishlist',
+ initialState,
+ reducers: {
+ addWishlist: (state, action: PayloadAction) => {
+ const existingItemIndex = state.wishlist.findIndex(
+ (item) => item.id === action.payload.id
+ );
+
+ const existingItem = state.wishlist[existingItemIndex];
+
+ if (existingItem) {
+ state.errorMessage = `${existingItem.attributes.name} already in wishlist`;
+ } else {
+ state.wishlist = [...state.wishlist, action?.payload];
+ state.successMessage = `${action?.payload.attributes.name} added to wishlist`;
+ }
+ },
+ removeWishlist: (state, action: PayloadAction) => {
+ state.wishlist = state.wishlist.filter(
+ (item) => item.id !== action.payload
+ );
+ state.successMessage = `Successfully removed item from wishlist`;
+ },
+ },
+});
+
+export const { addWishlist, removeWishlist } = wishlistSlice.actions;
+
+export default wishlistSlice.reducer;
diff --git a/src/types/types.ts b/src/types/types.ts
new file mode 100644
index 0000000..e1bb4a5
--- /dev/null
+++ b/src/types/types.ts
@@ -0,0 +1,121 @@
+export interface IAuth {
+ accessToken: string | null;
+}
+
+export interface ILogin {
+ email: string;
+ password: string;
+}
+
+export interface IRegister extends ILogin {
+ username: string;
+}
+
+export interface IUser {
+ jwt: string;
+ user: {
+ id: number;
+ username: string;
+ email: string;
+ provider: string;
+ confirmed: boolean;
+ blocked: boolean;
+ createdAt: string;
+ updatedAt: string;
+ address: string;
+ phone_number: string;
+ };
+}
+
+export interface IImage {
+ id: number;
+ attributes: {
+ name: string;
+ alternativeText: string | null;
+ caption: string | null;
+ width: number;
+ height: number;
+ formats: {
+ thumbnail: {
+ name: string;
+ hash: string;
+ ext: string;
+ mime: string;
+ path: string | null;
+ width: number;
+ height: number;
+ size: number;
+ url: string;
+ };
+ };
+ hash: string;
+ ext: string;
+ mime: string;
+ size: number;
+ url: string;
+ previewUrl: string | null;
+ provider: string;
+ provider_metadata: string | null;
+ createdAt: string;
+ updatedAt: string;
+ };
+}
+
+export interface ICategory {
+ id: number;
+ attributes: {
+ name: string;
+ createdAt: string;
+ updatedAt: string;
+ publishedAt: string;
+ };
+}
+
+export interface IProduct {
+ id: number;
+ attributes: {
+ name: string;
+ description: string;
+ price: string;
+ createdAt: string;
+ updatedAt: string;
+ publishedAt: string;
+ image: {
+ data: IImage[];
+ };
+ categories: {
+ data: ICategory[];
+ };
+ };
+}
+
+interface IAllProductsMeta {
+ meta: {
+ pagination: {
+ page: number;
+ pageSize: number;
+ pageCount: number;
+ total: number;
+ };
+ };
+}
+
+export interface IProductsData extends IAllProductsMeta {
+ data: IProduct[];
+}
+
+export interface IProductData extends IAllProductsMeta {
+ data: IProduct;
+}
+
+export interface ICategoriesData extends IAllProductsMeta {
+ data: ICategory[];
+}
+
+export interface INewProductToCart {
+ product_id: number;
+ price: string;
+ quantity: number;
+ email?: string;
+ product?: IProduct;
+}
diff --git a/src/utils/formSchema.ts b/src/utils/formSchema.ts
new file mode 100644
index 0000000..f7b9d05
--- /dev/null
+++ b/src/utils/formSchema.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod';
+
+export const signUpSchema = z
+ .object({
+ username: z.string().min(1, 'Username is required').max(100),
+ email: z.string().email('Invalid email').min(1, 'Email is required'),
+ password: z
+ .string()
+ .min(1, 'Password is required')
+ .min(8, 'Password must have more than 8 characters'),
+ confirmPassword: z.string().min(1, 'Password confirmation is required'),
+ })
+ .refine((data) => data.password === data.confirmPassword, {
+ path: ['confirmPassword'],
+ message: 'Passwords do not match',
+ });
+
+export const signInSchema = z.object({
+ email: z.string().email('Invalid email').min(1, 'Email is required'),
+ password: z
+ .string()
+ .min(1, 'Password is required')
+ .min(8, 'Password must have more than 8 characters'),
+});
diff --git a/src/utils/formatCurrency.js b/src/utils/formatCurrency.js
deleted file mode 100644
index 80078b1..0000000
--- a/src/utils/formatCurrency.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export const formatCurrency = (amount) => {
- const exchangeRateRupiah = 15200; // 14 - Jan - 2023
- const toRupiah = +amount * exchangeRateRupiah;
- return toRupiah.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
-};
-
-export const formatCurrencyOnly = (amount) => {
- const exchangeRateRupiah = 15000;
- return +amount * exchangeRateRupiah;
-};
-
-export const formatCurrencyToFixed = (amount) => {
- return amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
-};
diff --git a/src/utils/formatted.ts b/src/utils/formatted.ts
new file mode 100644
index 0000000..27de1dd
--- /dev/null
+++ b/src/utils/formatted.ts
@@ -0,0 +1,7 @@
+export function formatCurrencyToFixed(amount: number) {
+ return amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+}
+
+export function capitalizeWords(words: string) {
+ return words.replace(/(?:^|\s)\S/g, (word) => word.toUpperCase());
+}
diff --git a/src/utils/validation.js b/src/utils/validation.js
deleted file mode 100644
index e3adcb9..0000000
--- a/src/utils/validation.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const validation = () => {
- const userNameValidation = /^[A-z][A-z0-9-_]{3,23}$/;
- const emailValidation = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
- const passwordValidation = /^(?=.*[a-z])(?=.*[0-9]).{6,12}$/;
-
- return {
- userNameValidation,
- emailValidation,
- passwordValidation,
- };
-};
-
-export default validation;
diff --git a/src/utils/validation.ts b/src/utils/validation.ts
new file mode 100644
index 0000000..7556235
--- /dev/null
+++ b/src/utils/validation.ts
@@ -0,0 +1,13 @@
+// const validation = () => {
+// const usernameValidation = /^[A-z][A-z0-9-_]{3,23}$/;
+// const emailValidation = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
+// const passwordValidation = /^(?=.*[a-z])(?=.*[0-9]).{6,12}$/;
+
+// return {
+// usernameValidation,
+// emailValidation,
+// passwordValidation,
+// };
+// };
+
+// export default validation;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
-
- - Our Philosophy -
-- You have a more interesting life if you wear impressive clothes. -
-
+
+ + Our Philosophy +
++ You have a more interesting life if you wear impressive clothes. +
+- {loading.loadingMessage} -
- ) : ( - <> -- User Detail : -
-
- Name
- {`${name?.firstname} ${name?.lastname}`}
-
-
- Email
- {email}
-
-
- Phone
- {phone}
-
- - Address : -
-
- Street
-
- {address?.street}, {address?.number}
-
-
-
- City
- {address?.city}
-
-
- Zip Code
- {address?.zipcode}
-
-
- )}
- + Failed to view user data! +
+ )} + {status === 'fulfilled' && ( + <> ++ User Detail +
+
+ Name :
+ {user?.username}
+
+
+ Email :
+ {user?.email}
+
+
+ Phone :
+ {user?.phone_number}
+
+ {/* + Address : +
*/} +
+ Address :
+ {user?.address}
+
+
+ )}
+
-
-
- Wishlist {wishListItems.length ? `(${wishListItems.length})` : null}
-
-
-
- My Account
-
-
- unAuth(true, 'Logout Successfully')}>
- logout
-
-
-
-
- );
-};
-
-export default DropdownNav;
diff --git a/src/components/Navigation/DropdownNav.tsx b/src/components/Navigation/DropdownNav.tsx
new file mode 100644
index 0000000..b9111a8
--- /dev/null
+++ b/src/components/Navigation/DropdownNav.tsx
@@ -0,0 +1,79 @@
+import clsx from 'clsx';
+import { Dropdown } from 'flowbite-react';
+import { NavLink } from 'react-router-dom';
+
+import Avatar from '@components/UI/svg/Avatar';
+
+import { logoutHandler } from '@store/authSlice';
+
+import { useAppDispatch } from '@hooks/useReduxT';
+
+interface IDropdownNavProps {
+ onCloseMenu: () => void;
+ className?: string;
+}
+
+export default function DropdownNav({
+ onCloseMenu,
+ className,
+}: IDropdownNavProps) {
+ const dispatch = useAppDispatch();
+
+ // const { wishListItems } = useWish();
+
+ const logoutUserHandler = () => {
+ dispatch(logoutHandler());
+ };
+
+ return (
+
+
+
+ Wishlist
+ {/* {wishListItems.length ? `(${wishListItems.length})` : null} */}
+
+
+
+ My Account
+
+
+
+ Logout
+
+
+
+
+ );
+}
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
deleted file mode 100644
index e311456..0000000
--- a/src/components/Navigation/Navigation.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { useState } from 'react';
-import { NavLink, Link } from 'react-router-dom';
-
-import DropdownNav from './DropdownNav';
-import CartBadge from 'components/Cart/CartBadge';
-import SwitcherTheme from './SwitcherTheme';
-import { Button } from 'components/UI';
-import { useCart, useAuth } from 'hooks/useStoreContext';
-
-import { CgMenuRight, CgClose } from 'react-icons/cg';
-
-const Navigation = () => {
- const [menuView, setMenuView] = useState(false);
- const { items } = useCart();
- const { isAuth } = useAuth();
-
- const cartItemsTotal = items.reduce((curr, item) => {
- return curr + item.amount;
- }, 0);
-
- const menuHandler = () => setMenuView((prevState) => !prevState);
- const menuViewClose = () => setMenuView(false);
-
- return (
-
- );
-};
-
-export default Navigation;
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
new file mode 100644
index 0000000..228aa43
--- /dev/null
+++ b/src/components/Navigation/Navigation.tsx
@@ -0,0 +1,125 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import { CgClose, CgMenuRight } from 'react-icons/cg';
+import { Link, NavLink } from 'react-router-dom';
+
+import CartBadge from '@components/Cart/CartBadge';
+import { Image } from '@components/UI';
+
+import { useAppSelector } from '@hooks/useReduxT';
+
+import LogoImg from '@assets/image/logo/logo-no-background.svg';
+
+import DropdownNav from './DropdownNav';
+import SwitcherTheme from './SwitcherTheme';
+
+export default function Navigation() {
+ const [menuView, setMenuView] = useState(false);
+
+ const { isAuthenticated } = useAppSelector((state) => state.auth);
+ const { cart } = useAppSelector((state) => state.cart);
+
+ const cartItemsTotal = cart.reduce((curr, item) => {
+ return curr + item.quantity;
+ }, 0);
+
+ const menuHandler = () => setMenuView((prevState) => !prevState);
+ const menuViewClose = () => setMenuView(false);
+
+ return (
+
+ );
+}
diff --git a/src/components/Navigation/SwitcherTheme.jsx b/src/components/Navigation/SwitcherTheme.tsx
similarity index 61%
rename from src/components/Navigation/SwitcherTheme.jsx
rename to src/components/Navigation/SwitcherTheme.tsx
index 2cc364f..b789a7e 100644
--- a/src/components/Navigation/SwitcherTheme.jsx
+++ b/src/components/Navigation/SwitcherTheme.tsx
@@ -1,14 +1,13 @@
import { useState } from 'react';
-import useDarkMode from '../../hooks/useDarkMode';
import { DarkModeSwitch } from 'react-toggle-dark-mode';
-const SwitcherTheme = () => {
+import useDarkMode from '@hooks/useDarkMode';
+
+export default function SwitcherTheme() {
const { colorTheme, setTheme } = useDarkMode();
- const [darkTheme, setDarkTheme] = useState(
- colorTheme === 'light' ? true : false
- );
+ const [darkTheme, setDarkTheme] = useState(colorTheme === 'light');
- const toggleThemeHandler = (checked) => {
+ const toggleThemeHandler = (checked: boolean) => {
setTheme(colorTheme);
setDarkTheme(checked);
};
@@ -24,6 +23,4 @@ const SwitcherTheme = () => {
/>
);
-};
-
-export default SwitcherTheme;
+}
diff --git a/src/components/ProductDetails/AddToCartModal.jsx b/src/components/ProductDetails/AddToCartModal.jsx
deleted file mode 100644
index 8c4891e..0000000
--- a/src/components/ProductDetails/AddToCartModal.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { Modal, Button, Image } from 'components/UI';
-
-import { MdClose } from 'react-icons/md';
-
-const AddToCartModal = ({ onCloseModalHandler, image, title, category }) => {
- const navigate = useNavigate();
-
- const toCartHandler = () => navigate('/cart');
-
- return (
-
-
- - Added Successfully -
-
-
-
- - {title} - {category} -
-
+
+ + Added Successfully +
+
+
+
+
+
+ {data?.attributes.name}
+
+
+ {data?.attributes.categories.data[0].attributes.name}
+
+
+ -
- {otherProduct.map((product) => {
- return (
-
- You May Also Like -
- {loading.isLoading && ( -- {loading.loadingMessage} -
- )} - {error.isError && ( -- {error.errorMessage} -
- )} - {!loading.isLoading && !error.isError && otherProductContent} --
+ {products?.data
+ ?.filter(
+ (item) =>
+ item.attributes.categories.data[0].attributes.name ===
+ product?.data.attributes?.categories?.data[0]?.attributes?.name &&
+ item.id.toString() !== productId
+ )
+ .slice(0, 4)
+ .map((product) => {
+ return (
+
+ You May Also Like +
+ {status === 'pending' &&+ {errorMessage} +
+ )} + {status === 'fulfilled' && otherProductContent} +
-
-
-
-
- Rp. {`${price ? formatCurrency(price) : '-'}`}
-
- {title}
- -
-
-
-
-
-
-
-
-
- {description}
- - Category : {category} - - -
+
+
+
+
+ {`${formatCurrencyToFixed(+data?.attributes.price) || '-'}`}
+
+ + {data?.attributes.name} +
+
+
+
+
+
+
+
+
+
+
+ + {data?.attributes.description} +
+ + Category : {data?.attributes.categories.data[0].attributes.name} + + +No Review
- ) : ( -- Review -
- - {isReviewShow && ( - - )} - {reviewList} -+ No Review +
+ ) : ( + <> + //+ Review +
+ {/* {isAuthenticated && ( + + )} */} + {isReviewShow && ( + + )} + {reviewList} +-
- {reviewData?.map((review) => {
- return (
-
-
-
- {review.message} -
- -- {review.rating} - - {review.date} -
- );
- })}
-
-
+ {reviewData?.map((review) => {
+ return (
+
-
+
+ {review.message} +
+ ++ {review.rating} + + + {review.date} + +
+ );
+ })}
+
- * Alphabet, numeric, underscore, hyphens only (4-24). -
- ); - } - - if (placeholder === 'Password') { - note = ( -- * Include uppercase & number (8-24). -
- ); - } - - return{note}
;
-};
-
-export default RegisterNote;
diff --git a/src/components/Register/RegisterNote.tsx b/src/components/Register/RegisterNote.tsx
new file mode 100644
index 0000000..0645fd6
--- /dev/null
+++ b/src/components/Register/RegisterNote.tsx
@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+
+interface IRegisterNoteProps {
+ placeholder: string;
+}
+
+export default function RegisterNote({ placeholder }: IRegisterNoteProps) {
+ let note: React.JSX.Element | null = null;
+ if (placeholder === 'Username') {
+ note = (
+ + * Alphabet, numeric, underscore, hyphens only (4-24). +
+ ); + } + + if (placeholder === 'Password') { + note = ( ++ * Include uppercase & number (8-24). +
+ ); + } + + return{note}
;
+}
diff --git a/src/components/Shop/FilterProduct.tsx b/src/components/Shop/FilterProduct.tsx
new file mode 100644
index 0000000..8d669ef
--- /dev/null
+++ b/src/components/Shop/FilterProduct.tsx
@@ -0,0 +1,54 @@
+import clsx from 'clsx';
+
+import { useAppSelector } from '@hooks/useReduxT';
+import { capitalizeWords } from '@utils/formatted';
+
+interface IFilterProductProps {
+ filterValue: string;
+ onFilteredProductValue: (_value: string) => void;
+}
+
+export default function FilterProduct({
+ filterValue,
+ onFilteredProductValue,
+}: IFilterProductProps) {
+ const { categories } = useAppSelector((state) => state.products);
+
+ const FilterProductHandler = (
+ event: React.ChangeEvent-
- {sortedQuotes.map((product) => {
- return (
-
- {loading.loadingMessage} -
- )} - {error.isError && ( -- {error.errorMessage} -
- )} - {!loading.isLoading && !error.isError && productContent} --
+ {FilterProductHandler?.map((product) => {
+ return (
+
+
+ {status === 'pending' && + {errorMessage} +
+ )} + {status === 'fulfilled' && productContent} +
+
+ {!isPassword && inputContent}
+ {isPassword && (
+
+ );
+ }
+);
+
+export default Input;
diff --git a/src/components/UI/Loading/index.tsx b/src/components/UI/Loading/index.tsx
new file mode 100644
index 0000000..cd0d5db
--- /dev/null
+++ b/src/components/UI/Loading/index.tsx
@@ -0,0 +1,9 @@
+import { Jelly } from '@uiball/loaders';
+
+export default function Loading() {
+ return (
+
+ {inputContent}
+
+ {isPassView ? (
+
+ )}
+ {errors}
+
+
+ );
+}
diff --git a/src/components/UI/LoginRegisterInput/index.jsx b/src/components/UI/LoginRegisterInput/index.jsx
deleted file mode 100644
index 19c20b4..0000000
--- a/src/components/UI/LoginRegisterInput/index.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-
-import { MdDone, MdRemoveRedEye, MdOutlineRemoveRedEye } from 'react-icons/md';
-
-import RegisterNote from 'components/Register/RegisterNote';
-import { Input } from '../Input';
-
-export const LoginRegisterInput = forwardRef(
- (
- {
- id,
- placeholder,
- isValidInput,
- autoComplete,
- input,
- name,
- type,
- onChange,
- onFocus,
- onBlur,
- },
- ref
- ) => {
- const [isPassView, setIsPassView] = useState(false);
-
- const viewPasswordHandler = () => setIsPassView((prevState) => !prevState);
-
- return (
- <>
-
-
- {isValidInput && input && placeholder !== 'Password' && (
-
-
- {[...Array(5)].map((rate, index) => {
- index += 1;
- return (
-
- );
- })}
- {rating}/5
-
- );
-};
diff --git a/src/components/UI/Rating/index.tsx b/src/components/UI/Rating/index.tsx
new file mode 100644
index 0000000..4c20c85
--- /dev/null
+++ b/src/components/UI/Rating/index.tsx
@@ -0,0 +1,53 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import { MdOutlineStar } from 'react-icons/md';
+
+interface IRatingProps {
+ onRating: (_rating: number) => void;
+}
+
+export function Rating({ onRating }: IRatingProps) {
+ const [rating, setRating] = useState(0);
+ const [hover, setHover] = useState(0);
+
+ const mouseEnterHandler = (index: number) => setHover(index);
+ const mouseLeaveHandler = (rating: number) => setHover(rating);
+ const resetRatingHandler = () => {
+ setHover(0);
+ setRating(0);
+ };
+
+ const ratingHandler = (index: number) => {
+ setRating(index);
+ onRating(index);
+ };
+
+ return (
+
+ {[...Array(5)].map((rate, index) => {
+ index += 1;
+ return (
+
+ );
+ })}
+
+ {rating}/5
+
+
+ );
+}
diff --git a/src/components/UI/ScrollTop/index.jsx b/src/components/UI/ScrollTop/index.jsx
deleted file mode 100644
index 7e535fe..0000000
--- a/src/components/UI/ScrollTop/index.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import { Button } from '..';
-
-import { MdArrowUpward } from 'react-icons/md';
-
-export const ScrollTop = () => {
- const [scrollPosition, setScrollPosition] = useState(0);
-
- const handleScroll = () => {
- const position = window.pageYOffset;
- setScrollPosition(position);
- };
-
- useEffect(() => {
- window.addEventListener('scroll', handleScroll);
-
- return () => {
- window.removeEventListener('scroll', handleScroll);
- };
- }, []);
-
- const scrollTopHandler = () =>
- window.scrollTo({ top: 0, behavior: 'smooth' });
-
- return (
-
- );
-};
diff --git a/src/components/UI/ScrollTop/index.tsx b/src/components/UI/ScrollTop/index.tsx
new file mode 100644
index 0000000..59293fb
--- /dev/null
+++ b/src/components/UI/ScrollTop/index.tsx
@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { MdArrowUpward } from 'react-icons/md';
+
+export function ScrollTop() {
+ const [scrollPosition, setScrollPosition] = useState(0);
+
+ const handleScroll = () => {
+ const position = window.scrollY;
+ setScrollPosition(position);
+ };
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll);
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
+
+ const scrollTopHandler = () =>
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+
+ return (
+
+ );
+}
diff --git a/src/components/UI/SelectItems/index.jsx b/src/components/UI/SelectItems/index.jsx
deleted file mode 100644
index 653e84a..0000000
--- a/src/components/UI/SelectItems/index.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import Select from 'react-select';
-
-export const SelectItems = ({
- options,
- value,
- onChange,
- className,
- placeholder,
- name,
-}) => {
- const colourStyles = {
- menuList: (styles) => ({
- ...styles,
- background: '#E6E1DC',
- }),
- option: (styles, { isFocused, isSelected }) => ({
- ...styles,
- color: isFocused || isSelected ? '#E6E1DC' : undefined,
- background: isFocused || isSelected ? '#3F362F' : undefined,
- zIndex: 1,
- }),
- menu: (base) => ({
- ...base,
- zIndex: 100,
- }),
- control: (base, state) => ({
- ...base,
- background: '#E6E1DC',
- borderRadius: state.isFocused ? '3px 3px 0 0' : 3,
- boxShadow: state.isFocused ? null : undefined,
- }),
- };
-
- return (
-
- );
-};
diff --git a/src/components/UI/SelectItems/index.tsx b/src/components/UI/SelectItems/index.tsx
new file mode 100644
index 0000000..9402150
--- /dev/null
+++ b/src/components/UI/SelectItems/index.tsx
@@ -0,0 +1,61 @@
+// import Select, {
+// ActionMeta,
+// GroupBase,
+// OptionsOrGroups,
+// StylesConfig,
+// } from 'react-select';
+
+// interface ISelectItemsProps {
+// options?: OptionsOrGroups
- {icons === 'success' && (
-
- {children}
- - Wishlist -
-
-
- Wishlist Empty
-
-
-
- ) : (
- -
- {wishListItems.map((item) => {
- return (
-
+ Wishlist +
+
+
+ Wishlist Empty
+
+
+
+ ) : (
+ -
+ {wishlist?.map((item) => {
+ return (
+
-
- - Cart -
-
-
-
+
+
+ + Cart +
+
+ {status === 'pending' &&
+ + {errorMessage} +
+ )} + {status === 'fulfilled' &&-
- {dataProduct.map((product) => {
- return (
-
-
- {loading.isLoading && (
- - Care for your clothes like the good friends they are. -
- - -Joan Crawford - -- {loading.loadingMessage} -
- )} - {error.isError && ( -- {error.errorMessage} -
- )} - {!loading.isLoading && !error.isError && productContent} --
+ {products?.data.slice(0, 2).map((product) => {
+ return (
+
+
+ {status === 'pending' && + Care for your clothes like the good friends they are. +
+ + -Joan Crawford + ++ {errorMessage} +
+ )} + {status === 'fulfilled' && productContent} +
-
-
-
-
-
- Log In
-- Don't have an account?{' '} - - Sign Up - -
-- My Account -
-
-
- {user.username}
-
- {user.email}
-
- + My Account +
+
+
+ {user?.user.username}
+
+ {user?.user.email}
+
+ - {loading.loadingMessage} -
- )} - {error.isError && ( -- {error.errorMessage} -
- )} - {!loading.isLoading && !error.isError && ( -+ {errorMessage} +
+ )} + {status === 'fulfilled' && ( +- Shop -
-+ Shop +
+Sign Up
- -- Already have an account?{' '} - - Log In - -
-+ Sign In +
+ ++ Don't have an account?{' '} + + Sign Up + +
++ Sign Up +
+ ++ Already have an account?{' '} + + Log In + +
+