From 037e7f6e0d40c9ade2672cb502a2421236797574 Mon Sep 17 00:00:00 2001 From: aelassas Date: Wed, 27 Sep 2023 12:51:25 +0100 Subject: [PATCH] Fix some issues in Users.tsx --- backend/src/components/BookingList.tsx | 2 +- backend/src/components/UserList.tsx | 88 +++++++++++++---------- backend/src/components/UserTypeFilter.tsx | 7 +- backend/src/pages/Users.tsx | 12 +--- 4 files changed, 55 insertions(+), 54 deletions(-) diff --git a/backend/src/components/BookingList.tsx b/backend/src/components/BookingList.tsx index 9c11e7be8..9ab64fed8 100644 --- a/backend/src/components/BookingList.tsx +++ b/backend/src/components/BookingList.tsx @@ -107,7 +107,7 @@ const BookingList = ( car, user: (user && user._id) || undefined, } - console.log('fetch', page) + const data = await BookingService.getBookings( payload, page, diff --git a/backend/src/components/UserList.tsx b/backend/src/components/UserList.tsx index ef163ab59..57de99d6f 100644 --- a/backend/src/components/UserList.tsx +++ b/backend/src/components/UserList.tsx @@ -32,7 +32,6 @@ const UserList = ( { types: userListTypes, keyword: userListKeyword, - reload: userListReload, user: userListUser, hideDesktopColumns, checkboxSelection, @@ -40,11 +39,10 @@ const UserList = ( }: { types?: bookcarsTypes.UserType[] keyword?: string - reload?: boolean user?: bookcarsTypes.User hideDesktopColumns?: boolean checkboxSelection?: boolean - onLoad: bookcarsTypes.DataEvent + onLoad?: bookcarsTypes.DataEvent }) => { const [user, setUser] = useState() const [page, setPage] = useState(0) @@ -56,9 +54,8 @@ const UserList = ( const [selectedId, setSelectedId] = useState('') const [selectedIds, setSelectedIds] = useState([]) const [openDeleteDialog, setOpenDeleteDialog] = useState(false) - const [types, setTypes] = useState(userListTypes || []) + const [types, setTypes] = useState() const [keyword, setKeyword] = useState(userListKeyword) - const [reload, setReload] = useState(userListReload) const [reloadColumns, setReloadColumns] = useState(false) const [paginationModel, setPaginationModel] = useState({ pageSize: Env.PAGE_SIZE, @@ -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) @@ -103,7 +102,7 @@ const UserList = ( } useEffect(() => { - setTypes(userListTypes || []) + setTypes(userListTypes) }, [userListTypes]) useEffect(() => { @@ -111,24 +110,38 @@ const UserList = ( }, [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) { @@ -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) diff --git a/backend/src/components/UserTypeFilter.tsx b/backend/src/components/UserTypeFilter.tsx index 2c0427f69..d95359eca 100644 --- a/backend/src/components/UserTypeFilter.tsx +++ b/backend/src/components/UserTypeFilter.tsx @@ -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' @@ -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(userTypes.map((user) => user.value)) @@ -53,7 +54,7 @@ const UserTypeFilter = ({ setCheckedUserTypes(checkedUserTypes) if (onChange) { - onChange(checkedUserTypes) + onChange(bookcarsHelper.clone(checkedUserTypes)) } } @@ -77,7 +78,7 @@ const UserTypeFilter = ({ setCheckedUserTypes(_userTypes) if (onChange) { - onChange(_userTypes) + onChange(bookcarsHelper.clone(_userTypes)) } } } diff --git a/backend/src/pages/Users.tsx b/backend/src/pages/Users.tsx index be36f6258..86518d604 100644 --- a/backend/src/pages/Users.tsx +++ b/backend/src/pages/Users.tsx @@ -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() const [admin, setAdmin] = useState(false) - const [types, setTypes] = useState([]) + const [types, setTypes] = useState() 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) => { @@ -70,8 +62,6 @@ const Users = () => { keyword={keyword} checkboxSelection={!Env.isMobile() && admin} hideDesktopColumns={Env.isMobile()} - reload={reload} - onLoad={handleUserListLoad} />