Skip to content

Commit e8b48fe

Browse files
ABee-Techlmmrssa
ABee-Tech
and
lmmrssa
authored
community members pagination (connects #390) (#413)
Co-authored-by: Laxman Maharjan <email@mlaxman.com.np>
1 parent ec359ca commit e8b48fe

File tree

8 files changed

+85
-112
lines changed

8 files changed

+85
-112
lines changed

‎api/src/controllers/communityUserController.js

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const { Op } = require('sequelize')
22
const db = require('../models')
3+
const { changeFormat } = require('../helpers/filehelpers')
4+
const { paginatedResponse } = require('../utils/query')
35

46
// @desc Get the community-users
57
// @route GET /api/community-users
@@ -82,51 +84,46 @@ const followCommunity = async (req, res) => {
8284

8385
const getAllMembers = async (req, res) => {
8486
try {
85-
const data = await db.CommunityUser.findAll(
86-
{
87-
where: { communityId: req.params.id, active: true },
88-
attributes: ['userId'],
89-
include: [{
90-
model: db.User,
91-
attributes: ['firstName']
92-
}],
93-
required: true
94-
}
95-
)
96-
res.json({
97-
data
98-
})
99-
} catch (error) {
100-
res.status(400).json({ error })
101-
}
102-
}
103-
104-
// @desc Search Name
105-
// @route POST /api/news/community/:id/search
106-
// @access Private
107-
const searchMemberName = (req, res) => {
108-
const { name } = req.query
109-
const order = req.query.order || 'ASC'
110-
111-
db.CommunityUser.findAll(
112-
{
87+
const { search, pageNumber = 1, pageSize = 8 } = req.query
88+
const ordervalue = [['createdAt', req.query.order || 'ASC']]
89+
const data = await db.CommunityUser.findAndCountAll({
90+
offset: (pageNumber - 1) * pageSize,
91+
limit: pageSize,
92+
order: ordervalue,
11393
where: { communityId: req.params.id, active: true },
114-
attributes: ['id'],
94+
attributes: ['id', 'createdAt'],
11595
include: [{
11696
model: db.User,
11797
attributes: ['email', 'firstName'],
118-
where: {
98+
where: search ? {
11999
[Op.or]: [
120-
{ firstName: { [Op.iLike]: '%' + name + '%' } },
121-
{ email: { [Op.iLike]: '%' + name + '%' } }
100+
{ firstName: { [Op.iLike]: '%' + search + '%' } },
101+
{ email: { [Op.iLike]: '%' + search + '%' } }
122102
]
123-
}
103+
} : {}
124104
}],
125-
required: true
126-
}
127-
)
128-
.then(member => res.json({ member }).status(200))
129-
.catch(err => res.json({ error: err }).status(400))
105+
required: true,
106+
distinct: true
107+
})
108+
res.status(200)
109+
.json({
110+
status: true,
111+
message: 'Fetched successfully',
112+
...paginatedResponse({
113+
data: {
114+
...data,
115+
rows: data.rows.map((rec) => ({
116+
...rec.dataValues,
117+
filename: changeFormat(rec.filename)
118+
}))
119+
},
120+
pageSize,
121+
pageNumber
122+
})
123+
})
124+
} catch (error) {
125+
res.status(400).json({ error: error.message })
126+
}
130127
}
131128

132-
module.exports = { getCommunityUsers, followCommunity, getAllMembers, searchMemberName }
129+
module.exports = { getCommunityUsers, followCommunity, getAllMembers }

‎api/src/routes/communityUserRouter.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
const { getCommunityUsers, followCommunity, getAllMembers, searchMemberName } = require('../controllers/communityUserController')
1+
const { getCommunityUsers, followCommunity, getAllMembers } = require('../controllers/communityUserController')
22
const protect = require('../middleware/authMiddleware')
33
const router = require('express').Router()
44

55
router.get('/', getCommunityUsers)
66
router.post('/follow', protect, followCommunity)
77
router.get('/community/:id', getAllMembers)
8-
router.get('/community/:id/search', searchMemberName)
9-
// router.put('/:id', updateCommunityUsers);
108

119
module.exports = router

‎src/actions/memberActions.js

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
import { getApi } from '../utils/apiFunc'
22
import {
3-
MEMBER_LIST_FAIL, MEMBER_LIST_REQUEST, MEMBER_LIST_SUCCESS,
4-
MEMBER_SEARCH_FAIL, MEMBER_SEARCH_REQUEST,
5-
MEMBER_SEARCH_SUCCESS
3+
MEMBER_LIST_FAIL, MEMBER_LIST_REQUEST, MEMBER_LIST_SUCCESS
64
} from '../constants/memberConstants'
75

86
// fetching current community
9-
const currentCommunity = localStorage.getItem('currentCommunity')
10-
? JSON.parse(localStorage.getItem('currentCommunity'))
7+
const currentCommunity = window.localStorage.getItem('currentCommunity')
8+
? JSON.parse(window.localStorage.getItem('currentCommunity'))
119
: null
1210

13-
export const listMembers = () => async (
11+
export const listMembers = ({ sort, pageNumber, pageSize, search }) => async (
1412
dispatch
1513
) => {
1614
try {
1715
dispatch({ type: MEMBER_LIST_REQUEST })
1816
const { data } = await getApi(
1917
dispatch,
20-
`${process.env.REACT_APP_API_BASE_URL}/api/communities-users/community/${currentCommunity.id}`
18+
`${process.env.REACT_APP_API_BASE_URL}/api/communities-users/community/${currentCommunity.id}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
2119
)
2220
dispatch({
2321
type: MEMBER_LIST_SUCCESS,
@@ -33,27 +31,3 @@ export const listMembers = () => async (
3331
})
3432
}
3533
}
36-
37-
export const searchMembers = (search) => async (
38-
dispatch
39-
) => {
40-
try {
41-
dispatch({ type: MEMBER_SEARCH_REQUEST })
42-
const { data } = await getApi(
43-
dispatch,
44-
`${process.env.REACT_APP_API_BASE_URL}/api/communities-users/community/${currentCommunity.id}/search?name=${search}`
45-
)
46-
dispatch({
47-
type: MEMBER_SEARCH_SUCCESS,
48-
payload: data.member
49-
})
50-
} catch (error) {
51-
dispatch({
52-
type: MEMBER_SEARCH_FAIL,
53-
payload:
54-
error.response && error.response.data.message
55-
? error.response.data.message
56-
: error.message
57-
})
58-
}
59-
}

‎src/components/cardImage/CardImage.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function CardImage ({ data = [], className }) {
4545
<div className='profile-card-name'>
4646
<div className='card-name ibmplexsans-semi-bold-quarter-spanish-white-16px'>{profile?.user.firstName || 'anonymous'} </div>
4747
</div>
48-
{Follow()}
48+
<Follow />
4949
</div>
5050
)
5151
})}

‎src/constants/memberConstants.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
export const MEMBER_LIST_REQUEST = 'MEMBER_LIST_REQUEST'
22
export const MEMBER_LIST_SUCCESS = 'MEMBER_LIST_SUCCESS'
33
export const MEMBER_LIST_FAIL = 'MEMBER_LIST_FAIL'
4-
5-
export const MEMBER_SEARCH_REQUEST = 'MEMBER_SEARCH_REQUEST'
6-
export const MEMBER_SEARCH_SUCCESS = 'MEMBER_SEARCH_SUCCESS'
7-
export const MEMBER_SEARCH_FAIL = 'MEMBER_SEARCH_FAIL'

‎src/reducers/memberReducers.js

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import {
2-
MEMBER_LIST_FAIL, MEMBER_LIST_REQUEST, MEMBER_LIST_SUCCESS,
3-
MEMBER_SEARCH_FAIL,
4-
MEMBER_SEARCH_REQUEST, MEMBER_SEARCH_SUCCESS
2+
MEMBER_LIST_FAIL, MEMBER_LIST_REQUEST, MEMBER_LIST_SUCCESS
53
} from '../constants/memberConstants'
64

75
export const memberListReducer = (state = { members: [] }, action) => {
@@ -11,23 +9,14 @@ export const memberListReducer = (state = { members: [] }, action) => {
119
case MEMBER_LIST_SUCCESS:
1210
return {
1311
loading: false,
14-
members: action.payload,
15-
pages: action.payload.pages,
16-
page: action.payload.page
12+
members: action.payload.data,
13+
totalItems: action.payload.totalItems,
14+
page: action.payload.page,
15+
pageSize: action.payload.pageSize,
16+
totalPages: action.payload.totalPages
1717
}
18-
1918
case MEMBER_LIST_FAIL:
2019
return { loading: false, error: action.payload }
21-
case MEMBER_SEARCH_REQUEST:
22-
return { loading: true, members: [] }
23-
case MEMBER_SEARCH_SUCCESS:
24-
return {
25-
loading: false,
26-
members: action.payload,
27-
order: action.payload.order
28-
}
29-
case MEMBER_SEARCH_FAIL:
30-
return { loading: false, error: action.payload }
3120
default:
3221
return state
3322
}

‎src/screens/communityMembers/CommunityMembers.jsx

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,46 @@
11
import React, { useEffect, useState } from 'react'
2-
import { useDispatch, useSelector } from 'react-redux'
3-
import { Link } from 'react-router-dom'
4-
import { listMembers, searchMembers } from '../../actions/memberActions'
5-
import { listUsers, searchUsers } from '../../actions/userAction'
62
import CardImage from '../../components/cardImage/CardImage'
73
import SearchComponent from '../../components/searchComponent/SearchComponent'
84
import DashboardLayout from '../../layout/dashboardLayout/DashboardLayout'
5+
import Pagination from '../../components/pagination/Pagination'
96
import './CommunityMembers.css'
7+
import useSizeFinder from '../../utils/sizeFinder'
8+
import useGetFetchData from '../../utils/useGetFetchData'
9+
import { GET_MEMBERS } from '../../utils/urlConstants'
1010

11-
function CommunityMembers ({ history }) {
12-
const dispatch = useDispatch()
13-
const [search, setSearch] = useState(null)
14-
const { members } = useSelector(state => state.listMember)
15-
const userLogin = useSelector((state) => state.userLogin)
16-
const { userInfo } = userLogin
11+
function CommunityMembers () {
12+
const [col, setCol] = useState(3)
13+
const [pageNumber, setPageNumber] = useState(1)
14+
const [pageSize, setPageSize] = useState(9)
15+
const [search, setSearch] = useState('')
16+
const windowWidth = useSizeFinder()
1717

1818
// fetching current community
19-
const currentCommunity = localStorage.getItem('currentCommunity')
20-
? JSON.parse(localStorage.getItem('currentCommunity'))
19+
const currentCommunity = window.localStorage.getItem('currentCommunity')
20+
? JSON.parse(window.localStorage.getItem('currentCommunity'))
2121
: null
2222

2323
useEffect(() => {
24-
if (userInfo) {
25-
if (search) dispatch(searchMembers(search))
26-
if (!search) dispatch(listMembers())
24+
if (windowWidth < 1439 && windowWidth > 768) {
25+
setCol(3)
26+
} else {
27+
setCol(4)
2728
}
28-
}, [search, dispatch, history, userInfo])
29+
}, [windowWidth])
30+
31+
useEffect(() => {
32+
if (col === 3) {
33+
setPageSize(9)
34+
} else if (col === 4) {
35+
setPageSize(8)
36+
}
37+
}, [col])
38+
39+
const { data: membersData = {} } = useGetFetchData(
40+
'GET_MEMBERS_DATA',
41+
GET_MEMBERS + currentCommunity.id + '?pageNumber=' + pageNumber + '&pageSize=' + pageSize + '&search=' + search,
42+
{ pageSize, pageNumber, search }
43+
)
2944

3045
return (
3146
<DashboardLayout title={currentCommunity.name}>
@@ -35,8 +50,9 @@ function CommunityMembers ({ history }) {
3550
<SearchComponent className='search border-1px-onyx' search={search} setSearch={setSearch} />
3651
</div>
3752
<div className='community-members-grid-row'>
38-
{members && <CardImage follow='Follow' data={members.data || members} />}
53+
{membersData?.data && <CardImage follow='Follow' data={membersData?.data} />}
3954
</div>
55+
<Pagination pageNumber={pageNumber} setPageNumber={setPageNumber} resourceList={membersData} />
4056
</div>
4157
</div>
4258
</DashboardLayout>

‎src/utils/urlConstants.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,6 @@ export const GET_VIDEO = CDN_URL + '/videoResource/'
4545
export const VIDEO_COVER = CDN_URL + '/videoCover/'
4646
export const LESSON_IMG = CDN_URL + '/lessonImg/'
4747
export const MATERIAL = CDN_URL + '/material/'
48+
49+
// members
50+
export const GET_MEMBERS = BASE_URL + 'communities-users/community/'

0 commit comments

Comments
 (0)