react-boilerplate#33: implement api brand and breadcrumbs

src/app/pages/Category/components/Filter.tsx

@@ -3,8 +3,13 @@ import styled from 'styled-components';
 import FilterImg from './assets/filter.png';
 import { FilterBy } from './ButtonBrand';
 import { SortByLabel } from './SortBy';
+import { IBrand } from 'types/Card';
+import { useProductCateSlice } from '../slice';
+import { useSelector } from 'react-redux';
+import { selectBrand } from '../slice/selector';
 
 export const Filter = () => {
+  useProductCateSlice();
   const [isSticky, setIsSticky] = useState(false);
 
   useEffect(() => {
@@ -22,14 +27,7 @@ export const Filter = () => {
     };
   }, []);
 
-  const FilterData = [
-    'Apple',
-    'SamSung',
-    'Xiaomi',
-    'OPPO',
-    'Chơi game',
-    'Pin khủng',
-  ];
+  const FilterData: IBrand[] = useSelector(selectBrand);
 
   return (
     <Wrapper className={isSticky ? 'sticky' : ''}>
@@ -40,7 +38,7 @@ export const Filter = () => {
             Lọc
           </BtnFilterAll>
           {FilterData.length > 0 &&
-            FilterData.map((e, index) => <FilterBy key={index} text={e} />)}
+            FilterData.map(e => <FilterBy key={e.id} text={e.name} />)}
         </Brand>
         <SortBy>
           <SortByLabel />

src/app/pages/Category/index.tsx

@@ -11,7 +11,12 @@ import { useEffect } from 'react';
 import { ProductCateActions, useProductCateSlice } from './slice';
 import { useDispatch, useSelector } from 'react-redux';
 import { CenteredLoading } from 'app/components/LoadingCenter';
-import { selectIsLoading } from './slice/selector';
+import {
+  selectBrandLoading,
+  selectBreadCrumb,
+  selectBreadCrumbLoading,
+  selectIsLoading,
+} from './slice/selector';
 
 export function Category() {
   useProductCateSlice();
@@ -22,28 +27,26 @@ export function Category() {
 
   const isLoading = useSelector(selectIsLoading);
 
+  const isBreadCrumbLoading = useSelector(selectBreadCrumbLoading);
+
+  const isBrandLoading = useSelector(selectBrandLoading);
+
   useEffect(() => {
     dispatch(ProductCateActions.setCateId(id));
     dispatch(ProductCateActions.loadProduct());
+    dispatch(ProductCateActions.loadBreadCrumb());
+    dispatch(ProductCateActions.loadingBrand());
   }, [id]);
 
-  const BreakCumData: IBreakCum[] = [
-    {
-      name: 'Trang chủ',
-      link: '/',
-    },
-    {
-      name: '136 điện thoại',
-    },
-  ];
+  const BreakCumData: IBreakCum[] = useSelector(selectBreadCrumb);
   return (
     <>
       <Helmet>
         <title>Danh mục</title>
         <meta name="description" content="login" />
       </Helmet>
       <Wrapper>
-        {isLoading ? (
+        {isLoading || isBreadCrumbLoading || isBrandLoading ? (
           <WrapperLoading>
             <CenteredLoading minHeight="100%" />
           </WrapperLoading>

src/app/pages/Category/slice/index.ts

@@ -2,19 +2,23 @@ import { PayloadAction } from '@reduxjs/toolkit';
 import { ProductCateState } from './type';
 import { createSlice } from 'utils/@reduxjs/toolkit';
 import { useInjectReducer, useInjectSaga } from 'utils/redux-injectors';
-import { ICard } from 'types/Card';
+import { IBrand, IBreadCrumb, ICard } from 'types/Card';
 import { ProductCateFromSaga } from './saga';
 
 export const initialState: ProductCateState = {
   isLoading: false,
   isPageLoading: false,
+  isBreadCrumbLoading: false,
+  isBrandLoading: false,
   cateId: '0',
   take: 10,
   skip: 0,
   total: 0,
   isNext: true,
   itemPerPage: 10,
   products: [],
+  breadCrumbs: [],
+  brand: [],
 };
 
 const slice = createSlice({
@@ -46,6 +50,22 @@ const slice = createSlice({
     setTotal(state, action: PayloadAction<number>) {
       state.total = action.payload;
     },
+    loadBreadCrumb(state) {
+      state.isBreadCrumbLoading = true;
+      state.breadCrumbs = [];
+    },
+    breadCrumbLoaded(state, actions: PayloadAction<IBreadCrumb[]>) {
+      state.isBreadCrumbLoading = false;
+      state.breadCrumbs = actions.payload;
+    },
+    loadingBrand(state) {
+      state.isBrandLoading = true;
+      state.brand = [];
+    },
+    brandLoaded(state, actions: PayloadAction<IBrand[]>) {
+      state.isBrandLoading = false;
+      state.brand = actions.payload;
+    },
   },
 });
 

src/app/pages/Category/slice/saga.ts

@@ -2,7 +2,7 @@ import { call, put, select, takeLatest } from 'redux-saga/effects';
 import { selectCateId, selectSkip, selectTake } from './selector';
 import { request } from 'utils/request';
 import { BASE_URL } from 'utils/url';
-import { createQueryString } from 'utils/string';
+import { convertToJSON, createQueryString } from 'utils/string';
 import { ProductCateActions } from '.';
 
 export function* getProductCate() {
@@ -43,7 +43,45 @@ export function* getProductPageCate() {
   }
 }
 
+export function* getBreadCrumbs() {
+  try {
+    const cateId = yield select(selectCateId);
+
+    const queryString = createQueryString({ id: cateId, type: 'CATE' });
+
+    const data = yield call(request, `${BASE_URL}/breadcrumb?${queryString}`);
+
+    if (data.data) {
+      yield put(ProductCateActions.breadCrumbLoaded(data.data));
+    } else {
+      yield put(ProductCateActions.breadCrumbLoaded([]));
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+export function* getBrand() {
+  try {
+    const cateId = yield select(selectCateId);
+
+    const queryString = createQueryString({ cateId });
+
+    const data = yield call(request, `${BASE_URL}/brand?${queryString}`);
+
+    if (data.data) {
+      yield put(ProductCateActions.brandLoaded(data.data));
+    } else {
+      yield put(ProductCateActions.brandLoaded([]));
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
+
 export function* ProductCateFromSaga() {
   yield takeLatest(ProductCateActions.loadProduct, getProductCate);
   yield takeLatest(ProductCateActions.loadingPage, getProductPageCate);
+  yield takeLatest(ProductCateActions.loadBreadCrumb, getBreadCrumbs);
+  yield takeLatest(ProductCateActions.loadingBrand, getBrand);
 }

src/app/pages/Category/slice/selector.ts

@@ -36,3 +36,23 @@ export const selectTotal = createSelector(
   [(state: RootState) => state.productCateState || initialState],
   state => state.total,
 );
+
+export const selectBreadCrumb = createSelector(
+  [(state: RootState) => state.productCateState || initialState],
+  state => state.breadCrumbs,
+);
+
+export const selectBreadCrumbLoading = createSelector(
+  [(state: RootState) => state.productCateState || initialState],
+  state => state.isBreadCrumbLoading,
+);
+
+export const selectBrand = createSelector(
+  [(state: RootState) => state.productCateState || initialState],
+  state => state.brand,
+);
+
+export const selectBrandLoading = createSelector(
+  [(state: RootState) => state.productCateState || initialState],
+  state => state.isBrandLoading,
+);

src/app/pages/Category/slice/type.ts

@@ -1,13 +1,17 @@
-import { ICard } from 'types/Card';
+import { IBrand, IBreadCrumb, ICard } from 'types/Card';
 
 export interface ProductCateState {
   isLoading: boolean;
   isPageLoading: boolean;
+  isBreadCrumbLoading: boolean;
+  isBrandLoading: boolean;
   cateId: string;
   take: number;
   skip: number;
   total: number;
   isNext: boolean;
   itemPerPage: number;
   products: ICard[];
+  breadCrumbs: IBreadCrumb[];
+  brand: IBrand[];
 }

src/types/Card.ts

@@ -39,6 +39,16 @@ export interface IResultLabel {
   type: EResultLabel;
 }
 
+export interface IBreadCrumb {
+  link?: string;
+  name: string;
+}
+
+export interface IBrand {
+  id: number;
+  name: string;
+}
+
 export interface ICard {
   id?: number;
   title: string;

src/utils/string.ts

@@ -42,3 +42,7 @@ export const createQueryString = (
 
   return new URLSearchParams(stringifiedParams).toString();
 };
+
+export const convertToJSON = data => {
+  return JSON.stringify(data);
+};