#SH-41 -(JSX)-Rebuild / Rename scaffolding for basic components #41

frontend_react/src/components/App/App.jsx

@@ -1,25 +1,19 @@
-import React from 'react';
+import React, { Fragment, useState, useRef, useEffect } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import Header from '../Header/Header';
-import ChapterList from '../Chapter/ChapterList';
+import { ChapterList } from '../Chapter/ChapterList';
 import '../../styles/App.css';
 import Branding from '../Branding/Branding';
-import GridTable from '../GridTable/GridTable';
 
+export function App() {
 
-function App() {
   return (
     <div className="App">
       <Header />
         <Branding />
-        <p>Welcome to Summer House, these are the latest articles created in Drupal backend, obtained through a GraphQL query.</p>
-        <p>Can you see the list of items? If not, try reloading the current page.</p>
-        <a className="App-link" href="http://summerhouse.ddev.site:8091/Home/" target="_blank" rel="noopener noreferrer">Learn more about Summer House</a>
-        <br></br><hr></hr>
-        <br></br>
-        <ChapterList />
-        <GridTable />
-    </div>
+    <Fragment>
+      <ChapterList />
+    </Fragment>
+  </div>
   );
-}
-
-export default App;
+  }

frontend_react/src/components/Chapter/ChapterItem.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export function ChapterItem({ id, title }) {
+  {/* Load the basic parameters of a chapter item */}
+
+  return (
+    <li>
+      <input type="checkbox" />
+      {id} - {title}
+    </li>
+  );
+}

frontend_react/src/components/Chapter/ChapterList.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Chapter from './Chapter';
+import { ChapterItem } from './ChapterItem';
 import { useQuery, gql } from '@apollo/client';
 
 const MyQuery = gql`
@@ -15,20 +15,19 @@ const MyQuery = gql`
   }
 `;
 
-const ChapterList = () => {
-  const { data } = useQuery(MyQuery);
+export function ChapterList() {
 
+  const { data } = useQuery(MyQuery);
   return (
-    <div>
-      {data && (
-        <>
+      <ul>
+        {data && (
+          <>
           {data.articles.items.map((chapter) => (
-            <Chapter key={chapter.id} chapter={chapter} />
+            <ChapterItem key={chapter.id} id={chapter.id} title={chapter.title} />
           ))}
-        </>
-      )}
-    </div>
-  );
-};
+          </>
+        )}
+      </ul>
 
-export default ChapterList;
+  );
+}