display fix completedGames and button condition show more

glebmanov · glebmanov · commit f428ebcd030e · 2021-10-11T14:39:29.000+03:00
diff --git a/services/app/assets/js/widgets/components/Game/CompletedGames.jsx b/services/app/assets/js/widgets/components/Game/CompletedGames.jsx
@@ -50,7 +50,7 @@ const CompletedGames = ({ games, loadNextPage = null }) => {
         ))}
         </tbody>
       </table>
-      { loadNextPage !== null && nextPage < totalPages
+      { loadNextPage !== null && nextPage <= totalPages
         ? (
           <button type="button" className="mt-2 btn btn-light" onClick={() => dispatch(loadNextPage(nextPage))}>
             Show More
diff --git a/services/app/assets/js/widgets/containers/UserProfile.jsx b/services/app/assets/js/widgets/containers/UserProfile.jsx
@@ -122,8 +122,8 @@ const UserProfile = () => {
 
   const renderCompletedGames = () => (
     <div className="row justify-content-center">
-      <div className="col-11">
-        <div className="text-left my-5">
+      <div className="col-12">
+        <div className="text-left">
           {completedGames && completedGames.length > 0 && (
           <>
             <CompletedGames
@@ -134,7 +134,7 @@ const UserProfile = () => {
               )}
           {completedGames && completedGames.length === 0 && (
           <>
-            <div className="text-center text-muted">
+            <div style={{ height: 498 }} className="d-flex align-items-center justify-content-center border text-muted">
               No completed games
             </div>
           </>
@@ -145,7 +145,7 @@ const UserProfile = () => {
   );
 
   const statContainers = () => (
-    <div className="border">
+    <div>
       <nav>
         <div className="nav nav-tabs bg-gray" id="nav-tab" role="tablist">
           <a
@@ -174,7 +174,7 @@ const UserProfile = () => {
       </nav>
       <div className="tab-content" id="nav-tabContent">
         <div
-          className="tab-pane fade show active"
+          className="tab-pane fade border show active"
           id="statistics"
           role="tabpanel"
           aria-labelledby="statistics-tab"
diff --git a/services/app/assets/js/widgets/slices/completedGames.js b/services/app/assets/js/widgets/slices/completedGames.js
@@ -1,5 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
+import { camelizeKeys } from 'humps';
 
 export const fetchCompletedGames = createAsyncThunk(
   'completedGames/fetchCompletedGames',
@@ -8,7 +9,7 @@ export const fetchCompletedGames = createAsyncThunk(
 
     const response = await axios.get(`/api/v1/user/${userId}/completed_games?page_size=7`);
 
-    return response.data;
+    return camelizeKeys(response.data);
   },
 );
 
@@ -19,7 +20,7 @@ export const loadNextPage = createAsyncThunk(
 
     const response = await axios.get(`/api/v1/user/${userId}/completed_games?page_size=7&page=${page}`);
 
-    return response.data;
+    return camelizeKeys(response.data);
   },
 );
 
@@ -41,8 +42,8 @@ const completedGames = createSlice({
     [fetchCompletedGames.fulfilled]: (state, { payload }) => {
       state.status = 'loaded';
       state.completedGames = payload.games;
-      state.totalPages = payload.page_info.total_pages;
-      state.nextPage = payload.page_info.page_number + 1;
+      state.totalPages = payload.pageInfo.totalPages;
+      state.nextPage = payload.pageInfo.pageNumber + 1;
     },
     [fetchCompletedGames.rejected]: (state, action) => {
       state.status = 'rejected';
