From 0a0c497204acbac562700d80f38e74aa9ffcd94e Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Thu, 1 Dec 2022 16:26:21 +0700 Subject: dynamic filter, dynamic pagination, detail brand, to title case --- src/components/Filter.js | 98 +++++++++++++++++------------- src/components/ManufactureCard.js | 15 +++++ src/components/Pagination.js | 4 +- src/components/ProductCard.js | 2 +- src/helpers/slug.js | 13 +++- src/helpers/toTitleCase.js | 8 +++ src/pages/index.js | 18 +++--- src/pages/shop/brands.js | 12 +--- src/pages/shop/brands/[slug].js | 122 ++++++++++++++++++++++++++++++++++++++ src/pages/shop/product/[slug].js | 10 ++-- src/pages/shop/search.js | 3 - 11 files changed, 234 insertions(+), 71 deletions(-) create mode 100644 src/components/ManufactureCard.js create mode 100644 src/helpers/toTitleCase.js create mode 100644 src/pages/shop/brands/[slug].js (limited to 'src') diff --git a/src/components/Filter.js b/src/components/Filter.js index 385c585d..d2a5bf1b 100644 --- a/src/components/Filter.js +++ b/src/components/Filter.js @@ -11,7 +11,8 @@ const Filter = ({ defaultCategory, defaultBrand, defaultOrderBy, - searchResults + searchResults, + disableFilter = [] }) => { const router = useRouter(); @@ -24,13 +25,22 @@ const Filter = ({ const [brands, setBrands] = useState([]); const filterRoute = () => { - let filterRoute = defaultRoute; - if (selectedBrand) filterRoute += `&brand=${selectedBrand}`; - if (selectedCategory) filterRoute += `&category=${selectedCategory}`; - if (priceFrom > 0) filterRoute += `&price_from=${priceFrom}`; - if (priceTo > 0) filterRoute += `&price_to=${priceTo}`; - if (orderBy) filterRoute += `&order_by=${orderBy}`; - return filterRoute; + let filterRoute = []; + let filterRoutePrefix = '?'; + if (selectedBrand) filterRoute.push(`brand=${selectedBrand}`); + if (selectedCategory) filterRoute.push(`category=${selectedCategory}`); + if (priceFrom > 0) filterRoute.push(`price_from=${priceFrom}`); + if (priceTo > 0) filterRoute.push(`price_to=${priceTo}`); + if (orderBy) filterRoute.push(`order_by=${orderBy}`); + + if (defaultRoute.includes('?')) filterRoutePrefix = '&'; + if (filterRoute.length > 0) { + filterRoute = filterRoutePrefix + filterRoute.join('&'); + } else { + filterRoute = ''; + } + + return defaultRoute + filterRoute; } useEffect(() => { @@ -82,40 +92,48 @@ const Filter = ({
-
- -
- - - + {!disableFilter.includes('orderBy') ? ( +
+ +
+ + + +
+
+ ) : ''} + {!disableFilter.includes('category') ? ( +
+ +
-
-
- - -
-
- - -
-
- -
- setPriceFrom(e.target.value)}/> - — - setPriceTo(e.target.value)}/> + ) : ''} + {!disableFilter.includes('brand') ? ( +
+ +
-
+ ) : ''} + {!disableFilter.includes('price') ? ( +
+ +
+ setPriceFrom(e.target.value)}/> + — + setPriceTo(e.target.value)}/> +
+
+ ) : ''} diff --git a/src/components/ManufactureCard.js b/src/components/ManufactureCard.js new file mode 100644 index 00000000..6b96a852 --- /dev/null +++ b/src/components/ManufactureCard.js @@ -0,0 +1,15 @@ +import { LazyLoadImage } from "react-lazy-load-image-component"; +import "react-lazy-load-image-component/src/effects/blur.css"; +import { createSlug } from "../helpers/slug"; +import Link from "./Link"; + +export default function ManufactureCard({ data }) { + const manufacture = data; + return ( + + {manufacture.logo ? ( + + ) : manufacture.name} + + ); +} \ No newline at end of file diff --git a/src/components/Pagination.js b/src/components/Pagination.js index 09566a46..1cb1bca0 100644 --- a/src/components/Pagination.js +++ b/src/components/Pagination.js @@ -5,13 +5,15 @@ export default function Pagination({ pageCount, currentPage, url }) { let lastPage = false; let dotsPrevPage = false; let dotsNextPage = false; + let urlParameterPrefix = url.includes('?') ? '&' : '?'; + return (
{Array.from(Array(pageCount)).map((v, i) => { let page = i + 1; let rangePrevPage = currentPage - 2; let rangeNextPage = currentPage + 2; - let PageComponent = {page}; + let PageComponent = {page}; let DotsComponent =
...
; if (pageCount == 7) { diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index 2299d931..0fe47196 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -19,7 +19,7 @@ export default function ProductCard({ data }) {
{typeof product.manufacture.name !== "undefined" ? ( - {product.manufacture.name} + {product.manufacture.name} ) : ( - )} diff --git a/src/helpers/slug.js b/src/helpers/slug.js index ed1a5b6a..b1e67cdf 100644 --- a/src/helpers/slug.js +++ b/src/helpers/slug.js @@ -1,13 +1,22 @@ +import toTitleCase from './toTitleCase'; + const createSlug = (name, id) => { return name?.trim().replace(new RegExp(/[^A-Za-z0-9]/, 'g'), '-').toLowerCase() + '-' + id; } -const getId = (slug) => { +const getIdFromSlug = (slug) => { let id = slug.split('-'); return id[id.length-1]; } +const getNameFromSlug = (slug) => { + let name = slug.split('-'); + name.pop(); + return toTitleCase(name.join(' ')); +} + export { createSlug, - getId + getIdFromSlug, + getNameFromSlug }; \ No newline at end of file diff --git a/src/helpers/toTitleCase.js b/src/helpers/toTitleCase.js new file mode 100644 index 00000000..5cfd70d0 --- /dev/null +++ b/src/helpers/toTitleCase.js @@ -0,0 +1,8 @@ +export default function toTitleCase(str) { + return str.replace( + /\w\S*/g, + function(txt) { + return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); + } + ); +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 95d9161f..ee746519 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -10,6 +10,8 @@ import "swiper/css/pagination"; import "swiper/css/autoplay"; import ProductSlider from "../components/product/ProductSlider"; import Layout from "../components/Layout"; +import axios from "axios"; +import ManufactureCard from "../components/ManufactureCard"; export default function Home() { const [heroBanners, setHeroBanners] = useState(null); @@ -37,8 +39,8 @@ export default function Home() { getReadyStockProducts(); const getPopularProducts = async () => { - const dataPopularProducts = await apiOdoo('GET', `/api/v1/product?manufactures=10&limit=30`); - setPopularProducts(dataPopularProducts); + const dataPopularProducts = await axios(`${process.env.SELF_HOST}/api/shop/search?q=*&page=1&order_by=popular`); + setPopularProducts(dataPopularProducts.data.response); } getPopularProducts(); }, []); @@ -62,22 +64,20 @@ export default function Home() { { manufactures?.manufactures?.map((manufacture, index) => ( -
- -
+ )) }
-
-

Produk Ready Stock

- -

Produk Populer

+
+

Produk Ready Stock

+ +
) diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js index 5d93bf4b..6c1f1816 100644 --- a/src/pages/shop/brands.js +++ b/src/pages/shop/brands.js @@ -1,13 +1,10 @@ -import { LazyLoadImage } from "react-lazy-load-image-component"; import Header from "../../components/Header"; import apiOdoo from "../../helpers/apiOdoo"; -import "react-lazy-load-image-component/src/effects/blur.css"; -import Link from "../../components/Link"; -import { createSlug } from "../../helpers/slug"; import InfiniteScroll from "react-infinite-scroll-component"; import { useEffect, useState } from "react"; import Spinner from "../../components/Spinner"; import Layout from "../../components/Layout"; +import ManufactureCard from "../../components/ManufactureCard"; export async function getServerSideProps() { let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31'); @@ -24,7 +21,6 @@ export default function Brands({ initialManufactures }) { const getMoreManufactures = async () => { const name = manufactureStartwith != '' ? `${manufactureStartwith}%` : ''; - console.log(manufactures, manufactures.length); const result = await apiOdoo('GET', `/api/v1/manufacture?limit=30&offset=${manufactures.length}&name=${name}`); setHasMoreManufacture(manufactures.length + 30 < result.manufacture_total) setManufactures((manufactures) => [...manufactures, ...result.manufactures]); @@ -69,11 +65,7 @@ export default function Brands({ initialManufactures }) { > {manufactures?.map((manufacture, index) => ( manufacture.name ? ( - - {manufacture.logo ? ( - - ) : manufacture.name} - + ) : '' ))} diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js new file mode 100644 index 00000000..b532e7a7 --- /dev/null +++ b/src/pages/shop/brands/[slug].js @@ -0,0 +1,122 @@ +import axios from "axios"; +import { useState } from "react"; +import Filter from "../../../components/Filter"; +import Header from "../../../components/Header"; +import Layout from "../../../components/Layout"; +import Pagination from "../../../components/Pagination"; +import ProductCard from "../../../components/ProductCard"; +import { getNameFromSlug } from "../../../helpers/slug"; +import FilterIcon from "../../../icons/filter.svg"; + +export async function getServerSideProps(context) { + const { + slug, + page = 1, + category = '', + price_from = '0', + price_to = '0', + order_by = '', + } = context.query; + + let urlParameter = [ + 'q=*', + `page=${page}`, + `brand=${getNameFromSlug(slug)}`, + `category=${category}`, + `price_from=${price_from}`, + `price_to=${price_to}`, + `order_by=${order_by}` + ].join('&'); + let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?${urlParameter}`); + searchResults = searchResults.data; + + return { + props: { + searchResults, + page, + slug, + category, + price_from, + price_to, + order_by + } + }; +} + +export default function BrandDetail({ + searchResults, + page, + slug, + category, + price_from, + price_to, + order_by +}) { + const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows); + const productStart = searchResults.responseHeader.params.start; + const productRows = searchResults.responseHeader.params.rows; + const productFound = searchResults.response.numFound; + + const [activeFilter, setActiveFilter] = useState(false); + + const route = () => { + let route = `/shop/brands/${slug}`; + if (category) route += `&category=${category}`; + if (price_from > 0) route += `&price_from=${price_from}`; + if (price_to > 0) route += `&price_to=${price_to}`; + if (order_by) route += `&order_by=${order_by}`; + return route; + } + + return ( + <> +
+ setActiveFilter(false)} + defaultPriceFrom={price_from} + defaultPriceTo={price_to} + defaultBrand='' + defaultCategory={category} + defaultOrderBy={order_by} + searchResults={searchResults} + disableFilter={['brand']} + /> + +
+ +

Produk

+
+ {productFound > 0 ? ( + <> + Menampilkan  + {pageCount > 1 ? ( + <> + {productStart + 1}-{ + (productStart + productRows) > productFound ? productFound : productStart + productRows + } +  dari  + + ) : ''} + {searchResults.response.numFound} +  produk untuk brand {getNameFromSlug(slug)} + + ) : 'Mungkin yang anda cari'} +
+
+ {searchResults.response.products.map((product) => ( + + ))} +
+ +
+ +
+
+ + + ) +} \ No newline at end of file diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index 598330f4..dd554660 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -3,23 +3,23 @@ import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import Header from "../../../components/Header"; import apiOdoo from "../../../helpers/apiOdoo"; -import { createSlug, getId } from "../../../helpers/slug"; +import { createSlug, getIdFromSlug } from "../../../helpers/slug"; import currencyFormat from "../../../helpers/currencyFormat"; import { LazyLoadImage } from "react-lazy-load-image-component"; import "react-lazy-load-image-component/src/effects/blur.css"; import ProductSlider from "../../../components/product/ProductSlider"; import Layout from "../../../components/Layout"; -export async function getServerSideProps(context) { +export async function getServerSideProps( context ) { const { slug } = context.query; - let product = await apiOdoo('GET', '/api/v1/product/' + getId(slug)); + let product = await apiOdoo('GET', '/api/v1/product/' + getIdFromSlug(slug)); if (product.length == 1) { product = product[0]; } return {props: {product}}; } -export default function ProductDetail({product}) { +export default function ProductDetail({ product }) { const router = useRouter(); const { slug } = router.query; const [selectedVariant, setSelectedVariant] = useState(""); @@ -43,7 +43,7 @@ export default function ProductDetail({product}) { useEffect(() => { setSimilarProducts(null); const getSimilarProducts = async () => { - const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${getId(slug)}/similar?limit=20`); + const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${getIdFromSlug(slug)}/similar?limit=20`); setSimilarProducts(dataSimilarProducts); } if (slug) getSimilarProducts(); diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js index 6b24f2a9..2ae3cca4 100644 --- a/src/pages/shop/search.js +++ b/src/pages/shop/search.js @@ -6,7 +6,6 @@ import ProductCard from "../../components/ProductCard"; import FilterIcon from "../../icons/filter.svg"; import { useState } from "react"; import Filter from "../../components/Filter"; -import { useRouter } from "next/router"; export async function getServerSideProps(context) { const { @@ -42,8 +41,6 @@ export default function ShopSearch({ price_to, order_by }) { - const router = useRouter(); - const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows); const productStart = searchResults.responseHeader.params.start; const productRows = searchResults.responseHeader.params.rows; -- cgit v1.2.3