List with article titles is visible in aside for both users and non-u…

…sers

client/application.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useContext } from "react";
 import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
-import { Articles, ListArticles } from "./articles";
+import { Articles, AsideArticleList, ListArticles } from "./articles";
 
 import "./style.css";
 import { useLoader } from "./globals/useLoader";
@@ -58,6 +58,17 @@ function HomePage({ user }) {
   );
 }
 
+function NonUser() {
+  async function listAllArticles() {
+    return await fetchJSON("/api/articles");
+  }
+  return (
+    <article>
+      <AsideArticleList listAllArticles={listAllArticles} />
+    </article>
+  );
+}
+
 export function Application() {
   const { fetchLogin } = useContext(AppContext);
   const { loading, error, data, reload } = useLoader(fetchLogin);
@@ -74,7 +85,7 @@ export function Application() {
         <h1>Express Yourself</h1>
       </header>
       <aside>
-        <h2>Non users</h2>
+        <NonUser />
       </aside>
       <nav>
         <UserNavigation user={data?.user} />

client/articles.jsx

@@ -46,6 +46,40 @@ export function ListArticles({ listAllArticles }) {
   );
 }
 
+export function AsideArticleItem({ article: { title } }) {
+  return (
+    <div>
+      <h2>{title}</h2>
+    </div>
+  );
+}
+
+export function AsideArticleList({ listAllArticles }) {
+  const { loading, data, error } = useLoader(listAllArticles);
+
+  if (loading) {
+    return <div>Please wait..</div>;
+  }
+
+  if (error) {
+    return (
+      <div>
+        <h1>An error occurred</h1>
+        <div id="error-message">Something went wrong. Please try again.</div>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <h1>List of articles</h1>
+
+      {data.map((article) => (
+        <AsideArticleItem key={article.title} article={article} />
+      ))}
+    </div>
+  );
+}
+
 export function Articles() {
   async function listAllArticles() {
     return await fetchJSON("/api/articles");