From f6095e90c0711632390d54838a47351feb8d4061 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 17 Jun 2023 09:33:29 +0200
Subject: [PATCH] add board rules and description

---
 src/components/styled/views/Board.styled.jsx |  24 +++
 src/components/views/Board.jsx               | 182 ++++++++++++++++++-
 2 files changed, 199 insertions(+), 7 deletions(-)

diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 95050d1a..2ccd0606 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -1740,6 +1740,10 @@ export const BoardForm = styled.div`
         border-left: none !important;
         border-top: none !important;
       }
+
+      .capcode {
+        color: purple !important;
+      }
       
       #post-menu {
         border-right: 1px solid #d9bfb7;
@@ -1763,6 +1767,10 @@ export const BoardForm = styled.div`
         border-left: none !important;
         border-top: none !important;
       }
+
+      .capcode {
+        color: purple !important;
+      }
       
       #post-menu {
         border-right: 1px solid #b7c5d9;
@@ -1783,6 +1791,10 @@ export const BoardForm = styled.div`
         return `.highlighted {
         background-color: #f0c0b0 !important;
       }
+
+      .capcode {
+        color: purple !important;
+      }
       
       #post-menu {
         font-size: 13px !important;
@@ -1803,6 +1815,10 @@ export const BoardForm = styled.div`
         return `.highlighted {
         background-color: #d6bad0 !important;
       }
+
+      .capcode {
+        color: purple !important;
+      }
       
       #post-menu {
         font-size: 13px !important;
@@ -1824,6 +1840,10 @@ export const BoardForm = styled.div`
         background-color: #1d1d21 !important;
         outline: 1px solid #111 !important;
       }
+
+      .capcode {
+        color: #81a2be !important;
+      }
       
       #post-menu {
         border: 1px solid #000;
@@ -1844,6 +1864,10 @@ export const BoardForm = styled.div`
         background-color: #ccc !important;
         outline: 1px solid #ccc !important;
       }
+
+      .capcode {
+        color: #f60 !important;
+      }
       
       #post-menu {
         border: 1px solid #ccc;
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index a9e20da7..c885691d 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -424,7 +424,7 @@ const Board = () => {
     },
   });
   
-  
+
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
 
@@ -764,6 +764,173 @@ const Board = () => {
               null
             ) : (
               feed.length > 0 ? (
+                <>
+                {subplebbit.rules ? 
+                  <div className="thread">
+                    <div className="op-container">
+                      <div className="post op op-desktop">
+                        <hr />
+                        <div className="post-info">
+                          <span className="name-block">
+                            <span className="title">Rules</span>
+                            &nbsp;
+                            <span className="name capcode">## Board Admins</span>
+                            &nbsp;
+                            <span className="date-time">{getDate(subplebbit.createdAt)}</span>
+                            &nbsp;
+                            <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px"}} />
+                            &nbsp;
+                            <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px"}} />
+                            <span>&nbsp;
+                                [
+                                <Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
+                                ]
+                            </span>
+                            <PostMenu 
+                              title="Post menu"
+                              ref={el => { 
+                                threadMenuRefs.current[subplebbit.statsCid] = el;
+                              }}
+                              className='post-menu-button' 
+                              rotated={openMenuCid === subplebbit.statsCid}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                const rect = threadMenuRefs.current[subplebbit.statsCid].getBoundingClientRect();
+                                setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+                                setOpenMenuCid(prevCid => (prevCid === subplebbit.statsCid ? null : subplebbit.statsCid));
+                              }}
+                            >
+                              ▶
+                            </PostMenu>
+                            {createPortal(
+                              <PostMenuCatalog selectedStyle={selectedStyle} 
+                              ref={el => {postMenuCatalogRef.current = el}}
+                              onClick={(event) => event.stopPropagation()}
+                              style={{position: "absolute", 
+                              top: menuPosition.top + 7, 
+                              left: menuPosition.left}}>
+                              <div className={`post-menu-thread post-menu-thread-${subplebbit.statsCid}`}
+                              style={{ display: openMenuCid === subplebbit.statsCid ? 'block' : 'none' }}
+                              >
+                                <ul className="post-menu-catalog">
+                                  <li onClick={() => handleOptionClick(subplebbit.statsCid)}>Hide thread</li>
+                                  {/* {isModerator ? (
+                                    <>
+                                      change rules
+                                    </>
+                                  ) : null} */}
+                                </ul>
+                              </div>
+                              </PostMenuCatalog>, document.body
+                            )}
+                          </span>
+                          <blockquote>
+                            <div className="custom-paragraph">
+                              {subplebbit.rules.map((rule, index) => (
+                                <React.Fragment key={index}>
+                                  {index + 1}. {rule}
+                                  <br />
+                                </React.Fragment>
+                              ))}
+                            </div>
+                          </blockquote>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                : null}
+                {subplebbit.description ?
+                <div className="thread" style={{
+                  display: subplebbit.rules ? "grid" : "block"
+                  }}>
+                  <div className="op-container">
+                    <div className="post op op-desktop">
+                      <hr />
+                      <div className="post-info">
+                        {subplebbit.suggested?.avatarUrl ? (
+                          <div className="file" style={{marginBottom: "5px"}}>
+                            <div className="file-text">
+                              Link:&nbsp;
+                              <a href={subplebbit.suggested?.avatarUrl} 
+                              target="_blank" rel="noopener noreferrer">{
+                              subplebbit.suggested?.avatarUrl.length > 30 ?
+                              subplebbit.suggested?.avatarUrl.slice(0, 30) + "..." :
+                              subplebbit.suggested?.avatarUrl
+                              }
+                              </a>&nbsp;(image)
+                            </div>
+                            <div className="img-container">
+                              <span className="file-thumb">
+                                <img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
+                                onClick={handleImageClick}
+                                style={{cursor: "pointer"}} />
+                              </span>
+                            </div>
+                          </div>
+                          ) : null}
+                        <span className="name-block">
+                          <span className="title">Welcome to {subplebbit.title || subplebbit.address}</span>
+                          &nbsp;
+                          <span className="name capcode">## Board Admins</span>
+                          &nbsp;
+                          <span className="date-time">{getDate(subplebbit.createdAt)}</span>
+                          &nbsp;
+                          <img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-3px"}} />
+                          &nbsp;
+                          <img src="assets/closed.gif" alt="Closed" title="Closed" style={{marginBottom: "-3px"}} />
+                          <span>&nbsp;
+                              [
+                              <Link to={() => {}} style={{textDecoration: "none"}} className="reply-link">Reply</Link>
+                              ]
+                          </span>
+                          <PostMenu 
+                            title="Post menu"
+                            ref={el => { 
+                              threadMenuRefs.current[subplebbit.pubsubTopic] = el;
+                            }}
+                            className='post-menu-button' 
+                            rotated={openMenuCid === subplebbit.pubsubTopic}
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              const rect = threadMenuRefs.current[subplebbit.pubsubTopic].getBoundingClientRect();
+                              setMenuPosition({top: rect.top + window.scrollY, left: rect.left});
+                              setOpenMenuCid(prevCid => (prevCid === subplebbit.pubsubTopic ? null : subplebbit.pubsubTopic));
+                            }}
+                          >
+                            ▶
+                          </PostMenu>
+                          {createPortal(
+                            <PostMenuCatalog selectedStyle={selectedStyle} 
+                            ref={el => {postMenuCatalogRef.current = el}}
+                            onClick={(event) => event.stopPropagation()}
+                            style={{position: "absolute", 
+                            top: menuPosition.top + 7, 
+                            left: menuPosition.left}}>
+                            <div className={`post-menu-thread post-menu-thread-${subplebbit.pubsubTopic}`}
+                            style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
+                            >
+                              <ul className="post-menu-catalog">
+                                <li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
+                                {/* {isModerator ? (
+                                  <>
+                                    change description
+                                  </>
+                                ) : null} */}
+                              </ul>
+                            </div>
+                            </PostMenuCatalog>, document.body
+                          )}
+                        </span>
+                        <blockquote>
+                          <div className="custom-paragraph">
+                            {subplebbit.description}
+                          </div>
+                        </blockquote>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                : null}
                 <Virtuoso
                 increaseViewportBy={2000}
                 data={selectedFeed}
@@ -880,12 +1047,6 @@ const Board = () => {
                                 setSelectedParentCid(thread.cid);
                                 }} title="Reply to this post">{thread.shortCid}</Link>
                               &nbsp;
-                              <span key={`rl1-${index}`}>&nbsp;
-                                [
-                                <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
-                                ]
-                              </span>
-                            </span>&nbsp;
                             {thread.pinned ? (
                               <>
                                 &nbsp;
@@ -900,6 +1061,12 @@ const Board = () => {
                                 style={{marginBottom: "-3px"}} />
                               </>
                             ) : null}
+                              <span key={`rl1-${index}`}>&nbsp;
+                                [
+                                <Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
+                                ]
+                              </span>
+                            </span>
                             <PostMenu 
                               key={`pmb-${index}`} 
                               title="Post menu"
@@ -1945,6 +2112,7 @@ const Board = () => {
                 useWindowScroll={true}
                 components={{ Footer: hasMore ? () => <PostLoader /> : null }}
                 />
+                </>
               ) : (<PostLoader />)
             )}
           </div>