Add the ability to use React components inline in Docusaurus markdown (…

…w3f#3535)

* add sample inline react components to markdown

* update kusama rpc url

* clean up and add http request sample component

* formatting

* ensure to unsubscribe from web socket events when changing pages

* remove debugging code

components/Http-Request-Sample.jsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+/*
+This sample component shows how to make an http request
+to an external API and render the response data.
+
+The component can be used in Docusaurus markdown
+by adding the following lines anywhere within the file.
+
+import Http from "./../../components/Http-Request-Sample"
+{{ polkadot: <Http url="https://polkadot.api.subscan.io/api/scan/block" hash="0x68a27df5a52ff2251df2cc8368f7dcefb305a13bb3d89b65c8fb070f23877f2c" color="#e6007a">Polkadot</Http> :polkadot }}
+{{ kusama: <Http url="https://kusama.api.subscan.io/api/scan/block" hash="0x8019e80a0b97ee827b3bd8be1ac3d0fe4e9978d7b5594c0afb109d3ff8cf3465" color="#000000">Kusama</Http> :kusama }}
+*/
+
+function WebRequest({children, url, hash, color}) {
+    const [validator, setBlockValidator] = useState('Loading...');
+
+    useEffect(() => {
+        // Mounting Tasks
+        postRequest(url, hash, setBlockValidator);
+    }, []);
+
+    return (
+        <span
+            style={{
+                backgroundColor: color,
+                borderRadius: '2px',
+                color: '#ffffff',
+                padding: '0.5rem',
+            }}
+        >
+            {children}: Block {hash} was validated by {validator}
+        </span>
+    )
+}
+
+async function postRequest(url, hash, setBlockValidator) {
+    // Request
+    const headers = { headers: { 'Content-Type': 'application/json' }};
+    const body = JSON.stringify({ "block_hash": hash });
+
+    await axios.post(url, body, headers)
+        // If successful
+        .then(res => {
+            const body = res.data.data;
+            setBlockValidator(body.validator);
+            console.log(`Http request to ${url} successful`);
+        })
+        // If error
+        .catch((error) => {
+            console.log('Http request error:');
+            console.log(error);
+        })
+        // Executes if successful or if error was thrown
+        .then(() => {
+            console.log('Http request complete');
+        });
+}
+
+export default WebRequest;

components/Web-Socket-Sample.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { ApiPromise, WsProvider } from '@polkadot/api';
+
+/*
+This sample component shows how to connect to an external
+web socket RPC and render the response data.
+
+The component can be used in Docusaurus markdown
+by adding the following lines anywhere within the file.
+
+import Socket from "./../../components/Web-Socket-Sample"
+{{ polkadot: <Socket url="wss://rpc.polkadot.io" color="#e6007a">Polkadot</Socket> :polkadot }}
+{{ kusama: <Socket url="wss://kusama-rpc.polkadot.io" color="#000000">Kusama</Socket> :kusama }}
+*/
+
+function RPCFeed({children, url, color}) {
+    const [block, setBlock] = useState('Loading...');
+    let unsubscribe = useRef(null);
+
+    useEffect(() => {
+        // Mounting Tasks
+        const connect = async () => {
+            unsubscribe = await getData(url, setBlock);
+        }
+        connect();
+
+        // Unmounting Tasks
+        return () => {
+            // Make sure to unsubscribe before changing pages
+            console.log(`Unsubscribing from ${url}`);
+            unsubscribe();
+        };
+    }, []);
+
+    return (
+        <span
+            style={{
+                backgroundColor: color,
+                borderRadius: '2px',
+                color: '#ffffff',
+                padding: '0.5rem',
+            }}
+        >
+            {children}: Current Block = {block}
+        </span>
+    )
+}
+
+async function getData(url, setBlock) {
+    // Connect
+    const wsProvider = new WsProvider(url);
+    const api = await ApiPromise.create({ provider: wsProvider });
+
+    // Subscribe to all new headers
+    const unsubscribe = await api.derive.chain.subscribeNewHeads((header) => {
+        setBlock(header.number.toString());
+    });
+
+    return unsubscribe;
+}
+
+export default RPCFeed;

package.json

@@ -85,6 +85,7 @@
     "node-fetch": "^3.2.8",
     "node-forge": "^1.3.1",
     "nth-check": "^2.1.1",
+    "react-treebeard": "^3.2.4",
     "remark-docusaurus-tabs": "^0.2.0",
     "set-value": "^4.1.0",
     "trim": "^1.0.1",