metaxy-official · VictorNguyen-creator · Mar 11, 2022 · Mar 11, 2022 · Mar 15, 2022 · Mar 15, 2022
diff --git a/src/modules/login/Login.tsx b/src/modules/login/Login.tsx
@@ -26,9 +26,10 @@ const Login = () => {
     try {
       setAuthLoading(true);
       const response = await AuthService.login(email, password);
+      console.log("🚀 ~ file: Login.tsx ~ line 29 ~ login ~ response", response)
       toast.success('Login is succeed!');
       setAuthLoading(false);
-      dispatch(loginUser(response?.data.tokens.access.token));
+      dispatch(loginUser(response));
       navigate('/');
     } catch (error: any) {
       setAuthLoading(false);

diff --git a/src/pages/detail-player/BoxHistoryClaim.tsx b/src/pages/detail-player/BoxHistoryClaim.tsx
@@ -64,7 +64,7 @@ const BoxHistoryClaim = (props: DataInfoProps) => {
 
     const fakeDataInfoHero: Info[] =
         [
-            { name: 'Tổng giao dịch thực hiện:', value: '506 lần' },
+            { name: 'Tổng giao dịch thực hiện:', value: '5106 lần' },
             { name: 'Khối lượng giao dịch:', value: '1000 MXY' },
         ]
     return (

diff --git a/src/pages/detail-player/BoxInfoHero.tsx b/src/pages/detail-player/BoxInfoHero.tsx
@@ -1,9 +1,10 @@
+/* eslint-disable react/no-array-index-key */
 /* eslint-disable react/jsx-no-bind */
 import React, { useEffect, useState } from 'react'
 import BoxComponent, { Info } from '@app/components/boxComponent'
 import SearchBox from '@app/components/searchbox/SearchBox'
-import { DataDetailNft, DataNftPlayer, DataPlayer } from '@app/utils/types';
-import { getDataHeroes } from '@app/utils';
+import { DataDetailNft, DataNftCharacter, DataNftPlayer, DataPlayer, DataRankNft } from '@app/utils/types';
+import { getDataHeroes, getNftCharacter, getNftRRank } from '@app/utils';
 import TableCustom from '@app/components/table/Table';
 import { Select } from 'antd';
 
@@ -17,31 +18,61 @@ const BoxInfoHero = (props: DataInfoProps) => {
     const [currentPage, setCurrentPage] = useState(1)
     const [pageSize, setPageSize] = useState(10)
     const [dataNft, setDataNft] = useState<DataNftPlayer[]>([]);
-    console.log("🚀 ~ file: BoxInfoHero.tsx ~ line 19 ~ BoxInfoHero ~ dataNft", dataNft)
     const [setSearchItems, setSetSearchItems] = useState<string>('')
     const [totalDocs, setTotalDocs] = useState<number>()
     const { Option } = Select;
+    const [dataNftCharacter, setDataNftCharacter] = useState<DataNftCharacter[]>([]);
+    const [dataRankNft, setDataRankNft] = useState<DataRankNft[]>([]);
+    const [isSelling, setIsSelling] = useState<boolean>()
+    const [characterSelected, setCharacterSelected] = useState<number[]>([])
+    const [rankSelected, setRankSelected] = useState<number[]>([])
 
     const onSearch = (value: string) => {
         setSetSearchItems(value.trim())
         setCurrentPage(1)
     }
 
-    function handleChange(value: string) {
-        console.log(`selected ${value}`);
+    function handleSelectCharacter(value: any) {
+        setCharacterSelected(value)
     }
 
+    function handleSelectRank(value: any) {
+        setRankSelected(value)
+    }
+
+    const handleChangeStatus = (value: boolean) => {
+        setIsSelling(value)
+    }
+
+
+
     const address = dataInfo?.address
 
     useEffect(() => {
         const getDataNft = async () => {
-            const data = await getDataHeroes(address, currentPage, pageSize, setSearchItems);
+            const data = await getDataHeroes(address, currentPage, pageSize, isSelling, characterSelected, rankSelected, setSearchItems);
             setDataNft(data?.docs)
             setPageSize(10)
             setTotalDocs(data?.totalDocs)
         }
         getDataNft()
-    }, [setSearchItems])
+    }, [isSelling, characterSelected, rankSelected, setSearchItems])
+
+    useEffect(() => {
+        const getCharacterNft = async () => {
+            const data = await getNftCharacter();
+            setDataNftCharacter(data)
+        }
+        getCharacterNft()
+    }, [])
+
+    useEffect(() => {
+        const getRankNft = async () => {
+            const data = await getNftRRank();
+            setDataRankNft(data)
+        }
+        getRankNft()
+    }, [])
 
     const dataSource = dataNft
 
@@ -176,15 +207,48 @@ const BoxInfoHero = (props: DataInfoProps) => {
                         <SearchBox placeholder="Nhập ID của hero " onSearch={onSearch} />
                     </div>
                     <div className="table-filter__select my-3">
-                        <Select
-                            defaultValue="Chọn nhân vật"
-                            style={{ width: 180 }}
-                            onChange={handleChange}
-                        >
-                            <Option value="jack">Jack</Option>
-                            <Option value="lucy">Lucy</Option>
-                            <Option value="Yiminghe">yiminghe</Option>
-                        </Select>
+                        <div className="select__item multi-item">
+                            <Select
+                                allowClear
+                                mode="multiple"
+                                placeholder="Chọn nhân vật"
+                                style={{ width: 180 }}
+                                onChange={handleSelectCharacter}
+                            >
+                                {dataNftCharacter.map((item) => (
+                                    <Option key={item?.characterId} value={item?.characterId} >
+                                        {item?.characterName}
+                                    </Option>
+                                ))}
+                            </Select>
+                        </div>
+                        <div className="select__item multi-item">
+                            <Select
+                                allowClear
+                                mode="multiple"
+                                placeholder="Chọn Rank nhân vật"
+                                style={{ width: 180 }}
+                                onChange={handleSelectRank}
+                            >
+                                {dataRankNft.map((item, index) => (
+                                    <Option key={index} value={item.rankId} >
+                                        {item.rankName}
+                                    </Option>
+                                ))}
+                            </Select>
+                        </div>
+                        <div className="select__item">
+                            <Select
+                                placeholder="Chọn trạng thái"
+                                style={{ width: 180 }}
+                                onChange={handleChangeStatus}
+                            >
+
+                                <Option value>Đang chơi</Option>
+                                <Option value={false}>Đang bán</Option>
+
+                            </Select>
+                        </div>
                     </div>
                     <div className="table-custom my-5">
                         <TableCustom

diff --git a/src/pages/detail-player/BoxInfoItemInGame.tsx b/src/pages/detail-player/BoxInfoItemInGame.tsx
@@ -1,26 +1,30 @@
 import BoxComponent, { Info } from '@app/components/boxComponent'
+import TableCustom from '@app/components/table/Table'
 import { getDataItemIngame } from '@app/utils'
 import { DataItemInGame, DataPlayer } from '@app/utils/types'
-import { Table } from 'antd'
+// import { Select } from 'antd'
 import React, { useEffect, useState } from 'react'
 
-
 interface DataInfoProps {
     dataInfo?: DataPlayer
 }
 
 const BoxInfoItemIngame = (props: DataInfoProps) => {
 
     const { dataInfo } = props
-
+    // const { Option } = Select;
     const [dataItemInGame, setDataItemInGame] = useState<DataItemInGame[]>([]);
-
+    const [totalDocs, setTotalDocs] = useState<number>()
+    const [currentPage, setCurrentPage] = useState(1)
+    const [pageSize, setPageSize] = useState(10)
     const address = dataInfo?.address
 
     useEffect(() => {
         const getDataItemInGame = async () => {
-            const data = await getDataItemIngame(address);
+            const data = await getDataItemIngame(address, currentPage, pageSize,);
             setDataItemInGame(data.docs);
+            setPageSize(10)
+            setTotalDocs(data?.totalDocs)
         }
         getDataItemInGame()
     }, [])
@@ -55,17 +59,54 @@ const BoxInfoItemIngame = (props: DataInfoProps) => {
         <div className="detail-box-player">
             <BoxComponent title='Thông tin vật phẩm trong game' listInfo={fakeDataBoxInfoStory} />
             <div className="table-detail">
+                <h3 className="table-title my-3">Danh sách hero của người chơi</h3>
                 <div className="table-filter">
                     <div className="table-filter__select my-3">
-                        <p>abc</p>
+                        {/* <div className="select__item multi-item">
+                            <Select
+                                allowClear
+                                mode="multiple"
+                                placeholder="Loại vật phẩm"
+                                style={{ width: 180 }}
+                                onChange={handleSelectCharacter}
+                            >
+                                {dataNftCharacter.map((item) => (
+                                    <Option key={item?.characterId} value={item?.characterId} >
+                                        {item?.characterName}
+                                    </Option>
+                                ))}
+                            </Select>
+                        </div>
+                        <div className="select__item multi-item">
+                            <Select
+                                allowClear
+                                mode="multiple"
+                                placeholder="Level"
+                                style={{ width: 180 }}
+                                onChange={handleSelectRank}
+                            >
+                                {dataRankNft.map((item, index) => (
+                                    <Option key={index} value={item.rankId} >
+                                        {item.rankName}
+                                    </Option>
+                                ))}
+                            </Select>
+                        </div> */}
                     </div>
                     <div className="table-custom my-5">
-                        <Table dataSource={dataSource} columns={columns} />
+                        <TableCustom
+                            data={dataSource}
+                            columns={columns}
+                            totalData={totalDocs}
+                            currentPage={currentPage}
+                            setCurrentPage={setCurrentPage}
+                        />
                     </div>
                 </div>
             </div>
         </div>
     )
 }
 
+
 export default BoxInfoItemIngame
diff --git a/src/pages/edit-user/index.tsx b/src/pages/edit-user/index.tsx
@@ -1,34 +1,37 @@
 /* eslint-disable react/jsx-no-bind */
-import React, {useEffect, useState} from "react";
-import {ContentHeader} from "@app/components";
-import {Button, Input, Select, Spin} from "antd";
+import React, { useEffect, useState } from "react";
+import { ContentHeader } from "@app/components";
+import { Button, Input, Select, Spin } from "antd";
 import TextArea from "antd/lib/input/TextArea";
-import {useNavigate, useParams} from "react-router-dom";
-import {ApplicationRootState, DataUser, OptionRole} from "@app/utils/types";
-import {editNewUser, getUserById} from "@app/utils";
-import {useSelector} from "react-redux";
-import {toast} from "react-toastify";
+import { useNavigate, useParams } from "react-router-dom";
+import { ApplicationRootState, DataUser, OptionRole } from "@app/utils/types";
+import { editNewUser, getUserById } from "@app/utils";
+import { useSelector } from "react-redux";
+import { toast } from "react-toastify";
 
-const {Option} = Select;
+const { Option } = Select;
 
 const EditUser = () => {
   const navigate = useNavigate();
   // get id user
-  const {id} = useParams<string>();
+  const { id } = useParams<string>();
   const [dataUser, setDataUser] = useState<DataUser>();
   const [loading, setLoading] = useState<boolean>(false);
   const dataRoleUser = useSelector(
     (state: ApplicationRootState) => state.user.dataRoles
   );
+  console.log("🚀 ~ file: index.tsx ~ line 23 ~ EditUser ~ dataRoleUser", dataRoleUser)
   const userEdit: any = {
     fullName: dataUser?.fullName,
     roles: dataUser?.roles,
     phoneNumber: dataUser?.phoneNumber,
     note: dataUser?.note
   };
+  console.log("🚀 ~ file: index.tsx ~ line 30 ~ EditUser ~ userEdit", userEdit)
+
   // func edit user
   const handleInputDataUser = (type: string, e: any) => {
-    const {value} = e.target;
+    const { value } = e.target;
     userEdit[type] = value;
   };
   // handle select for getRoles
@@ -101,7 +104,7 @@ const EditUser = () => {
             <Select
               mode="multiple"
               allowClear
-              style={{width: "100%"}}
+              style={{ width: "100%" }}
               placeholder="Please select roles"
               defaultValue={dataUser?.roles?.map((item: any) => item.id)}
               onChange={handleChangeSelect}

diff --git a/src/pages/list-users/index.tsx b/src/pages/list-users/index.tsx
@@ -30,9 +30,21 @@ const ListUser = () => {
   const [id, setId] = useState<string>("");
   const handleChangeId = (id: string = "") => setId(id);
   // const [textSearch, setTextSearch] = useState<string>();
-  const handleSearch = (value: String) => console.log(value);
-  // state for modal detail
+  const [searchItems, setSearchItems] = useState("");
   const [isShowModal, setIsShowModal] = useState<string>();
+  const [totalDocs, setTotalDocs] = useState<number>()
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(2);
+  const sortData = "createdAt%3Aasc"
+
+
+  const handleSearch = (value: String) => {
+    setSearchItems(value.trim());
+    setCurrentPage(1);
+  };
+
+
+
   const handleOpenModal = (value?: string) => {
     setIsShowModal(value);
   };
@@ -73,13 +85,15 @@ const ListUser = () => {
 
   const getDataUsers = async () => {
     setLoading(true);
-    const data = await getListUsers();
-    setDataUsers(data);
+    const data = await getListUsers(currentPage, pageSize, sortData, searchItems);
+    setDataUsers(data.docs);
     setLoading(false);
+    setPageSize(data?.limit);
+    setTotalDocs(data.totalDocs)
   };
   useEffect(() => {
     getDataUsers();
-  }, []);
+  }, [searchItems]);
 
   const listItem: ItemMoreOption[] = [
     {
@@ -206,6 +220,9 @@ const ListUser = () => {
               columns={columns}
               dataSelection
               loading={loading}
+              totalData={totalDocs}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
             />
           </div>
         </div>