From a03890da3e659707dcddca467ed019bc2bb9d6c2 Mon Sep 17 00:00:00 2001 From: Angelico Date: Mon, 13 Jan 2020 13:22:51 +0800 Subject: [PATCH] Rewrite Component for CommonFilters The following were done: - Refactor CommonFilters to allow filters to appear on Contents. - Change documentation of how filter functions are invoked based on new changes. --- web/docs/common/CommonFilters.js | 35 +++++++++++++++++++++++ web/docs/common/filters/eq.mdx | 29 +++++++++++++++++++ web/docs/common/filters/filter.mdx | 34 ++++++++++++++++++++++ web/docs/common/filters/gt.mdx | 28 +++++++++++++++++++ web/docs/common/filters/gte.mdx | 28 +++++++++++++++++++ web/docs/common/filters/ilike.mdx | 30 ++++++++++++++++++++ web/docs/common/filters/in.mdx | 29 +++++++++++++++++++ web/docs/common/filters/is.mdx | 31 ++++++++++++++++++++ web/docs/common/filters/like.mdx | 30 ++++++++++++++++++++ web/docs/common/filters/lt.mdx | 28 +++++++++++++++++++ web/docs/common/filters/lte.mdx | 28 +++++++++++++++++++ web/docs/common/filters/match.mdx | 6 ++-- web/docs/common/filters/not.mdx | 29 +++++++++++++++++++ web/docs/library/get.mdx | 45 ++++++++++++++++++++++++++---- 14 files changed, 402 insertions(+), 8 deletions(-) create mode 100644 web/docs/common/CommonFilters.js create mode 100644 web/docs/common/filters/eq.mdx create mode 100644 web/docs/common/filters/filter.mdx create mode 100644 web/docs/common/filters/gt.mdx create mode 100644 web/docs/common/filters/gte.mdx create mode 100644 web/docs/common/filters/ilike.mdx create mode 100644 web/docs/common/filters/in.mdx create mode 100644 web/docs/common/filters/is.mdx create mode 100644 web/docs/common/filters/like.mdx create mode 100644 web/docs/common/filters/lt.mdx create mode 100644 web/docs/common/filters/lte.mdx create mode 100644 web/docs/common/filters/not.mdx diff --git a/web/docs/common/CommonFilters.js b/web/docs/common/CommonFilters.js new file mode 100644 index 0000000000..d90963d386 --- /dev/null +++ b/web/docs/common/CommonFilters.js @@ -0,0 +1,35 @@ +import React from 'react' +import Filter from './filters/filter.mdx' +import Match from './filters/match.mdx' +import Eq from './filters/eq.mdx' +import Gt from './filters/gt.mdx' +import Lt from './filters/lt.mdx' +import Gte from './filters/gte.mdx' +import Lte from './filters/lte.mdx' +import Like from './filters/like.mdx' +import Ilike from './filters/ilike.mdx' +import Is from './filters/is.mdx' +import In from './filters/in.mdx' +import Not from './filters/not.mdx' + +const filters = { + filter: , + match: , + eq: , + gt: , + lt: , + gte: , + lte: , + like: , + ilike: , + is: , + in: , + not: , +} + +function CommonFilters(props) { + var filter = props.filter.toLowerCase() + return filters[filter] +} + +export default CommonFilters diff --git a/web/docs/common/filters/eq.mdx b/web/docs/common/filters/eq.mdx new file mode 100644 index 0000000000..695596c7e2 --- /dev/null +++ b/web/docs/common/filters/eq.mdx @@ -0,0 +1,29 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .eq(columnName, filterValue) +``` + +Finds all rows whose value on the stated columnName exactly matches the specified filterValue. Equivalent of `filter(columName, 'eq', criteria)`. + + + + +```js {3} +supabase + .from('countries') + .eq('name', 'New Zealand') +``` + + + +#### `columnName: string` +Name of the database column. + +#### `filterValue: { string | integer | boolean }` +Value to match. + +--- \ No newline at end of file diff --git a/web/docs/common/filters/filter.mdx b/web/docs/common/filters/filter.mdx new file mode 100644 index 0000000000..0d798d4ef0 --- /dev/null +++ b/web/docs/common/filters/filter.mdx @@ -0,0 +1,34 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .filter(columnName, operator, criteria) +``` + +All in one convenience function for all filters available. + + + + +```js {3-5} +supabase + .from('countries') + .filter('name', 'in', '['China', 'France']') + .filter('name', 'like', '%n%') + .filter('id', 'gte', 20) +``` + + + +#### `columnName: string` +Name of the database column. + +#### `operator: string` +Name of filter operator to be utilised. + +#### `criteria: { object | array | string | integer | boolean | null }` +Value to compare to. Exact data type of criteria would depend on the operator used. + +--- \ No newline at end of file diff --git a/web/docs/common/filters/gt.mdx b/web/docs/common/filters/gt.mdx new file mode 100644 index 0000000000..8d3ec19950 --- /dev/null +++ b/web/docs/common/filters/gt.mdx @@ -0,0 +1,28 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .gt(columnName, filterValue) +``` +Finds all rows whose value on the stated columnName is greater than the specified filterValue. Eqiuvalent of `filter(columnName, 'gt', criteria)`. + + + + +```js {3} +supabase + .from('countries') + .gt('id', 20) +``` + + + +#### `columnName: string` +Name of database column. + +#### `filterValue: { string | integer | boolean }` +Value to compare to. + +--- \ No newline at end of file diff --git a/web/docs/common/filters/gte.mdx b/web/docs/common/filters/gte.mdx new file mode 100644 index 0000000000..4e9e237bc7 --- /dev/null +++ b/web/docs/common/filters/gte.mdx @@ -0,0 +1,28 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .gte(columnName, filterValue) +``` +Finds all rows whose value on the stated columnName is greater than or equal to the specified filterValue. Eqiuvalent of `filter(columnName, 'gte', criteria)`. + + + + +```js {3} +supabase + .from('countries') + .gte('id', 20) +``` + + + +#### `columnName: string` +Name of database column. + +#### `filterValue: { string | integer | boolean }` +Value to compare to. + +--- \ No newline at end of file diff --git a/web/docs/common/filters/ilike.mdx b/web/docs/common/filters/ilike.mdx new file mode 100644 index 0000000000..b8a5378236 --- /dev/null +++ b/web/docs/common/filters/ilike.mdx @@ -0,0 +1,30 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .ilike(columnName, stringPattern) +``` + +A case-sensitive version of `like()`. Equivalent of `filter(columnName, 'ilike', stringPattern)`. + + + + +```js {3} +supabase + .from('countries') + .ilike('name', '%united%') +``` + + + + +#### `columnName: string` +Name of database column. + +#### `stringPattern: string` +String pattern to compare to. A comprehensive guide on how to form proper patterns can be found [here](https://www.postgresql.org/docs/current/functions-matching.html). + +--- \ No newline at end of file diff --git a/web/docs/common/filters/in.mdx b/web/docs/common/filters/in.mdx new file mode 100644 index 0000000000..15791d74b5 --- /dev/null +++ b/web/docs/common/filters/in.mdx @@ -0,0 +1,29 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .in(columnName, filterArray) +``` + +Finds all rows whose value on the stated columnName is found on the specified filterArray. Equivalent of `filter(columnName, 'in', criteria)`. + + + + +```js {3} +supabase + .from('countries') + .in('name', ['China', 'France']) +``` + + + +#### `columnName: string` +Name of database column. + +#### `filterArray: array` +Array of values to find a match. Data type of values is dependent on the columnName specified. + +--- \ No newline at end of file diff --git a/web/docs/common/filters/is.mdx b/web/docs/common/filters/is.mdx new file mode 100644 index 0000000000..9aebdf1893 --- /dev/null +++ b/web/docs/common/filters/is.mdx @@ -0,0 +1,31 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .is(columnName, filterValue) +``` + +A check for exact equality (**null**, **true**, **false**), finds all rows whose value on the state columnName exactly match the specified filterValue. +Equivalent of `filter(columnName, 'is', filterValue)`. + + + + +```js {3} +supabase + .from('countries') + .is('name', null) +``` + + + + +#### `columnName: string` +Name of database column. + +#### `filterValue: { null | boolean }` +Value to match. + +--- \ No newline at end of file diff --git a/web/docs/common/filters/like.mdx b/web/docs/common/filters/like.mdx new file mode 100644 index 0000000000..197edd22e3 --- /dev/null +++ b/web/docs/common/filters/like.mdx @@ -0,0 +1,30 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .like(columnName, stringPattern) +``` + +Finds all rows whose value in the stated columnName matches the supplied pattern. Equivalent of `filter(columnName, 'like', stringPattern)`. + + + + +```js {3} +supabase + .from('countries') + .like('name', '%United%') +``` + + + + +#### `columnName: string` +Name of database column. + +#### `stringPattern: string` +String pattern to compare to. A comprehensive guide on how to form proper patterns can be found [here](https://www.postgresql.org/docs/current/functions-matching.html). + +--- \ No newline at end of file diff --git a/web/docs/common/filters/lt.mdx b/web/docs/common/filters/lt.mdx new file mode 100644 index 0000000000..437984b372 --- /dev/null +++ b/web/docs/common/filters/lt.mdx @@ -0,0 +1,28 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .lt(columnName, filterValue) +``` +Finds all rows whose value on the stated columnName is less than the specified filterValue. Eqiuvalent of `filter(columnName, 'lt', criteria)`. + + + + +```js {3} +supabase + .from('countries') + .lt('id', 20) +``` + + + +#### `columnName: string` +Name of database column. + +#### `filterValue: { string | integer | boolean }` +Value to compare to. + +--- \ No newline at end of file diff --git a/web/docs/common/filters/lte.mdx b/web/docs/common/filters/lte.mdx new file mode 100644 index 0000000000..6477ac050b --- /dev/null +++ b/web/docs/common/filters/lte.mdx @@ -0,0 +1,28 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .lte(columnName, filterValue) +``` +Finds all rows whose value on the stated columnName is less than or equal to the specified filterValue. Eqiuvalent of `filter(columnName, 'lte', criteria)`. + + + + +```js {3} +supabase + .from('countries') + .lte('id', 20) +``` + + + +#### `columnName: string` +Name of database column. + +#### `filterValue: { string | integer | boolean }` +Value to compare to. + +--- \ No newline at end of file diff --git a/web/docs/common/filters/match.mdx b/web/docs/common/filters/match.mdx index 3f1c3705ef..1f7c030b15 100644 --- a/web/docs/common/filters/match.mdx +++ b/web/docs/common/filters/match.mdx @@ -12,7 +12,7 @@ Finds rows that exactly match the specified filterObject. Equivilent of `filter( -```js +```js {3} supabase .from('countries') .match({ 'continent': 'Asia' }) @@ -22,4 +22,6 @@ supabase #### `filterObject: object` -An object of `{ 'columnName': 'criteria' }` \ No newline at end of file +An object of `{ 'columnName': 'criteria' }` + +--- \ No newline at end of file diff --git a/web/docs/common/filters/not.mdx b/web/docs/common/filters/not.mdx new file mode 100644 index 0000000000..33fcd5044f --- /dev/null +++ b/web/docs/common/filters/not.mdx @@ -0,0 +1,29 @@ +import Collapsable from '../../../src/components/Collapsable' + + +```js {3} +supabase + .from(tableName) + .not(columnName, filterValue) +``` + +Finds all rows whose value on the stated columnName does not match the specified filterValue. Equivalent of `filter(columnName, 'not', criteria)`. + + + + +```js {3} +supabase + .from('countries') + .not('name', 'China') +``` + + + +#### `columnName: string` +Name of database column. + +#### `filterValue: { string | integer | boolean }` +Value to **not** match. + +--- \ No newline at end of file diff --git a/web/docs/library/get.mdx b/web/docs/library/get.mdx index a9dc87a558..b9de66fa93 100644 --- a/web/docs/library/get.mdx +++ b/web/docs/library/get.mdx @@ -6,9 +6,10 @@ title: 'Reading' import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' import DummyData from '../common/DummyData.mdx' -import Match from '../common/filters/match.mdx' +// import Index from '../common/filters/Index' +import CommonFilters from '../common/CommonFilters' import CommonResponses from '../common/CommonResponses.mdx' -import CommonFilters from '../common/CommonFilters.mdx' +// import CommonFilters from '../common/CommonFilters.mdx' import Collapsable from '../../src/components/Collapsable' We will be using these tables as reference for our examples: @@ -274,17 +275,49 @@ Returns the first row of the table as an object and **not** as an array. ---- -### `filter()` -### `match()` - + ## Filtering - +### `filter()` + + +### `match()` + + +### `eq()` + + +### `gt()` + + +### `lt()` + + +### `gte()` + + +### `lte()` + + +### `like()` + + +### `ilike()` + + +### `is()` + + +### `in()` + + +### `not()` + ## Responses