From 7385edadb7605e5b55d1366dfa46dc547f1a9fec Mon Sep 17 00:00:00 2001
From: PA4KEV <kevin.vd.vleuten@gmail.com>
Date: Sun, 26 Feb 2023 21:32:13 +0100
Subject: [PATCH] Add Drupal JSON API connection with BasicPage and ScrollSpy
 components

---
 package.json           |  1 +
 src/App.js             |  5 +++++
 src/Pages/BasicPage.js | 45 ++++++++++++++++++++++++++++++++++++++++++
 src/UI/ScrollSpy.js    | 16 +++++++++++++++
 4 files changed, 67 insertions(+)
 create mode 100644 src/Pages/BasicPage.js
 create mode 100644 src/UI/ScrollSpy.js

diff --git a/package.json b/package.json
index 7cde236..66eaf9f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "proxy": "http://localhost:8080",
   "eslintConfig": {
     "extends": [
       "react-app",
diff --git a/src/App.js b/src/App.js
index f9a933c..c19d8e9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,5 @@
+import React, {useEffect, useState} from 'react';
+
 import './overrides.scss';
 import "bootstrap/dist/js/bootstrap.bundle.min";
 
@@ -31,6 +33,7 @@ import Balkon from './Pages/Radio/Balkon';
 import Linux from './Pages/Linux/Linux';
 import Footer from './UI/Footer';
 
+import BasicPage from './Pages/BasicPage';
 
 
 function App() {
@@ -60,6 +63,8 @@ function App() {
             <Route exact path='/pages/radio/components' element={<Components />}></Route>
             <Route exact path='/pages/radio/balcony' element={<Balkon />}></Route>
             <Route exact path='/pages/linux' element={<Linux />}></Route>
+
+            <Route exact path='/pages/basic' element={<BasicPage id="505e15ab-668e-4574-ab42-3f58030c9dea"/>}></Route>
         </Routes>
 
         <Footer />
diff --git a/src/Pages/BasicPage.js b/src/Pages/BasicPage.js
new file mode 100644
index 0000000..93e033a
--- /dev/null
+++ b/src/Pages/BasicPage.js
@@ -0,0 +1,45 @@
+import React, {useState, useEffect} from 'react';
+
+import ScrollSpy from '../UI/ScrollSpy';
+
+const BasicPage = (props) => {
+    const [error, setError] = useState(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [items, setItems] = useState([]);
+
+    useEffect(() => {
+        fetch("http://localhost:8080/jsonapi/node/page/" + props.id)
+          .then(res => res.json())
+          .then(
+            (result) => {
+              setIsLoaded(true);
+              setItems(result);
+            },
+            (error) => {
+              setIsLoaded(true);
+              setError(error);
+            }
+          )
+      }, [])
+    
+      if (error) {
+        return <div>Error: {error.message}</div>;
+      } else if (!isLoaded) {
+        return <div>Loading...</div>;
+      } else {
+        console.log(items);
+        return (        
+            <div className='row'>            
+                <ScrollSpy/>
+                <div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
+                    <section id="list-skills" className="content-section">
+                        <h2 className="text-primary">{items['data']['attributes']['title']}</h2>
+                        <hr/>
+                    </section>
+                </div>
+            </div>
+            )
+        }
+}
+
+export default BasicPage;
\ No newline at end of file
diff --git a/src/UI/ScrollSpy.js b/src/UI/ScrollSpy.js
new file mode 100644
index 0000000..574162e
--- /dev/null
+++ b/src/UI/ScrollSpy.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const ScrollSpy = () => {
+    return (        
+        <div className="sidebar col-3 position-fixed">
+            <div id="list-example" className="list-group">
+                <a className="list-group-item list-group-item-action list-group-item-primary" href="#list-skills">Skills</a>
+            </div>
+        </div>
+    )
+}
+
+export default ScrollSpy;
+
+
+