update/change folder structure for better understanding

sksabbirhossain · Dec 1, 2023 · 2d400f3 · 2d400f3
1 parent ad9ea3b
commit 2d400f3
Show file tree

Hide file tree

Showing 25 changed files with 123 additions and 110 deletions.
diff --git a/src/App.js b/src/App.js
@@ -6,16 +6,16 @@ import { useAdminAuthChecked } from "./hooks/useAdminAuthChecked";
 import { useUserAuthChecked } from "./hooks/userUserAuthChecked";
 import { AdminLayout } from "./layouts/AdminLayout";
 import { UserLayout } from "./layouts/UserLayout";
-import { AddBrand } from "./pages/Brand/AddBrand";
-import { AllBrands } from "./pages/Brand/AllBrands";
-import { AddCategory } from "./pages/Category/AddCategory";
-import { AllCategories } from "./pages/Category/AllCategories";
-import { Dashboard } from "./pages/Dashboard";
-import { Login } from "./pages/Login";
-import { NotFound } from "./pages/NotFound";
-import { AllOrder } from "./pages/Order/AllOrder";
-import { AddProduct } from "./pages/Product/AddProduct";
-import { AllProducts } from "./pages/Product/AllProducts";
+import { AddBrand } from "./pages/Admin/Brand/AddBrand";
+import { AllBrands } from "./pages/Admin/Brand/AllBrands";
+import { AddCategory } from "./pages/Admin/Category/AddCategory";
+import { AllCategories } from "./pages/Admin/Category/AllCategories";
+import { Dashboard } from "./pages/Admin/Dashboard";
+import { Login } from "./pages/Admin/Login";
+import { NotFound } from "./pages/Admin/NotFound";
+import { AllOrder } from "./pages/Admin/Order/AllOrder";
+import { AddProduct } from "./pages/Admin/Product/AddProduct";
+import { AllProducts } from "./pages/Admin/Product/AllProducts";
 import { CheckOut } from "./pages/User/CheckOut/CheckOut";
 import { Home } from "./pages/User/Home/Home";
 import { Order } from "./pages/User/Order/Order";

diff --git a/src/components/Header/Header.js → src/components/admin/Header/Header.js b/src/components/Header/Header.js → src/components/admin/Header/Header.js
@@ -2,8 +2,8 @@ import React from "react";
 import { AiOutlineBug } from "react-icons/ai";
 import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
-import { selectAdminInfo } from "../../features/auth/authSelectors";
-import { isActive } from "../../features/sidebar/sidebarSlice";
+import { selectAdminInfo } from "../../../features/auth/authSelectors";
+import { isActive } from "../../../features/sidebar/sidebarSlice";
 
 export const Header = () => {
   const dispatch = useDispatch();

diff --git a/src/components/Sidebar/Sidebar.js → src/components/admin/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js → src/components/admin/Sidebar/Sidebar.js
@@ -11,7 +11,7 @@ import {
 } from "react-icons/fa";
 import { useDispatch, useSelector } from "react-redux";
 import { NavLink, useNavigate } from "react-router-dom";
-import { adminLoggedOut } from "../../features/auth/authSlice";
+import { adminLoggedOut } from "../../../features/auth/authSlice";
 
 export const Sidebar = () => {
   const [brandDropDown, setBrandDropDown] = useState(false);

diff --git a/src/components/common/Button/Button.js b/src/components/common/Button/Button.js
@@ -4,7 +4,7 @@ export const Button = ({ name, className, ...rest }) => {
   return (
     <button
       type="submit"
-      className={`px-6 py-[5px] flex justify-center  rounded-md bg-[#28a745] text-white border-2 border-[#28a745] focus:ring-2 overflow-hidden hover:bg-green-600 ease-in duration-300 disabled:bg-green-600/70 ${className}`}
+      className={`px-6 py-[5px] flex justify-center  rounded-md bg-[#28a745] text-white border-2 border-[#28a745] focus:ring-2 overflow-hidden hover:bg-green-700 ease-in duration-300 disabled:bg-gray-500 disabled:border-gray-500 disabled:text-gray-300 ${className}`}
       {...rest}
     >
       {name}

diff --git a/src/components/user/CategoryCard.js b/src/components/user/CategoryCard.js
@@ -2,13 +2,13 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 export const CategoryCard = ({ category }) => {
-  const { _id, name, picture } = category || {}; 
-  
+  const { _id, name, picture } = category || {};
+
   return (
     <Link to={`/${name}/${_id}`}>
       <div className="max-w-[250px] w-full text-center shadow-md border rounded-md p-3 hover:bg-gray-100 hover:text-orange-600 duration-100 ease-linear">
         <img
-          src={`${process.env.REACT_APP_BASE_URL}/uploads/${picture}`}
+          src={picture}
           alt="category"
           className="w-[200px] h-[120px] mx-auto object-cover rounded-md"
         />

diff --git a/src/components/user/ProductCard.js b/src/components/user/ProductCard.js
@@ -27,7 +27,7 @@ export const ProductCard = ({ product }) => {
       <Link to={`/product-details/${productSlug}/${_id}`}>
         <div className="pt-2">
           <img
-            src={`${process.env.REACT_APP_BASE_URL}/uploads/${picture}`}
+            src={picture}
             alt="product"
             className="w-full h-36 object-contain"
           />

diff --git a/src/layouts/AdminLayout.js b/src/layouts/AdminLayout.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
-import { Header } from "../components/Header/Header";
-import { Sidebar } from "../components/Sidebar/Sidebar";
+import { Header } from "../components/admin/Header/Header";
+import { Sidebar } from "../components/admin/Sidebar/Sidebar";
 
 export const AdminLayout = () => {
   return (

diff --git a/src/pages/Brand/AddBrand.js → src/pages/Admin/Brand/AddBrand.js b/src/pages/Brand/AddBrand.js → src/pages/Admin/Brand/AddBrand.js
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link, useNavigate } from "react-router-dom";
-import { Button } from "../../components/common/Button/Button";
-import { Form } from "../../components/common/Form/Form";
-import { FormInput } from "../../components/common/FormInput/FormInput";
-import { Textarea } from "../../components/common/FormInput/Textarea";
-import { Heading } from "../../components/common/Heading/Heading";
-import { Error } from "../../components/ui/Error";
-import { useAddBrandMutation } from "../../features/brand/brandApi";
-import { setTitle } from "../../utils/setTitle";
+import { Button } from "../../../components/common/Button/Button";
+import { Form } from "../../../components/common/Form/Form";
+import { FormInput } from "../../../components/common/FormInput/FormInput";
+import { Textarea } from "../../../components/common/FormInput/Textarea";
+import { Heading } from "../../../components/common/Heading/Heading";
+import { Error } from "../../../components/ui/Error";
+import { useAddBrandMutation } from "../../../features/brand/brandApi";
+import { setTitle } from "../../../utils/setTitle";
 
 export const AddBrand = () => {
   const [name, setName] = useState("");
@@ -25,7 +25,7 @@ export const AddBrand = () => {
     setError("");
     if (!isLoading && isSuccess) {
       toast.success("Brand Added SuccessFull");
-      return navigate("/all-brands");
+      return navigate("/admin/all-brands");
     }
     if (resError?.error) {
       console.log(resError.error);
@@ -53,7 +53,7 @@ export const AddBrand = () => {
       <Heading title="Add Brand" />
       <div className="flex justify-end shadow-sm py-2 rounded-md">
         <Link
-          to="/all-brands"
+          to="/admin/all-brands"
           className=" bg-green-600 px-2 mr-1 py-1 uppercase rounded-md text-gray-50 font-normal"
         >
           All Brands
@@ -84,7 +84,11 @@ export const AddBrand = () => {
               value={description}
               onChange={(e) => setDescription(e.target.value)}
             />
-            <Button name={isLoading ? "loading.." : "Add"} className="w-full" />
+            <Button
+              name={isLoading ? "loading.." : "Add"}
+              className="w-full"
+              disabled={isLoading}
+            />
           </Form>
 
           {error !== "" && <Error error={error} />}

diff --git a/src/pages/Brand/AllBrands.js → src/pages/Admin/Brand/AllBrands.js b/src/pages/Brand/AllBrands.js → src/pages/Admin/Brand/AllBrands.js
@@ -1,8 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { Heading } from "../../components/common/Heading/Heading";
-import { useGetAllBrandsQuery } from "../../features/brand/brandApi";
-import { setTitle } from "../../utils/setTitle";
+import { Heading } from "../../../components/common/Heading/Heading";
+import { useGetAllBrandsQuery } from "../../../features/brand/brandApi";
+import { setTitle } from "../../../utils/setTitle";
 import { BrandTable } from "./BrandTable";
 
 export const AllBrands = () => {
@@ -40,7 +40,7 @@ export const AllBrands = () => {
       <Heading title="All Brands" />
       <div className="flex justify-end shadow-sm py-2 rounded-md">
         <Link
-          to="/add-brand"
+          to="/admin/add-brand"
           className=" bg-green-600 px-2 mr-1 py-1 uppercase rounded-md text-gray-50 font-normal"
         >
           Add Brand

diff --git a/src/pages/Brand/BrandTable.js → src/pages/Admin/Brand/BrandTable.js b/src/pages/Brand/BrandTable.js → src/pages/Admin/Brand/BrandTable.js
@@ -4,7 +4,7 @@ import { FaPencilAlt, FaTrashAlt } from "react-icons/fa";
 import {
   useDeleteBrandMutation,
   useUpdateStatusMutation,
-} from "../../features/brand/brandApi";
+} from "../../../features/brand/brandApi";
 import { UpdateModal } from "./UpdateModal";
 
 export const BrandTable = ({ brands }) => {
@@ -67,7 +67,7 @@ export const BrandTable = ({ brands }) => {
                     className="px-6 py-3 font-medium text-gray-900 whitespace-nowrap"
                   >
                     <img
-                      src={`${process.env.REACT_APP_BASE_URL}/uploads/${picture}`}
+                      src={picture}
                       alt="brand"
                       className="w-11 h-11 rounded-full ring-2 ring-green-700 p-1"
                     />

diff --git a/src/pages/Brand/UpdateModal.js → src/pages/Admin/Brand/UpdateModal.js b/src/pages/Brand/UpdateModal.js → src/pages/Admin/Brand/UpdateModal.js
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { Button } from "../../components/common/Button/Button";
-import { Form } from "../../components/common/Form/Form";
-import { FormInput } from "../../components/common/FormInput/FormInput";
-import { Textarea } from "../../components/common/FormInput/Textarea";
-import { Error } from "../../components/ui/Error";
+import { Button } from "../../../components/common/Button/Button";
+import { Form } from "../../../components/common/Form/Form";
+import { FormInput } from "../../../components/common/FormInput/FormInput";
+import { Textarea } from "../../../components/common/FormInput/Textarea";
+import { Error } from "../../../components/ui/Error";
 import {
   useGetBrandQuery,
   useUpdateBrandMutation,
-} from "../../features/brand/brandApi";
+} from "../../../features/brand/brandApi";
 
 export const UpdateModal = ({ closeModal, brandId }) => {
   const [name, setName] = useState("");

diff --git a/src/pages/Category/AddCategory.js → src/pages/Admin/Category/AddCategory.js b/src/pages/Category/AddCategory.js → src/pages/Admin/Category/AddCategory.js
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link, useNavigate } from "react-router-dom";
-import { Button } from "../../components/common/Button/Button";
-import { Form } from "../../components/common/Form/Form";
-import { FormInput } from "../../components/common/FormInput/FormInput";
-import { SelectBox } from "../../components/common/FormInput/SelectBox";
-import { Heading } from "../../components/common/Heading/Heading";
-import { Error } from "../../components/ui/Error";
-import { useGetAllBrandsQuery } from "../../features/brand/brandApi";
-import { useAddCategoryMutation } from "../../features/category/categoryApi";
+import { Button } from "../../../components/common/Button/Button";
+import { Form } from "../../../components/common/Form/Form";
+import { FormInput } from "../../../components/common/FormInput/FormInput";
+import { SelectBox } from "../../../components/common/FormInput/SelectBox";
+import { Heading } from "../../../components/common/Heading/Heading";
+import { Error } from "../../../components/ui/Error";
+import { useGetAllBrandsQuery } from "../../../features/brand/brandApi";
+import { useAddCategoryMutation } from "../../../features/category/categoryApi";
 
 export const AddCategory = () => {
   const [name, setName] = useState("");
@@ -26,7 +26,7 @@ export const AddCategory = () => {
     setError("");
     if (!resLoading && !isLoading && isSuccess) {
       toast.success("Category Added SuccessFull");
-      return navigate("/all-categories");
+      return navigate("/admin/all-categories");
     }
     if (resError?.error) {
       setError(resError.error);
@@ -51,7 +51,7 @@ export const AddCategory = () => {
       <Heading title="Add Category" />
       <div className="flex justify-end shadow-sm py-2 rounded-md">
         <Link
-          to="/all-categories"
+          to="/admin/all-categories"
           className=" bg-green-600 px-2 mr-1 py-1 uppercase rounded-md text-gray-50 font-normal"
         >
           All Categories
@@ -93,7 +93,12 @@ export const AddCategory = () => {
                   </option>
                 ))}
             </SelectBox>
-            <Button name="Add" className="w-full" />
+
+            <Button
+              name={resLoading ? "loading.." : "Add Product"}
+              className="w-full"
+              disabled={resLoading}
+            />
           </Form>
           {error !== "" && <Error error={error} />}
         </div>

diff --git a/src/pages/Category/AllCategories.js → src/pages/Admin/Category/AllCategories.js b/src/pages/Category/AllCategories.js → src/pages/Admin/Category/AllCategories.js
@@ -1,8 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { Heading } from "../../components/common/Heading/Heading";
-import { setTitle } from "../../utils/setTitle";
-import { useGetCategoriesQuery } from "../../features/category/categoryApi";
+import { Heading } from "../../../components/common/Heading/Heading";
+import { setTitle } from "../../../utils/setTitle";
+import { useGetCategoriesQuery } from "../../../features/category/categoryApi";
 import { CategoriesTable } from "./CategoriesTable";
 
 export const AllCategories = () => {
@@ -41,7 +41,7 @@ export const AllCategories = () => {
       <Heading title="All Categories" />
       <div className="flex justify-end shadow-sm py-2 rounded-md">
         <Link
-          to="/add-category"
+          to="/admin/add-category"
           className=" bg-green-600 px-2 mr-1 py-1 uppercase rounded-md text-gray-50 font-normal"
         >
           Add Category

diff --git a/src/pages/Category/CategoriesTable.js → src/pages/Admin/Category/CategoriesTable.js b/src/pages/Category/CategoriesTable.js → src/pages/Admin/Category/CategoriesTable.js
@@ -3,7 +3,7 @@ import { FaPencilAlt, FaTrashAlt } from "react-icons/fa";
 import {
   useDeleteCategoryMutation,
   useUpdateSatusMutation,
-} from "../../features/category/categoryApi";
+} from "../../../features/category/categoryApi";
 import { CategoryModal } from "./CategoryModal";
 
 export const CategoriesTable = ({ categories }) => {
@@ -62,7 +62,7 @@ export const CategoriesTable = ({ categories }) => {
                     className="px-6 py-3 font-medium text-gray-900 whitespace-nowrap"
                   >
                     <img
-                      src={`${process.env.REACT_APP_BASE_URL}/uploads/${picture}`}
+                      src={picture}
                       alt="category"
                       className="w-11 h-11 rounded-full ring-2 ring-green-700 p-1"
                     />

diff --git a/src/pages/Category/CategoryModal.js → src/pages/Admin/Category/CategoryModal.js b/src/pages/Category/CategoryModal.js → src/pages/Admin/Category/CategoryModal.js
@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { Button } from "../../components/common/Button/Button";
-import { Form } from "../../components/common/Form/Form";
-import { FormInput } from "../../components/common/FormInput/FormInput";
-import { SelectBox } from "../../components/common/FormInput/SelectBox";
-import { Error } from "../../components/ui/Error";
-import { useGetAllBrandsQuery } from "../../features/brand/brandApi";
+import { Button } from "../../../components/common/Button/Button";
+import { Form } from "../../../components/common/Form/Form";
+import { FormInput } from "../../../components/common/FormInput/FormInput";
+import { SelectBox } from "../../../components/common/FormInput/SelectBox";
+import { Error } from "../../../components/ui/Error";
+import { useGetAllBrandsQuery } from "../../../features/brand/brandApi";
 import {
   useGetCategoryQuery,
   useUpdateCategoryMutation,
-} from "../../features/category/categoryApi";
+} from "../../../features/category/categoryApi";
 
 export const CategoryModal = ({ closeModal, categoryId }) => {
   const [name, setName] = useState("");

diff --git a/src/pages/Dashboard.js → src/pages/Admin/Dashboard.js b/src/pages/Dashboard.js → src/pages/Admin/Dashboard.js
@@ -1,6 +1,6 @@
 import React from "react";
-import { Heading } from "../components/common/Heading/Heading";
-import { setTitle } from "../utils/setTitle";
+import { Heading } from "../../components/common/Heading/Heading";
+import { setTitle } from "../../utils/setTitle";
 
 export const Dashboard = () => {
   //set page title

diff --git a/src/pages/Login.js → src/pages/Admin/Login.js b/src/pages/Login.js → src/pages/Admin/Login.js
@@ -2,12 +2,12 @@ import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { AiOutlineBug } from "react-icons/ai";
 import { useNavigate } from "react-router-dom";
-import { Button } from "../components/common/Button/Button";
-import { Form } from "../components/common/Form/Form";
-import { FormInput } from "../components/common/FormInput/FormInput";
-import { Error } from "../components/ui/Error";
-import { useAdminLoginMutation } from "../features/auth/authApi";
-import { setTitle } from "../utils/setTitle";
+import { Button } from "../../components/common/Button/Button";
+import { Form } from "../../components/common/Form/Form";
+import { FormInput } from "../../components/common/FormInput/FormInput";
+import { Error } from "../../components/ui/Error";
+import { useAdminLoginMutation } from "../../features/auth/authApi";
+import { setTitle } from "../../utils/setTitle";
 
 export const Login = () => {
   const [email, setEmail] = useState("");

diff --git a/src/pages/NotFound.js → src/pages/Admin/NotFound.js b/src/pages/NotFound.js → src/pages/Admin/NotFound.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { setTitle } from "../utils/setTitle";
+import { setTitle } from "../../utils/setTitle";
 
 export const NotFound = () => {
   //set page tite

diff --git a/src/pages/Order/AllOrder.js → src/pages/Admin/Order/AllOrder.js b/src/pages/Order/AllOrder.js → src/pages/Admin/Order/AllOrder.js
@@ -1,7 +1,7 @@
 import React from "react";
-import { Heading } from "../../components/common/Heading/Heading";
-import { useGetAllOrderQuery } from "../../features/order/orderApi";
-import { setTitle } from "../../utils/setTitle";
+import { Heading } from "../../../components/common/Heading/Heading";
+import { useGetAllOrderQuery } from "../../../features/order/orderApi";
+import { setTitle } from "../../../utils/setTitle";
 import { OrderTable } from "./OrderTable";
 
 export const AllOrder = () => {

diff --git a/src/pages/Order/OrderTable.js → src/pages/Admin/Order/OrderTable.js b/src/pages/Order/OrderTable.js → src/pages/Admin/Order/OrderTable.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { useUpdateOrderStatusMutation } from "../../features/order/orderApi";
+import { useUpdateOrderStatusMutation } from "../../../features/order/orderApi";
 
 export const OrderTable = ({ orders }) => {
   const [updateOrderStatus] = useUpdateOrderStatusMutation();