vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Rewrite Component for CommonFilters

Browse Source 
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.
This commit is contained in:
Angelico
2020-01-13 13:22:51 +08:00
parent f1ca81f18c
commit a03890da3e
14 changed files with 402 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/docs/common/CommonFilters.js Normal file
View File

@@ -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: <Filter />,
match: <Match />,
eq: <Eq />,
gt: <Gt />,
lt: <Lt />,
gte: <Gte />,
lte: <Lte />,
like: <Like />,
ilike: <Ilike />,
is: <Is />,
in: <In />,
not: <Not />,
}
function CommonFilters(props) {
var filter = props.filter.toLowerCase()
return filters[filter]
}
export default CommonFilters

29
web/docs/common/filters/eq.mdx Normal file
View File

@@ -0,0 +1,29 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.eq('name', 'New Zealand')
```
</Collapsable>
#### `columnName: string`
Name of the database column.
#### `filterValue: { string | integer | boolean }`
Value to match.
---

34
web/docs/common/filters/filter.mdx Normal file
View File

@@ -0,0 +1,34 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```js {3}
supabase
.from(tableName)
.filter(columnName, operator, criteria)
```
All in one convenience function for all filters available.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3-5}
supabase
.from('countries')
.filter('name', 'in', '['China', 'France']')
.filter('name', 'like', '%n%')
.filter('id', 'gte', 20)
```
</Collapsable>
#### `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.
---

28
web/docs/common/filters/gt.mdx Normal file
View File

@@ -0,0 +1,28 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.gt('id', 20)
```
</Collapsable>
#### `columnName: string`
Name of database column.
#### `filterValue: { string | integer | boolean }`
Value to compare to.
---

28
web/docs/common/filters/gte.mdx Normal file
View File

@@ -0,0 +1,28 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.gte('id', 20)
```
</Collapsable>
#### `columnName: string`
Name of database column.
#### `filterValue: { string | integer | boolean }`
Value to compare to.
---

30
web/docs/common/filters/ilike.mdx Normal file
View File

@@ -0,0 +1,30 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```js {3}
supabase
.from(tableName)
.ilike(columnName, stringPattern)
```
A case-sensitive version of `like()`. Equivalent of `filter(columnName, 'ilike', stringPattern)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.ilike('name', '%united%')
```
</Collapsable>
#### `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).
---

29
web/docs/common/filters/in.mdx Normal file
View File

@@ -0,0 +1,29 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.in('name', ['China', 'France'])
```
</Collapsable>
#### `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.
---

31
web/docs/common/filters/is.mdx Normal file
View File

@@ -0,0 +1,31 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.is('name', null)
```
</Collapsable>
#### `columnName: string`
Name of database column.
#### `filterValue: { null | boolean }`
Value to match.
---

30
web/docs/common/filters/like.mdx Normal file
View File

@@ -0,0 +1,30 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.like('name', '%United%')
```
</Collapsable>
#### `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).
---

28
web/docs/common/filters/lt.mdx Normal file
View File

@@ -0,0 +1,28 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.lt('id', 20)
```
</Collapsable>
#### `columnName: string`
Name of database column.
#### `filterValue: { string | integer | boolean }`
Value to compare to.
---

28
web/docs/common/filters/lte.mdx Normal file
View File

@@ -0,0 +1,28 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.lte('id', 20)
```
</Collapsable>
#### `columnName: string`
Name of database column.
#### `filterValue: { string | integer | boolean }`
Value to compare to.
---

6
web/docs/common/filters/match.mdx
View File

@@ -12,7 +12,7 @@ Finds rows that exactly match the specified filterObject. Equivilent of `filter(
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
```js {3}
supabase
.from('countries')
.match({ 'continent': 'Asia' })
@@ -22,4 +22,6 @@ supabase
#### `filterObject: object`
An object of `{ 'columnName': 'criteria' }`
An object of `{ 'columnName': 'criteria' }`
---

29
web/docs/common/filters/not.mdx Normal file
View File

@@ -0,0 +1,29 @@
import Collapsable from '../../../src/components/Collapsable'
<!-- prettier-ignore -->
```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)`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js {3}
supabase
.from('countries')
.not('name', 'China')
```
</Collapsable>
#### `columnName: string`
Name of database column.
#### `filterValue: { string | integer | boolean }`
Value to **not** match.
---

45
web/docs/library/get.mdx
View File

@@ -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()`
<Match />
## Filtering
<CommonFilters verb="get" />
### `filter()`
<CommonFilters filter='filter'/>
### `match()`
<CommonFilters filter='match'/>
### `eq()`
<CommonFilters filter='eq'/>
### `gt()`
<CommonFilters filter='gt'/>
### `lt()`
<CommonFilters filter='lt'/>
### `gte()`
<CommonFilters filter='gte'/>
### `lte()`
<CommonFilters filter='lte'/>
### `like()`
<CommonFilters filter='like'/>
### `ilike()`
<CommonFilters filter='ilike'/>
### `is()`
<CommonFilters filter='is'/>
### `in()`
<CommonFilters filter='in'/>
### `not()`
<CommonFilters filter='not'/>
## Responses