feat(submit): show subplebbit rules if any as the user types a valid subplebbit address

src/views/submit/submit.module.css

@@ -22,7 +22,7 @@ h1 {
   width: 520px
 }
 
-.field {
+.box {
   display: block;
   position: relative;
   width: 500px;
@@ -39,18 +39,18 @@ h1 {
   font-size: smaller;
 }
 
-.fieldTitleRequired::before {
+.boxTitleRequired::before {
   content: "*";
   color: red;
 }
 
-.fieldContent {
+.boxContent {
   margin-top: 5px;
   border: none;
   position: relative;
 }
 
-.fieldSubtitle {
+.boxSubtitle {
   font-size: smaller;
 }
 
@@ -104,7 +104,7 @@ h1 {
     width: 100%;
   }
 
-  .field {
+  .box {
     width: 100%;
     box-sizing: border-box;
   }
@@ -134,4 +134,15 @@ h1 {
   color: #369;
   font-size: 13px;
   cursor: pointer;
+}
+
+.rulesTitle {
+  color: var(--text-primary);;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.rules {
+  font-size: 13px;
+  margin-left: 20px;
 }

src/views/submit/submit.tsx

@@ -1,9 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { PublishCommentOptions, useAccount, usePublishComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useTranslation } from 'react-i18next';
 import { create } from 'zustand';
-import { isSubplebbitSubmitView } from '../../lib/utils/view-utils';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 import { isValidENS, isValidIPFS, isValidURL } from '../../lib/utils/validation-utils';
 import styles from './submit.module.css';
@@ -57,11 +56,11 @@ const useSubmitStore = create<SubmitState>((set) => ({
 const Submit = () => {
   const account = useAccount();
   const { t } = useTranslation();
-  const location = useLocation();
   const params = useParams();
-  const isSubplebbitSubmit = isSubplebbitSubmitView(location.pathname, params);
   const paramsSubplebbitAddress = params.subplebbitAddress;
-  const subplebbit = useSubplebbit({ subplebbitAddress: paramsSubplebbitAddress });
+  const [inputAddress, setInputAddress] = useState('');
+  const [selectedSubplebbit, setSelectedSubplebbit] = useState(paramsSubplebbitAddress);
+  const subplebbit = useSubplebbit({ subplebbitAddress: selectedSubplebbit });
   const navigate = useNavigate();
   const [readyToPublish, setReadyToPublish] = useState(false);
 
@@ -75,8 +74,8 @@ const Submit = () => {
   const { subscriptions } = account || {};
 
   useEffect(() => {
-    document.title = t('submit_to_before') + (isSubplebbitSubmit ? subplebbit?.title || subplebbit?.shortAddress : 'seedit') + t('submit_to_after');
-  }, [isSubplebbitSubmit, subplebbit, t]);
+    document.title = t('submit_to_before') + (selectedSubplebbit ? subplebbit?.title || subplebbit?.shortAddress : 'seedit') + t('submit_to_after');
+  }, [selectedSubplebbit, subplebbit, t]);
 
   const onPublish = () => {
     if (!titleRef.current?.value) {
@@ -147,52 +146,81 @@ const Submit = () => {
     </div>
   )
 
+  const handleAddressChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputAddress(e.target.value);
+  }
+
+  useEffect(() => {
+    if (inputAddress) {
+      if (isValidENS(inputAddress) || isValidIPFS(inputAddress)) {
+        setSelectedSubplebbit(inputAddress);
+      }
+    }
+  }, [inputAddress]);
+
   return (
     <div className={styles.content}>
       <h1>
         {t('submit_to_before')}
-        {isSubplebbitSubmit ? subplebbitHeaderLink : 'seedit'}
+        {selectedSubplebbit ? subplebbitHeaderLink : 'seedit'}
         {t('submit_to_after')}
       </h1>
       <div className={styles.form}>
         <div className={styles.formContent}>
-          <div className={styles.field}>
-            <span className={styles.fieldTitleOptional}>url</span>
+          <div className={styles.box}>
+            <span className={styles.boxTitleOptional}>url</span>
             <span className={styles.optional}> ({t('optional')})</span>
-            <div className={styles.fieldContent}>
+            <div className={styles.boxContent}>
               <input className={`${styles.input} ${styles.inputUrl}`} type='text' ref={linkRef} />
               <div className={styles.description}>{t('submit_url_description')}</div>
             </div>
           </div>
-          <div className={styles.field}>
-            <span className={styles.fieldTitleRequired}>{t('title')}</span>
-            <div className={styles.fieldContent}>
+          <div className={styles.box}>
+            <span className={styles.boxTitleRequired}>{t('title')}</span>
+            <div className={styles.boxContent}>
               <textarea className={`${styles.input} ${styles.inputTitle}`} ref={titleRef} />
             </div>
           </div>
-          <div className={styles.field}>
-            <span className={styles.fieldTitleOptional}>{t('text')}</span>
+          <div className={styles.box}>
+            <span className={styles.boxTitleOptional}>{t('text')}</span>
             <span className={styles.optional}> ({t('optional')})</span>
-            <div className={styles.fieldContent}>
+            <div className={styles.boxContent}>
               <textarea className={`${styles.input} ${styles.inputText}`} ref={contentRef} />
             </div>
           </div>
-          <div className={styles.field}>
-            <span className={styles.fieldTitleRequired}>{t('submit_choose')}</span>
-            <div className={styles.fieldContent}>
-              <span className={styles.fieldSubtitle}>{t('community_address')}:</span>
+          <div className={styles.box}>
+            <span className={styles.boxTitleRequired}>{t('submit_choose')}</span>
+            <div className={styles.boxContent}>
+              <span className={styles.boxSubtitle}>{t('community_address')}:</span>
               <input
                 className={`${styles.input} ${styles.inputCommunity}`}
                 type='text'
                 placeholder={`"community.eth" ${t('or')} "12D3KooW..."`}
-                defaultValue={isSubplebbitSubmit ? paramsSubplebbitAddress : undefined}
+                defaultValue={selectedSubplebbit ? paramsSubplebbitAddress : undefined}
                 ref={subplebbitAddressRef}
+                onChange={handleAddressChange}
               />
               {subsDescription}
               {subs}
             </div>
           </div>
-          <div className={`${styles.field} ${styles.notice}`}>{t('submit_notice')}</div>
+          {subplebbit?.rules && (
+            <div className={styles.box}>
+              <span className={`${styles.boxTitle} ${styles.rulesTitle}`}>
+                rules for p/{subplebbit?.shortAddress}
+              </span>
+              <div className={styles.boxContent}>
+                <div className={styles.description}>
+                  <ol className={styles.rules}>
+                    {subplebbit?.rules.map((rule: string, index: number) => (
+                      <li key={index}>{rule}</li>
+                    ))}
+                  </ol>
+                </div>
+              </div>
+            </div>
+          )}
+          <div className={`${styles.box} ${styles.notice}`}>{t('submit_notice')}</div>
           <div>*{t('required')}</div>
           <div className={styles.submit}>
             <button className={styles.submitButton} onClick={onPublish}>