SH-41 -(JSX)-Renaming components #41

frontend_react/src/components/App/App.js → frontend_react/src/components/App/App.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Header from '../Header/Header';
-import ArticleList from '../Article/ArticleList';
+import ChapterList from '../Chapter/ChapterList';
 import summer_house_logo from '../../assets/summer_house_logo_512.png';
 import '../../styles/App.css';
 import Branding from '../Branding/Branding';
@@ -16,7 +16,7 @@ function App() {
         <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>
-        <ArticleList />
+        <ChapterList />
     </div>
   );
 }

frontend_react/src/components/Chapter/Chapter.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Chapter = (props) => {
+  const { chapter } = props;
+  return (
+    <div>
+      <div>
+        {chapter.title} ({chapter.author})
+      </div>
+    </div>
+  );
+};
+
+export default Chapter;

frontend_react/src/components/Article/ArticleList.jsx → frontend_react/src/components/Chapter/ChapterList.jsx

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