From d71889a3de40de6a0347c82cc7ece2b178e6be54 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sat, 8 Jun 2024 21:33:56 +0200
Subject: [PATCH] feat(reply modal): show alert before posting if subplebbit
 might be offline

---
 src/components/post-form/post-form.tsx            | 12 +++++++-----
 src/components/reply-modal/reply-modal.module.css | 10 ++++++++++
 src/components/reply-modal/reply-modal.tsx        | 14 +++++++++++++-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index 7398d104..ca684b44 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -278,11 +278,13 @@ const PostForm = () => {
 
   const offlineAlert =
     showForm &&
-    (updatedAt
-      ? isBoardOffline && (
-          <div className={styles.offlineBoard}>{`Posts last synced ${getFormattedTimeAgo(updatedAt)}, the subplebbit might be offline and publishing might fail.`}</div>
-        )
-      : `The subplebbit might be offline and publishing might fail.`);
+    (updatedAt ? (
+      isBoardOffline && (
+        <div className={styles.offlineBoard}>{`Posts last synced ${getFormattedTimeAgo(updatedAt)}, the subplebbit might be offline and publishing might fail.`}</div>
+      )
+    ) : (
+      <div className={styles.offlineBoard}>{`The subplebbit might be offline and publishing might fail.`}</div>
+    ));
 
   return (
     <>
diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css
index 968bfee4..ada47ed3 100644
--- a/src/components/reply-modal/reply-modal.module.css
+++ b/src/components/reply-modal/reply-modal.module.css
@@ -91,6 +91,16 @@
   top: 1px;
 }
 
+.offlineBoard {
+  width: 292px;
+  font-family: monospace;
+  background-color: #E62020;
+  font-size: 12px;
+  color: white;
+  padding: 3px 7px 3px 5px;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.20);
+}
+
 @media (max-width: 640px) {
   .container {
     position: absolute;
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 2cbc1c43..07b98c0c 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -2,8 +2,9 @@ import { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Draggable from 'react-draggable';
+import { setAccount, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
-import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
+import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import useReply from '../../hooks/use-reply';
 import useIsMobile from '../../hooks/use-is-mobile';
@@ -75,6 +76,15 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
     }
   }, [parentCid]);
 
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { updatedAt } = subplebbit || {};
+  const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
+  const offlineAlert = updatedAt
+    ? isBoardOffline && (
+        <div className={styles.offlineBoard}>{`Posts last synced ${getFormattedTimeAgo(updatedAt)}, the subplebbit might be offline and publishing might fail.`}</div>
+      )
+    : `The subplebbit might be offline and publishing might fail.`;
+
   const modalContent = (
     <div className={styles.container} ref={nodeRef}>
       <div className={`replyModalHandle ${styles.title}`}>
@@ -124,6 +134,8 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
             autoFocus={!isMobile} // autofocus causes auto scroll to top on mobile
           />
         </div>
+        {offlineAlert}
+        <div className={styles.offlineAlert}></div>
         <div className={styles.footer}>
           {url && (
             <>