diff --git a/src/components/board-header/board-header.tsx b/src/components/board-header/board-header.tsx index 92bf4069..2c27ec9c 100644 --- a/src/components/board-header/board-header.tsx +++ b/src/components/board-header/board-header.tsx @@ -1,6 +1,8 @@ import { useState } from 'react'; import { useLocation, useParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { getFormattedTimeAgo } from '../../lib/utils/time-utils'; import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils'; import styles from './board-header.module.css'; import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; @@ -17,6 +19,7 @@ const ImageBanner = () => { }; const BoardHeader = () => { + const { t } = useTranslation(); const location = useLocation(); const params = useParams(); @@ -27,14 +30,18 @@ const BoardHeader = () => { const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; const subplebbit = useSubplebbit({ subplebbitAddress }); - const { address, shortAddress } = subplebbit || {}; + const { address, shortAddress, updatedAt } = subplebbit || {}; const multisubMetadata = useMultisubMetadata(); const title = isInAllView ? multisubMetadata?.title || 'all' : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title; const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${address}`; - const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60; + const isBoardOffline = updatedAt && updatedAt < Date.now() / 1000 - 60 * 60; + + const offlineMessage = updatedAt + ? isBoardOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } }) + : t('subplebbit_offline_info'); return (
@@ -43,7 +50,7 @@ const BoardHeader = () => {
{title || `p/${shortAddress || subplebbitAddress}`} - {isBoardOffline && } + {isBoardOffline && }
{subtitle}

diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index 5784f440..822084b7 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -23,14 +23,14 @@ text-align: center; color: red; font-weight: 700; - padding: 100px 0; + padding: 100px 15px; } .offlineBoard { font-size: 16px; text-align: center; color: red; - padding: 30px 0; + padding: 30px 15px; font-weight: 700; } diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index a66cb6f1..34c094b7 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -273,22 +273,16 @@ const PostForm = () => { const subplebbit = useSubplebbit({ subplebbitAddress: params?.subplebbitAddress }); const { updatedAt } = subplebbit || {}; - const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60; + const isBoardOffline = updatedAt && updatedAt < Date.now() / 1000 - 60 * 60; - const offlineAlert = - showForm && - (updatedAt ? ( - isBoardOffline && ( -
{t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } })}
- ) - ) : ( -
{t('subplebbit_offline_info')}
- )); + const offlineMessage = updatedAt + ? isBoardOffline && t('posts_last_synced_info', { time: getFormattedTimeAgo(updatedAt), interpolation: { escapeValue: false } }) + : t('subplebbit_offline_info'); return ( <>
- {!(isInAllView || isInSubscriptionsView) && offlineAlert} + {!(isInAllView || isInSubscriptionsView) && showForm &&
{offlineMessage}
} {isThreadClosed ? (
{t('thread_closed')} @@ -308,7 +302,7 @@ const PostForm = () => { )}
- {!(isInAllView || isInSubscriptionsView) && offlineAlert} + {!(isInAllView || isInSubscriptionsView) && showForm &&
{offlineMessage}
} {isThreadClosed ? (
{t('thread_closed')}