Merge branch 'release/1.2.1'

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

README.md

@@ -50,10 +50,10 @@ Urban Fashion Shop is an online fashion store web application built with React.
 4. Start the development server:
 
    ```
-   yarn start
+   yarn dev
    ```
 
-   The app will be running at [http://localhost:3000](http://localhost:3000).
+   The app will be running at [http://localhost:5173](http://localhost:5173).
 
 ## Usage
 
@@ -69,12 +69,15 @@ Urban Fashion Shop provides an intuitive and seamless user experience for browsi
 ## Built with
 
 - [ReactJS](https://reactjs.org/)
+- [Redux Toolkit](https://redux-toolkit.js.org/)
+- [TypeScript](https://www.typescriptlang.org/)
 - [React Router](https://reactrouter.com/en/main)
-- [React Select](https://react-select.com/home)
-- [FakeStoreAPI](https://fakestoreapi.com/)
-- [Axios](https://axios-http.com/)
+- [React Hook Form](https://react-hook-form.com/)
 - [TailwindCSS](https://tailwindcss.com/)
 - [Flowbite](https://flowbite.com/)
+- [Axios](https://axios-http.com/)
+- [Vite](https://vitejs.dev/)
+- [zod](https://zod.dev/)
 - Mobile-first workflow
 
 ### Editor
@@ -91,5 +94,3 @@ If you have any questions or suggestions regarding urban fashion shop, feel free
 
 - Email: [[email protected]](mailto:[email protected])
 - GitHub: [hutamatr](https://github.com/hutamatr)
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

src/App.tsx

@@ -12,7 +12,7 @@ import Shop from '@pages/ProductPage';
 import SignIn from '@pages/SignInPage';
 import SignUp from '@pages/SignUpPage';
 
-import { useAppSelector } from '@hooks/useReduxT';
+import { useAppSelector } from '@store/store';
 
 export default function App() {
   const isAuth = useAppSelector((state) => state.auth.isAuthenticated);

src/api/api.ts

@@ -0,0 +1,113 @@
+// import { AxiosResponse, GenericAbortSignal } from 'axios';
+
+// import { axiosPrivate, axiosPublic } from '@utils/axiosInterceptor';
+
+// import {
+//   ICategoriesData,
+//   INewProductToCart,
+//   IProductData,
+//   IProductsData,
+// } from 'types/types';
+
+// export async function register(
+//   { username, email, password }: IRegister,
+//   signal?: GenericAbortSignal | undefined
+// ) {
+//   const res: AxiosResponse<IUser> = await axiosPublic.post(
+//     '/auth/local/register',
+//     {
+//       username,
+//       email,
+//       password,
+//     },
+//     {
+//       signal,
+//     }
+//   );
+
+//   return res;
+// }
+
+// export async function login(
+//   { email, password }: ILogin,
+//   signal?: GenericAbortSignal | undefined
+// ) {
+//   const res: AxiosResponse<IUser> = await axiosPublic.post(
+//     '/auth/local',
+//     {
+//       identifier: email,
+//       password,
+//     },
+//     {
+//       signal,
+//     }
+//   );
+
+//   return res;
+// }
+
+// export async function refresh(token: string) {
+//   const res: AxiosResponse<IRefreshToken> = await axiosPublic.post(
+//     '/token/refresh',
+//     {
+//       refreshToken: token,
+//     }
+//   );
+
+//   return res;
+// }
+
+// export async function getProducts(signal?: GenericAbortSignal | undefined) {
+//   const res: AxiosResponse<IProductsData> = await axiosPublic.get(
+//     '/products?populate=*',
+//     {
+//       signal,
+//     }
+//   );
+//   return res;
+// }
+
+// export async function getProduct(
+//   productId: string,
+//   signal?: GenericAbortSignal | undefined
+// ) {
+//   const res: AxiosResponse<IProductData> = await axiosPublic.get(
+//     `/products/${productId}?populate=*`,
+//     {
+//       signal,
+//     }
+//   );
+//   return res;
+// }
+
+// export async function getCategories(signal?: GenericAbortSignal | undefined) {
+//   const res: AxiosResponse<ICategoriesData> = await axiosPublic.get(
+//     '/categories',
+//     {
+//       signal,
+//     }
+//   );
+//   return res;
+// }
+
+// export async function postPayment(
+//   products: INewProductToCart[],
+//   accessToken: string,
+//   signal?: GenericAbortSignal | undefined
+// ) {
+//   const res: AxiosResponse<{
+//     stripeSession: {
+//       id: string;
+//     };
+//   }> = await axiosPrivate.post(
+//     '/orders',
+//     { products },
+//     {
+//       signal,
+//       headers: {
+//         Authorization: `Bearer ${accessToken}`,
+//       },
+//     }
+//   );
+//   return res;
+// }

src/components/Auth/RequireAuth.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Outlet, useLocation } from 'react-router-dom';
 
-import { useAppSelector } from '@hooks/useReduxT';
+import { useAppSelector } from '@store/store';
 
 export default function RequireAuth() {
   const isAuth = useAppSelector((state) => state.auth.isAuthenticated);

src/components/Cart/CartItem.tsx

@@ -13,24 +13,22 @@ interface ICartItemProps extends INewProductToCart {
 }
 
 export default function CartItem({
-  product_id,
   quantity,
-  price,
   product,
   onDecrease,
   onIncrease,
   onRemove,
 }: ICartItemProps) {
   return (
     <li
-      key={product_id}
+      key={product?.id}
       className={clsx(
         'flex flex-row gap-x-4 border border-dark-brown',
         'dark:border-white-bone'
       )}
     >
       <Image
-        src={`${import.meta.env.VITE_IMAGE_URL}${product?.attributes.image
+        src={`${import.meta.env.VITE_IMAGE_URL}${product?.attributes.images
           .data[0].attributes.url}`}
         alt={product?.attributes.name}
         className={clsx(
@@ -55,7 +53,7 @@ export default function CartItem({
               'disabled:invisible',
               'dark:text-white-bone'
             )}
-            onClick={onDecrease.bind(null, product_id)}
+            onClick={onDecrease.bind(null, product?.id)}
             disabled={quantity === 1}
           >
             -
@@ -68,7 +66,7 @@ export default function CartItem({
           />
           <button
             className={clsx('text-2xl font-bold', 'dark:text-white-bone')}
-            onClick={onIncrease.bind(null, product_id)}
+            onClick={onIncrease.bind(null, product?.id)}
           >
             +
           </button>
@@ -79,15 +77,15 @@ export default function CartItem({
             'dark:text-white-bone'
           )}
         >
-          {formatCurrencyToFixed(+price)} x {quantity}
+          {formatCurrencyToFixed(product?.attributes.price)} x {quantity}
         </span>
         <button
           className={clsx(
             'max-w-fit self-end px-3 py-2 text-sm font-semibold duration-300',
             'hover:bg-dark-brown hover:text-white-bone',
             'dark:text-white-bone'
           )}
-          onClick={onRemove.bind(null, product_id)}
+          onClick={onRemove.bind(null, product?.id)}
         >
           Remove
         </button>

src/components/Cart/CartList.tsx

@@ -3,8 +3,7 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { addToCart, decreaseFromCart, removeFromCart } from '@store/cartSlice';
-
-import { useAppDispatch } from '@hooks/useReduxT';
+import { useAppDispatch } from '@store/store';
 
 import CartItem from './CartItem';
 
@@ -25,7 +24,7 @@ export default function CartList({ cartItems }: ICartListProps) {
   const gotoShopHandler = () => navigate('/shop', { replace: true });
 
   const increaseItemHandler = (id: number) => {
-    const newItem = cartItems.find((item) => item.product_id === id);
+    const newItem = cartItems.find((item) => item.product?.id === id);
     dispatch(addToCart({ ...newItem, quantity: 1 } as INewProductToCart));
   };
   const decreaseItemHandler = (id: number) => {
@@ -63,8 +62,9 @@ export default function CartList({ cartItems }: ICartListProps) {
           {cartItems.map((item) => {
             return (
               <CartItem
-                {...item}
-                key={item.product_id}
+                product={item.product}
+                quantity={item.quantity}
+                key={item.product?.id}
                 onIncrease={increaseItemHandler}
                 onDecrease={decreaseItemHandler}
                 onRemove={removeCartHandler}

src/components/Cart/CartSummary.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import Loading from '@components/UI/Loading';
 
-import { useAppSelector } from '@hooks/useReduxT';
+import { useAppSelector } from '@store/store';
 
 import TotalPricesOrder from './TotalPricesOrder';
 
@@ -59,9 +59,7 @@ export default function CartSummary({
         )}
         onClick={onPaymentHandler}
       >
-        {orderStatus === 'pending'
-          ? 'Loading...'
-          : '        Process to Checkout'}
+        {orderStatus === 'pending' ? 'Loading...' : 'Process to Checkout'}
       </button>
     </section>
   );