community members pagination (connects #390) (#413)

Co-authored-by: Laxman Maharjan <[email protected]>
earthowned · Aug 12, 2021 · e8b48fe · e8b48fe
1 parent ec359ca
commit e8b48fe
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 112 deletions.
diff --git a/api/src/controllers/communityUserController.js b/api/src/controllers/communityUserController.js
@@ -1,5 +1,7 @@
 const { Op } = require('sequelize')
 const db = require('../models')
+const { changeFormat } = require('../helpers/filehelpers')
+const { paginatedResponse } = require('../utils/query')
 
 // @desc Get the community-users
 // @route GET /api/community-users
@@ -82,51 +84,46 @@ const followCommunity = async (req, res) => {
 
 const getAllMembers = async (req, res) => {
   try {
-    const data = await db.CommunityUser.findAll(
-      {
-        where: { communityId: req.params.id, active: true },
-        attributes: ['userId'],
-        include: [{
-          model: db.User,
-          attributes: ['firstName']
-        }],
-        required: true
-      }
-    )
-    res.json({
-      data
-    })
-  } catch (error) {
-    res.status(400).json({ error })
-  }
-}
-
-// @desc    Search Name
-// @route   POST /api/news/community/:id/search
-// @access  Private
-const searchMemberName = (req, res) => {
-  const { name } = req.query
-  const order = req.query.order || 'ASC'
-
-  db.CommunityUser.findAll(
-    {
+    const { search, pageNumber = 1, pageSize = 8 } = req.query
+    const ordervalue = [['createdAt', req.query.order || 'ASC']]
+    const data = await db.CommunityUser.findAndCountAll({
+      offset: (pageNumber - 1) * pageSize,
+      limit: pageSize,
+      order: ordervalue,
       where: { communityId: req.params.id, active: true },
-      attributes: ['id'],
+      attributes: ['id', 'createdAt'],
       include: [{
         model: db.User,
         attributes: ['email', 'firstName'],
-        where: {
+        where: search ? {
           [Op.or]: [
-            { firstName: { [Op.iLike]: '%' + name + '%' } },
-            { email: { [Op.iLike]: '%' + name + '%' } }
+            { firstName: { [Op.iLike]: '%' + search + '%' } },
+            { email: { [Op.iLike]: '%' + search + '%' } }
           ]
-        }
+        } : {}
       }],
-      required: true
-    }
-  )
-    .then(member => res.json({ member }).status(200))
-    .catch(err => res.json({ error: err }).status(400))
+      required: true,
+      distinct: true
+    })
+    res.status(200)
+      .json({
+        status: true,
+        message: 'Fetched successfully',
+        ...paginatedResponse({
+          data: {
+            ...data,
+            rows: data.rows.map((rec) => ({
+              ...rec.dataValues,
+              filename: changeFormat(rec.filename)
+            }))
+          },
+          pageSize,
+          pageNumber
+        })
+      })
+  } catch (error) {
+    res.status(400).json({ error: error.message })
+  }
 }
 
-module.exports = { getCommunityUsers, followCommunity, getAllMembers, searchMemberName }
+module.exports = { getCommunityUsers, followCommunity, getAllMembers }
diff --git a/api/src/routes/communityUserRouter.js b/api/src/routes/communityUserRouter.js
@@ -1,11 +1,9 @@
-const { getCommunityUsers, followCommunity, getAllMembers, searchMemberName } = require('../controllers/communityUserController')
+const { getCommunityUsers, followCommunity, getAllMembers } = require('../controllers/communityUserController')
 const protect = require('../middleware/authMiddleware')
 const router = require('express').Router()
 
 router.get('/', getCommunityUsers)
 router.post('/follow', protect, followCommunity)
 router.get('/community/:id', getAllMembers)
-router.get('/community/:id/search', searchMemberName)
-// router.put('/:id', updateCommunityUsers);
 
 module.exports = router
diff --git a/src/actions/memberActions.js b/src/actions/memberActions.js
@@ -1,23 +1,21 @@
 import { getApi } from '../utils/apiFunc'
 import {
-  MEMBER_LIST_FAIL, MEMBER_LIST_REQUEST, MEMBER_LIST_SUCCESS,
-  MEMBER_SEARCH_FAIL, MEMBER_SEARCH_REQUEST,
-  MEMBER_SEARCH_SUCCESS
+  MEMBER_LIST_FAIL, MEMBER_LIST_REQUEST, MEMBER_LIST_SUCCESS
 } from '../constants/memberConstants'
 
 // fetching current community
-const currentCommunity = localStorage.getItem('currentCommunity')
-  ? JSON.parse(localStorage.getItem('currentCommunity'))
+const currentCommunity = window.localStorage.getItem('currentCommunity')
+  ? JSON.parse(window.localStorage.getItem('currentCommunity'))
   : null
 
-export const listMembers = () => async (
+export const listMembers = ({ sort, pageNumber, pageSize, search }) => async (
   dispatch
 ) => {
   try {
     dispatch({ type: MEMBER_LIST_REQUEST })
     const { data } = await getApi(
       dispatch,
-      `${process.env.REACT_APP_API_BASE_URL}/api/communities-users/community/${currentCommunity.id}`
+      `${process.env.REACT_APP_API_BASE_URL}/api/communities-users/community/${currentCommunity.id}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
     )
     dispatch({
       type: MEMBER_LIST_SUCCESS,
@@ -33,27 +31,3 @@ export const listMembers = () => async (
     })
   }
 }
-
-export const searchMembers = (search) => async (
-  dispatch
-) => {
-  try {
-    dispatch({ type: MEMBER_SEARCH_REQUEST })
-    const { data } = await getApi(
-      dispatch,
-      `${process.env.REACT_APP_API_BASE_URL}/api/communities-users/community/${currentCommunity.id}/search?name=${search}`
-    )
-    dispatch({
-      type: MEMBER_SEARCH_SUCCESS,
-      payload: data.member
-    })
-  } catch (error) {
-    dispatch({
-      type: MEMBER_SEARCH_FAIL,
-      payload:
-        error.response && error.response.data.message
-          ? error.response.data.message
-          : error.message
-    })
-  }
-}
diff --git a/src/components/cardImage/CardImage.jsx b/src/components/cardImage/CardImage.jsx
@@ -45,7 +45,7 @@ function CardImage ({ data = [], className }) {
             <div className='profile-card-name'>
               <div className='card-name ibmplexsans-semi-bold-quarter-spanish-white-16px'>{profile?.user.firstName || 'anonymous'} </div>
             </div>
-            {Follow()}
+            <Follow />
           </div>
         )
       })}

diff --git a/src/constants/memberConstants.js b/src/constants/memberConstants.js
@@ -1,7 +1,3 @@
 export const MEMBER_LIST_REQUEST = 'MEMBER_LIST_REQUEST'
 export const MEMBER_LIST_SUCCESS = 'MEMBER_LIST_SUCCESS'
 export const MEMBER_LIST_FAIL = 'MEMBER_LIST_FAIL'
-
-export const MEMBER_SEARCH_REQUEST = 'MEMBER_SEARCH_REQUEST'
-export const MEMBER_SEARCH_SUCCESS = 'MEMBER_SEARCH_SUCCESS'
-export const MEMBER_SEARCH_FAIL = 'MEMBER_SEARCH_FAIL'
diff --git a/src/reducers/memberReducers.js b/src/reducers/memberReducers.js
@@ -1,7 +1,5 @@
 import {
-  MEMBER_LIST_FAIL, MEMBER_LIST_REQUEST, MEMBER_LIST_SUCCESS,
-  MEMBER_SEARCH_FAIL,
-  MEMBER_SEARCH_REQUEST, MEMBER_SEARCH_SUCCESS
+  MEMBER_LIST_FAIL, MEMBER_LIST_REQUEST, MEMBER_LIST_SUCCESS
 } from '../constants/memberConstants'
 
 export const memberListReducer = (state = { members: [] }, action) => {
@@ -11,23 +9,14 @@ export const memberListReducer = (state = { members: [] }, action) => {
     case MEMBER_LIST_SUCCESS:
       return {
         loading: false,
-        members: action.payload,
-        pages: action.payload.pages,
-        page: action.payload.page
+        members: action.payload.data,
+        totalItems: action.payload.totalItems,
+        page: action.payload.page,
+        pageSize: action.payload.pageSize,
+        totalPages: action.payload.totalPages
       }
-
     case MEMBER_LIST_FAIL:
       return { loading: false, error: action.payload }
-    case MEMBER_SEARCH_REQUEST:
-      return { loading: true, members: [] }
-    case MEMBER_SEARCH_SUCCESS:
-      return {
-        loading: false,
-        members: action.payload,
-        order: action.payload.order
-      }
-    case MEMBER_SEARCH_FAIL:
-      return { loading: false, error: action.payload }
     default:
       return state
   }

diff --git a/src/screens/communityMembers/CommunityMembers.jsx b/src/screens/communityMembers/CommunityMembers.jsx
@@ -1,31 +1,46 @@
 import React, { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { listMembers, searchMembers } from '../../actions/memberActions'
-import { listUsers, searchUsers } from '../../actions/userAction'
 import CardImage from '../../components/cardImage/CardImage'
 import SearchComponent from '../../components/searchComponent/SearchComponent'
 import DashboardLayout from '../../layout/dashboardLayout/DashboardLayout'
+import Pagination from '../../components/pagination/Pagination'
 import './CommunityMembers.css'
+import useSizeFinder from '../../utils/sizeFinder'
+import useGetFetchData from '../../utils/useGetFetchData'
+import { GET_MEMBERS } from '../../utils/urlConstants'
 
-function CommunityMembers ({ history }) {
-  const dispatch = useDispatch()
-  const [search, setSearch] = useState(null)
-  const { members } = useSelector(state => state.listMember)
-  const userLogin = useSelector((state) => state.userLogin)
-  const { userInfo } = userLogin
+function CommunityMembers () {
+  const [col, setCol] = useState(3)
+  const [pageNumber, setPageNumber] = useState(1)
+  const [pageSize, setPageSize] = useState(9)
+  const [search, setSearch] = useState('')
+  const windowWidth = useSizeFinder()
 
   // fetching current community
-  const currentCommunity = localStorage.getItem('currentCommunity')
-    ? JSON.parse(localStorage.getItem('currentCommunity'))
+  const currentCommunity = window.localStorage.getItem('currentCommunity')
+    ? JSON.parse(window.localStorage.getItem('currentCommunity'))
     : null
 
   useEffect(() => {
-    if (userInfo) {
-      if (search) dispatch(searchMembers(search))
-      if (!search) dispatch(listMembers())
+    if (windowWidth < 1439 && windowWidth > 768) {
+      setCol(3)
+    } else {
+      setCol(4)
     }
-  }, [search, dispatch, history, userInfo])
+  }, [windowWidth])
+
+  useEffect(() => {
+    if (col === 3) {
+      setPageSize(9)
+    } else if (col === 4) {
+      setPageSize(8)
+    }
+  }, [col])
+
+  const { data: membersData = {} } = useGetFetchData(
+    'GET_MEMBERS_DATA',
+    GET_MEMBERS + currentCommunity.id + '?pageNumber=' + pageNumber + '&pageSize=' + pageSize + '&search=' + search,
+    { pageSize, pageNumber, search }
+  )
 
   return (
     <DashboardLayout title={currentCommunity.name}>
@@ -35,8 +50,9 @@ function CommunityMembers ({ history }) {
             <SearchComponent className='search border-1px-onyx' search={search} setSearch={setSearch} />
           </div>
           <div className='community-members-grid-row'>
-            {members && <CardImage follow='Follow' data={members.data || members} />}
+            {membersData?.data && <CardImage follow='Follow' data={membersData?.data} />}
           </div>
+          <Pagination pageNumber={pageNumber} setPageNumber={setPageNumber} resourceList={membersData} />
         </div>
       </div>
     </DashboardLayout>

diff --git a/src/utils/urlConstants.js b/src/utils/urlConstants.js
@@ -45,3 +45,6 @@ export const GET_VIDEO = CDN_URL + '/videoResource/'
 export const VIDEO_COVER = CDN_URL + '/videoCover/'
 export const LESSON_IMG = CDN_URL + '/lessonImg/'
 export const MATERIAL = CDN_URL + '/material/'
+
+// members
+export const GET_MEMBERS = BASE_URL + 'communities-users/community/'