Skip to content

Commit

Permalink
Fix some issues in Users.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@aelassas
aelassas committed Sep 27, 2023
1 parent e9c2026 commit 037e7f6
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 54 deletions.
2 changes: 1 addition & 1 deletion backend/src/components/BookingList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const BookingList = (
car,
user: (user && user._id) || undefined,
}
console.log('fetch', page)

const data = await BookingService.getBookings(
payload,
page,
Expand Down
88 changes: 49 additions & 39 deletions backend/src/components/UserList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,17 @@ const UserList = (
{
types: userListTypes,
keyword: userListKeyword,
reload: userListReload,
user: userListUser,
hideDesktopColumns,
checkboxSelection,
onLoad
}: {
types?: bookcarsTypes.UserType[]
keyword?: string
reload?: boolean
user?: bookcarsTypes.User
hideDesktopColumns?: boolean
checkboxSelection?: boolean
onLoad: bookcarsTypes.DataEvent<bookcarsTypes.User>
onLoad?: bookcarsTypes.DataEvent<bookcarsTypes.User>
}) => {
const [user, setUser] = useState<bookcarsTypes.User>()
const [page, setPage] = useState(0)
Expand All @@ -56,9 +54,8 @@ const UserList = (
const [selectedId, setSelectedId] = useState('')
const [selectedIds, setSelectedIds] = useState<string[]>([])
const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
const [types, setTypes] = useState<bookcarsTypes.UserType[]>(userListTypes || [])
const [types, setTypes] = useState<bookcarsTypes.UserType[]>()
const [keyword, setKeyword] = useState(userListKeyword)
const [reload, setReload] = useState(userListReload)
const [reloadColumns, setReloadColumns] = useState(false)
const [paginationModel, setPaginationModel] = useState({
pageSize: Env.PAGE_SIZE,
Expand All @@ -72,28 +69,30 @@ const UserList = (

const _fetch = async (page: number, user?: bookcarsTypes.User) => {
try {
setLoading(true)
if (user && types) {
setLoading(true)

const payload: bookcarsTypes.GetUsersBody =
{
user: (user && user._id) || '',
types
}
const payload: bookcarsTypes.GetUsersBody =
{
user: (user && user._id) || '',
types
}

const data = await UserService.getUsers(payload, keyword || '', page + 1, pageSize)
const _data = data && data.length > 0 ? data[0] : { pageInfo: { totalRecord: 0 }, resultData: [] }
if (!_data) {
Helper.error()
return
}
const totalRecords = Array.isArray(_data.pageInfo) && _data.pageInfo.length > 0 ? _data.pageInfo[0].totalRecords : 0
const _rows = _data.resultData
const data = await UserService.getUsers(payload, keyword || '', page + 1, pageSize)
const _data = data && data.length > 0 ? data[0] : { pageInfo: { totalRecord: 0 }, resultData: [] }
if (!_data) {
Helper.error()
return
}
const totalRecords = Array.isArray(_data.pageInfo) && _data.pageInfo.length > 0 ? _data.pageInfo[0].totalRecords : 0
const _rows = _data.resultData

setRows(_rows)
setRowCount(totalRecords)
setRows(_rows)
setRowCount(totalRecords)

if (onLoad) {
onLoad({ rows: _data.resultData, rowCount: totalRecords })
if (onLoad) {
onLoad({ rows: _data.resultData, rowCount: totalRecords })
}
}
} catch (err) {
Helper.error(err)
Expand All @@ -103,32 +102,46 @@ const UserList = (
}

useEffect(() => {
setTypes(userListTypes || [])
setTypes(userListTypes)
}, [userListTypes])

useEffect(() => {
setKeyword(userListKeyword || '')
}, [userListKeyword])

useEffect(() => {
setReload(userListReload || false)
}, [userListReload])
if (types) {
_fetch(page, user)
}
}, [page]) // eslint-disable-line react-hooks/exhaustive-deps

useEffect(() => {
if (userListUser) {
const columns = getColumns(userListUser)
setColumns(columns)
setUser(userListUser)
_fetch(page, userListUser)
if (types) {
if (page === 0) {
_fetch(0, user)
} else {
const _paginationModel = bookcarsHelper.clone(paginationModel)
_paginationModel.page = 0
setPaginationModel(_paginationModel)
}
}
}, [userListUser, page, pageSize, types, keyword]) // eslint-disable-line react-hooks/exhaustive-deps
}, [pageSize]) // eslint-disable-line react-hooks/exhaustive-deps

useEffect(() => {
if (reload) {
setPage(0)
_fetch(0, user)
if (userListUser && types) {
setUser(userListUser)
const columns = getColumns(userListUser)
setColumns(columns)

if (page === 0) {
_fetch(0, userListUser)
} else {
const _paginationModel = bookcarsHelper.clone(paginationModel)
_paginationModel.page = 0
setPaginationModel(_paginationModel)
}
}
}, [reload]) // eslint-disable-line react-hooks/exhaustive-deps
}, [userListUser, types, keyword]) // eslint-disable-line react-hooks/exhaustive-deps

useEffect(() => {
if (user && reloadColumns) {
Expand Down Expand Up @@ -337,9 +350,6 @@ const UserList = (
paginationModel={paginationModel}
onPaginationModelChange={setPaginationModel}
localeText={(user.language === 'fr' ? frFR : enUS).components.MuiDataGrid.defaultProps.localeText}
// slots={{
// noRowsOverlay: () => '',
// }}
onRowSelectionModelChange={(selectedIds) => {
setSelectedIds(Array.from(new Set(selectedIds)).map(id => id.toString()))
setReloadColumns(true)
Expand Down
7 changes: 4 additions & 3 deletions backend/src/components/UserTypeFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
import { strings as commonStrings } from '../lang/common'
import * as Helper from '../common/Helper'
import * as bookcarsTypes from 'bookcars-types'
import * as bookcarsHelper from 'bookcars-helper'

import '../assets/css/user-type-filter.css'

Expand All @@ -10,7 +11,7 @@ const UserTypeFilter = ({
onChange
}: {
className?: string,
onChange: (types: bookcarsTypes.UserType[]) => void
onChange?: (types: bookcarsTypes.UserType[]) => void
}) => {
const userTypes = Helper.getUserTypes()
const [checkedUserTypes, setCheckedUserTypes] = useState<bookcarsTypes.UserType[]>(userTypes.map((user) => user.value))
Expand Down Expand Up @@ -53,7 +54,7 @@ const UserTypeFilter = ({
setCheckedUserTypes(checkedUserTypes)

if (onChange) {
onChange(checkedUserTypes)
onChange(bookcarsHelper.clone(checkedUserTypes))
}
}

Expand All @@ -77,7 +78,7 @@ const UserTypeFilter = ({
setCheckedUserTypes(_userTypes)

if (onChange) {
onChange(_userTypes)
onChange(bookcarsHelper.clone(_userTypes))
}
}
}
Expand Down
12 changes: 1 addition & 11 deletions backend/src/pages/Users.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,21 @@ import Search from '../components/Search'
import UserList from '../components/UserList'
import { Button } from '@mui/material'
import * as bookcarsTypes from 'bookcars-types'
import * as bookcarsHelper from 'bookcars-helper'

import '../assets/css/users.css'

const Users = () => {
const [user, setUser] = useState<bookcarsTypes.User>()
const [admin, setAdmin] = useState(false)
const [types, setTypes] = useState<bookcarsTypes.UserType[]>([])
const [types, setTypes] = useState<bookcarsTypes.UserType[]>()
const [keyword, setKeyword] = useState('')
const [reload, setReload] = useState(false)

const handleUserListLoad = () => {
setReload(false)
}

const handleUserTypeFilterChange = (newTypes: bookcarsTypes.UserType[]) => {
setTypes(newTypes)
setReload(bookcarsHelper.arrayEqual(types, newTypes))
}

const handleSearch = (newKeyword: string) => {
setKeyword(newKeyword)
setReload(keyword === newKeyword)
}

const onLoad = (user?: bookcarsTypes.User) => {
Expand Down Expand Up @@ -70,8 +62,6 @@ const Users = () => {
keyword={keyword}
checkboxSelection={!Env.isMobile() && admin}
hideDesktopColumns={Env.isMobile()}
reload={reload}
onLoad={handleUserListLoad}
/>
</div>
</div>
Expand Down

0 comments on commit 037e7f6

Please sign in to comment.