#16 Add context for entries

Used to access entries from any component however deeply nested. Also handles grouping of related entries such as sections or parent/child relationships for threading
UniRegensburg · Aug 14, 2022 · d26cf5c · d26cf5c
1 parent a011a10
commit d26cf5c
Show file tree

Hide file tree

Showing 5 changed files with 330 additions and 182 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { EntryProvider } from "./contexts/EntryContext";
 import { Auth } from "./pages/Auth";
 import { Main } from "./pages/Main";
 
@@ -21,7 +22,9 @@ export const App = () => {
   return (
     <div className="App h-screen">
       {isAuthenticated ? (
-        <Main />
+        <EntryProvider>
+          <Main />
+        </EntryProvider>
       ) : (
         <Auth setIsAuthenticated={setIsAuthenticated} />
       )}

diff --git a/src/components/Discussion.tsx b/src/components/Discussion.tsx
@@ -1,46 +1,28 @@
-import { IEntry, UserRole } from "../types";
-import { Entry } from "./entry";
+import { useEntries } from "../contexts/EntryContext";
+import { EntryList } from "./entry/EntryList";
 
-const mockEntries: IEntry[] = [
-  {
-    id: "1f1f2fa4-13fa-11ed-861d-0242ac120002",
-    version: 1,
-    text: "Lorem Ipsum is simply <strong>dummy text</strong> of the printing and typesetting industry.",
-    author: "Stefan Schneider",
-    role: "Kläger",
-    section_id: "d990191e-13fc-11ed-861d-0242ac120002",
-  },
-  {
-    id: "257550a4-13fa-11ed-861d-0242ac120002",
-    version: 2,
-    text: "Lorem Ipsum has been the <i>industry's standard dummy text</i>ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
-    author: "Michael Bauer",
-    role: "Beklagter",
-    section_id: "d990191e-13fc-11ed-861d-0242ac120002",
-    associated_entry: "1f1f2fa4-13fa-11ed-861d-0242ac120002",
-  },
-];
+const mockSections: string[] = ["d990191e-13fc-11ed-861d-0242ac120002"];
 
 export const Discussion = () => {
+  const { groupedEntries } = useEntries();
+
   return (
-    <div className="bg-offWhite h-full overflow-y-scroll p-4 space-y-4">
+    <div className="bg-offWhite h-full overflow-y-scroll py-28 px-4 space-y-4">
       <div className="max-w-[1200px] m-auto">
-        <section className="space-y-8">
-          <div className="text-xl font-bold">
-            <span>1.</span> Gliederungspunkt
-          </div>
-          <div className="space-y-8">
-            {mockEntries.map((entry, index) => (
-              <Entry
-                key={entry.id}
-                entry={entry}
-                isBookmarked={index % 2 === 0}
-                isOld={index % 2 === 0}
-                viewedBy={UserRole.Judge}
-              />
-            ))}
-          </div>
-        </section>
+        {mockSections.map((sectionId) => {
+          const sectionEntries = groupedEntries[sectionId];
+
+          return (
+            <section key={sectionId} className="space-y-8">
+              <div className="text-xl font-bold">
+                <span>1.</span> Gliederungspunkt
+              </div>
+              <div className="space-y-8">
+                <EntryList entries={sectionEntries["parent"]} />
+              </div>
+            </section>
+          );
+        })}
       </div>
     </div>
   );