add offline indicators to SubscriptionsCatalog

This commit is contained in:
Tom
2023-05-08 21:10:42 +02:00
parent a00fe30779
commit a63ea84fe7
5 changed files with 39 additions and 14 deletions
+8 -5
View File
@@ -2,6 +2,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
import { Helmet } from 'react-helmet-async';
import InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
import { useFeed, usePublishComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -282,10 +283,6 @@ const Catalog = () => {
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
@@ -342,7 +339,12 @@ const Catalog = () => {
</div>
<>
<div className="board-title">{selectedTitle}</div>
<div className="board-address">p/{selectedAddress}</div>
<div className="board-address">p/{selectedAddress}
<OfflineIndicator
address={selectedAddress}
className="offline"
tooltipPlace="top" />
</div>
</>
</>
</Header>
@@ -438,6 +440,7 @@ const Catalog = () => {
</div>
<hr />
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}>
{feed.length < 1 ? (
<CatalogLoader />
+17 -7
View File
@@ -2,6 +2,7 @@ import React, { Fragment, useEffect, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
import { useAccount, useFeed } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -106,10 +107,6 @@ const SubscriptionsCatalog = () => {
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
<OfflineIndicator
address={subplebbit.address}
className="offline-nav"
tooltipPlace="bottom" />
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
@@ -203,6 +200,7 @@ const SubscriptionsCatalog = () => {
</div>
<hr />
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}>
{selectedFeed.length < 1 ? (
<CatalogLoader />
@@ -254,9 +252,21 @@ const SubscriptionsCatalog = () => {
) : null}
</Fragment>
) : null}
{/* <div key={`ti-${index}`} className="thread-icons" >
<span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"></span>
</div> */}
<div key={`ti-${index}`} className="thread-icons" >
{thread.link ? (
// <span key={`si-${index}`} className="thread-icon sticky-icon" title="Sticky"></span> */
<OfflineIndicator
address={thread.subplebbitAddress}
className="thread-icon offline-icon"
tooltipPlace="top" />
) : (
// <span key={`si-${index}`} className="thread-icon sticky-icon-no-link" title="Sticky"></span> */
<OfflineIndicator
address={thread.subplebbitAddress}
className="thread-icon offline-icon-no-link"
tooltipPlace="top" />
) }
</div>
<div key={`meta-${index}`} className="meta" title="(R)eplies / (I)mage Replies" >
R:
<b key={`b-${index}`}>{thread.replyCount}</b>