diff --git a/src/components/Board.jsx b/src/components/Board.jsx index 8a7a996e..db5f081c 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -1,9 +1,10 @@ import React, { useState, useEffect, useContext } from 'react'; import { Link, useNavigate } from 'react-router-dom'; -import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled'; -import { useFeed } from '@plebbit/plebbit-react-hooks'; -import ImageBanner from './ImageBanner'; import { BoardContext } from '../App'; +import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled'; +import ImageBanner from './ImageBanner'; +import { useFeed } from '@plebbit/plebbit-react-hooks'; +import InfiniteScroll from 'react-infinite-scroller'; const Board = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); @@ -12,7 +13,7 @@ const Board = ({ setBodyStyle }) => { const [showPostForm, setShowPostForm] = useState(false); const navigate = useNavigate(); - const { feed } = useFeed([`${selectedAddress}`], 'new'); + const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new'); // console.log(feed); @@ -129,7 +130,7 @@ const Board = ({ setBodyStyle }) => { ))} [ - handleStyleChange({target: {value: "Yotsuba"}} + handleStyleChange({target: {value: "Yotsuba"}} )}>Home]  @@ -216,7 +217,13 @@ const Board = ({ setBodyStyle }) => {
- {feed.map(object => { + Loading...
} + > + {feed.map(object => { let counter = 1; const thread = object; const { replies: { pages: { topAll: { comments } } } } = object; @@ -297,6 +304,7 @@ const Board = ({ setBodyStyle }) => {
)})} +
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx index 140d4927..994767c9 100644 --- a/src/components/styles/Board.styled.jsx +++ b/src/components/styles/Board.styled.jsx @@ -58,22 +58,21 @@ export const NavBar = styled.div` return `font-size: 11pt; display: block; - a { + a, a:visited { font-weight: 400; padding: 1px; + color: #00e; + text-decoration: underline; } a:hover { color: red; } - a:visited { - color: #00e; - } - .nav { float: right; } + `; case 'Burichan': @@ -83,7 +82,8 @@ export const NavBar = styled.div` a, a:visited { font-weight: 400; padding: 1px; - color: #34345c + color: #34345c; + text-decoration: underline; } a:hover { @@ -899,6 +899,7 @@ export const PostForm = styled.form` a, a:visited { color: #00e; + text-decoration: underline; } a:hover { color: red; @@ -913,6 +914,7 @@ export const PostForm = styled.form` a, a:visited { color: #34345c; + text-decoration: underline; } a:hover { color: red; diff --git a/src/components/styles/Thread.styled.jsx b/src/components/styles/Thread.styled.jsx index 4dbbdac7..5ffacdf7 100644 --- a/src/components/styles/Thread.styled.jsx +++ b/src/components/styles/Thread.styled.jsx @@ -494,6 +494,10 @@ export const TopBar = styled.div` color: #00e !important; text-decoration: none; } + + a:hover { + color: red !important; + } }`; case 'Yotsuba B': @@ -517,6 +521,10 @@ export const TopBar = styled.div` color: #34345c !important; text-decoration: none; } + + a:hover { + color: red !important; + } }`; case 'Futaba': @@ -538,6 +546,10 @@ export const TopBar = styled.div` a, a:visited { color: #00e !important; } + + a:hover { + color: red !important; + } }`; case 'Burichan': @@ -557,7 +569,11 @@ export const TopBar = styled.div` font-size: 12pt; a, a:visited { - color: #00e !important; + color: #34345c !important; + } + + a:hover { + color: red !important; } }`; @@ -582,6 +598,10 @@ export const TopBar = styled.div` color: #81a2be !important; text-decoration: none; } + + a:hover { + color: #5f89ab !important; + } }`; case 'Photon': @@ -605,6 +625,10 @@ export const TopBar = styled.div` color: #f60 !important; text-decoration: none; } + + a:hover { + color: #ff3300 !important; + } }`; }