chore: fix review issues

Refs: TOCDEV-5494

Author: yilkur

packages/core/entity-list/src/components/Table/NavigationCellHeaderContainer.js

@@ -20,8 +20,7 @@ const mapActionCreators = {
 const mapStateToProps = (state, props) => {
   return {
     sortable: state.list.sortable,
-    disablePreferencesMenu: state.list.disablePreferencesMenu,
-    numOfRows: state.preferences.numOfRows
+    disablePreferencesMenu: state.list.disablePreferencesMenu
   }
 }
 

packages/core/entity-list/src/components/Table/SelectRowNums.js

@@ -1,16 +1,18 @@
 import PropTypes from 'prop-types'
 import {useState} from 'react'
+import {injectIntl, FormattedMessage} from 'react-intl'
 import {EditableValue, Button} from 'tocco-ui'
 
 import {StyledButtonWrapper, StyledEditableValueWrapper} from './StyledComponents'
 
-const SelectNumRows = ({onOk, numOfRows}) => {
+const SelectNumRows = injectIntl(({intl, onOk, numOfRows}) => {
+  const msg = id => intl.formatMessage({id})
   const options = [
-    {key: 1, display: '25'},
-    {key: 2, display: '50'},
-    {key: 3, display: '100'}
+    {key: 25, display: '25'},
+    {key: 50, display: '50'},
+    {key: 100, display: '100'}
   ]
-  const matchingValue = options.find(option => Number(option.display) === numOfRows)
+  const matchingValue = options.find(option => option.key === numOfRows)
   const [value, setValue] = useState(matchingValue)
 
   return (
@@ -22,21 +24,22 @@ const SelectNumRows = ({onOk, numOfRows}) => {
           events={{onChange: setValue}}
           options={{
             options,
-            noResultsText: 'no results found',
+            noResultsText: msg('client.entity-list.preferences.numOfRows.noResultsText'),
             isLoading: false
           }}
         />
       </StyledEditableValueWrapper>
       <StyledButtonWrapper>
-        <Button onClick={() => onOk(value?.display)} look={'raised'}>
-          OK
+        <Button onClick={() => onOk(value?.key)} look={'raised'}>
+          <FormattedMessage id="client.entity-list.preferences.numOfRows.okButton" />
         </Button>
       </StyledButtonWrapper>
     </>
   )
-}
+})
 
 SelectNumRows.propTypes = {
+  intl: PropTypes.object.isRequired,
   onOk: PropTypes.func.isRequired,
   numOfRows: PropTypes.number
 }

packages/core/entity-list/src/containers/TableContainer.js

@@ -6,6 +6,7 @@ import {changePage, refresh, initialize, onRowClick, setSortingInteractive} from
 import {changePosition, resetSorting, changeWidth} from '../modules/preferences/actions'
 import {onSelectChange, setSelection} from '../modules/selection/actions'
 import {getFormDefinition, getClickable, getDisablePreferencesMenu, getSelectable} from '../util/api/forms'
+import {getActualLimit} from '../util/preferences'
 import {getTableSelectionStyle} from '../util/selection'
 
 const mapActionCreators = {
@@ -25,7 +26,7 @@ const mapStateToProps = (state, props) => ({
   currentPage: state.list.currentPage,
   entities: state.list.entities,
   entityCount: state.list.entityCount,
-  limit: state.preferences.numOfRows || state.input.limit,
+  limit: getActualLimit(state),
   inProgress: state.list.inProgress,
   tableSelectionStyle: getTableSelectionStyle(state.input.selectionStyle, getSelectable(getFormDefinition(state))),
   clickable: getClickable(getFormDefinition(state)),

packages/core/entity-list/src/modules/list/sagas.js

@@ -16,6 +16,7 @@ import {
   getSorting,
   splitFormId
 } from '../../util/api/forms'
+import {getActualLimit} from '../../util/preferences'
 import * as preferencesActions from '../preferences/actions'
 import * as searchFormActions from '../searchForm/actions'
 import {getSearchFormValues} from '../searchForm/sagas'
@@ -287,8 +288,8 @@ export function* setLazyDataMarked(entityName, markings) {
 
 export function* fetchEntitiesAndAddToStore(page) {
   const state = yield select(stateSelector)
-  const {entityName, scope, limit} = state.input
-  const {columns: columnPreferences, numOfRows} = state.preferences
+  const {entityName, scope} = state.input
+  const {columns: columnPreferences} = state.preferences
   const {entityStore, sorting} = state.list
   if (!entityStore[page]) {
     const basicQuery = yield call(getBasicQuery)
@@ -299,7 +300,7 @@ export function* fetchEntitiesAndAddToStore(page) {
       ...basicQuery,
       page,
       sorting,
-      limit: numOfRows || limit,
+      limit: getActualLimit(state),
       paths
     }
 
@@ -339,9 +340,8 @@ export function* delayedPreloadNextPage(page) {
 }
 
 export function* preloadNextPage(currentPage) {
-  const {limit} = yield select(inputSelector)
-  const {numOfRows} = yield select(preferencesSelector)
-  const actualLimit = numOfRows || limit
+  const state = yield select(stateSelector)
+  const actualLimit = getActualLimit(state)
   const list = yield select(listSelector)
   const {entityStore} = list
   let {entityCount} = list

packages/core/entity-list/src/modules/preferences/sagas.js

@@ -35,7 +35,7 @@ export function* loadPreferences() {
   yield put(setPositions(util.getPositions(preferences)))
   yield put(setSorting(util.getSorting(preferences)))
   yield put(setColumns(util.getColumns(preferences)))
-  yield put(actions.setNumberOfTableRows(Number(preferences[`${formName}.numOfRows`])))
+  yield put(setNumberOfTableRows(Number(preferences[`${formName}.numOfRows`])))
   yield put(setPreferencesLoaded(true))
 }
 
@@ -82,10 +82,11 @@ export function* saveSorting() {
 export function* saveNumberOfTableRows(answerChannel) {
   const {numOfRows} = yield take(answerChannel)
   const inputState = yield select(inputSelector)
+  const formName = `${inputState.formName}_${inputState.scope}`
 
-  yield put(setNumberOfTableRows(Number(numOfRows)))
+  yield put(setNumberOfTableRows(numOfRows))
   yield call(listSagas.reloadData)
-  yield call(rest.savePreferences, {[`${inputState.formName}_${inputState.scope}.numOfRows`]: Number(numOfRows)})
+  yield call(rest.savePreferences, {[`${formName}.numOfRows`]: numOfRows})
 }
 
 export function* resetSorting() {

packages/core/entity-list/src/util/preferences.js

@@ -96,3 +96,5 @@ export const getColumnPreferencesToSave = (formName, columns) =>
     }),
     {}
   )
+
+export const getActualLimit = state => state.preferences.numOfRows || state.input.limit