fix: pagination in submissions tab

Author: hentrymartin

src/actions/challengeSubmissions.js

@@ -2,12 +2,12 @@ import { fetchSubmissions } from '../services/challenges'
 
 import { LOAD_CHALLENGE_SUBMISSIONS } from '../config/constants'
 
-export function loadSubmissions (challengeId) {
-  return dispatch => {
+export function loadSubmissions (challengeId, page) {
+  return (dispatch) => {
     if (challengeId) {
       dispatch({
         type: LOAD_CHALLENGE_SUBMISSIONS,
-        payload: fetchSubmissions(challengeId)
+        payload: fetchSubmissions(challengeId, page)
       })
     }
   }

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -55,7 +55,11 @@ const ChallengeViewTabs = ({
   loggedInUser,
   onApproveChallenge,
   createResource,
-  deleteResource
+  deleteResource,
+  loadSubmissions,
+  totalSubmissions,
+  submissionsPerPage,
+  page
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
   const [showAddResourceModal, setShowAddResourceModal] = useState(false)
@@ -114,7 +118,7 @@ const ChallengeViewTabs = ({
       })
       return s
     })
-  }, [challengeSubmissions, allResources])
+  }, [challengeSubmissions, allResources, page])
 
   const isTask = _.get(challenge, 'task.isTask', false)
 
@@ -298,7 +302,7 @@ const ChallengeViewTabs = ({
         >
           RESOURCES
         </a>
-        {challengeSubmissions.length ? (
+        {totalSubmissions ? (
           <a
             tabIndex='2'
             role='tab'
@@ -311,7 +315,7 @@ const ChallengeViewTabs = ({
             }}
             className={getSelectorStyle(selectedTab, 2)}
           >
-            SUBMISSIONS ({submissions.length})
+            SUBMISSIONS ({totalSubmissions})
           </a>
         ) : null}
       </div>
@@ -353,6 +357,10 @@ const ChallengeViewTabs = ({
           submissions={submissions}
           token={token}
           loggedInUserResource={loggedInUserResource}
+          loadSubmissions={loadSubmissions}
+          totalSubmissions={totalSubmissions}
+          submissionsPerPage={submissionsPerPage}
+          page={page}
         />
       )}
       {showAddResourceModal ? (<ResourcesAdd
@@ -396,7 +404,11 @@ ChallengeViewTabs.propTypes = {
   deleteResource: PropTypes.func.isRequired,
   showRejectChallengeModal: PropTypes.func.isRequired,
   loggedInUser: PropTypes.object.isRequired,
-  onApproveChallenge: PropTypes.func
+  onApproveChallenge: PropTypes.func,
+  loadSubmissions: PropTypes.func,
+  totalSubmissions: PropTypes.number,
+  submissionsPerPage: PropTypes.number,
+  page: PropTypes.number
 }
 
 export default ChallengeViewTabs

src/components/ChallengeEditor/Submissions/Submissions.module.scss

@@ -269,7 +269,6 @@ $base-unit: 5px;
 .submissionsContainerTable {
   width: auto;
   max-width: 100%;
-  overflow: auto;
 
   table {
     width: 100%;
@@ -401,3 +400,25 @@ $base-unit: 5px;
     overflow: hidden;
   }
 }
+
+.paginationWrapper {
+  display: flex;
+  margin-top: 30px;
+  flex: 1;
+  justify-content: center;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+}
+
+.perPageContainer {
+  margin-right: 20px;
+  max-width: 150px;
+}
+
+.paginationContainer {
+  display: flex;
+}