From 1046576fac0bdf355c9729104f51d6ecc9ef3c6c Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Tue, 7 Feb 2023 22:55:00 +0100
Subject: [PATCH] added onclick event for sub list

---
 public/safari-pinned-tab.svg           |  36 ------
 src/components/Board.jsx               | 160 +++++++++++++------------
 src/components/styles/Board.styled.jsx |   6 +
 3 files changed, 91 insertions(+), 111 deletions(-)
 delete mode 100644 public/safari-pinned-tab.svg

diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
deleted file mode 100644
index c595df85..00000000
--- a/public/safari-pinned-tab.svg
+++ /dev/null
@@ -1,36 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M1795 5029 c-22 -4 -43 -5 -47 -3 -4 2 -9 0 -13 -6 -3 -5 -13 -10
--21 -10 -24 0 -105 -40 -149 -73 -141 -105 -221 -272 -179 -372 15 -37 64 -82
-98 -91 13 -3 27 -11 29 -18 3 -6 -24 -43 -59 -81 -167 -179 -169 -338 -7 -439
-24 -14 50 -26 59 -26 31 0 7 -25 -57 -59 -293 -155 -593 -406 -785 -658 -20
--27 -39 -50 -43 -53 -28 -23 -221 -344 -221 -369 0 -6 -4 -11 -10 -11 -5 0
--10 -8 -10 -18 0 -10 -4 -22 -9 -28 -5 -5 -25 -47 -44 -94 -89 -217 -153 -458
--173 -650 -4 -30 -9 -73 -13 -95 -8 -43 -6 -197 3 -230 38 -148 143 -281 271
--344 122 -60 227 -59 290 4 27 27 51 81 47 107 -3 16 28 15 46 -3 12 -10 25
--19 30 -19 5 0 15 -7 23 -16 38 -46 188 -96 261 -87 58 6 138 54 138 82 0 6 4
-11 9 11 5 0 12 11 15 25 10 39 29 29 55 -28 145 -308 408 -629 701 -857 25
--19 47 -38 48 -42 2 -5 8 -8 12 -8 5 0 37 -20 72 -44 123 -85 301 -181 453
--244 52 -21 259 -93 279 -96 6 -1 40 -9 76 -18 148 -37 182 -40 288 -24 125
-18 286 136 351 257 39 74 50 163 25 211 -20 39 -63 76 -96 83 -39 9 -35 33 15
-81 121 119 166 232 132 334 -27 83 -117 145 -246 172 -32 6 -59 15 -59 18 0 4
-46 26 103 50 189 79 408 201 517 286 147 115 202 164 295 256 61 60 126 130
-145 155 19 25 40 50 45 57 122 135 306 462 387 690 65 180 119 399 120 487 0
-42 -2 81 -5 86 -3 5 -9 25 -12 44 -3 19 -10 38 -16 43 -5 6 -9 16 -9 24 0 32
--92 151 -161 207 -30 25 -107 64 -134 68 -11 1 -25 5 -30 9 -14 9 -75 3 -109
--11 -33 -13 -76 -51 -76 -67 0 -19 -25 -64 -35 -64 -6 0 -24 14 -40 32 -114
-121 -249 177 -350 145 -48 -14 -108 -74 -135 -133 -26 -59 -51 -163 -43 -178
-4 -7 2 -8 -5 -1 -6 6 -29 56 -51 113 -149 375 -389 713 -691 971 -126 108
--218 173 -395 278 -99 59 -404 193 -475 208 -8 2 -27 8 -42 14 -16 6 -28 8
--28 6 0 -2 -12 0 -27 6 -36 14 -45 16 -123 33 -84 19 -155 24 -205 15z"/>
-</g>
-</svg>
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index f6c2f322..3fdfde07 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -17,9 +17,8 @@ const ImageBanner = () => {
 
 const Board = () => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const {feed, hasMore, loadMore} = useFeed(['memes.eth'], 'new');
-
-  console.log({feed});
+  const [selectedTitle, setSelectedTitle] = useState("");
+  const [selectedAddress, setSelectedAddress] = useState("");
 
   useEffect(() => {
     let didCancel = false;
@@ -38,13 +37,24 @@ const Board = () => {
     };
   }, []);
 
+  const handleClick = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+  };
+
+  const {feed, hasMore, loadMore} = useFeed([`${selectedAddress}`], 'new');
+
+  console.log(feed);
+
   return (
     <Container>
       <NavBar>
         <>
           {defaultSubplebbits.map(subplebbit => (
-            <span className="boardList" key={subplebbit.address}>[
-              <a href="/board">{subplebbit.title}</a>
+            <span className="boardList" key={subplebbit.address}>
+              [
+              <a href="#" onClick={() => handleClick(subplebbit.title, subplebbit.address)}
+              >{subplebbit.title}</a>
               ]&nbsp;
             </span>
           ))}
@@ -59,8 +69,8 @@ const Board = () => {
             <ImageBanner />
           </div>
             <>
-            <div className="board-title">Crypto</div>
-            <div className="board-address">p/QmPjewdKya8iVkuQiiXQ5qRBsgVUAZg2LQ2m8v3LNJ7Ht8</div>
+            <div className="board-title">{selectedTitle}</div>
+            <div className="board-address">p/{selectedAddress}</div>
             </>
         </>
       </Header>
@@ -91,90 +101,90 @@ const Board = () => {
       </TopBar>
       <BoardForm id="board-form" name="board-form" action="" method="post">
         <div className="board">
-          <div id="t" className="thread">
-            <div id="pc" className="post-container op-container">
-              <div id="p" className="post op">
-                <span id="sa">
-                <img alt="H" className="ext-button thread-hide-button" data-cmd="hide" data-id="1-test" src="./post_expand_minus.png" title="Hide thread" />
-                </span>
-                <div id="pi" className="post-info">
-                   
-                  <span className="name-block">
-                    <span className="name">Tom</span>
-                     
-                    <span className="poster-address">
-                      (User: plebeius.eth)
-                    </span>
+          {feed.map(object => (
+            <>
+            <div id="t" className="thread">
+              <div id="pc" className="post-container op-container">
+                <div id="p" className="post op">
+                  <span id="sa">
+                    <img alt="H" className="ext-button thread-hide-button" data-cmd="hide" data-id="1-test" src="./post_expand_minus.png" title="Hide thread" />
                   </span>
-                   
-                  <span className="date-time" data-utc="data">2 weeks ago</span>
-                   
-                  <span className="post-number">
-                    <a href="post-link" title="Link to this post">No.</a>
-                    <a href="post-link" title="Reply to this post">00000001</a>
-                       
-                    <span>
-                      [
-                      <a className="reply-link" href="post-link">Reply</a>
-                      ]
+                  <div id="pi" className="post-info">
+
+                    <span className="name-block">
+                      <span className="name">Tom</span>
+
+                      <span className="poster-address">
+                        (User: plebeius.eth)
+                      </span>
                     </span>
-                  </span>
-                  <a className="post-menu-button" href="post-menu" title="Post menu" data-cmd="post-menu">▶</a>
-                  <div id="backlink-id" className="backlink">
+
+                    <span className="date-time" data-utc="data">2 weeks ago</span>
+
+                    <span className="post-number">
+                      <a href="post-link" title="Link to this post">No.</a>
+                      <a href="post-link" title="Reply to this post">00000001</a>
+
+                      <span>
+                        [
+                        <a className="reply-link" href="post-link">Reply</a>
+                        ]
+                      </span>
+                    </span>
+                    <a className="post-menu-button" href="post-menu" title="Post menu" data-cmd="post-menu">▶</a>
+                    <div id="backlink-id" className="backlink">
                       <span>
                         <a className="quote-link" href="post-link">{'>>'}00000002</a>
                       </span>
+                    </div>
+                    <blockquote>
+                      <span className="quote">
+                        {'>'}wen mvp
+                      </span>
+                      <br />
+                      two more weeks
+                    </blockquote>
                   </div>
-                  <blockquote>
-                    <span className="quote">
-                      {'>'}wen mvp
+                </div>
+              </div>
+              <div key={`pc-${object.cid}`} className="post-container reply-container">
+                <div key={`sa-${object.cid}`} className="side-arrows">{'>>'}</div>
+                <div key={`pr-${object.cid}`} className="post-reply">
+                  <div key={`pi-${object.cid}`} className="post-info">
+
+                    <span key={`nb-${object.cid}`} className="nameblock">
+                      <span key={`n-${object.cid}`} className="name">{object.author.displayName}</span>
+
+                      <span key={`pa-${object.cid}`} className="poster-address">
+                        (User: {object.author.address})
+                      </span>
+                    </span>
+
+                    <span key={`dt-${object.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
+
+                    <span key={`pn-${object.cid}`} className="post-number">
+                      <a key={`pl1-${object.cid}`} href="post-link" title="Link to this post">No.</a>
+                      <a key={`pl2-${object.cid}`} href="post-link" title="Reply to this post">00000002</a>
+                    </span>
+                    <a key={`pmb-${object.cid}`} className="post-menu-button" href="#" title="Post menu" data-cmd="post-menu">▶</a>
+                  </div>
+                  <blockquote key={`pm-${object.cid}`} className="post-message">
+                    <span key={`q-${object.cid}`} className="quote">
+                      {'>'}{object.title}
                     </span>
                     <br />
-                    two more weeks
+                    {object.content}
                   </blockquote>
                 </div>
               </div>
             </div>
-            {feed.map(post => (
-              <div id="pc" className="post-container reply-container">
-                <div className="side-arrows">{'>>'}</div>
-                <div className="post-reply">
-                  <div className="post-info">
-                     
-                    <span className="nameblock">
-                      <span className="name">Anonymous</span>
-                       
-                      <span className="poster-address">
-                        (User: {post.author.address})
-                      </span>
-                    </span>
-                     
-                    <span className="date-time" data-utc="data">2 weeks ago</span>
-                     
-                    <span className="post-number">
-                      <a href="post-link" title="Link to this post">No.</a>
-                      <a href="post-link" title="Reply to this post">00000002</a>
-                    </span>
-                    <a className="post-menu-button" href="#" title="Post menu" data-cmd="post-menu">▶</a>
-                  </div>
-                  <blockquote className="post-message">
-                    <span className="quote">
-                        {'>'}{post.title}
-                      </span>
-                      <br />
-                      {post.content}
-                  </blockquote>
-                </div>
-              </div>
+            <hr />
+            </>
             ))}
-          </div>
-        </div>
-        <div className="bottom-control">
-          <span></span>
         </div>
       </BoardForm>
     </Container>
-  )
+  );
 }
 
 export default Board;
\ No newline at end of file
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx
index 8015e493..03acfc41 100644
--- a/src/components/styles/Board.styled.jsx
+++ b/src/components/styles/Board.styled.jsx
@@ -228,4 +228,10 @@ export const BoardForm = styled.form`
     word-break: break-word;
     max-width: 100%;
   }
+
+  hr {
+    border: none;
+    border-top: 1px solid #d9bfb7;
+    height: 0;
+  }
 `;
\ No newline at end of file