From 464a6ef2a4906215217803c1873f00f30832d6fb Mon Sep 17 00:00:00 2001 From: Emiel Van Severen Date: Sat, 5 Oct 2024 23:38:42 +0200 Subject: [PATCH 01/16] Refactor: pagination and infinite loading --- .../inputs/Date/DatePicker/Generic.tsx | 12 +- .../src/components/inputs/index.ts | 7 + .../selects/SelectQueryField/Controlled.tsx | 8 + .../SelectQueryField/Generic/index.tsx | 17 +- .../JsonSchemaForm/widgets/ItemWidget.tsx | 21 +- .../Navbar/GlobalGameServerSelect.tsx | 4 +- .../src/components/events/EventFilter.tsx | 12 +- .../CountrySelectField.stories.tsx} | 8 +- .../countryCodes.tsx | 0 .../index.tsx | 2 +- .../EventNameSelectField.stories.tsx} | 8 +- .../eventNames.tsx | 0 .../index.tsx | 2 +- .../selects/GameServerSelect/index.tsx | 168 -------------- .../7d2d-icon.png | Bin .../GameServerSelectQueryField.stories.tsx} | 21 +- .../GameServerSelectQueryField/index.tsx | 205 ++++++++++++++++++ .../minecraft-icon.png | Bin .../rust-icon.png | Bin .../style.ts | 0 .../selects/InstalledModuleSelect.tsx | 118 ---------- .../ItemSelectQuery.stories.tsx | 4 + .../index.tsx | 50 +++-- ...tsx => ModuleSelectQueryField.stories.tsx} | 16 +- ...eSelect.tsx => ModuleSelectQueryField.tsx} | 59 +++-- .../src/components/selects/PlayerSelect.tsx | 93 -------- ...ctQuery.tsx => PlayerSelectQueryField.tsx} | 47 ++-- .../components/selects/RoleSelect.stories.tsx | 14 +- ...oleSelect.tsx => RoleSelectQueryField.tsx} | 82 +++++-- ...odSelect.tsx => TimePeriodSelectField.tsx} | 2 +- .../web-main/src/components/selects/index.tsx | 27 ++- packages/web-main/src/queries/discord.tsx | 7 +- packages/web-main/src/queries/event.tsx | 4 +- packages/web-main/src/queries/gameserver.tsx | 16 +- packages/web-main/src/queries/item.tsx | 10 +- packages/web-main/src/queries/module.tsx | 16 +- packages/web-main/src/queries/player.tsx | 20 +- packages/web-main/src/queries/role.tsx | 16 +- packages/web-main/src/queries/shopListing.tsx | 17 +- packages/web-main/src/queries/shopOrder.tsx | 16 +- packages/web-main/src/queries/user.tsx | 20 +- packages/web-main/src/queries/util.ts | 6 +- packages/web-main/src/queries/variable.tsx | 20 +- .../_global/-gameservers/CreateUpdateForm.tsx | 2 +- .../ConfigField/InputTypeToConfigFieldMap.tsx | 4 +- .../schemaConversion/inputTypes/Country.ts | 2 +- .../routes/_auth/_global/-modules/testData.ts | 2 +- .../_auth/_global/-players/playerStats.tsx | 4 +- ...CreateUpdateForm.tsx => VariablesForm.tsx} | 79 ++++--- .../src/routes/_auth/_global/dashboard.tsx | 4 +- .../_global/player.$playerId/economy.tsx | 4 +- .../_global/player.$playerId/inventory.tsx | 4 +- .../_global/player.$playerId/role.assign.tsx | 39 +--- .../_global/user.$userId.role.assign.tsx | 4 +- .../routes/_auth/_global/variables.create.tsx | 4 +- .../src/routes/_auth/_global/variables.tsx | 16 +- .../_global/variables.update.$variableId.tsx | 4 +- .../_global/variables.view.$variableId.tsx | 24 ++ .../-ShopListingCreateUpdateForm.tsx | 4 +- .../-components/OnlinePlayers.tsx | 21 +- .../dashboard.statistics.tsx | 4 +- 61 files changed, 741 insertions(+), 659 deletions(-) rename packages/web-main/src/components/selects/{CountrySelect/CountrySelect.stories.tsx => CountrySelectField/CountrySelectField.stories.tsx} (87%) rename packages/web-main/src/components/selects/{CountrySelect => CountrySelectField}/countryCodes.tsx (100%) rename packages/web-main/src/components/selects/{CountrySelect => CountrySelectField}/index.tsx (96%) rename packages/web-main/src/components/selects/{EventNameSelect/EventNameSelect.stories.tsx => EventNameSelectField/EventNameSelectField.stories.tsx} (85%) rename packages/web-main/src/components/selects/{EventNameSelect => EventNameSelectField}/eventNames.tsx (100%) rename packages/web-main/src/components/selects/{EventNameSelect => EventNameSelectField}/index.tsx (96%) delete mode 100644 packages/web-main/src/components/selects/GameServerSelect/index.tsx rename packages/web-main/src/components/selects/{GameServerSelect => GameServerSelectQueryField}/7d2d-icon.png (100%) rename packages/web-main/src/components/selects/{GameServerSelect/GameServerSelect.stories.tsx => GameServerSelectQueryField/GameServerSelectQueryField.stories.tsx} (63%) create mode 100644 packages/web-main/src/components/selects/GameServerSelectQueryField/index.tsx rename packages/web-main/src/components/selects/{GameServerSelect => GameServerSelectQueryField}/minecraft-icon.png (100%) rename packages/web-main/src/components/selects/{GameServerSelect => GameServerSelectQueryField}/rust-icon.png (100%) rename packages/web-main/src/components/selects/{GameServerSelect => GameServerSelectQueryField}/style.ts (100%) delete mode 100644 packages/web-main/src/components/selects/InstalledModuleSelect.tsx rename packages/web-main/src/components/selects/{ItemSelectQuery => ItemSelectQueryField}/ItemSelectQuery.stories.tsx (94%) rename packages/web-main/src/components/selects/{ItemSelectQuery => ItemSelectQueryField}/index.tsx (76%) rename packages/web-main/src/components/selects/{ModuleSelect.stories.tsx => ModuleSelectQueryField.stories.tsx} (76%) rename packages/web-main/src/components/selects/{ModuleSelect.tsx => ModuleSelectQueryField.tsx} (51%) delete mode 100644 packages/web-main/src/components/selects/PlayerSelect.tsx rename packages/web-main/src/components/selects/{PlayerSelectQuery.tsx => PlayerSelectQueryField.tsx} (72%) rename packages/web-main/src/components/selects/{RoleSelect.tsx => RoleSelectQueryField.tsx} (53%) rename packages/web-main/src/components/selects/{TimePeriodSelect.tsx => TimePeriodSelectField.tsx} (95%) rename packages/web-main/src/routes/_auth/_global/-variables/{VariableCreateUpdateForm.tsx => VariablesForm.tsx} (69%) create mode 100644 packages/web-main/src/routes/_auth/_global/variables.view.$variableId.tsx diff --git a/packages/lib-components/src/components/inputs/Date/DatePicker/Generic.tsx b/packages/lib-components/src/components/inputs/Date/DatePicker/Generic.tsx index d6795797b6..3fe16f6151 100644 --- a/packages/lib-components/src/components/inputs/Date/DatePicker/Generic.tsx +++ b/packages/lib-components/src/components/inputs/Date/DatePicker/Generic.tsx @@ -102,8 +102,8 @@ export const GenericDatePicker: FC = ({ const initialSelectedDateTime = value ? DateTime.fromISO(value) : isDateAllowed(DateTime.local().startOf('day')) - ? DateTime.local().startOf('day') - : findFirstAllowedDate(); + ? DateTime.local().startOf('day') + : findFirstAllowedDate(); const [selectedDateTime, setSelectedDateTime] = useState(initialSelectedDateTime); const [friendlyName, setFriendlyName] = useState(undefined); @@ -153,8 +153,6 @@ export const GenericDatePicker: FC = ({ } as unknown as React.FocusEvent; }, []); - console.log('value', value); - useLayoutEffect(() => { if (onFocus && onBlur) { if (open) { @@ -183,14 +181,13 @@ export const GenericDatePicker: FC = ({ e.preventDefault(); e.stopPropagation(); if (onChange) { - console.log('onChange triggered'); onChange(null as any); } }; return ( - + setOpen(!open)}> {renderResult()} {!readOnly && canClear && value && !open && ( @@ -216,9 +213,6 @@ export const GenericDatePicker: FC = ({ setFriendlyName(undefined); } if (isDateOnly) { - { - console.log('this is triggered'); - } handleOnChange(date); } }} diff --git a/packages/lib-components/src/components/inputs/index.ts b/packages/lib-components/src/components/inputs/index.ts index c8ada71389..8fdf22ea58 100644 --- a/packages/lib-components/src/components/inputs/index.ts +++ b/packages/lib-components/src/components/inputs/index.ts @@ -1,3 +1,10 @@ +export interface PaginationProps { + isFetching: boolean; + hasNextPage: boolean; + isFetchingNextPage: boolean; + fetchNextPage: () => void; +} + export { ControlledCheckBox as CheckBox } from './CheckBox'; export type { ControlledCheckBoxProps as CheckBoxProps } from './CheckBox'; export { GenericCheckBox as UnControlledCheckBox } from './CheckBox/Generic'; diff --git a/packages/lib-components/src/components/inputs/selects/SelectQueryField/Controlled.tsx b/packages/lib-components/src/components/inputs/selects/SelectQueryField/Controlled.tsx index a4358f69a3..5a86535bde 100644 --- a/packages/lib-components/src/components/inputs/selects/SelectQueryField/Controlled.tsx +++ b/packages/lib-components/src/components/inputs/selects/SelectQueryField/Controlled.tsx @@ -29,6 +29,10 @@ export const ControlledSelectQueryField: FC & S inPortal, debounce, isLoadingData, + hasNextPage, + fetchNextPage, + isFetching, + isFetchingNextPage, handleInputValueChange, } = defaultsApplier(props); @@ -86,6 +90,10 @@ export const ControlledSelectQueryField: FC & S value={field.value} debounce={debounce} handleInputValueChange={handleInputValueChange} + isFetching={isFetching} + isFetchingNextPage={isFetchingNextPage} + hasNextPage={hasNextPage} + fetchNextPage={fetchNextPage} > {children} diff --git a/packages/lib-components/src/components/inputs/selects/SelectQueryField/Generic/index.tsx b/packages/lib-components/src/components/inputs/selects/SelectQueryField/Generic/index.tsx index 7f35f131ab..5f7d5331b7 100644 --- a/packages/lib-components/src/components/inputs/selects/SelectQueryField/Generic/index.tsx +++ b/packages/lib-components/src/components/inputs/selects/SelectQueryField/Generic/index.tsx @@ -28,14 +28,15 @@ import { useDebounce } from '../../../../../hooks'; import { setAriaDescribedBy } from '../../../layout'; import { FeedBackContainer } from '../style'; import { SelectItem, SelectContext, getLabelFromChildren } from '../../'; +import { PaginationProps } from '../../../'; /* The SearchField depends on a few things of