{title.substring(0, 30)}...
@@ -32,19 +38,22 @@ const Card = ({
{idr}{" "}
- {prevPrice.toLocaleString("id-ID", {
- styles: "currency",
+ {price.toLocaleString("id-ID", {
+ style: "decimal",
currency: "IDR",
})}
- {dp} {idr}{" "} - {newPrice && - newPrice.toLocaleString("id-ID", { - styles: "currency", - currency: "IDR", - })} + {minimumCredits > 0 ? ( + <> + {dp} {idr} {" "} + {minimumCredits.toLocaleString("id-ID", { + style: "decimal", + currency: "IDR", + })} + + ) : null}
diff --git a/src/components/atoms/Checkbox/index.jsx b/src/components/atoms/Checkbox/index.jsx
index a36260d..5c7514d 100644
--- a/src/components/atoms/Checkbox/index.jsx
+++ b/src/components/atoms/Checkbox/index.jsx
@@ -6,10 +6,22 @@ export default function Checkbox({
name,
id,
title,
+ handlechecked,
}) {
+ const handleChecked = (title, name) => {
+ if (handlechecked) {
+ handlechecked(title, name);
+ }
+ };
return (
);
diff --git a/src/components/moleculs/Category/index.jsx b/src/components/moleculs/Category/index.jsx
index 61e0d17..dd42e14 100644
--- a/src/components/moleculs/Category/index.jsx
+++ b/src/components/moleculs/Category/index.jsx
@@ -1,24 +1,131 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import { ResetButton, CategoryItem } from "../../atoms/ButtonCategory";
import "../../styles/section11.css";
+import { useDispatch } from "react-redux";
+import { getProductsByFilter } from "../../../redux/slice/productsFilter";
const Category = () => {
+ const [activeCategory, setActiveCategory] = useState("");
+ const [filterData, setFilterData] = useState({
+ status: [],
+ category: [],
+ character: [],
+ series: [],
+ });
+ const dispatch = useDispatch();
+
const handleReset = () => {
- // Logika untuk mereset semua
- // ...
+ setFilterData({
+ status: [],
+ category: [],
+ character: [],
+ series: [],
+ });
+ setActiveCategory("");
};
- const handleItemClick = (item) => {
- // Logika untuk menangani pemilihan item
- // ...
+ const handleFilterChange = (title, name) => {
+ setFilterData((prevData) => {
+ return {
+ ...prevData,
+ [name]: prevData[name].includes(title)
+ ? prevData[name].filter((item) => item !== title)
+ : [...prevData[name], title],
+ };
+ });
+ setActiveCategory(title);
};
+ useEffect(() => {
+ dispatch(getProductsByFilter(filterData));
+ });
+ const category = [
+ {
+ title: "Merchandise",
+ name: "category",
+ },
+ {
+ title: "Prize Figure",
+ name: "category",
+ },
+ {
+ title: "Nendoroid",
+ name: "category",
+ },
+ {
+ title: "Scaled Figure",
+ name: "category",
+ },
+ {
+ title: "Pop Up Parade",
+ name: "category",
+ },
+ {
+ title: "Model Kit",
+ name: "category",
+ },
+ {
+ title: "Figma",
+ name: "category",
+ },
+ {
+ title: "Plush",
+ name: "category",
+ },
+ {
+ title: "Light Novel",
+ name: "category",
+ },
+ {
+ title: "Manga",
+ name: "category",
+ },
+ ];
+ const series = [
+ {
+ title: "Jujutsu Kaisen",
+ name: "series",
+ },
+ {
+ title: "Genshin Impact",
+ name: "series",
+ },
+ {
+ title: "Chainsaw Man",
+ name: "series",
+ },
+ {
+ title: "Kimetsu No Yaiba",
+ name: "series",
+ },
+ ];
+ const character = [
+ {
+ title: "Gojo Satoru",
+ name: "character",
+ },
+ {
+ title: "Hatsune Miku",
+ name: "character",
+ },
+ {
+ title: "Muichiro Tokito",
+ name: "character",
+ },
+ {
+ title: "Itadori Yuji",
+ name: "character",
+ },
+ ];
+
return (
<>
Character & Series
- {dp} {idr}{" "} - {newPrice && - newPrice.toLocaleString("id-ID", { - styles: "currency", - currency: "IDR", - })} + {minimumCredits > 0 ? ( + <> + {dp} {idr} {" "} + {minimumCredits.toLocaleString("id-ID", { + style: "decimal", + currency: "IDR", + })} + + ) : null}
- handleItemClick("Merchandise - Acrylic (15470)")}
- />
- handleItemClick("Merchandise (12572)")}
- />
- handleItemClick("Prize Figure (8122)")}
- />
+ {category.map((cat) => (
+ handleFilterChange(cat.title, cat.name)}
+ clasname={
+ cat.title === activeCategory
+ ? "section_11__filterActive"
+ : "section_11__filter"
+ }
+ />
+ ))}
+ {/* end filter by category */}
+
+ {/* filter by series */}
- handleItemClick("Kimetsu no Yaiba (4415)")}
- />
- handleItemClick("Fate (4312)")}
- />
- handleItemClick("Hololive (3643)")}
- />
+ {series.map((series) => (
+ handleFilterChange(series.title, series.name)}
+ />
+ ))}
+ {/* end filter by series */}
+
+ {/* filter by character */}
- handleItemClick("Non Character (1994)")}
- />
- handleItemClick("Hatsune Miku (1466)")}
- />
- handleItemClick("Original Character (814)")}
- />
-
-
- handleItemClick("COSPA (4764)")}
- />
- handleItemClick("Bandai Spirits (4692)")}
- />
- handleItemClick("Good Smile Company (4585)")}
- />
+ {character.map((char) => (
+ handleFilterChange(char.title, char.name)}
+ />
+ ))}
+ {/* end filter by character */}
);
};
diff --git a/src/components/moleculs/CheckboxGroup/index.jsx b/src/components/moleculs/CheckboxGroup/index.jsx
index cca5062..112f918 100644
--- a/src/components/moleculs/CheckboxGroup/index.jsx
+++ b/src/components/moleculs/CheckboxGroup/index.jsx
@@ -1,81 +1,85 @@
+import { useEffect, useState } from "react";
import Checkbox from "../../atoms/Checkbox";
+import { useDispatch } from "react-redux";
-export default function CheckboxGroup({ handlechange }) {
+import { getProductsByFilter } from "../../../redux/slice/productsFilter";
+
+export default function CheckboxGroup() {
+ const [filterData, setFilterData] = useState({
+ status: [],
+ category: [],
+ character: [],
+ series: [],
+ });
+ const dispatch = useDispatch();
+
+ const handleReset = () => {
+ setFilterData({
+ status: [],
+ category: [],
+ character: [],
+ });
+ };
+
+ const handleFilterChange = (title, name) => {
+ setFilterData((prevData) => {
+ if (title !== "All Item") {
+ return {
+ ...prevData,
+ [name]: prevData[name].includes(title)
+ ? prevData[name].filter((item) => item !== title)
+ : [...prevData[name], title],
+ };
+ } else {
+ handleReset();
+ }
+ });
+ };
+
+ useEffect(() => {
+ dispatch(getProductsByFilter(filterData));
+ });
+ const availability = [
+ {
+ title: "All Item",
+ name: "status",
+ id: "section_11_all",
+ className: "section_11_radiodb",
+ },
+ {
+ title: "Ready Stock",
+ name: "status",
+ id: "section_11_ready",
+ className: "section_11_radiodb indented",
+ },
+ {
+ title: "Late pre-order",
+ name: "status",
+ id: "section_11_po",
+ className: "section_11_radiodb indented",
+ },
+ {
+ title: "Pre-Order",
+ name: "status",
+ id: "section_11_bo",
+ className: "section_11_radiodb indented",
+ },
+ ];
return (
<>
Availability
-
- dispatch(login({ username, password }))}
- />
-
- );
+ return (
+ <>
+
@@ -37,7 +70,8 @@ export default function Login() {
Forgot your password
-
+ {loading &&
-
);
};
diff --git a/src/components/moleculs/FormButton/index.jsx b/src/components/moleculs/FormButton/index.jsx
index a1fb64e..400a7ae 100644
--- a/src/components/moleculs/FormButton/index.jsx
+++ b/src/components/moleculs/FormButton/index.jsx
@@ -1,28 +1,17 @@
-import { useDispatch, useSelector } from "react-redux";
-import ButtonLogin from "../../atoms/ButtonLogin";
-import { useEffect } from "react";
-import { login } from "../../../redux/actions/auth.action";
+import ButtonLogin from '../../atoms/ButtonLogin';
export default function FormButton() {
-
- const { username, password } = useSelector((state) => state.login);
- const dispatch = useDispatch();
- useEffect(() => {
- console.log(import.meta.env.VITE_BACKEND_BASE_URL);
- })
-
- return (
- <>
-
+ {categories.map((cat) => (
handleButton(cat.value || "", cat.name || "")}
+ title={cat.title}
+ className={cat.value === activeCategory ? "section__10_active" : ""}
/>
-
+ ))}
+ onButtonClick("Active")}
+ >
+ Active
+
+ onButtonClick("Expired")}
+ >
+ Expired
+
+ onButtonClick("Paid")}
+ >
+ Paid
+
+
+ );
+};
+
+export default TransactionsButton;
diff --git a/src/components/organism/Login/index.jsx b/src/components/organism/Login/index.jsx
index 775c225..3441ea7 100644
--- a/src/components/organism/Login/index.jsx
+++ b/src/components/organism/Login/index.jsx
@@ -5,11 +5,14 @@ import HeadLogin from "../../moleculs/HeadLogin";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login } from "../../../redux/actions/auth.action";
+import axios from "axios";
+import { setMessage } from "../../../redux/slice/auth.slice";
+import { setPassword, setUsername } from "../../../redux/slice/login.slice";
export default function Login() {
const dispatch = useDispatch();
const navigate = useNavigate();
const loginState = useSelector((state) => state.login);
- const { currentUser, error, message } = useSelector((state) => state.auth);
+ const { currentUser, error, message, loading } = useSelector((state) => state.auth);
const { username, password } = loginState;
useEffect(() => {
@@ -18,15 +21,45 @@ export default function Login() {
navigate("/", { replace: true });
return;
}
- console.log(error, message);
}, [currentUser, navigate, error, message]); // Run this effect whenever the user changes
+ useEffect(() => {
+ testApi();
+ }, []);
+
+ useEffect(() => {
+ const timeoutId = setTimeout(() => {
+ dispatch(setMessage(null));
+ dispatch(setUsername(null));
+ dispatch(setPassword(null));
+ }, 3000)
+
+ return () => clearTimeout(timeoutId)
+ }, [dispatch, message])
+
+ useEffect(() => {
+ if(error || message) {
+ dispatch(setUsername(null));
+ dispatch(setPassword(null));
+ }
+ }, [error, message, dispatch])
+
const onSubmit = (event) => {
event.preventDefault();
dispatch(login({ username, password }));
- console.log(currentUser);
};
+ async function testApi() {
+ await axios
+ .get(`${import.meta.env.VITE_BACKEND_BASE_URL}/health`)
+ .then((response) => {
+ console.log(response.data.message.healthCheck);
+ })
+ .catch((error) => {
+ console.log("error ", error);
+ });
+ }
+
return (
//
Loading...
}
+ {(error || message) && {message}
}
@@ -54,6 +64,10 @@ export default function Register() {
className="register_btn"
/>
+
+ {loading && Loading...
} + {showMessage &&{message}
} + Already have an account? Click here! diff --git a/src/components/organism/Section10/index.jsx b/src/components/organism/Section10/index.jsx index 8573263..cf007b9 100644 --- a/src/components/organism/Section10/index.jsx +++ b/src/components/organism/Section10/index.jsx @@ -3,40 +3,33 @@ import FilterButtons from "../../moleculs/FilterButtons"; import Products from "../../moleculs/Products"; import productsData from "../../../utils/constant/DataSection10"; import "../../styles/section10.css"; +import { useDispatch, useSelector } from "react-redux"; -const Section10 = ({ handleClick, selectedCategory }) => { - const [filteredProducts, setFilteredProducts] = useState([]); +import { getProductsByFilter } from "../../../redux/slice/productsFilter"; + +const Section10 = ({ selectedCategory }) => { const [visibleItems, setVisibleItems] = useState(24); const [noMoreItems, setNoMoreItems] = useState(false); - useEffect(() => { - filterData(); - }, [selectedCategory]); - - const filterData = () => { - let filteredProducts = productsData; - - if (selectedCategory) { - filteredProducts = filteredProducts.filter( - ({ category, color, company, newPrice, title }) => - category === selectedCategory || - color === selectedCategory || - company === selectedCategory || - newPrice === selectedCategory || - title === selectedCategory - ); - } + const product = useSelector((state) => state.productsFilter); + const dispatch = useDispatch(); - setFilteredProducts(filteredProducts); - setVisibleItems(24); - setNoMoreItems(false); + const handleFilterChange = (filterCategory, filterName) => { + const filterParams = { [filterName]: filterCategory }; + dispatch(getProductsByFilter(filterParams)); + console.log(filterParams); }; + useEffect(() => { + dispatch(getProductsByFilter()); + }, [dispatch]); + console.log(product); + const loadMore = () => { - if (visibleItems >= filteredProducts.length) { + if (visibleItems >= product.products.length) { setNoMoreItems(true); } else { - setVisibleItems((prev) => Math.min(prev + 24, filteredProducts.length)); + setVisibleItems((prev) => Math.min(prev + 24, product.products.length)); } }; @@ -50,15 +43,11 @@ const Section10 = ({ handleClick, selectedCategory }) => {Newest Items
-
{noMoreItems ? (
diff --git a/src/components/organism/Section5/index.jsx b/src/components/organism/Section5/index.jsx
index 84b9d3c..f153f0f 100644
--- a/src/components/organism/Section5/index.jsx
+++ b/src/components/organism/Section5/index.jsx
@@ -1,15 +1,22 @@
import { DataSection5 } from "../../../utils/constant/DataSection5";
import Slider from "react-slick";
import Card from "../../atoms/Card";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
import ButtonSlider from "../../atoms/ButtonSlider";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
-import { getProductDetail } from "../../../redux/slice/itemdetail.slice";
+import { getProductById } from "../../../redux/slice/productById.slice";
+import { getProducts } from "../../../redux/slice/products.slice";
const Section5 = () => {
const sliderRef = useRef(null);
+ const product = useSelector((state) => state.products);
+ console.log(product);
+ const dispatch = useDispatch();
+ useEffect(() => {
+ dispatch(getProducts());
+ }, [dispatch]);
const next = () => {
if (sliderRef.current) {
sliderRef.current.slickNext();
@@ -55,8 +62,6 @@ const Section5 = () => {
],
};
- const dispatch = useDispatch();
-
return (
@@ -95,16 +100,21 @@ const Section5 = () => {
ref={sliderRef}
{...settings}
>
- {DataSection5.map((product) => (
+ {product.products.map((product) => (
dispatch(getProductDetail(product))}
+ titleDate={product.createdAt}
+ status={product.status}
+ price={product.price}
+ minimumCredits={product.minimumCredits}
+ onClickHandler={() => dispatch(getProductById(product.id))}
dp="DP"
idr="IDR"
/>
diff --git a/src/components/organism/Section7/index.jsx b/src/components/organism/Section7/index.jsx
index 8201e6d..7b22ea9 100644
--- a/src/components/organism/Section7/index.jsx
+++ b/src/components/organism/Section7/index.jsx
@@ -1,15 +1,24 @@
-import { productSection7 } from "../../../utils/constant/DataSection7";
import Slider from "react-slick";
import Card from "../../atoms/Card";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useRef } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
-import { getProductDetail } from "../../../redux/slice/itemdetail.slice";
+import { getProductById } from "../../../redux/slice/productById.slice";
+import { getProducts } from "../../../redux/slice/products.slice";
import ButtonSlider from "../../atoms/ButtonSlider";
+import { useEffect } from "react";
const Section7 = () => {
+ const product = useSelector((state) => state.products);
+ console.log(product);
+
+ const dispatch = useDispatch();
+ useEffect(() => {
+ dispatch(getProducts());
+ }, [dispatch]);
+
const sliderRef = useRef(null);
const next = () => {
@@ -57,8 +66,6 @@ const Section7 = () => {
],
};
- const dispatch = useDispatch();
-
return (
@@ -94,27 +101,38 @@ const Section7 = () => {
"
text="‹"
/>
-
- {productSection7.map((product) => (
-
- dispatch(getProductDetail(product))}
- dp="DP"
- idr="IDR"
- />
-
- ))}
-
+ {product.loading &&
+ {product.products.map((product) => (
+
+ dispatch(getProductById(product))}
+ dp="DP"
+ idr="IDR"
+ />
+
+ ))}
+
+ ) : null}
{
const sliderRef = useRef(null);
+ const product = useSelector((state) => state.products);
+ console.log(product);
+
+ const dispatch = useDispatch();
+ useEffect(() => {
+ dispatch(getProducts());
+ }, [dispatch]);
const next = () => {
if (sliderRef.current) {
@@ -56,7 +64,6 @@ const Section8 = () => {
],
};
- const dispatch = useDispatch();
return (
Loading
} + {!product.loading && product.error ? ( +error :{product.error}
+ ) : null} + {!product.loading && product.products.length ? ( +
@@ -91,28 +98,39 @@ const Section8 = () => {
"
text="‹"
/>
-
- {productSection8.map((product) => (
-
- dispatch(getProductDetail(product))}
- dp="DP"
- idr="IDR"
- />
-
- ))}
-
+ {product.loading &&
+ {product.products.map((product) => (
+
+ dispatch(getProductById(product))}
+ dp="DP"
+ idr="IDR"
+ />
+
+ ))}
+
+ ) : null}
+
{
const sliderRef = useRef(null);
+ const product = useSelector((state) => state.products);
+ console.log(product);
+
+ const dispatch = useDispatch();
+ useEffect(() => {
+ dispatch(getProducts());
+ }, [dispatch]);
const next = () => {
if (sliderRef.current) {
@@ -56,7 +64,6 @@ const Section9 = () => {
],
};
- const dispatch = useDispatch();
return (
Loading
} + {!product.loading && product.error ? ( +error :{product.error}
+ ) : null} + {!product.loading && product.products.length ? ( +
@@ -91,28 +98,39 @@ const Section9 = () => {
"
text="‹"
/>
-
- {productSection9.map((product) => (
-
- dispatch(getProductDetail(product))}
- dp="DP"
- idr="IDR"
- />
-
- ))}
-
+ {product.loading &&
+ {product.products.map((product) => (
+
+ dispatch(getProductById(product))}
+ dp="DP"
+ idr="IDR"
+ />
+
+ ))}
+
+ ) : null}
+
{
+ setActiveStatus(status);
+ };
+
+ const getTransactionMessage = () => {
+ switch (activeStatus) {
+ case "Active":
+ return "Nggak ada yang harus dibayar nih";
+ case "Expired":
+ return "Belum ada transaksi yang kadaluarsa nih";
+ case "Paid":
+ return "Belum ada transaksi yang sudah dibayar nih";
+ default:
+ return "Belum ada transaksi apapun nih";
+ }
+ };
+
+ return (
+
+
+ );
+}
diff --git a/src/components/organism/Wishlist/Content/index.jsx b/src/components/organism/Wishlist/Content/index.jsx
index e5a7c79..0b70317 100644
--- a/src/components/organism/Wishlist/Content/index.jsx
+++ b/src/components/organism/Wishlist/Content/index.jsx
@@ -3,11 +3,12 @@ import FilterDropdown from "../../../moleculs/FilterDropdown/FilterDropdown";
import FilterDropdownMobile from "../../../moleculs/FilterDropdown/FilterDropdownMobile";
import FilterSortButtons from "../../../moleculs/FilterSortButtons";
import productsData from "../../../../utils/constant/DataSection10";
-import { getPaginatedData } from "../../../../utils/constant/DataSection10";
import Card from "../../../atoms/Card";
import SidebarMobile from "../Sidebar/SidebarMobile";
+import { getProductsByFilter } from "../../../../redux/slice/productsFilter";
+import { useDispatch, useSelector } from "react-redux";
-const PAGE_SIZE = 24;
+const PAGE_SIZE = 20;
const getTotalPages = (totalItems, pageSize) => {
return Math.ceil(totalItems.length / pageSize);
@@ -23,6 +24,13 @@ const Content = () => {
{ value: "likes", label: "Most Liked", selected: false },
];
+ const dispatch = useDispatch();
+ const product = useSelector((state) => state.productsFilter);
+
+ useEffect(() => {
+ dispatch(getProductsByFilter());
+ }, [dispatch]);
+
const [pageNumber, setPageNumber] = useState(1);
const [showSidebarMobile, setShowSidebarMobile] = useState(false);
const [selectedFilter, setSelectedFilter] = useState("all");
@@ -31,8 +39,10 @@ const Content = () => {
const filteredData =
selectedFilter === "all"
- ? productsData
- : productsData.filter((product) => product.category === selectedFilter);
+ ? product.productsFilter
+ : product.productsFilter.filter(
+ (product) => product.category === selectedFilter
+ );
const handleFilterChange = (selectedValue) => {
setSelectedFilter(selectedValue);
@@ -44,7 +54,7 @@ const Content = () => {
};
const handleNextPage = () => {
- const totalPages = getTotalPages(productsData, PAGE_SIZE);
+ const totalPages = getTotalPages(filteredData, PAGE_SIZE);
setPageNumber((prevPage) => Math.min(prevPage + 1, totalPages));
};
@@ -52,13 +62,18 @@ const Content = () => {
setPageNumber(page);
};
- const cardsToRender = getPaginatedData(filteredData, pageNumber, PAGE_SIZE);
- const totalPages = getTotalPages(productsData, PAGE_SIZE);
+ const cardsToRender = filteredData.slice(
+ (pageNumber - 1) * PAGE_SIZE,
+ pageNumber * PAGE_SIZE
+ );
+
+ const totalPages = getTotalPages(filteredData, PAGE_SIZE);
const handleFilterClick = () => {
setShowSidebarMobile(!showSidebarMobile);
setActivePanel("sidebar");
};
+
const handleFilterDropdownClick = () => {
setShowFilterDropdown(!showFilterDropdown);
setActivePanel("filter");
@@ -75,7 +90,11 @@ const Content = () => {
{
handleChange={handleFilterChange}
/>
)}
-
Loading
} + {!product.loading && product.error ? ( +error :{product.error}
+ ) : null} + {!product.loading && product.products.length ? ( +
+
+ Transactions
+
+
+
+
+ )}
+ {getTransactionMessage()}
+ yuk belanja! +All Items
- Showing 1 — 4 of 70 + + Showing {(pageNumber - 1) * PAGE_SIZE + 1} —{" "} + {Math.min(pageNumber * PAGE_SIZE, filteredData.length)} of{" "} + {filteredData.length} +
+
diff --git a/src/components/organism/Wishlist/Sidebar/Sidebar.jsx b/src/components/organism/Wishlist/Sidebar/Sidebar.jsx
index 4992520..c2f60c3 100644
--- a/src/components/organism/Wishlist/Sidebar/Sidebar.jsx
+++ b/src/components/organism/Wishlist/Sidebar/Sidebar.jsx
@@ -2,11 +2,11 @@ import React, { useState } from "react";
import Category from "../../../moleculs/Category";
import CheckboxGroup from "../../../moleculs/CheckboxGroup";
-const Sidebar = ({ handlechange }) => {
+const Sidebar = () => {
return (
{cardsToRender.map((product) => (
-
-
+ {pageNumber > 1 && (
+
+ )}
+
{[...Array(totalPages).keys()].map((page) => (
))}
-
+
+ {pageNumber < totalPages && (
+
+ )}