修改呼叫API方式及新增分頁功能

Game-as-a-Service · Oct 12, 2023 · 576af68 · 576af68
1 parent 830e517
commit 576af68
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 18 deletions.
diff --git a/packages/frontend/js/components/Pagination.jsx b/packages/frontend/js/components/Pagination.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 /**
  * Render pagination
@@ -18,6 +18,7 @@ const Pagination = ({
   className = ''
 }) => {
   const [currentPage, setCurrentPage] = useState(current)
+
   const renderPrevTabs = () => {
     const pages = []
     let count = 0

diff --git a/packages/frontend/js/components/RoomList.jsx b/packages/frontend/js/components/RoomList.jsx
@@ -1,19 +1,47 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import Pagination from './Pagination'
 import { useDispatch, useSelector } from 'react-redux'
 import { getRoomList } from '../redux/slice/roomSlice'
 
 const RoomList = () => {
   const dispatch = useDispatch()
-  const { data = [] } = useSelector((state) => state.room)
+  const { data, loading } = useSelector((state) => state.room)
+  const { rooms, totalRoom } = data || {}
   const isOdd = (totalAmout) => totalAmout % 2 !== 0
+  // pagination
+  const [pagination, setPagination] = useState({
+    totalPage: 1,
+    current: 1,
+    pageSize: 6
+  })
+  const { totalPage, current, pageSize } = pagination
   useEffect(() => {
-    let init = true
-    if (init) dispatch(getRoomList())
-    return () => {
-      init = false
+    if (totalRoom > 0) {
+      const totalPage = Math.ceil(totalRoom / pageSize)
+      setPagination((prev) => ({ ...prev, totalPage }))
     }
+  }, [totalRoom])
+  const getData = () => {
+    dispatch(getRoomList())
+  }
+  const onPrevClick = () => {
+    setPagination((prev) => ({ ...prev, current: current - 1 }))
+  }
+  const onNextClick = () => {
+    setPagination((prev) => ({ ...prev, current: current + 1 }))
+  }
+  // data
+  const [dataSource, setDataSource] = useState([])
+  useEffect(() => {
+    getData()
   }, [])
+  useEffect(() => {
+    if (rooms) {
+      const end = pageSize * current
+      const start = end - pageSize
+      setDataSource(rooms.slice(start, end))
+    }
+  }, [current, rooms])
   return (
     <div className='room-list'>
       <div className='navbar'>
@@ -27,8 +55,8 @@ const RoomList = () => {
         </div>
       </div>
       <div className='row__list list'>
-        {!data && <div>loading ...</div>}
-        {data?.map((room, index) => (
+        {loading && <div>loading ...</div>}
+        {dataSource?.map((room, index) => (
           <div className='list__card' key={index}>
             <div className='avatar'></div>
             <div className='host'>
@@ -41,10 +69,18 @@ const RoomList = () => {
             </div>
           </div>
         ))}
-        {isOdd(data?.length) && <div className='list__card bg--trans'></div>}
+        {isOdd(dataSource?.length) && (
+          <div className='list__card bg--trans'></div>
+        )}
       </div>
       <div className='row__list'>
-        <Pagination className='row__pagination' current={10} totalPage={20} />
+        <Pagination
+          className='row__pagination'
+          current={current}
+          totalPage={totalPage}
+          onPrevClick={onPrevClick}
+          onNextClick={onNextClick}
+        />
       </div>
     </div>
   )

diff --git a/packages/frontend/js/redux/slice/roomSlice.js b/packages/frontend/js/redux/slice/roomSlice.js
@@ -6,7 +6,6 @@ export const getRoomList = createAsyncThunk(
   async (payload, { rejectWithValue }) => {
     try {
       const res = await api.getRoomList(payload)
-      console.log(res)
       if (res.status === 'OK') {
         return res
       } else {
@@ -21,18 +20,29 @@ export const getRoomList = createAsyncThunk(
 const roomSlice = createSlice({
   name: 'room',
   initialState: {
-    data: null
+    data: null,
+    loading: false
   },
   reducers: {
     clearData: (state, action) => {
       state.data = null
     }
   },
   extraReducers: (builder) => {
-    builder.addCase(getRoomList.fulfilled, (state, action) => {
-      state.data = action.payload.rooms
-      return state
-    })
+    builder
+      .addCase(getRoomList.pending, (state, action) => {
+        state.loading = true
+        return state
+      })
+      .addCase(getRoomList.fulfilled, (state, action) => {
+        state.data = action.payload
+        state.loading = false
+        return state
+      })
+      .addCase(getRoomList.rejected, (state, action) => {
+        state.loading = false
+        return state
+      })
   }
 })
 

diff --git a/packages/frontend/src/scss/_init.scss b/packages/frontend/src/scss/_init.scss
@@ -112,7 +112,9 @@ body {
   background-repeat: no-repeat;
   height: 100vh;
 }
-
+#app {
+  background-image: linear-gradient(45deg, #7e66c5, #567ecc);
+}
 .bg {
   &--trans {
     background-color: transparent !important;