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')}