From 511e2248c9ee74e3af30dc3ed631174856a4b7cb Mon Sep 17 00:00:00 2001 From: Tom Date: Sat, 6 May 2023 15:40:30 +0200 Subject: [PATCH] add offline indicator to all desktop views --- src/components/BoardSubscription.jsx | 22 -------------------- src/components/OfflineIndicator.jsx | 28 ++++++++++++++++++++++++++ src/components/styled/Board.styled.jsx | 13 ++++++++++++ src/components/styled/Home.styled.jsx | 18 +++++++++++++---- src/components/views/Board.jsx | 7 +++++-- src/components/views/Catalog.jsx | 7 +++++-- src/components/views/Home.jsx | 8 ++++++-- src/components/views/Subscriptions.jsx | 9 +++++++++ src/components/views/Thread.jsx | 5 +++++ 9 files changed, 85 insertions(+), 32 deletions(-) delete mode 100644 src/components/BoardSubscription.jsx create mode 100644 src/components/OfflineIndicator.jsx diff --git a/src/components/BoardSubscription.jsx b/src/components/BoardSubscription.jsx deleted file mode 100644 index 17705a24..00000000 --- a/src/components/BoardSubscription.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; -import { useSubplebbit } from "@plebbit/plebbit-react-hooks"; -import { Tooltip } from 'react-tooltip'; - - -const BoardSubscription = ({ address }) => { - const subplebbit = useSubplebbit({ subplebbitAddress: address }); - const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20; - - return ( - <> - {address} {!isOnline && ( - offline - )} - - ); -}; - -export default BoardSubscription; \ No newline at end of file diff --git a/src/components/OfflineIndicator.jsx b/src/components/OfflineIndicator.jsx new file mode 100644 index 00000000..bae408c8 --- /dev/null +++ b/src/components/OfflineIndicator.jsx @@ -0,0 +1,28 @@ +import React from "react"; +import { useSubplebbit } from "@plebbit/plebbit-react-hooks"; + + +const OfflineIndicator = ({ address, className, tooltipPlace }) => { + const subplebbit = useSubplebbit({ subplebbitAddress: address }); + const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20; + + return ( + <> + {!isOnline && ( + <> + {" "} + offline + + )} + + ); +}; + +export default OfflineIndicator; \ No newline at end of file diff --git a/src/components/styled/Board.styled.jsx b/src/components/styled/Board.styled.jsx index 93c3dc6e..f8461f5c 100644 --- a/src/components/styled/Board.styled.jsx +++ b/src/components/styled/Board.styled.jsx @@ -30,6 +30,12 @@ export const NavBar = styled.div` #board-nav-mobile { display: none; } + + .offline-nav { + width: 12px; + position: relative; + margin: 2px 2px -2px -2px; + } } @media (max-width: 480px) { @@ -1617,6 +1623,13 @@ export const BoardForm = styled.div` margin-top: 10px; } + .offline-sub { + width: 13px; + margin-right: -5px; + margin-bottom: -2px; + position: relative; + } + ${({ selectedStyle }) => { switch (selectedStyle) { case 'Yotsuba': diff --git a/src/components/styled/Home.styled.jsx b/src/components/styled/Home.styled.jsx index 954921d0..a9d0026a 100644 --- a/src/components/styled/Home.styled.jsx +++ b/src/components/styled/Home.styled.jsx @@ -286,18 +286,28 @@ export const BoardsContent = styled.div` .boardlink, #view-all { font-size: 1.2em; } + + .disconnected { + width: 15px; + margin-bottom: -1px; + position: absolute; + } } @media (min-width: 480px) { #mobile-br { display: none; } + + .disconnected { + width: 11px; + margin-bottom: -1px; + margin-top: 2px; + position: absolute; + } } - .disconnected { - width: 13px; - position: absolute; - } + `; export const Footer = styled.div` diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 241c7612..c8466ef4 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -10,6 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore'; import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled'; import { Footer } from '../styled/Thread.styled'; import ImageBanner from '../ImageBanner'; +import OfflineIndicator from '../OfflineIndicator'; import Post from '../Post'; import PostLoader from '../PostLoader'; import ReplyModal from '../ReplyModal'; @@ -325,10 +326,8 @@ const Board = () => { try { if (subscribed === false) { await subscribe(selectedAddress); - setSuccessMessage(`Subscribed to ${selectedTitle ? selectedTitle : selectedAddress}`); } else if (subscribed === true) { await unsubscribe(selectedAddress); - setSuccessMessage(`Unsubscribed from ${selectedTitle ? selectedTitle : selectedAddress}`); } } catch (error) { setErrorMessage(error); @@ -360,6 +359,10 @@ const Board = () => { {index === 0 ? null : "\u00a0"} handleClickTitle(subplebbit.title, subplebbit.address)} >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} ))} diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 38e125ff..30add702 100644 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -10,6 +10,7 @@ import { Threads } from '../styled/Catalog.styled'; import { TopBar, Footer } from '../styled/Thread.styled'; import CatalogLoader from '../CatalogLoader'; import ImageBanner from '../ImageBanner'; +import OfflineIndicator from '../OfflineIndicator'; import SettingsModal from '../SettingsModal'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import handleStyleChange from '../../utils/handleStyleChange'; @@ -239,10 +240,8 @@ const Catalog = () => { try { if (subscribed === false) { await subscribe(selectedAddress); - setSuccessMessage(`Subscribed to ${selectedTitle ? selectedTitle : selectedAddress}`); } else if (subscribed === true) { await unsubscribe(selectedAddress); - setSuccessMessage(`Unsubscribed from ${selectedTitle ? selectedTitle : selectedAddress}`); } } catch (error) { setErrorMessage(error); @@ -273,6 +272,10 @@ const Catalog = () => { setSelectedAddress(subplebbit.address); }} >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} ))} diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx index 7bf04feb..0d1ce4c9 100644 --- a/src/components/views/Home.jsx +++ b/src/components/views/Home.jsx @@ -5,7 +5,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore'; import { Link, useNavigate } from 'react-router-dom'; import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled'; import BoardAvatar from '../BoardAvatar'; -import BoardSubscription from '../BoardSubscription'; +import OfflineIndicator from '../OfflineIndicator'; import packageJson from '../../../package.json' import { Tooltip } from 'react-tooltip'; const {version} = packageJson @@ -104,7 +104,11 @@ const Home = () => { <>
- + {subscription}  +
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index 0f8c248d..bcbab54f 100644 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -10,6 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore'; import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled'; import { Footer } from '../styled/Thread.styled'; import ImageBanner from '../ImageBanner'; +import OfflineIndicator from '../OfflineIndicator'; import Post from '../Post'; import PostLoader from '../PostLoader'; import ReplyModal from '../ReplyModal'; @@ -173,6 +174,10 @@ const Subscriptions = () => { {index === 0 ? null : "\u00a0"} handleClickTitle(subplebbit.title, subplebbit.address)} >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} ))} @@ -387,6 +392,10 @@ const Subscriptions = () => { >{thread.subplebbitAddress.slice(0, 10) + "(...)"} )} +    [ setSelectedThread(thread.cid)} className="reply-link" >Reply diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 7fa3d912..74a0b97b 100644 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -9,6 +9,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore'; import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled'; import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled'; import ImageBanner from '../ImageBanner'; +import OfflineIndicator from '../OfflineIndicator'; import Post from '../Post'; import PostLoader from '../PostLoader'; import ReplyModal from '../ReplyModal'; @@ -297,6 +298,10 @@ const Thread = () => { setSelectedAddress(subplebbit.address); }} >{subplebbit.title ? subplebbit.title : subplebbit.address} + {index !== defaultSubplebbits.length - 1 ? " /" : null} ))}