-
-
-
'
24 | filter_html_help: true
25 | filter_html_nofollow: false
26 | filter_url:
27 | id: filter_url
28 | provider: filter
29 | status: true
30 | weight: 0
31 | settings:
32 | filter_url_length: 72
33 |
--------------------------------------------------------------------------------
/drupal/web/themes/react_example_theme/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react_example_theme",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "js/src/index.jsx",
6 | "scripts": {
7 | "build": "NODE_ENV=production webpack --mode=production",
8 | "build:dev": "webpack",
9 | "start": "webpack --watch",
10 | "start:hmr": "webpack-dev-server --hot --progress --color"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "@babel/core": "^7.23.9",
17 | "@babel/preset-env": "^7.23.9",
18 | "@babel/preset-react": "^7.23.3",
19 | "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
20 | "babel-loader": "^9.1.3",
21 | "react-refresh": "^0.14.0",
22 | "webpack": "^5.90.1",
23 | "webpack-cli": "^5.1.4",
24 | "webpack-dev-server": "^4.15.1"
25 | },
26 | "dependencies": {
27 | "prop-types": "^15.8.1",
28 | "react": "^18.2.0",
29 | "react-dom": "^18.2.0"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/react-decoupled/src/utils/fetch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Helper function wraps a normal fetch call with a fetch request that first
3 | * retrieves a CSRF token and then adds the token as an X-CSRF-Token header
4 | * to the options for desired fetch call.
5 | *
6 | * @param {string} csrfUrl
7 | * URL where we can retrieve a CSRF token for the current user.
8 | * @param {string} fetchUrl
9 | * URL to fetch with X-CSRF-Token header included.
10 | * @param {object} fetchOptions
11 | * Options to pass to fetch for the call to fetchUrl.
12 | */
13 | export const fetchWithCSRFToken = (csrfUrl, fetchUrl, fetchOptions) => {
14 | if (!fetchOptions.headers.get('X-CSRF-Token')) {
15 | return fetch(csrfUrl)
16 | .then(response => response.text())
17 | .then((csrfToken) => {
18 | fetchOptions.headers.append('X-CSRF-Token', csrfToken);
19 | return fetch(fetchUrl, fetchOptions);
20 | });
21 | }
22 | else {
23 | return fetch(fetchUrl, fetchOptions);
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/react-decoupled-vite/src/utils/fetch.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Helper function wraps a normal fetch call with a fetch request that first
3 | * retrieves a CSRF token and then adds the token as an X-CSRF-Token header
4 | * to the options for desired fetch call.
5 | *
6 | * @param {string} csrfUrl
7 | * URL where we can retrieve a CSRF token for the current user.
8 | * @param {string} fetchUrl
9 | * URL to fetch with X-CSRF-Token header included.
10 | * @param {object} fetchOptions
11 | * Options to pass to fetch for the call to fetchUrl.
12 | */
13 | export const fetchWithCSRFToken = (csrfUrl, fetchUrl, fetchOptions) => {
14 | if (!fetchOptions.headers.get('X-CSRF-Token')) {
15 | return fetch(csrfUrl)
16 | .then(response => response.text())
17 | .then((csrfToken) => {
18 | fetchOptions.headers.append('X-CSRF-Token', csrfToken);
19 | return fetch(fetchUrl, fetchOptions);
20 | });
21 | }
22 | else {
23 | return fetch(fetchUrl, fetchOptions);
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/drupal/web/themes/react_example_theme/js/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 |
4 | /* Import Components */
5 | import DrupalProjectStats from './components/DrupalProjectStats';
6 | import NodeListOnly from "./components/NodeListOnly";
7 | import NodeReadWrite from "./components/NodeReadWrite";
8 |
9 | // Define Main as a functional component
10 | const Main = () => (
11 | <>
12 | {
13 | //
-
-
-
![]()
'
38 | filter_html_help: false
39 | filter_html_nofollow: false
40 | filter_html_image_secure:
41 | id: filter_html_image_secure
42 | provider: filter
43 | status: true
44 | weight: 9
45 | settings: { }
46 | filter_image_lazy_load:
47 | id: filter_image_lazy_load
48 | provider: filter
49 | status: true
50 | weight: 15
51 | settings: { }
52 |
--------------------------------------------------------------------------------
/drupal/config/editor.editor.basic_html.yml:
--------------------------------------------------------------------------------
1 | uuid: 86703ef5-67bb-4dc4-8d0a-c3e77e7f4491
2 | langcode: en
3 | status: true
4 | dependencies:
5 | config:
6 | - filter.format.basic_html
7 | module:
8 | - ckeditor5
9 | _core:
10 | default_config_hash: Qi2tIe-L97EutlMmhEvhsNxZOpOoA-RH82c4BQb5n4A
11 | format: basic_html
12 | editor: ckeditor5
13 | settings:
14 | toolbar:
15 | items:
16 | - bold
17 | - italic
18 | - '|'
19 | - link
20 | - '|'
21 | - bulletedList
22 | - numberedList
23 | - '|'
24 | - blockQuote
25 | - drupalInsertImage
26 | - '|'
27 | - heading
28 | - code
29 | - '|'
30 | - sourceEditing
31 | plugins:
32 | ckeditor5_heading:
33 | enabled_headings:
34 | - heading2
35 | - heading3
36 | - heading4
37 | - heading5
38 | - heading6
39 | ckeditor5_imageResize:
40 | allow_resize: true
41 | ckeditor5_list:
42 | properties:
43 | reversed: false
44 | startIndex: true
45 | multiBlock: true
46 | ckeditor5_sourceEditing:
47 | allowed_tags:
48 | - ''
49 | - ''
50 | - '- '
51 | - '
- '
52 | - ''
53 | - '
'
54 | - ''
55 | - ''
56 | - ''
57 | - ''
58 | - ''
59 | - ''
60 | - ''
61 | image_upload:
62 | status: true
63 | scheme: public
64 | directory: inline-images
65 | max_size: null
66 | max_dimensions:
67 | width: null
68 | height: null
69 |
--------------------------------------------------------------------------------
/drupal/config/core.entity_view_display.node.article.default.yml:
--------------------------------------------------------------------------------
1 | uuid: a9e39129-3157-4ab2-9524-0a66a82378b7
2 | langcode: en
3 | status: true
4 | dependencies:
5 | config:
6 | - core.entity_view_display.comment.comment.default
7 | - field.field.node.article.body
8 | - field.field.node.article.comment
9 | - field.field.node.article.field_image
10 | - field.field.node.article.field_tags
11 | - image.style.wide
12 | - node.type.article
13 | module:
14 | - comment
15 | - image
16 | - text
17 | - user
18 | _core:
19 | default_config_hash: br6izr-iGEu--JvNbCJNtOBpRnxpFLXfoV5y61U9Nqc
20 | id: node.article.default
21 | targetEntityType: node
22 | bundle: article
23 | mode: default
24 | content:
25 | body:
26 | type: text_default
27 | label: hidden
28 | settings: { }
29 | third_party_settings: { }
30 | weight: 0
31 | region: content
32 | comment:
33 | type: comment_default
34 | label: above
35 | settings:
36 | view_mode: default
37 | pager_id: 0
38 | third_party_settings: { }
39 | weight: 110
40 | region: content
41 | field_image:
42 | type: image
43 | label: hidden
44 | settings:
45 | image_link: ''
46 | image_style: wide
47 | image_loading:
48 | attribute: eager
49 | third_party_settings: { }
50 | weight: -1
51 | region: content
52 | field_tags:
53 | type: entity_reference_label
54 | label: above
55 | settings:
56 | link: true
57 | third_party_settings: { }
58 | weight: 10
59 | region: content
60 | links:
61 | settings: { }
62 | third_party_settings: { }
63 | weight: 100
64 | region: content
65 | hidden: { }
66 |
--------------------------------------------------------------------------------
/react-decoupled/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/drupal/config/core.entity_form_display.node.page.default.yml:
--------------------------------------------------------------------------------
1 | uuid: 9009298d-d006-45c8-bd2c-f709022fa6b0
2 | langcode: en
3 | status: true
4 | dependencies:
5 | config:
6 | - field.field.node.page.body
7 | - node.type.page
8 | module:
9 | - path
10 | - text
11 | _core:
12 | default_config_hash: SfpLhPExzvR0MgFp0Wp7CrmgEnhcqQ-fXIWFhbf4ue0
13 | id: node.page.default
14 | targetEntityType: node
15 | bundle: page
16 | mode: default
17 | content:
18 | body:
19 | type: text_textarea_with_summary
20 | weight: 31
21 | region: content
22 | settings:
23 | rows: 9
24 | summary_rows: 3
25 | placeholder: ''
26 | show_summary: false
27 | third_party_settings: { }
28 | created:
29 | type: datetime_timestamp
30 | weight: 10
31 | region: content
32 | settings: { }
33 | third_party_settings: { }
34 | path:
35 | type: path
36 | weight: 30
37 | region: content
38 | settings: { }
39 | third_party_settings: { }
40 | promote:
41 | type: boolean_checkbox
42 | weight: 15
43 | region: content
44 | settings:
45 | display_label: true
46 | third_party_settings: { }
47 | status:
48 | type: boolean_checkbox
49 | weight: 120
50 | region: content
51 | settings:
52 | display_label: true
53 | third_party_settings: { }
54 | sticky:
55 | type: boolean_checkbox
56 | weight: 16
57 | region: content
58 | settings:
59 | display_label: true
60 | third_party_settings: { }
61 | title:
62 | type: string_textfield
63 | weight: -5
64 | region: content
65 | settings:
66 | size: 60
67 | placeholder: ''
68 | third_party_settings: { }
69 | uid:
70 | type: entity_reference_autocomplete
71 | weight: 5
72 | region: content
73 | settings:
74 | match_operator: CONTAINS
75 | match_limit: 10
76 | size: 60
77 | placeholder: ''
78 | third_party_settings: { }
79 | hidden: { }
80 |
--------------------------------------------------------------------------------
/drupal/web/themes/react_example_theme/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
3 | const isDevMode = process.env.NODE_ENV !== 'production';
4 |
5 | const PROXY = 'https://react-tutorials-2.ddev.site/';
6 | const PUBLIC_PATH = '/themes/react_example_theme/js/dist_dev/';
7 |
8 | const config = {
9 | entry: {
10 | main: [
11 | "./js/src/index.jsx"
12 | ]
13 | },
14 | devtool: (isDevMode) ? 'source-map' : false,
15 | mode: (isDevMode) ? 'development' : 'production',
16 | output: {
17 | path: isDevMode ? path.resolve(__dirname, "js/dist_dev") : path.resolve(__dirname, "js/dist"),
18 | filename: '[name].min.js',
19 | publicPath: PUBLIC_PATH
20 | },
21 | resolve: {
22 | extensions: ['.js', '.jsx'],
23 | },
24 | module: {
25 | rules: [
26 | {
27 | test: /\.jsx?$/,
28 | loader: 'babel-loader',
29 | exclude: /node_modules/,
30 | include: path.join(__dirname, 'js/src'),
31 | options: {
32 | // This is a feature of `babel-loader` for webpack (not Babel itself).
33 | // It enables caching results in ./node_modules/.cache/babel-loader/
34 | // directory for faster rebuilds.
35 | cacheDirectory: true,
36 | plugins: [
37 | isDevMode && require.resolve('react-refresh/babel')
38 | ].filter(Boolean),
39 | },
40 | }
41 | ],
42 | },
43 | plugins: [
44 | isDevMode && new ReactRefreshWebpackPlugin(),
45 | ].filter(Boolean),
46 | devServer: {
47 | port: 8181,
48 | hot: true,
49 | headers: { 'Access-Control-Allow-Origin': '*' },
50 | devMiddleware: {
51 | writeToDisk: true,
52 | },
53 | // Settings for http-proxy-middleware.
54 | proxy: [
55 | {
56 | index: '',
57 | context: ['/'],
58 | target: PROXY,
59 | publicPath: PUBLIC_PATH,
60 | secure: false,
61 | // These settings allow Drupal authentication to work, so you can sign
62 | // in to your Drupal site via the proxy. They require some corresponding
63 | // configuration in Drupal's settings.php.
64 | changeOrigin: true,
65 | xfwd: true
66 | }
67 | ]
68 | },
69 | };
70 |
71 | module.exports = config;
72 |
--------------------------------------------------------------------------------
/react-decoupled/src/components/DrupalProjectStats.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | const DrupalProjectStats = ({ projectName }) => {
5 | const [project, setProject] = useState(projectName);
6 | const [usage, setUsage] = useState(null);
7 |
8 | useEffect(() => {
9 | setUsage(false);
10 | const data = fetch(
11 | `https://www.drupal.org/api-d7/node.json?field_project_machine_name=${project}`
12 | )
13 | .then(response => response.json())
14 | .then(result => {
15 | if (result.list[0].project_usage) {
16 | setUsage(result.list[0].project_usage);
17 | }
18 | })
19 | .catch(error => console.log("error", error));
20 | }, [project]);
21 |
22 | return (
23 |
24 |
25 | Choose a project:
26 |
27 |
28 |
29 |
30 |
31 |
32 | Usage stats for {project} by version:
33 | {usage ? (
34 |
35 | {Object.keys(usage).map(key => (
36 |
39 | ) : (
40 | fetching data ...
41 | )}
42 |
43 |
44 | );
45 | };
46 |
47 | // Provide type checking for props. Think of this as documentation for what
48 | // props a component accepts.
49 | // https://reactjs.org/docs/typechecking-with-proptypes.html
50 | DrupalProjectStats.propTypes = {
51 | projectName: PropTypes.string.required
52 | };
53 |
54 | // Set a default value for any required props.
55 | DrupalProjectStats.defaultProps = {
56 | projectName: 'drupal',
57 | };
58 |
59 | /**
60 | * Another component; This one displays usage statistics for a specific version
61 | * of Drupal. It's not exported, so it can only be used in this files scope.
62 | * Breaking things up like this can help make your code easier to maintain.
63 | */
64 | const StatsItem = ({ count, version }) => (
65 |
-
66 | {version}: {count}
67 |
68 | );
69 |
70 | StatsItem.propTypes = {
71 | count: PropTypes.number,
72 | version: PropTypes.string,
73 | };
74 |
75 | export default DrupalProjectStats;
76 |
--------------------------------------------------------------------------------
/react-decoupled-vite/src/components/DrupalProjectStats.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | const DrupalProjectStats = ({ projectName }) => {
5 | const [project, setProject] = useState(projectName);
6 | const [usage, setUsage] = useState(null);
7 |
8 | useEffect(() => {
9 | setUsage(false);
10 | const data = fetch(
11 | `https://www.drupal.org/api-d7/node.json?field_project_machine_name=${project}`
12 | )
13 | .then(response => response.json())
14 | .then(result => {
15 | if (result.list[0].project_usage) {
16 | setUsage(result.list[0].project_usage);
17 | }
18 | })
19 | .catch(error => console.log("error", error));
20 | }, [project]);
21 |
22 | return (
23 |
24 |
25 | Choose a project:
26 |
27 |
28 |
29 |
30 |
31 |
32 | Usage stats for {project} by version:
33 | {usage ? (
34 |
35 | {Object.keys(usage).map(key => (
36 |
39 | ) : (
40 | fetching data ...
41 | )}
42 |
43 |
44 | );
45 | };
46 |
47 | // Provide type checking for props. Think of this as documentation for what
48 | // props a component accepts.
49 | // https://reactjs.org/docs/typechecking-with-proptypes.html
50 | DrupalProjectStats.propTypes = {
51 | projectName: PropTypes.string.required
52 | };
53 |
54 | // Set a default value for any required props.
55 | DrupalProjectStats.defaultProps = {
56 | projectName: 'drupal',
57 | };
58 |
59 | /**
60 | * Another component; This one displays usage statistics for a specific version
61 | * of Drupal. It's not exported, so it can only be used in this files scope.
62 | * Breaking things up like this can help make your code easier to maintain.
63 | */
64 | const StatsItem = ({ count, version }) => (
65 | -
66 | {version}: {count}
67 |
68 | );
69 |
70 | StatsItem.propTypes = {
71 | count: PropTypes.number,
72 | version: PropTypes.string,
73 | };
74 |
75 | export default DrupalProjectStats;
76 |
--------------------------------------------------------------------------------
/drupal/web/themes/react_example_theme/js/src/components/DrupalProjectStats.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import PropTypes from "prop-types";
3 |
4 | const DrupalProjectStats = ({ projectName }) => {
5 | const [project, setProject] = useState(projectName);
6 | const [usage, setUsage] = useState(null);
7 |
8 | useEffect(() => {
9 | setUsage(false);
10 | const data = fetch(
11 | `https://www.drupal.org/api-d7/node.json?field_project_machine_name=${project}`
12 | )
13 | .then(response => response.json())
14 | .then(result => {
15 | if (result.list[0].project_usage) {
16 | setUsage(result.list[0].project_usage);
17 | }
18 | })
19 | .catch(error => console.log("error", error));
20 | }, [project]);
21 |
22 | return (
23 |
24 |
25 | Choose a project:
26 |
27 |
28 |
29 |
30 |
31 |
32 | Usage stats for {project} by version:
33 | {usage ? (
34 |
35 | {Object.keys(usage).map(key => (
36 |
39 | ) : (
40 | fetching data ...
41 | )}
42 |
43 |
44 | );
45 | };
46 |
47 | // Provide type checking for props. Think of this as documentation for what
48 | // props a component accepts.
49 | // https://reactjs.org/docs/typechecking-with-proptypes.html
50 | DrupalProjectStats.propTypes = {
51 | projectName: PropTypes.string.required
52 | };
53 |
54 | // Set a default value for any required props.
55 | DrupalProjectStats.defaultProps = {
56 | projectName: 'drupal',
57 | };
58 |
59 | /**
60 | * Another component; This one displays usage statistics for a specific version
61 | * of Drupal. It's not exported, so it can only be used in this files scope.
62 | * Breaking things up like this can help make your code easier to maintain.
63 | */
64 | const StatsItem = ({ count, version }) => (
65 | -
66 | {version}: {count}
67 |
68 | );
69 |
70 | StatsItem.propTypes = {
71 | count: PropTypes.number,
72 | version: PropTypes.string,
73 | };
74 |
75 | export default DrupalProjectStats;
76 |
--------------------------------------------------------------------------------
/react-decoupled/src/components/NodeListOnly.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 |
3 | function isValidData(data) {
4 | if (data === null) {
5 | return false;
6 | }
7 | if (data.data === undefined ||
8 | data.data === null ||
9 | data.data.length === 0 ) {
10 | return false;
11 | }
12 | return true;
13 | }
14 |
15 | const NodeItem = ({drupal_internal__nid, title}) => (
16 |
17 | {title}
18 |
19 | );
20 |
21 | const NoData = () => (
22 | No articles found.
23 | );
24 |
25 | const NodeListOnly = () => {
26 | const [content, setContent] = useState(false);
27 | const [filter, setFilter] = useState(null);
28 |
29 | useEffect(() => {
30 | // This should point to your local Drupal instance. Alternatively, for React
31 | // applications embedded in a Drupal theme or module this could also be set
32 | // to a relative path.
33 | const API_ROOT = '/jsonapi/';
34 | const url = `${API_ROOT}node/article?fields[node--article]=id,drupal_internal__nid,title,body&sort=-created&page[limit]=10`;
35 |
36 | const headers = new Headers({
37 | Accept: 'application/vnd.api+json',
38 | });
39 |
40 | fetch(url, {headers})
41 | .then((response) => response.json())
42 | .then((data) => {
43 | if (isValidData(data)) {
44 | setContent(data.data)
45 | }
46 | })
47 | .catch(err => console.log('There was an error accessing the API', err));
48 | }, []);
49 |
50 | return (
51 |
52 | Site content
53 | {content ? (
54 | <>
55 |
56 | setFilter(event.target.value.toLowerCase()))}
61 | />
62 |
63 | {
64 | content.filter((item) => {
65 | if (!filter) {
66 | return item;
67 | }
68 |
69 | if (filter && (item.attributes.title.toLowerCase().includes(filter) || item.attributes.body.value.toLowerCase().includes(filter))) {
70 | return item;
71 | }
72 | }).map((item) => Site content
53 | {content ? (
54 | <>
55 |
56 | setFilter(event.target.value.toLowerCase()))}
61 | />
62 |
63 | {
64 | content.filter((item) => {
65 | if (!filter) {
66 | return item;
67 | }
68 |
69 | if (filter && (item.attributes.title.toLowerCase().includes(filter) || item.attributes.body.value.toLowerCase().includes(filter))) {
70 | return item;
71 | }
72 | }).map((item) => Site content
53 | {content ? (
54 | <>
55 |
56 | setFilter(event.target.value.toLowerCase()))}
61 | />
62 |
63 | {
64 | content.filter((item) => {
65 | if (!filter) {
66 | return item;
67 | }
68 |
69 | if (filter && (item.attributes.title.toLowerCase().includes(filter) || item.attributes.body.value.toLowerCase().includes(filter))) {
70 | return item;
71 | }
72 | }).map((item) =>
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `npm run test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `npm run build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `npm run eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
46 | ### Code Splitting
47 |
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 |
50 | ### Analyzing the Bundle Size
51 |
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 |
54 | ### Making a Progressive Web App
55 |
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 |
58 | ### Advanced Configuration
59 |
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 |
62 | ### Deployment
63 |
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 |
66 | ### `yarn build` fails to minify
67 |
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Drupalize.Me React & Drupal Code Examples
2 |
3 | This repo contains the example code used in the https://drupalize.me/series/drupal-8-and-reactjs series.
4 |
5 | **Note:** The `hello-world` branch contains a trimmed down version of the code that reflects the application as it would be after completing this tutorial covering how to [Connect React to a Drupal Theme or Module](https://drupalize.me/tutorial/connect-react-drupal-theme-or-module?p=3253).
6 |
7 | ## Drupal
8 |
9 | The /drupal directory contains a Drupal 10 project with basic configuration for JSON:API, and to demonstrate embedding a React application inside a Drupal theme or module.
10 |
11 | See the `drupal-9` branch for older examples including Drupal 8/9 and React 16.
12 |
13 | Install all the Drupal dependencies:
14 |
15 | ```bash
16 | cd drupal
17 | composer install
18 | ```
19 |
20 | Then import the database snapshot in _drupal/backup.sql.gz_.
21 |
22 | The default admin account is admin/admin. You can change this with `drush upwd admin {NEW_PASSWORD}`.
23 |
24 | If you're using [ddev](https://ddev.readthedocs.io/en/stable/) this contains ddev configuration and can be started with:
25 |
26 | ```bash
27 | cd drupal
28 | # Start ddev.
29 | ddev start
30 | # Install/update composer dependencies.
31 | ddev composer install
32 | # Import the database snapshot.
33 | ddev import-db --src=./backup.sql.gz
34 | # Run any necessary database updates, and re-import config.
35 | ddev exec "drush updb -y && drush cim -y && drush cr -y"
36 | ```
37 |
38 | The _/drupal/web/themes/react\_example\_theme/_ contains a custom theme with a React application embedded via the theme. This demonstrates using Webpack to bundle and transpile React/JavaScript files.
39 |
40 | ```bash
41 | cd /drupal/web/themes/react_example_theme;
42 | npm install
43 | # Build the production JS files:
44 | npm run build
45 | # Build development JS files
46 | npm run build:dev
47 | # Start webpack in --watch mode while doing development
48 | npm run start
49 | # Start webpack in --watch mode with hot module reloading
50 | # Requires some config to proxy requests to Drupal see .proxyrc
51 | npm run start:hmr
52 | ```
53 |
54 | ## Decoupled React Application
55 |
56 | The _/react-decoupled-vite_ directory contains an example decoupled React application built with Vite. It is built to interact with the API provided by Drupal installed in _/drupal_. This is the recommended approach.
57 |
58 | To download dependencies and start the local development server run:
59 |
60 | ```bash
61 | cd react-decoupled-vite
62 | npm install
63 | npm run dev
64 | ```
65 |
66 | You might need to update some configuration to make sure it points to your local Drupal installation. See _src/utils/oath.js_.
67 |
68 | For an older create-react-app based example see the _/react-decoupled_ directory which contains an example of a decoupled React application built with create-react-app.
69 |
70 | To download dependencies and start the local development server run:
71 |
72 | ```bash
73 | cd react-decoupled
74 | npm install
75 | npm run start
76 | ```
77 |
78 | You might need to update some configuration to make sure it points to your local Drupal installation.
79 |
--------------------------------------------------------------------------------
/drupal/web/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | Drupal is an open source content management platform supporting a variety of
4 | websites ranging from personal weblogs to large community-driven websites. For
5 | more information, visit the Drupal website, [Drupal.org][Drupal.org], and join
6 | the [Drupal community][Drupal community].
7 |
8 | ## Contributing
9 |
10 | Drupal is developed on [Drupal.org][Drupal.org], the home of the international
11 | Drupal community since 2001!
12 |
13 | [Drupal.org][Drupal.org] hosts Drupal's [GitLab repository][GitLab repository],
14 | its [issue queue][issue queue], and its [documentation][documentation]. Before
15 | you start working on code, be sure to search the [issue queue][issue queue] and
16 | create an issue if your aren't able to find an existing issue.
17 |
18 | Every issue on Drupal.org automatically creates a new community-accessible fork
19 | that you can contribute to. Learn more about the code contribution process on
20 | the [Issue forks & merge requests page][issue forks].
21 |
22 | ## Usage
23 |
24 | For a brief introduction, see [USAGE.txt](/core/USAGE.txt). You can also find
25 | guides, API references, and more by visiting Drupal's [documentation
26 | page][documentation].
27 |
28 | You can quickly extend Drupal's core feature set by installing any of its
29 | [thousands of free and open source modules][modules]. With Drupal and its
30 | module ecosystem, you can often build most or all of what your project needs
31 | before writing a single line of code.
32 |
33 | ## Changelog
34 |
35 | Drupal keeps detailed [change records][changelog]. You can search Drupal's
36 | changes for a record of every notable breaking change and new feature since
37 | 2011.
38 |
39 | ## Security
40 |
41 | For a list of security announcements, see the [Security advisories
42 | page][Security advisories] (available as [an RSS feed][security RSS]). This
43 | page also describes how to subscribe to these announcements via email.
44 |
45 | For information about the Drupal security process, or to find out how to report
46 | a potential security issue to the Drupal security team, see the [Security team
47 | page][security team].
48 |
49 | ## Need a helping hand?
50 |
51 | Visit the [Support page][support] or browse [over a thousand Drupal
52 | providers][service providers] offering design, strategy, development, and
53 | hosting services.
54 |
55 | ## Legal matters
56 |
57 | Know your rights when using Drupal by reading Drupal core's
58 | [license](/core/LICENSE.txt).
59 |
60 | Learn about the [Drupal trademark and logo policy here][trademark].
61 |
62 | [Drupal.org]: https://www.drupal.org
63 | [Drupal community]: https://www.drupal.org/community
64 | [GitLab repository]: https://git.drupalcode.org/project/drupal
65 | [issue queue]: https://www.drupal.org/project/issues/drupal
66 | [issue forks]: https://www.drupal.org/drupalorg/docs/gitlab-integration/issue-forks-merge-requests
67 | [documentation]: https://www.drupal.org/documentation
68 | [changelog]: https://www.drupal.org/list-changes/drupal
69 | [modules]: https://www.drupal.org/project/project_module
70 | [security advisories]: https://www.drupal.org/security
71 | [security RSS]: https://www.drupal.org/security/rss.xml
72 | [security team]: https://www.drupal.org/drupal-security-team
73 | [service providers]: https://www.drupal.org/drupal-services
74 | [support]: https://www.drupal.org/support
75 | [trademark]: https://www.drupal.com/trademark
76 |
--------------------------------------------------------------------------------
/drupal/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "drupal/recommended-project",
3 | "description": "Project template for Drupal 8 projects with a relocated document root",
4 | "type": "project",
5 | "license": "GPL-2.0-or-later",
6 | "homepage": "https://www.drupal.org/project/drupal",
7 | "support": {
8 | "docs": "https://www.drupal.org/docs/user_guide/en/index.html",
9 | "chat": "https://www.drupal.org/node/314178"
10 | },
11 | "repositories": [
12 | {
13 | "type": "composer",
14 | "url": "https://packages.drupal.org/8"
15 | }
16 | ],
17 | "require": {
18 | "composer/installers": "^1.2",
19 | "drupal/core-composer-scaffold": "^10",
20 | "drupal/core-project-message": "^10",
21 | "drupal/core-recommended": "^10",
22 | "drupal/devel": "^5.4",
23 | "drupal/simple_oauth": "6.0.x-dev@dev",
24 | "drush/drush": "^12.4"
25 | },
26 | "conflict": {
27 | "drupal/drupal": "*"
28 | },
29 | "minimum-stability": "dev",
30 | "prefer-stable": true,
31 | "config": {
32 | "sort-packages": true,
33 | "allow-plugins": {
34 | "composer/installers": true,
35 | "dealerdirect/phpcodesniffer-composer-installer": true,
36 | "drupal/core-composer-scaffold": true,
37 | "drupal/core-project-message": true,
38 | "php-http/discovery": true,
39 | "phpstan/extension-installer": true,
40 | "tbachert/spi": true
41 | }
42 | },
43 | "extra": {
44 | "drupal-scaffold": {
45 | "locations": {
46 | "web-root": "web/"
47 | }
48 | },
49 | "installer-paths": {
50 | "web/core": ["type:drupal-core"],
51 | "web/libraries/{$name}": ["type:drupal-library"],
52 | "web/modules/contrib/{$name}": ["type:drupal-module"],
53 | "web/profiles/contrib/{$name}": ["type:drupal-profile"],
54 | "web/themes/contrib/{$name}": ["type:drupal-theme"],
55 | "drush/Commands/contrib/{$name}": ["type:drupal-drush"],
56 | "web/modules/custom/{$name}": ["type:drupal-custom-module"],
57 | "web/themes/custom/{$name}": ["type:drupal-custom-theme"]
58 | },
59 | "drupal-core-project-message": {
60 | "include-keys": ["homepage", "support"],
61 | "post-create-project-cmd-message": [
62 | " ",
63 | " Congratulations, you’ve installed the Drupal codebase ",
64 | " from the drupal/recommended-project template! ",
65 | " ",
66 | "",
67 | "Next steps:",
68 |
69 | " * Install the site: https://www.drupal.org/docs/8/install",
70 | " * Read the user guide: https://www.drupal.org/docs/user_guide/en/index.html",
71 | " * Get support: https://www.drupal.org/support",
72 | " * Get involved with the Drupal community:",
73 | " https://www.drupal.org/getting-involved",
74 | " * Remove the plugin that prints this message:",
75 | " composer remove drupal/core-project-message"
76 | ]
77 | }
78 | },
79 | "require-dev": {
80 | "drupal/core-dev": "^10"
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/react-decoupled-vite/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Editor config
2 | .idea
3 |
4 | # Oauth keys
5 | /drupal/keys/private.key
6 | /drupal/keys/public.key
7 |
8 | # Ignore configuration files that may contain sensitive information
9 | /drupal/web/sites/*/*settings.*.php
10 | /drupal/web/sites/*/*services*.yml
11 |
12 | # Ignore paths that may contain user-generated content
13 | /drupal/web/sites/*/files
14 | /drupal/web/sites/*/public
15 | /drupal/web/sites/*/private
16 | /drupal/web/sites/*/files-public
17 | /drupal/web/sites/*/files-private
18 |
19 | # Ignore paths that may contain temporary files
20 | /drupal/web/sites/*/translations
21 | /drupal/web/sites/*/tmp
22 | /drupal/web/sites/*/cache
23 | /drupal/web/themes/react_example_theme/js/dist_dev
24 |
25 | # Ignore testing related files
26 | /drupal/web/sites/simpletest
27 |
28 | # Ignore drupal core (if not versioning drupal sources)
29 | /drupal/web/core
30 | /drupal/web/modules/README.txt
31 | /drupal/web/profiles/README.txt
32 | /drupal/web/sites/README.txt
33 | /drupal/web/sites/example.sites.php
34 | /drupal/web/sites/example.settings.local.php
35 | /drupal/web/sites/development.services.yml
36 | /drupal/web/themes/README.txt
37 | /drupal/web/vendor
38 | /drupal/web/.csslintrc
39 | /drupal/web/.editorconfig
40 | /drupal/web/.eslintignore
41 | /drupal/web/.eslintrc.json
42 | /drupal/web/.gitattributes
43 | /drupal/web/.htaccess
44 | /drupal/web/.ht.router.php
45 | /drupal/web/autoload.php
46 | /drupal/web/composer.json
47 | /drupal/web/composer.lock
48 | /drupal/web/example.gitignore
49 | /drupal/web/index.php
50 | /drupal/web/INSTALL.txt
51 | /drupal/web/LICENSE.txt
52 | /drupal/web/README.txt
53 | /drupal/web/robots.txt
54 | /drupal/web/update.php
55 | /drupal/web/web.config
56 |
57 | # Ignore files included by composer
58 | /drupal/vendor
59 | /drupal/web/modules/contrib
60 |
61 | # Node.js / JavaScript stuff
62 | # Logs
63 | logs
64 | *.log
65 | npm-debug.log*
66 | yarn-debug.log*
67 | yarn-error.log*
68 | lerna-debug.log*
69 |
70 | # Diagnostic reports (https://nodejs.org/api/report.html)
71 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
72 |
73 | # Runtime data
74 | pids
75 | *.pid
76 | *.seed
77 | *.pid.lock
78 |
79 | # Directory for instrumented libs generated by jscoverage/JSCover
80 | lib-cov
81 |
82 | # Coverage directory used by tools like istanbul
83 | coverage
84 | *.lcov
85 |
86 | # nyc test coverage
87 | .nyc_output
88 |
89 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
90 | .grunt
91 |
92 | # Bower dependency directory (https://bower.io/)
93 | bower_components
94 |
95 | # node-waf configuration
96 | .lock-wscript
97 |
98 | # Compiled binary addons (https://nodejs.org/api/addons.html)
99 | build/Release
100 |
101 | # Dependency directories
102 | node_modules/
103 | jspm_packages/
104 |
105 | # TypeScript v1 declaration files
106 | typings/
107 |
108 | # TypeScript cache
109 | *.tsbuildinfo
110 |
111 | # Optional npm cache directory
112 | .npm
113 |
114 | # Optional eslint cache
115 | .eslintcache
116 |
117 | # Microbundle cache
118 | .rpt2_cache/
119 | .rts2_cache_cjs/
120 | .rts2_cache_es/
121 | .rts2_cache_umd/
122 |
123 | # Optional REPL history
124 | .node_repl_history
125 |
126 | # Output of 'npm pack'
127 | *.tgz
128 |
129 | # Yarn Integrity file
130 | .yarn-integrity
131 |
132 | # dotenv environment variables file
133 | .env
134 | .env.test
135 |
136 | # parcel-bundler cache (https://parceljs.org/)
137 | .cache
138 | .parcel-cache
139 |
140 | # Next.js build output
141 | .next
142 |
143 | # Nuxt.js build / generate output
144 | .nuxt
145 | dist
146 |
147 | # Gatsby files
148 | .cache/
149 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
150 | # https://nextjs.org/blog/next-9-1#public-directory-support
151 | # public
152 |
153 | # vuepress build output
154 | .vuepress/dist
155 |
156 | # Serverless directories
157 | .serverless/
158 |
159 | # FuseBox cache
160 | .fusebox/
161 |
162 | # DynamoDB Local files
163 | .dynamodb/
164 |
165 | # TernJS port file
166 | .tern-port
167 |
--------------------------------------------------------------------------------
/drupal/.gitattributes:
--------------------------------------------------------------------------------
1 | # Drupal git normalization
2 | # @see https://www.kernel.org/pub/software/scm/git/docs/gitattributes.html
3 | # @see https://www.drupal.org/node/1542048
4 |
5 | # Normally these settings would be done with macro attributes for improved
6 | # readability and easier maintenance. However macros can only be defined at the
7 | # repository root directory. Drupal avoids making any assumptions about where it
8 | # is installed.
9 |
10 | # Define text file attributes.
11 | # - Treat them as text.
12 | # - Ensure no CRLF line-endings, neither on checkout nor on checkin.
13 | # - Detect whitespace errors.
14 | # - Exposed by default in `git diff --color` on the CLI.
15 | # - Validate with `git diff --check`.
16 | # - Deny applying with `git apply --whitespace=error-all`.
17 | # - Fix automatically with `git apply --whitespace=fix`.
18 |
19 | *.config text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
20 | *.css text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
21 | *.dist text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
22 | *.engine text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
23 | *.html text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=html
24 | *.inc text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
25 | *.install text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
26 | *.js text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
27 | *.json text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
28 | *.lock text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
29 | *.map text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
30 | *.md text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
31 | *.module text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
32 | *.php text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
33 | *.po text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
34 | *.profile text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
35 | *.script text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
36 | *.sh text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
37 | *.sql text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
38 | *.svg text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
39 | *.theme text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
40 | *.twig text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
41 | *.txt text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
42 | *.xml text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
43 | *.yml text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
44 |
45 | # Define binary file attributes.
46 | # - Do not treat them as text.
47 | # - Include binary diff in patches instead of "binary files differ."
48 | *.eot -text diff
49 | *.exe -text diff
50 | *.gif -text diff
51 | *.gz -text diff
52 | *.ico -text diff
53 | *.jpeg -text diff
54 | *.jpg -text diff
55 | *.otf -text diff
56 | *.phar -text diff
57 | *.png -text diff
58 | *.svgz -text diff
59 | *.ttf -text diff
60 | *.woff -text diff
61 | *.woff2 -text diff
62 |
--------------------------------------------------------------------------------
/drupal/config/user.mail.yml:
--------------------------------------------------------------------------------
1 | _core:
2 | default_config_hash: 6CZIzFifRq3qbdq3n3nDpEOO4hWIQtKOAQNPvGNGKeM
3 | langcode: en
4 | cancel_confirm:
5 | subject: 'Account cancellation request for [user:display-name] at [site:name]'
6 | body: |-
7 | [user:display-name]
8 |
9 | A request to cancel your account has been made at [site:name].
10 |
11 | You may now cancel your account on [site:url-brief] by clicking this link or copying and pasting it into your browser:
12 |
13 | [user:cancel-url]
14 |
15 | NOTE: The cancellation of your account is not reversible.
16 |
17 | This link expires in one day and nothing will happen if it is not used.
18 |
19 | -- [site:name] team
20 | password_reset:
21 | subject: 'Replacement login information for [user:display-name] at [site:name]'
22 | body: |-
23 | [user:display-name],
24 |
25 | A request to reset the password for your account has been made at [site:name].
26 |
27 | You may now log in by clicking this link or copying and pasting it into your browser:
28 |
29 | [user:one-time-login-url]
30 |
31 | This link can only be used once to log in and will lead you to a page where you can set your password. It expires after one day and nothing will happen if it's not used.
32 |
33 | -- [site:name] team
34 | register_admin_created:
35 | subject: 'An administrator created an account for you at [site:name]'
36 | body: |-
37 | [user:display-name],
38 |
39 | A site administrator at [site:name] has created an account for you. You may now log in by clicking this link or copying and pasting it into your browser:
40 |
41 | [user:one-time-login-url]
42 |
43 | This link can only be used once to log in and will lead you to a page where you can set your password.
44 |
45 | After setting your password, you will be able to log in at [site:login-url] in the future using:
46 |
47 | username: [user:name]
48 | password: Your password
49 |
50 | -- [site:name] team
51 | register_no_approval_required:
52 | subject: 'Account details for [user:display-name] at [site:name]'
53 | body: |-
54 | [user:display-name],
55 |
56 | Thank you for registering at [site:name]. You may now log in by clicking this link or copying and pasting it into your browser:
57 |
58 | [user:one-time-login-url]
59 |
60 | This link can only be used once to log in and will lead you to a page where you can set your password.
61 |
62 | After setting your password, you will be able to log in at [site:login-url] in the future using:
63 |
64 | username: [user:name]
65 | password: Your password
66 |
67 | -- [site:name] team
68 | register_pending_approval:
69 | subject: 'Account details for [user:display-name] at [site:name] (pending admin approval)'
70 | body: |-
71 | [user:display-name],
72 |
73 | Thank you for registering at [site:name]. Your application for an account is currently pending approval. Once it has been approved, you will receive another email containing information about how to log in, set your password, and other details.
74 |
75 | -- [site:name] team
76 | register_pending_approval_admin:
77 | subject: 'Account details for [user:display-name] at [site:name] (pending admin approval)'
78 | body: |-
79 | [user:display-name] has applied for an account.
80 |
81 | [user:edit-url]
82 | status_activated:
83 | subject: 'Account details for [user:display-name] at [site:name] (approved)'
84 | body: |-
85 | [user:display-name],
86 |
87 | Your account at [site:name] has been activated.
88 |
89 | You may now log in by clicking this link or copying and pasting it into your browser:
90 |
91 | [user:one-time-login-url]
92 |
93 | This link can only be used once to log in and will lead you to a page where you can set your password.
94 |
95 | After setting your password, you will be able to log in at [site:login-url] in the future using:
96 |
97 | username: [user:account-name]
98 | password: Your password
99 |
100 | -- [site:name] team
101 | status_blocked:
102 | subject: 'Account details for [user:display-name] at [site:name] (blocked)'
103 | body: |-
104 | [user:display-name],
105 |
106 | Your account on [site:name] has been blocked.
107 |
108 | -- [site:name] team
109 | status_canceled:
110 | subject: 'Account details for [user:display-name] at [site:name] (canceled)'
111 | body: |-
112 | [user:display-name],
113 |
114 | Your account on [site:name] has been canceled.
115 |
116 | -- [site:name] team
--------------------------------------------------------------------------------
/drupal/web/themes/react_example_theme/js/src/components/NodeForm.jsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from "react";
2 | import {fetchWithCSRFToken} from "../utils/fetch";
3 |
4 | const NodeForm = ({id, title, body, onSuccess}) => {
5 | const [isSubmitting, setSubmitting] = useState(false);
6 |
7 | const [result, setResult] = useState({
8 | success: null,
9 | error: null,
10 | message: '',
11 | });
12 |
13 | const defaultValues = {
14 | title: title ? title : '',
15 | body: body ? body : '',
16 | };
17 | const [values, setValues] = useState(defaultValues);
18 |
19 | const handleInputChange = (event) => {
20 | const {name, value} = event.target;
21 | setValues({...values, [name]: value});
22 | };
23 |
24 | const handleSubmit = (event) => {
25 | setSubmitting(true);
26 | event.preventDefault();
27 |
28 | const csrfUrl = `/session/token?_format=json`;
29 | const fetchUrl = id ? `/jsonapi/node/article/${id}` : `/jsonapi/node/article`;
30 |
31 | let data = {
32 | "data": {
33 | "type": "node--article",
34 | "attributes": {
35 | "title": `${values.title}`,
36 | "body": {
37 | "value": `${values.body}`,
38 | "format": 'plain_text',
39 | }
40 | }
41 | }
42 | };
43 |
44 | // If we have an ID that means we're editing an existing node and not
45 | // creating a new one.
46 | if (id) {
47 | // Set the ID in the data we'll send to the API.
48 | data.data.id = id;
49 | }
50 |
51 | const fetchOptions = {
52 | // Use HTTP PATCH for edits, and HTTP POST to create new articles.
53 | method: id ? 'PATCH' : 'POST',
54 | credentials: 'same-origin',
55 | headers: new Headers({
56 | 'Accept': 'application/vnd.api+json',
57 | 'Content-Type': 'application/vnd.api+json',
58 | 'Cache': 'no-cache'
59 | }),
60 | body: JSON.stringify(data),
61 | };
62 |
63 | try {
64 | fetchWithCSRFToken(csrfUrl, fetchUrl, fetchOptions)
65 | .then((response) => response.json())
66 | .then((data) => {
67 | // We're done processing.
68 | setSubmitting(false);
69 |
70 | // If there are any errors display the error and return early.
71 | if (data.errors && data.errors.length > 0) {
72 | setResult({
73 | success: false,
74 | error: true,
75 | message: {data.errors[0].title}: {data.errors[0].detail},
76 | });
77 | return false;
78 | }
79 |
80 | // If the request was successful, remove existing form values and
81 | // display a success message.
82 | setValues(defaultValues);
83 | if (data.data.id) {
84 | setResult({
85 | success: true,
86 | message: {(id ? 'Updated' : 'Added')}: {data.data.attributes.title},
87 | });
88 |
89 | if (typeof onSuccess === 'function') {
90 | onSuccess(data.data);
91 | }
92 | }
93 | });
94 | } catch (error) {
95 | console.log('Error while contacting API', error);
96 | setSubmitting(false);
97 | }
98 | };
99 |
100 | // If the form is currently being processed display a spinner.
101 | if (isSubmitting) {
102 | return (
103 |
104 | Processing ...
105 |
106 | )
107 | }
108 |
109 | return (
110 |
111 | {(result.success || result.error) &&
112 |
113 | {(result.success ? 'Success!' : 'Error')}:
114 | {result.message}
115 |
116 | }
117 |
141 |
142 | )
143 | };
144 |
145 | export default NodeForm;
146 |
--------------------------------------------------------------------------------