associations page

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>

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 />

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;

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);
 

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