feat: store params in url with qs #1475

ariansobczak-rst · 2023-04-18T12:15:22Z

Replaced custom filter query params with https://www.npmjs.com/package/qs.

Allow developers to add queryParams in the action button like in exmaple below.

<ActionButton
  action={newAction}
  resourceId={resource.id}
  queryParams={{
    email: 'example@example.com',
    isActive: true
  }}
>
  <Button variant="contained">
    <Icon icon="Plus" />
    {tb("addNewItem", resource.id)}
  </Button>
</ActionButton>;

Note: If passing queryParams to new action form will be preffield with url values i.e. using the example above form will have a filled email field with example@example.com and checked isActive.

Query params are stored in URL and can be accessible by using useQueryParams. There are separate params form lists like
sortBy, page, direction or filters and also reference to tab or redirectUrl. To store params in url storeParams should be called with new params like:

const { storeParams } = useQueryParams()
...
storeParams({ page: 2 })

Parsed params from useQueryParams are all passed params parsed by qs.

For more information about stringify and parse functions please see qs configuration https://github.com/ljharb/qs.

dziraf · 2023-04-19T09:27:03Z

src/frontend/components/actions/new.tsx

@@ -1,8 +1,12 @@
 import { Box, Button, DrawerContent, DrawerFooter, Icon } from '@adminjs/design-system'
+import identity from 'lodash/identity.js'


several warnings such as:

'identity' is defined but never used

dziraf · 2023-04-19T09:34:57Z

src/frontend/components/actions/new.tsx

+    if (parsedQuery) {
+      const resourceProperties = pick(parsedQuery, Object.keys(resource.properties))
+      if (Object.keys(resourceProperties).length) {
+        setRecord({ ...record, params: { ...record.params, ...resourceProperties } })


What will happen if we add for example:

?gender=abcd&isActive=false?

If gender is male/female/other enum, will it set abcd?

If isActive is a boolean, will it correctly parse true/false strings?

Checked with enums and booleans and there are results

for enums:
Enums value in URL has to be exactly like availableValues e.g.

export enum CountryEnum { Poland = 'PL', Germany = 'DE', }

should look like ?country=PL (case sensitive). Otherwise, the value would not be filled in the new item form.

for booleans
Booleans are correctly parsed by qs parse

for dates
Dates can be passed the same as values for the date time picker e.g. ?dateOfBirth=2023-04-21 or ?dateOfBirth=2023/04/21

dziraf · 2023-04-19T09:38:16Z

src/frontend/components/app/filter-form.tsx

@@ -0,0 +1,90 @@
+import { Box, Button, DEFAULT_DRAWER_WIDTH, H3, Icon } from '@adminjs/design-system'


'Icon' is defined but never used

I removed this component because it was only for local development and maybe can be introduced in the future to allow users to show filters not as a drawer but more as a side panel of list

dziraf · 2023-04-19T09:38:55Z

src/frontend/components/routes/resource-action.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import { useParams } from 'react-router'



remove empty line or group Box with library imports

dziraf · 2023-04-19T09:40:13Z

src/frontend/hooks/use-query-params.ts

@@ -0,0 +1,70 @@
+/* eslint-disable no-unused-vars */
+import isEmpty from 'lodash/isEmpty.js'


let's add src/frontend/hooks/index.js and export all hooks from it

* chore: moved toggle filter drawer to redux store * chore: unified stored list params in url * chore: pre-fill new item with params from url * chore: add redirectUrl to query params * chore: removed filter button from resource action --------- Co-authored-by: Rafal Dziegielewski <rafal.dzieg@gmail.com>

# [7.3.0](v7.2.2...v7.3.0) (2023-10-17) ### Features * allow to clear query params by keys ([a6648d4](a6648d4)) * store params in url with qs ([#1475](#1475)) ([54f218f](54f218f))

chore: moved toggle filter drawer to redux store

3e6be00

ariansobczak-rst force-pushed the refactor/AJS-537--store-url-params-with-qs branch 3 times, most recently from 54ac06a to 3e6be00 Compare April 18, 2023 12:28

chore: unified stored list params in url

66c99ec

ariansobczak-rst force-pushed the refactor/AJS-537--store-url-params-with-qs branch 5 times, most recently from 9afff6f to 8aab44a Compare April 19, 2023 09:32

dziraf reviewed Apr 19, 2023

View reviewed changes

ariansobczak-rst force-pushed the refactor/AJS-537--store-url-params-with-qs branch 2 times, most recently from c77e043 to 6395efc Compare April 19, 2023 10:20

chore: pre-fill new item with params from url

0b1814f

ariansobczak-rst force-pushed the refactor/AJS-537--store-url-params-with-qs branch from 6395efc to 0b1814f Compare April 19, 2023 10:25

ariansobczak-rst changed the base branch from master to feat/query-params-adjustments April 19, 2023 10:28

chore: add redirectUrl to query params

7111d8b

ariansobczak-rst requested a review from dziraf April 19, 2023 15:10

ariansobczak-rst force-pushed the refactor/AJS-537--store-url-params-with-qs branch from 2908d5c to 54b6db1 Compare April 19, 2023 15:46

chore: removed filter button from resource action

b6ca2ad

ariansobczak-rst force-pushed the refactor/AJS-537--store-url-params-with-qs branch from 54b6db1 to b6ca2ad Compare April 19, 2023 15:50

ariansobczak-rst marked this pull request as ready for review April 20, 2023 08:31

dziraf merged commit 7ee14f7 into feat/query-params-adjustments Apr 24, 2023
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: store params in url with qs #1475

feat: store params in url with qs #1475

ariansobczak-rst commented Apr 18, 2023 •

edited

dziraf Apr 19, 2023

ariansobczak-rst Apr 19, 2023

dziraf Apr 19, 2023

ariansobczak-rst Apr 19, 2023 •

edited

dziraf Apr 19, 2023

ariansobczak-rst Apr 19, 2023

dziraf Apr 19, 2023

ariansobczak-rst Apr 19, 2023

dziraf Apr 19, 2023

ariansobczak-rst Apr 19, 2023

		@@ -1,8 +1,12 @@
		import { Box, Button, DrawerContent, DrawerFooter, Icon } from '@adminjs/design-system'
		import identity from 'lodash/identity.js'

		@@ -0,0 +1,90 @@
		import { Box, Button, DEFAULT_DRAWER_WIDTH, H3, Icon } from '@adminjs/design-system'

		@@ -2,6 +2,7 @@ import React, { useState } from 'react'
		import { connect } from 'react-redux'
		import { useParams } from 'react-router'

		@@ -0,0 +1,70 @@
		/* eslint-disable no-unused-vars */
		import isEmpty from 'lodash/isEmpty.js'

feat: store params in url with qs #1475

feat: store params in url with qs #1475

Conversation

ariansobczak-rst commented Apr 18, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ariansobczak-rst Apr 19, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ariansobczak-rst commented Apr 18, 2023 •

edited

ariansobczak-rst Apr 19, 2023 •

edited