Access Flask APIs in the frontend

flask_cra_example/client/src/App.css

@@ -1,5 +1,8 @@
 .App {
   text-align: center;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .App-logo {
@@ -11,7 +14,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  height: 50vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,3 +35,40 @@
     transform: rotate(360deg);
   }
 }
+
+.App-main {
+  height: 50vh;
+}
+
+.App-main > section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 1.5vmin);
+  color: white;
+}
+
+.App-main > section:nth-child(1) {
+  height: 20vh;
+  background-color: #0b66a6;
+}
+
+.App-main > section:nth-child(2) {
+  box-sizing: border-box;
+  height: 30vh;
+  background-color: #111d46;
+}
+
+input, button {
+  background-color: #282c34;
+  border: 1px solid #61dafb;
+  color: #61dafb;
+  font-size: calc(10px + 1vmin);
+  padding: 5px;
+}
+
+input:disabled, button:disabled {
+  border-color: #aaa;
+  color: #aaa;
+}

flask_cra_example/client/src/App.js

@@ -1,24 +1,25 @@
 import React from 'react';
 import logo from './logo.svg';
+import FormDemo from './FormDemo';
+import TimeDemo from './TimeDemo';
 import './App.css';
 
 export default function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <p>Flask/React Demo</p>
       </header>
+
+      <main className="App-main">
+        <section>
+          <TimeDemo />
+        </section>
+        <section>
+          <FormDemo />
+        </section>
+      </main>
     </div>
   );
 }

flask_cra_example/client/src/FormDemo.css

@@ -0,0 +1,7 @@
+.FormDemo-fields {
+  margin-bottom: 0.5em;
+}
+
+.FormDemo-fields button {
+  margin-left: 0.5em;
+}

flask_cra_example/client/src/FormDemo.js

@@ -0,0 +1,43 @@
+import React, {useState} from 'react';
+import flask from 'flask-urls.macro';
+import './FormDemo.css';
+
+const greetingURL = flask`api.greeting`;
+
+export default function FormDemo() {
+  const [name, setName] = useState('');
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const handleNameChange = e => setName(e.target.value.replace(/\//g, '').trim());
+
+  const handleSubmit = async (evt) => {
+    evt.preventDefault();
+    setLoading(true);
+    const resp = await fetch(greetingURL({name}));
+    const data = await resp.json();
+    setResult(data.greeting);
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <form className="FormDemo-fields" onSubmit={handleSubmit}>
+        <input
+          placeholder="Enter a name"
+          size="50"
+          autoComplete="off"
+          onChange={handleNameChange}
+          disabled={loading}
+        />
+        <button type="submit" disabled={loading}>Submit</button>
+      </form>
+      <p>
+        The URL we will call is <code>{greetingURL({name})}</code>.<br />
+        {result === null
+          ? <>The API has never been called.</>
+          : <>The last call's result is <code>{result || 'n/a'}</code>.</>
+        }
+      </p>
+    </>
+  );
+}

flask_cra_example/client/src/TimeDemo.js

@@ -0,0 +1,39 @@
+import React, {useEffect, useState} from 'react';
+import flask from 'flask-urls.macro';
+
+const timeURL = flask`api.time`;
+
+
+const fetchTime = async () => {
+  const resp = await fetch(timeURL());
+  const data = await resp.json();
+  return data.now;
+};
+
+export default function TimeDemo() {
+  const [time, setTime] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      setTime(await fetchTime());
+      setLoading(false);
+    })();
+  }, []);
+
+  const handleClick = async () => {
+    setLoading(true);
+    setTime(await fetchTime());
+    setLoading(false);
+  };
+
+  return time && (
+    <>
+      <p>
+        The server time returned by the API is <code>{time}</code>.
+      </p>
+      <button onClick={handleClick} disabled={loading}>Update</button>
+    </>
+  );
+}

flask_cra_example/client/src/index.css

@@ -10,4 +10,5 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
+  color: #61dafb;
 }