added catalog view

src/App.js

@@ -4,6 +4,7 @@ import { Helmet } from 'react-helmet-async';
 import Home from './components/Home';
 import Board from './components/Board';
 import Thread from './components/Thread';
+import Catalog from './components/Catalog';
 import { createGlobalStyle } from 'styled-components';
 
 export const BoardContext = React.createContext();
@@ -53,6 +54,9 @@ export default function App() {
         <Route path='/board/thread' element={<Thread setBodyStyle={setBodyStyle} />}>
           <Route path='post-reply' element={<Thread />} />
         </Route>
+        <Route path='/board/catalog' element={<Catalog setBodyStyle={setBodyStyle} /> }>
+          <Route path='post-thread' element={<Catalog />} />
+        </Route>
       </Routes>
     </BoardContext.Provider>
   </div>

src/components/Board.jsx

@@ -19,7 +19,7 @@ const Board = ({ setBodyStyle }) => {
 
   const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
 
-  console.log(feed);
+  // console.log(feed);
 
   const tryLoadMore = async () => {
     try {loadMore()} 
@@ -216,7 +216,7 @@ const Board = ({ setBodyStyle }) => {
       const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment;
   
       if (replyCount > 0 && nestedComments.length > 0) {
-        const renderedNestedComments = renderComments(nestedComments, comment.cid);
+        const renderedNestedComments = renderComments(nestedComments);
         return [comment, ...renderedNestedComments];
       }
   
@@ -317,6 +317,9 @@ const Board = ({ setBodyStyle }) => {
             <option value="Photon">Photon</option>
           </select>
         </span>
+        [
+        <Link to="/board/catalog">Catalog</Link>
+        ]
         <hr />
       </TopBar>
       <BoardForm selectedStyle={selectedStyle}>
@@ -331,7 +334,7 @@ const Board = ({ setBodyStyle }) => {
             let counter = 1;
             const thread = object;
             const { replies: { pages: { topAll: { comments } } } } = object;
-            const renderedComments = renderComments(comments, thread.cid);
+            const renderedComments = renderComments(comments);
             return (
             <>
             <div key={`t-${thread.cid}`} className="thread">
@@ -406,8 +409,8 @@ const Board = ({ setBodyStyle }) => {
                     <a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
                   </div>
                   <blockquote key={`pm-${reply.cid}`} className="post-message">
-                    <a class="quotelink" href={handleVoidClick}>
+                    <a className="quotelink" href={handleVoidClick}>
-                      {`>>${counterString}`}{counterString !== '' && <br />}
+                      {`>>${counterString}`}{<br />}
                     </a>
                     {reply.content}
                   </blockquote>

src/components/Catalog.jsx

@@ -0,0 +1,345 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
+import { TopBar } from './styles/Thread.styled';
+import { Threads } from './styles/Catalog.styled';
+import { BoardContext } from '../App';
+import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
+import ImageBanner from './ImageBanner';
+import InfiniteScroll from 'react-infinite-scroller';
+
+const Catalog = ({ setBodyStyle }) => {
+  const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedStyle, setSelectedStyle } = useContext(BoardContext);
+  const [showPostFormLink, setShowPostFormLink] = useState(true);
+  const [showPostForm, setShowPostForm] = useState(false);
+  const [name, setName] = useState('');
+  const [subject, setSubject] = useState('');
+  const [comment, setComment] = useState('');
+  const navigate = useNavigate();
+
+  const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
+
+  const tryLoadMore = async () => {
+    try {loadMore()} 
+    catch (e)
+    {await new Promise(resolve => setTimeout(resolve, 1000))}
+  }
+
+  const { publishComment } = useAccountsActions();
+
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+      console.log('challenge success', {publishedCid: challengeVerification.publication.cid})
+    }
+    else if (challengeVerification.challengeSuccess === false) {
+      console.error('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      alert("Error: You seem to have mistyped the CAPTCHA. Please try again.");
+    }
+  }
+
+  const onChallenge = async (challenges, comment) => {
+    let challengeAnswers = [];
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  }
+  
+  const onError = (error) => console.error(error)
+
+  const getChallengeAnswersFromUser = async (challenges) => {
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        const inputEl = document.getElementById('t-resp');
+        const cntEl = document.getElementById('t-cnt');
+        cntEl.appendChild(challengeImg);
+        inputEl.focus();
+  
+        const handleKeyDown = (event) => {
+          if (event.key === 'Enter') {
+            const challengeResponse = inputEl.value;
+            inputEl.value = '';
+  
+            if (cntEl.contains(challengeImg)) {
+              cntEl.removeChild(challengeImg);
+            }
+  
+            document.removeEventListener('keydown', handleKeyDown);
+  
+            resolve(challengeResponse);
+          }
+        };
+  
+        document.addEventListener('keydown', handleKeyDown);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(new Error('Could not load challenge image'));
+      };
+    });
+  };
+
+  useEffect(() => {
+    let didCancel = false;
+    fetch(
+      "https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json",
+      { cache: "no-cache" }
+    )
+      .then((res) => res.json())
+      .then(res => {
+        if (!didCancel) {
+          setDefaultSubplebbits(res);
+        }
+      });
+    return () => {
+      didCancel = true;
+    };
+  }, []);
+
+  const handleVoidClick = () => {}
+
+  const handleClick = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+  };
+
+  const handleClickHelp = () => {
+    alert("- The CAPTCHA loads after you click \"Post\" \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan.");
+  };
+
+  const handleClickForm = () => {
+    setShowPostFormLink(false);
+    setShowPostForm(true);
+    navigate('/board/catalog/post-thread');
+  };
+
+  const handlePublishComment = async () => {
+    // Event.preventDefault();
+    try {
+      const pendingComment = await publishComment({
+        content: comment,
+        title: subject,
+        subplebbitAddress: selectedAddress,
+        onChallengeVerification,
+        onChallenge,
+        onError,
+      });
+      console.log(`Comment pending with index: ${pendingComment.index}`);
+      setName('');
+      setSubject('');
+      setComment('');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+
+  const handleStyleChange = (event) => {
+    switch (event.target.value) {
+      case "Yotsuba":
+        setBodyStyle({
+          background: "#ffe url(/assets/fade.png) top repeat-x",
+          color: "maroon",
+          fontFamily: "Arial, Helvetica, sans-serif"
+        });
+        setSelectedStyle("Yotsuba");
+        break;
+
+      case "Yotsuba B":
+        setBodyStyle({
+          background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
+          color: "#000",
+          fontFamily: "Arial, Helvetica, sans-serif"
+        });
+        setSelectedStyle("Yotsuba B");
+        break;
+
+      case "Futaba":
+        setBodyStyle({
+          background: "#ffe",
+          color: "maroon",
+          fontFamily: "times new roman, serif"
+        });
+        setSelectedStyle("Futaba");
+        break;
+
+      case "Burichan":
+        setBodyStyle({
+          background: "#eef2ff",
+          color: "#000",
+          fontFamily: "times new roman, serif"
+        });
+        setSelectedStyle("Burichan");
+        break;
+        
+      case "Tomorrow":
+        setBodyStyle({
+          background: "#1d1f21 none",
+          color: "#c5c8c6",
+          fontFamily: "Arial, Helvetica, sans-serif"
+        });
+        setSelectedStyle("Tomorrow");
+        break;
+
+      case "Photon":
+        setBodyStyle({
+          background: "#eee none",
+          color: "#333",
+          fontFamily: "Arial, Helvetica, sans-serif"
+        });
+        setSelectedStyle("Photon");
+        break;
+
+      default:
+        setBodyStyle({
+          background: "#ffe url(/assets/fade.png) top repeat-x",
+          color: "maroon",
+          fontFamily: "Arial, Helvetica, sans-serif"
+        });
+        setSelectedStyle("Yotsuba");
+    }
+  }
+
+  return (
+    <Container>
+      <NavBar selectedStyle={selectedStyle}>
+        <>
+          {defaultSubplebbits.map(subplebbit => (
+            <span className="boardList" key={`span-${subplebbit.address}`}>
+              [
+              <a href={handleVoidClick} key={`a-${subplebbit.address}`} onClick={() => handleClick(subplebbit.title, subplebbit.address)}
+              >{subplebbit.title}</a>
+              ]&nbsp;
+            </span>
+          ))}
+          <span className="nav">[
+            <Link id="home-button" to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+            )}>Home</Link>]&nbsp;
+          </span>
+        </>
+      </NavBar>
+      <Header selectedStyle={selectedStyle}>
+        <>
+          <div className="banner">
+            <ImageBanner />
+          </div>
+            <>
+            <div className="board-title">{selectedTitle}</div>
+            <div className="board-address">p/{selectedAddress}</div>
+            </>
+        </>
+      </Header>
+      <Break selectedStyle={selectedStyle} />
+      <PostForm selectedStyle={selectedStyle}>
+        <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} >
+          [
+            <a onClick={handleClickForm}>Start a New Thread</a>
+          ]
+        </PostFormLink>
+        <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
+          <tbody>
+            <tr data-type="Name">
+              <td id="td-name">Name</td>
+              <td>
+                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" value={name} onChange={(event) => setName(event.target.value)} />
+              </td>
+            </tr>
+            <tr data-type="Subject">
+              <td>Subject</td>
+              <td>
+                <input name="sub" type="text" tabIndex={3} value={subject} onChange={(event) => setSubject(event.target.value)} />
+                <input id="post-button" type="submit" value="Post" tabIndex={6} onClick={handlePublishComment} />
+              </td>
+            </tr>
+            <tr data-type="Comment">
+              <td>Comment</td>
+              <td>
+                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" value={comment} onChange={(event) => setComment(event.target.value)}></textarea>
+              </td>
+            </tr>
+            <tr id="captchaFormPart">
+              <td>Verification</td>
+              <td colSpan={2}>
+                <div id="t-root">
+                  <input id="t-resp" name="t-response" placeholder="Type the CAPTCHA here and hit return" autoComplete='off' type="text" />
+                  <button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help" tabIndex={-1}>?</button>
+                  <div id="t-cnt">
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr data-type="File">
+              <td>Embed File</td>
+              <td>
+                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
+              </td>
+            </tr>
+            <tr></tr>
+          </tbody>
+        </PostFormTable>
+      </PostForm>
+      <TopBar selectedStyle={selectedStyle}>
+        <hr />
+        <span className="style-changer">
+          Style:
+           
+          <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
+            <option value="Yotsuba">Yotsuba</option>
+            <option value="Yotsuba B">Yotsuba B</option>
+            <option value="Futaba">Futaba</option>
+            <option value="Burichan">Burichan</option>
+            <option value="Tomorrow">Tomorrow</option>
+            <option value="Photon">Photon</option>
+          </select>
+        </span>
+        <span className="return-button">
+          [
+          <Link to="/board">Return</Link>
+          ]
+        </span>
+        <hr />
+      </TopBar>
+      <Threads selectedStyle={selectedStyle}>
+        <InfiniteScroll
+          pageStart={0}
+          loadMore={tryLoadMore}
+          hasMore={hasMore}
+          loader={<div>Loading...</div>}
+        >
+          {feed.map(thread => {
+            return (
+              <div key={`${thread.cid}`} className="thread">
+                <a key={`a-${thread.cid}`} href={handleVoidClick}>
+                  <img key={`img-${thread.cid}`} alt="" src="/assets/plebchan-psycho.png" />
+                </a>
+                <div key={`ti-${thread.cid}`} className="thread-icons" >
+                  <span key={`si-${thread.cid}`} className="thread-icon sticky-icon" title="Sticky"></span>
+                </div>
+                <div key={`meta-${thread.cid}`} className="meta" title="(R)eplies / (I)mage Replies" >
+                  R:
+                  <b key={`b-${thread.cid}`}>{thread.replyCount}</b>
+                </div>
+                <div key={`t-${thread.cid}`} className="teaser">
+                  <b>{thread.title ? `${thread.title}` : null}</b>
+                  {thread.content ? `${thread.content}` : null}
+                </div>
+              </div>
+            )})}
+        </InfiniteScroll>
+      </Threads>
+    </Container>
+  );
+}
+
+export default Catalog;

src/components/styles/Board.styled.jsx

@@ -1009,7 +1009,17 @@ export const TopBar = styled.div`
 
         .style-changer {
           margin-left: 5px;
+          margin-right: 10px;
           font-size: 10pt;
+        }
+        
+        a {
+          color: #00e;
+          text-decoration: none;
+        }
+        
+        a:hover {
+          color: red;
         }`;
 
       case 'Yotsuba B':
@@ -1022,29 +1032,63 @@ export const TopBar = styled.div`
 
         .style-changer {
           margin-left: 5px;
+          margin-right: 10px;
           font-size: 10pt;
+        }
+        
+        a {
+          color: #34345c;
+          text-decoration: none;
+        }
+        
+        a:hover {
+          color: red;
         }`;
 
       case 'Futaba':
         return `clear: both;
+        font-size: 12pt;
+        
         hr {
           clear: both;
         }
 
         .style-changer {
           margin-left: 5px;
+          margin-right: 10px;
           font-size: 12pt;
+        }
+        
+        a {
+          color: #00e;
+          text-decoration: underline;
+        }
+        
+        a:hover {
+          color: red;
         }`;
 
       case 'Burichan':
         return `clear: both;
+        font-size: 12pt;
+
         hr {
           clear: both;
         }
 
         .style-changer {
           margin-left: 5px;
+          margin-right: 10px;
           font-size: 12pt;
+        }
+        
+        a {
+          color: #34345c;
+          text-decoration: underline;
+        }
+        
+        a:hover {
+          color: red;
         }`;
 
       case 'Tomorrow':
@@ -1057,7 +1101,17 @@ export const TopBar = styled.div`
 
         .style-changer {
           margin-left: 5px;
+          margin-right: 10px;
           font-size: 10pt;
+        }
+        
+        a {
+          color: #81a2be;
+          text-decoration: none;
+        }
+        
+        a:hover {
+          color: #5f89ab;
         }`;
 
       case 'Photon':
@@ -1070,7 +1124,17 @@ export const TopBar = styled.div`
 
         .style-changer {
           margin-left: 5px;
+          margin-right: 10px;
           font-size: 10pt;
+        }
+        
+        a {
+          color: #f60;
+          text-decoration: none;
+        }
+        
+        a:hover {
+          color: red;
         }`;
       
     }

src/components/styles/Catalog.styled.jsx

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+export const Threads = styled.div`
+  padding: 20px 0;
+  text-align: center;
+  margin: 0;
+
+  .thread {
+    width: 180px;
+    max-height: 320px;
+    vertical-align: top;
+    display: inline-block;
+    word-wrap: break-word;
+    overflow: hidden;
+    margin-top: 5px;
+    margin-bottom: 20px;
+    padding: 5px 0 3px;
+    position: relative;
+  }
+
+  img {
+    max-width: 150px;
+    max-height: 150px;
+    display: inline;
+    margin: auto;
+    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+    min-height: 50px;
+    min-width: 50px;
+    border: 0;
+  }
+
+  .thread-icons {
+    display: inline;
+    height: 16px;
+    margin: 2px 0 0 -101px;
+    position: absolute;
+    width: 100px;
+    text-align: right;
+  }
+
+  .sticky-icon {
+    background-image: url(/assets/sticky.gif);
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+  }
+
+  .meta {
+    cursor: help;
+    font-size: 11px;
+    line-height: 8px;
+    margin-top: 2px;
+    margin-bottom: 1px;
+  }
+
+  .teaser {
+    display: block;
+    padding: 0 15px;
+  }
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return ``;
+
+      case 'Yotsuba B':
+        return ``;
+
+      case 'Futaba':
+        return `font-size: 12pt;`;
+
+      case 'Burichan':
+        return `font-size: 12pt;`;
+
+      case 'Tomorrow':
+        return ``;
+
+      case 'Photon':
+        return ``;
+      
+    }
+  }}
+`;

src/components/styles/Thread.styled.jsx

@@ -471,6 +471,9 @@ export const ReplyFormTable = styled.table`
 `;
 
 export const TopBar = styled.div`
+  .return-button {
+    padding-top: 3px;
+  }
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
@@ -541,6 +544,7 @@ export const TopBar = styled.div`
         .return-button {
           float: right;
           margin-right: 4px;
+          padding-top: 2px;
           font-size: 12pt;
 
           a, a:visited {
@@ -566,6 +570,7 @@ export const TopBar = styled.div`
         .return-button {
           float: right;
           margin-right: 4px;
+          padding-top: 2px;
           font-size: 12pt;
 
           a, a:visited {