From 7a451df71902a7fd600b35d42e27b519f2c2b795 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 15 Jan 2024 16:45:06 +0100
Subject: [PATCH] feat(subplebbit settings): add logo preview

---
 .../subplebbit-settings.module.css            | 17 +++++++++++
 .../subplebbit-settings.tsx                   | 28 +++++++++++++++++--
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css
index 157c4508..fe81163f 100644
--- a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css
+++ b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.module.css
@@ -156,6 +156,23 @@
   cursor: pointer;
 }
 
+.logoPreview {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin-top: 10px;
+  font-size: smaller;
+}
+
+.logoError {
+  padding-left: 10px;
+}
+
+.logoPreview img {
+  max-height: 40px;
+  padding-left: 10px;
+}
+
 @media (max-width: 768px) {
   .content {
     padding: 7px 0px 0px 0px;
diff --git a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
index a6e74cc3..a671ab08 100644
--- a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
+++ b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import stringify from 'json-stringify-pretty-compact';
 import styles from './subplebbit-settings.module.css';
 import Sidebar from '../../../components/sidebar';
+import { isValidURL } from '../../../lib/utils/url-utils';
 
 const isElectron = window.electron && window.electron.isElectron;
 
@@ -51,15 +52,36 @@ const Address = ({ address }: { address: string }) => {
   );
 };
 
-const Logo = ({ logo, avatarUrl }: { logo: string; avatarUrl: string | undefined }) => {
+const Logo = ({ avatarUrl }: { avatarUrl: string | undefined }) => {
   const { t } = useTranslation();
+  const [logoUrl, setLogoUrl] = useState(avatarUrl);
+  const [imageError, setImageError] = useState(false);
+
+  // Update logoUrl when avatarUrl changes
+  useEffect(() => {
+    setLogoUrl(avatarUrl);
+    setImageError(false); // Reset the error state as well
+  }, [avatarUrl]);
 
   return (
     <div className={styles.box}>
       <div className={styles.boxTitle}>{t('logo')}</div>
       <div className={styles.boxSubtitle}>set a community logo using its direct image link (ending in .jpg, .png)</div>
       <div className={styles.boxInput}>
-        <input type='text' defaultValue={avatarUrl} />
+        <input
+          type='text'
+          value={logoUrl}
+          onChange={(e) => {
+            setLogoUrl(e.target.value);
+            setImageError(false);
+          }}
+        />
+        {logoUrl && isValidURL(logoUrl) && (
+          <div className={styles.logoPreview}>
+            preview:
+            {imageError ? <span className={styles.logoError}>no image found</span> : <img src={logoUrl} alt='logo preview' onError={() => setImageError(true)} />}
+          </div>
+        )}
       </div>
     </div>
   );
@@ -272,7 +294,7 @@ const SubplebbitSettings = () => {
       <Title title={title} />
       <Description description={description} />
       <Address address={address} />
-      <Logo logo={''} avatarUrl={suggested?.avatarUrl} />
+      <Logo avatarUrl={suggested?.avatarUrl} />
       <Rules rules={rules} />
       <Moderators roles={roles} />
       <Challenge challenge={''} selected={''} setSelected={() => {}} />