Merge pull request #6205 from marmelab/update-tutorial

[Doc] Update tutorial images

Author: djhi

docs/Tutorial.md

@@ -225,18 +225,23 @@ export const UserList = props => (
 
 ![Url Field](./img/tutorial_url_field.png)
 
-In react-admin, fields are simple React components. At runtime, they receive the `record` fetched from the API (e.g. `{ "id": 2, "name": "Ervin Howell", "website": "anastasia.net", ... }`), and the `source` field they should display (e.g. `website`).
+In react-admin, fields are simple React components. At runtime, they grab the `record` fetched from the API (e.g. `{ "id": 2, "name": "Ervin Howell", "website": "anastasia.net", ... }`) with a custom hook, and use the `source` field (e.g. `website`) to get the value they should display (e.g. "anastasia.net").
 
 That means that writing a custom Field component is really straightforward. For instance, here is a simplified version of the `UrlField`:
 
 ```jsx
 // in src/MyUrlField.js
 import * as React from "react";
+import { useRecordContext } from 'react-admin';
 
-const MyUrlField = ({ record = {}, source }) =>
-    <a href={record[source]}>
-        {record[source]}
-    </a>;
+const MyUrlField = ({ source }) => {
+    const record = useRecordContext();
+    return record ? (
+        <a href={record[source]}>
+            {record[source]}
+        </a>
+    ) : null;
+}
 
 export default MyUrlField;
 ```
@@ -274,6 +279,7 @@ The `MyUrlField` component is a perfect opportunity to illustrate how to customi
 ```jsx
 // in src/MyUrlField.js
 import * as React from "react";
+import { useRecordContext } from 'react-admin';
 import { makeStyles } from '@material-ui/core/styles';
 import LaunchIcon from '@material-ui/icons/Launch';
 
@@ -283,18 +289,20 @@ const useStyles = makeStyles({
     },
     icon: {
         width: '0.5em',
+        height: '0.5em',
         paddingLeft: 2,
     },
 });
 
-const MyUrlField = ({ record = {}, source }) => {
+const MyUrlField = ({ source }) => {
+    const record = useRecordContext();
     const classes = useStyles();
-    return (
+    return record ? (
         <a href={record[source]} className={classes.link}>
             {record[source]}
             <LaunchIcon className={classes.icon} />
         </a>
-    );
+    ) : null;
 }
 
 export default MyUrlField;

docs/img/tutorial_custom_styles.png

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

docs/img/tutorial_edit_guesser.gif

@@ -15,6 +15,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

docs/img/tutorial_guessed_list.png

@@ -14,7 +14,7 @@
         "lint": "eslint --ext .js,.ts,.tsx \"./packages/**/src/**/*.{js,ts,tsx}\" \"./examples/**/src/**/*.{js,ts,tsx}\" \"./cypress/**/*.{js,ts,tsx}\"",
         "prettier": "prettier --config ./.prettierrc.js --write --list-different \"packages/*/src/**/*.{js,json,ts,tsx,css,md}\" \"examples/*/src/**/*.{js,ts,json,tsx,css,md}\" \"cypress/**/*.{js,ts,json,tsx,css,md}\"",
         "run-simple": "cd examples/simple && yarn -s start",
-        "run-tutorial": "yarn run -s build && cd examples/tutorial && yarn -s start",
+        "run-tutorial": "cd examples/tutorial && yarn -s start",
         "run-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn -s start",
         "run-graphql-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=graphql yarn -s start",
         "run-demo-watch": "concurrently \"yarn run watch\" \"yarn run run-demo\"",