fetch category api

src/_styles.scss

 @use "~bootstrap/scss/bootstrap";
-@use "./styles/components.scss";
-@use "./styles/pages.scss";
-@use "./styles/common.scss";
+@use "styles/components.scss";
+@use "styles/pages.scss";
+@use "styles/common.scss";

src/api/categoryApi.ts

+import axiosClient from "./axiosClient";
+
+const categoryApi = {
+  getCategories: () => {
+    const url = "/api/category";
+    return axiosClient.get(url);
+  },
+};
+
+export default categoryApi;

src/app/store.ts

 import { configureStore } from "@reduxjs/toolkit";
+import headerReducer from "components/Header/headerSlice";
 
-const rootReducer = {};
+const rootReducer = {
+  header: headerReducer,
+};
 
 const store = configureStore({ reducer: rootReducer });
 

src/components/Header/headerSlice.ts

+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import categoryApi from "api/categoryApi";
+import { ICategory } from "components/interface";
+
+const initialState: { data: ICategory[] } = {
+  data: [],
+};
+
+export const getCategories = createAsyncThunk("header/categories", async () => {
+  const res = await categoryApi.getCategories();
+  return res;
+});
+
+const header = createSlice({
+  name: "header",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(
+      getCategories.fulfilled,
+      (state, action: PayloadAction<any>) => {
+        state.data = action.payload.data;
+      }
+    );
+  },
+});
+
+const { reducer } = header;
+export default reducer;

src/components/Header/index.tsx

-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
@@ -8,35 +8,26 @@ import Button from "@mui/material/Button";
 import HomeIcon from "@mui/icons-material/Home";
 import Sidenav from "../Sidenav";
 import { Typography } from "@mui/material";
-
-const navItems = [
-  "Media",
-  "thời sự",
-  "thế giới",
-  "pháp luật",
-  "kinh doanh",
-  "công nghệ",
-  "xe",
-  "du lịch",
-  "nhịp sống trẻ",
-  "văn hóa",
-  "giải trí",
-  "thể thao",
-  "giáo dục",
-  "khoa học",
-  "sức khỏe",
-  "giả - thật",
-  "bạn đọc",
-];
+import { useAppDispatch, useAppSelector } from "app/hooks";
+import { getCategories } from "./headerSlice";
 
 export default function Header() {
+  const dispatch = useAppDispatch();
   const headerRef = useRef<HTMLElement>(null);
   const [mobileOpen, setMobileOpen] = useState<boolean>(false);
+  const { data: categoryData } = useAppSelector((state) => state.header);
+
+  useEffect(() => {
+    dispatch(getCategories());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };
 
+  console.log(categoryData);
+
   return (
     <Box sx={{ display: "flex" }} className="header">
       <AppBar
@@ -81,10 +72,10 @@ export default function Header() {
                 alignItems: "center",
               }}
             >
-              {navItems.map((item) => (
+              {categoryData.map((item) => (
                 <Box
                   component="li"
-                  key={item}
+                  key={item.id}
                   sx={{
                     color: "#000",
                     fontWeight: 700,
@@ -94,7 +85,7 @@ export default function Header() {
                   }}
                   className="header-list__item"
                 >
-                  {item}
+                  {item.label}
                 </Box>
               ))}
             </Box>
@@ -123,7 +114,7 @@ export default function Header() {
       </AppBar>
       <Sidenav
         handleDrawerToggle={handleDrawerToggle}
-        navItems={navItems}
+        navItems={categoryData}
         mobileOpen={mobileOpen}
       />
     </Box>

src/components/Sidenav/index.tsx

@@ -9,10 +9,11 @@ import {
   ListItemText,
   Typography,
 } from "@mui/material";
+import { ICategory } from "components/interface";
 
 type Props = {
   handleDrawerToggle: () => void;
-  navItems: Array<string>;
+  navItems: Array<ICategory>;
   mobileOpen: boolean;
 };
 
@@ -43,9 +44,9 @@ const Sidenav = (props: Props) => {
           <Divider />
           <List>
             {navItems.map((item) => (
-              <ListItem key={item} disablePadding>
+              <ListItem key={item.id} disablePadding>
                 <ListItemButton sx={{ textAlign: "center" }}>
-                  <ListItemText primary={item} />
+                  <ListItemText primary={item.label} />
                 </ListItemButton>
               </ListItem>
             ))}

src/components/interface.ts

+export interface ICategory {
+  id: string;
+  label: string;
+}

src/configuration/environmentConfig.ts

 const enviromentConfig = {
   development: {
-    endPoint: "http://localhost:5223",
+    endPoint: "https://localhost:44386",
   },
   production: {
     endPoint: "",

src/pages/MainPage.tsx

@@ -44,8 +44,8 @@ const newspapers: Array<INewspaper> = [
 const MainPage = () => {
   return (
     <main className="container py-3">
-      {newspapers.map((newspaper) => (
-        <Newspaper key={newspaper.label} data={newspaper} />
+      {newspapers.map((newspaper, idx) => (
+        <Newspaper key={`newspaper-${idx}`} data={newspaper} />
       ))}
     </main>
   );

src/styles/_index.scss

+@forward "./mixins";
+@forward "./variables";

tsconfig.json

 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,9 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": "./src"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }