├── .block
└── remote.json
├── .eslintrc.js
├── .gitignore
├── LICENSE.md
├── README.md
├── block.json
├── frontend
├── index.js
└── todo-app.js
├── media
└── block.gif
├── package-lock.json
├── package.json
└── test
├── .eslintrc.js
├── fixtures
└── simple_record_list.js
├── index.jsdom.test.jsx
├── index.jsx
├── index.webdriver.test.js
└── jest.setup.js
/.block/remote.json:
--------------------------------------------------------------------------------
1 | {
2 | "blockId": "blkhNEBwxw81IXwJg",
3 | "baseId": "appM8f5iUIHl3mg3h"
4 | }
5 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es6: true,
5 | },
6 | extends: ['eslint:recommended', 'plugin:react/recommended'],
7 | globals: {
8 | Atomics: 'readonly',
9 | SharedArrayBuffer: 'readonly',
10 | },
11 | parserOptions: {
12 | ecmaFeatures: {
13 | jsx: true,
14 | },
15 | ecmaVersion: 2018,
16 | sourceType: 'module',
17 | },
18 | plugins: ['react', 'react-hooks'],
19 | rules: {
20 | 'react/prop-types': 0,
21 | 'react-hooks/rules-of-hooks': 'error',
22 | 'react-hooks/exhaustive-deps': 'warn',
23 | },
24 | settings: {
25 | react: {
26 | version: 'detect',
27 | },
28 | },
29 | };
30 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .airtableAPIKey
3 | build
4 | cypress/screenshots/
5 | cypress/videos/
6 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Airtable
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
6 | associated documentation files (the "Software"), to deal in the Software without restriction,
7 | including without limitation the rights to use, copy, modify, merge, publish, distribute,
8 | sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
9 | furnished to do so, subject to the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be included in all copies or substantial
12 | portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
15 | NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
16 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
17 | OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # To-do list app
2 |
3 | This example app shows a to-do list based on the records in a table.
4 |
5 | The code shows:
6 |
7 | - How to query and display data from your base.
8 |
9 | - How to use core Airtable functions like "expand record".
10 |
11 | - How to use the built-in component library to let the user choose a table.
12 |
13 | - How to store settings in `globalConfig`.
14 |
15 | - How to create, update, and delete records in your base.
16 |
17 | - How to make your app adapt to the current user's permissions.
18 |
19 | ## How to run this app
20 |
21 | 1. Create a new base (or you can use an existing base).
22 |
23 | 2. Create a new app in your new base (see
24 | [Create a new app](https://airtable.com/developers/blocks/guides/hello-world-tutorial#create-a-new-app)),
25 | selecting "To-do list" as your template.
26 |
27 | 3. From the root of your new app, run `block run`.
28 |
29 | ## See the app running
30 |
31 | 
32 |
--------------------------------------------------------------------------------
/block.json:
--------------------------------------------------------------------------------
1 | {
2 | "frontendEntry": "./frontend/index.js",
3 | "frontendTestingEntry": "./test/index.jsx"
4 | }
5 |
--------------------------------------------------------------------------------
/frontend/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {initializeBlock} from '@airtable/blocks/ui';
3 |
4 | import TodoApp from './todo-app';
5 |
6 | initializeBlock(() => );
7 |
--------------------------------------------------------------------------------
/frontend/todo-app.js:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 | import {
3 | useBase,
4 | useRecords,
5 | useGlobalConfig,
6 | expandRecord,
7 | TablePickerSynced,
8 | ViewPickerSynced,
9 | FieldPickerSynced,
10 | FormField,
11 | Input,
12 | Button,
13 | Box,
14 | Icon,
15 | } from '@airtable/blocks/ui';
16 | import {FieldType} from '@airtable/blocks/models';
17 |
18 | export default function TodoApp() {
19 | const base = useBase();
20 |
21 | // Read the user's choice for which table and view to use from globalConfig.
22 | const globalConfig = useGlobalConfig();
23 | const tableId = globalConfig.get('selectedTableId');
24 | const viewId = globalConfig.get('selectedViewId');
25 | const doneFieldId = globalConfig.get('selectedDoneFieldId');
26 |
27 | const table = base.getTableByIdIfExists(tableId);
28 | const view = table ? table.getViewByIdIfExists(viewId) : null;
29 | const doneField = table ? table.getFieldByIdIfExists(doneFieldId) : null;
30 |
31 | // Don't need to fetch records if doneField doesn't exist (the field or it's parent table may
32 | // have been deleted, or may not have been selected yet.)
33 | const records = useRecords(doneField ? view : null, {
34 | fields: doneField ? [table.primaryField, doneField] : [],
35 | });
36 |
37 | const tasks = records
38 | ? records.map(record => {
39 | return ;
40 | })
41 | : null;
42 |
43 | return (
44 |