From f82746f485cf85d7c319f6977519f731637620ff Mon Sep 17 00:00:00 2001
From: isidzukuri <axesigon@gmail.com>
Date: Fri, 3 Jan 2025 19:38:42 +0200
Subject: [PATCH] associations page

---
 src/App.js                                 |  2 +
 src/pages/Layout.jsx                       |  2 +-
 src/pages/ThoughtsAssociations.jsx         | 45 ++++++++++++++++++++++
 src/pages/components/Thoughts/List.jsx     |  2 +-
 src/pages/components/Thoughts/ListItem.jsx |  4 +-
 5 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/ThoughtsAssociations.jsx

diff --git a/src/App.js b/src/App.js
index 0d76ae1..b8aba77 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import './App.css';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Layout from "./pages/Layout";
 import Thoughts from "./pages/Thoughts";
+import ThoughtsAssociations from "./pages/ThoughtsAssociations";
 import NoPage from "./pages/NoPage";
 import socket from './user_socket';
 
@@ -13,6 +14,7 @@ export default function App() {
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route index element={<Thoughts />} />
+          <Route path="/thoughts/:id/associations" element={<ThoughtsAssociations />} />
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>
diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx
index 0bcf613..217b823 100644
--- a/src/pages/Layout.jsx
+++ b/src/pages/Layout.jsx
@@ -7,7 +7,7 @@ const Layout = () => {
     <Container>
       <Nav>
         <Nav.Item>
-          <Nav.Link to="/">Home</Nav.Link>
+          <Nav.Link href="/">Home</Nav.Link>
         </Nav.Item>
       </Nav>
       <Outlet />
diff --git a/src/pages/ThoughtsAssociations.jsx b/src/pages/ThoughtsAssociations.jsx
new file mode 100644
index 0000000..4444c2f
--- /dev/null
+++ b/src/pages/ThoughtsAssociations.jsx
@@ -0,0 +1,45 @@
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import React, { useState, useEffect } from "react";
+import ThoughtsList from './components/Thoughts/List';
+
+import CrudDataRepository from '../repositories/crudDataRepository';
+import CrudAdapter from '../adapters/crudAdapter';
+import { useParams } from "react-router-dom";
+
+const ThoughtsAssociations = () => {
+  const { id } = useParams();
+  const [associatons, setAssociatons] = useState([]);
+  const [thought, setThought] = useState(null);
+
+  const apiAdapter = CrudAdapter(process.env.REACT_APP_BE_API_URL);
+  const thoughtsRepository = CrudDataRepository(apiAdapter, 'api/thoughts');
+  const associatonsRepository = CrudDataRepository(apiAdapter, 'api/associations/');
+
+  useEffect(() => {
+      const fetchAssociations = async () => {
+          const data = await associatonsRepository.getItemById(id);
+          setAssociatons(data);
+      };
+      fetchAssociations();
+
+      const fetchThought = async () => {
+          const data = await thoughtsRepository.getItemById(id);
+
+          setThought(data.content.replace(/\n/g, "<br />"));
+      };
+      fetchThought();
+  }, [id]);
+
+  return <Row>
+          <Col>
+            <h4>Thought: </h4>
+            <div dangerouslySetInnerHTML={{ __html: thought}} />
+
+            <hr/>
+            <ThoughtsList items={associatons}/>
+          </Col>
+        </Row>;
+};
+
+export default ThoughtsAssociations;
diff --git a/src/pages/components/Thoughts/List.jsx b/src/pages/components/Thoughts/List.jsx
index 9df57f5..5fda05e 100644
--- a/src/pages/components/Thoughts/List.jsx
+++ b/src/pages/components/Thoughts/List.jsx
@@ -7,7 +7,7 @@ export default function ThoughtsList({items}) {
 
   items.reduceRight((_, item) => {
     rows.push(
-      <ThoughtsListItem item={item}/>
+      <ThoughtsListItem key={item.id} item={item}/>
     );
   }, 0);
 
diff --git a/src/pages/components/Thoughts/ListItem.jsx b/src/pages/components/Thoughts/ListItem.jsx
index e175ecd..ddf9e9f 100644
--- a/src/pages/components/Thoughts/ListItem.jsx
+++ b/src/pages/components/Thoughts/ListItem.jsx
@@ -9,11 +9,11 @@ export default function ThoughtsListItem({item}) {
   let navigate = useNavigate();
 
   const goToAssociations = () => {
-    navigate("/api/thoughts/"+item.id+"/associations");
+    navigate("/thoughts/"+item.id+"/associations");
   };
 
   return (
-    <Stack key={item.id} direction="horizontal" gap={3} className="wide-list-item" >
+    <Stack direction="horizontal" gap={3} className="wide-list-item" >
       <div className="me-auto" dangerouslySetInnerHTML={{ __html: item.content.replace(/\n/g, "<br />")}} />
       <Button variant="outline-info" size="sm" onClick={goToAssociations}>
           View associations