initial testing with mock feed

package.json

@@ -3,14 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
     "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks",
+    "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@types/node": "^18.13.0",
     "babel-plugin-styled-components": "^2.0.7",
+    "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
+    "react-infinite-scroller": "^1.2.6",
+    "react-is": "^18.2.0",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.6",

src/components/Board.jsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { Container, NavBar, Header, Break, PostForm, TopBar, BoardForm } from './styled/Board.styled';
+import { Container, NavBar, Header, Break, PostForm, TopBar, BoardForm } from './styles/Board.styled';
 import { useFeed } from '@plebbit/plebbit-react-hooks';
 
 const ImageBanner = () => {
   const [currentImage, setCurrentImage] = useState(1);
 
   useEffect(() => {
-    setCurrentImage(Math.floor(Math.random() * 5) + 1);
+    setCurrentImage(Math.floor(Math.random() * 12) + 1);
   }, []);
 
   return (
@@ -16,9 +16,10 @@ const ImageBanner = () => {
 };
 
 const Board = () => {
-  // eslint-disable-next-line
-  const { feed, hasMore, loadMore } = useFeed(['news.eth'], 'new');
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
+  const {feed, hasMore, loadMore} = useFeed(['memes.eth'], 'new');
+
+  console.log({feed});
 
   useEffect(() => {
     let didCancel = false;
@@ -57,8 +58,10 @@ const Board = () => {
           <div className="banner">
             <ImageBanner />
           </div>
-          <div className="board-title">Plebs Helping Plebs</div>
+            <>
-          <div className="board-address">p/plebshelpingplebs.eth</div>
+            <div className="board-title">Crypto</div>
+            <div className="board-address">p/QmPjewdKya8iVkuQiiXQ5qRBsgVUAZg2LQ2m8v3LNJ7Ht8</div>
+            </>
         </>
       </Header>
       <Break />
@@ -72,10 +75,18 @@ const Board = () => {
       </PostForm>
       <TopBar>
         <hr />
-        <input id="search-box" type="text" placeholder="Search OPs…" />
+        <span className="style-changer">
-        [
+          Style:
-        <a href="./catalog">Catalog</a>
+           
-        ]
+          <select id="style-selector">
+            <option value="Yotsuba New">Yotsuba</option>
+            <option value="Yotsuba B">Yotsuba B</option>
+            <option value="Futaba New">Futaba New</option>
+            <option value="Burichan">Burichan</option>
+            <option value="Tomorrow">Tomorrow</option>
+            <option value="Photon">Photon</option>
+          </select>
+        </span>
         <hr />
       </TopBar>
       <BoardForm id="board-form" name="board-form" action="" method="post">
@@ -87,7 +98,6 @@ const Board = () => {
                 <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">
-                  <input type="checkbox" name="id" value="delete"></input>
                    
                   <span className="name-block">
                     <span className="name">Tom</span>
@@ -117,41 +127,51 @@ const Board = () => {
                   </div>
                   <blockquote>
                     <span className="quote">
-                      {'>'}imagine being a pleb
+                      {'>'}wen mvp
                     </span>
+                    <br />
+                    two more weeks
                   </blockquote>
                 </div>
               </div>
             </div>
-            <div id="pc" className="post-container reply-container">
+            {feed.map(post => (
-              <div className="side-arrows">{'>>'}</div>
+              <div id="pc" className="post-container reply-container">
-              <div className="post-reply">
+                <div className="side-arrows">{'>>'}</div>
-                <div className="post-info">
+                <div className="post-reply">
-                  <input type="checkbox" name="id" value="delete"></input>
+                  <div className="post-info">
-                   
-                  <span className="nameblock">
-                    <span className="name">Anonymous</span>
                      
-                    <span className="poster-address">
+                    <span className="nameblock">
-                      (User: Qma319kE7rrHNce8vH9fAjPjihUF4EZCaKSK8dBaFtxsVn)
+                      <span className="name">Anonymous</span>
+                       
+                      <span className="poster-address">
+                        (User: {post.author.address})
+                      </span>
                     </span>
-                  </span>
+                     
-                   
+                    <span className="date-time" data-utc="data">2 weeks ago</span>
-                  <span className="date-time" data-utc="data">2 weeks ago</span>
+                     
-                   
+                    <span className="post-number">
-                  <span className="post-number">
+                      <a href="post-link" title="Link to this post">No.</a>
-                    <a href="post-link" title="Link to this post">No.</a>
+                      <a href="post-link" title="Reply to this post">00000002</a>
-                    <a href="post-link" title="Reply to this post">00000002</a>
+                    </span>
-                  </span>
+                    <a className="post-menu-button" href="#" title="Post menu" data-cmd="post-menu">▶</a>
-                  <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>
-                <blockquote className="post-message">
-                  I can imagine being a pleb
-                </blockquote>
               </div>
-            </div>
+            ))}
           </div>
         </div>
+        <div className="bottom-control">
+          <span></span>
+        </div>
       </BoardForm>
     </Container>
   )

src/components/Home.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import {Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styled/Home.styled';
+import {Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
 
 const Home = () => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);

src/components/styles/Board.styled.jsx

@@ -95,31 +95,10 @@ export const TopBar = styled.div`
     height: 0;
   }
 
-  #search-box { 
+  .style-changer {
-    height: 16px;
+    margin-left: 5px;
-    line-height: 16px;
-    margin-top: 0;
-    margin-right: 2px;
-    margin-bottom: 0;
-    margin-left: 2px;
-    padding: 0 2px;
-    width: 120px;
-    -webkit-appearance: none;
-    appearance: none;
-    border: 1px solid #aaa;
-    outline: none;
-    font-family: Arial, Helvetica, sans-serif;
     font-size: 10pt;
   }
-
-  a {
-    color: #00e;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: red;
-  }
 `;
 
 export const BoardForm = styled.form`
@@ -244,5 +223,9 @@ export const BoardForm = styled.form`
     border-top: none;
     display: table;
     padding: 2px;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
   }
 `;

yarn.lock

@@ -41,7 +41,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.14.tgz#4106fc8b755f3e3ee0a0a7c27dde5de1d2b2baf8"
   integrity sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw==
 
-"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.20.12", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
   version "7.20.12"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d"
   integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==
@@ -815,7 +815,7 @@
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.18.6"
 
-"@babel/plugin-transform-react-jsx@^7.18.6":
+"@babel/plugin-transform-react-jsx@^7.18.6", "@babel/plugin-transform-react-jsx@^7.20.13":
   version "7.20.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.20.13.tgz#f950f0b0c36377503d29a712f16287cedf886cbb"
   integrity sha512-MmTZx/bkUrfJhhYAYt3Urjm+h8DQGrPrnKQ94jLo7NLuOU+T89a7IByhKmrb8SKhrIYIQ0FN0CHMbnFRen4qNw==
@@ -2693,7 +2693,7 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@testing-library/dom@^8.5.0":
+"@testing-library/dom@^8.20.0", "@testing-library/dom@^8.5.0":
   version "8.20.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.0.tgz#914aa862cef0f5e89b98cc48e3445c4c921010f6"
   integrity sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==
@@ -2980,6 +2980,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
   integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
 
+"@types/node@^18.13.0":
+  version "18.13.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.13.0.tgz#0400d1e6ce87e9d3032c19eb6c58205b0d3f7850"
+  integrity sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -9662,7 +9667,7 @@ postcss@^7.0.35:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.5, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.4:
+postcss@^8.3.5, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.21, postcss@^8.4.4:
   version "8.4.21"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
   integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
@@ -9755,7 +9760,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9953,6 +9958,13 @@ react-helmet-async@^1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-infinite-scroller@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz#8b80233226dc753a597a0eb52621247f49b15f18"
+  integrity sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9963,7 +9975,7 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==