Merge pull request #351 from plebbit/development

Development

src/app.tsx

@@ -26,13 +26,16 @@ import TopBar from './components/topbar';
 export const sortTypes = ['hot', 'new', 'active', 'controversialAll', 'topAll'];
 
 const CheckRouteParams = () => {
-  let { sortType, timeFilterName, accountCommentIndex } = useParams<{ sortType?: string; timeFilterName?: string; accountCommentIndex?: string }>();
+  const { accountCommentIndex, commentCid, sortType, subplebbitAddress, timeFilterName } = useParams();
 
+  const isValidAccountCommentIndex = !accountCommentIndex || (!isNaN(parseInt(accountCommentIndex)) && parseInt(accountCommentIndex) >= 0);
+  const isValidCommentCid = !commentCid || /^Qm[a-zA-Z0-9]{44}$/.test(commentCid);
+  const isValidSubplebbitAddress = !subplebbitAddress || subplebbitAddress.includes('.') || /^12D3K[a-zA-Z0-9]{44}$/.test(subplebbitAddress);
   const isSortTypeValid = !sortType || sortTypes.includes(sortType);
   const isTimeFilterNameValid = !timeFilterName || timeFilterNames.includes(timeFilterName as any);
   const isAccountCommentIndexValid = !accountCommentIndex || !isNaN(parseInt(accountCommentIndex));
 
-  if (!isSortTypeValid || !isTimeFilterNameValid || !isAccountCommentIndexValid) {
+  if (!isValidAccountCommentIndex || !isValidCommentCid || !isValidSubplebbitAddress || !isSortTypeValid || !isTimeFilterNameValid || !isAccountCommentIndexValid) {
     return <NotFound />;
   }
 

src/hooks/use-default-subplebbits.ts

@@ -16,6 +16,20 @@ export interface SubplebbitWithDisplay extends Subplebbit {
 
 let cache: Subplebbit[] | null = null;
 
+export const categorizeSubplebbits = (subplebbits: Subplebbit[]) => {
+  const plebbitSubs = subplebbits.filter((sub) => sub.tags?.includes('plebbit'));
+  const interestsSubs = subplebbits.filter(
+    (sub) => sub.tags?.includes('topic') && !sub.tags?.includes('plebbit') && !sub.tags?.includes('country') && !sub.tags?.includes('international'),
+  );
+  const randomSubs = subplebbits.filter((sub) => sub.tags?.includes('random') && !sub.tags?.includes('plebbit'));
+  const internationalSubs = subplebbits.filter((sub) => sub.tags?.includes('international') || sub.tags?.includes('country'));
+  const projectsSubs = subplebbits.filter((sub) => sub.tags?.includes('project') && !sub.tags?.includes('plebbit') && !sub.tags?.includes('topic'));
+
+  return { plebbitSubs, interestsSubs, randomSubs, internationalSubs, projectsSubs };
+};
+
+const nsfwTags = ['gore', 'adult', 'anti'];
+
 export const useDefaultSubplebbits = () => {
   const [subplebbits, setSubplebbits] = useState<Subplebbit[]>([]);
 
@@ -29,8 +43,13 @@ export const useDefaultSubplebbits = () => {
           'https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/multisub.json',
           // { cache: 'no-cache' }
         ).then((res) => res.json());
-        cache = multisub.subplebbits;
-        setSubplebbits(multisub.subplebbits);
+
+        const filteredSubplebbits = multisub.subplebbits.filter((subplebbit: Subplebbit) => {
+          return !subplebbit.tags?.some((tag) => nsfwTags.includes(tag));
+        });
+
+        cache = filteredSubplebbits;
+        setSubplebbits(filteredSubplebbits);
       } catch (e) {
         console.warn(e);
       }
@@ -42,7 +61,18 @@ export const useDefaultSubplebbits = () => {
 
 export const useDefaultSubplebbitAddresses = () => {
   const defaultSubplebbits = useDefaultSubplebbits();
-  return useMemo(() => defaultSubplebbits.map((subplebbit: Subplebbit) => subplebbit.address), [defaultSubplebbits]);
+  const categorizedSubplebbits = useMemo(() => categorizeSubplebbits(defaultSubplebbits), [defaultSubplebbits]);
+  return useMemo(
+    () =>
+      [
+        ...categorizedSubplebbits.plebbitSubs,
+        ...categorizedSubplebbits.interestsSubs,
+        ...categorizedSubplebbits.randomSubs,
+        ...categorizedSubplebbits.projectsSubs,
+        ...categorizedSubplebbits.internationalSubs,
+      ].map((subplebbit) => subplebbit.address),
+    [categorizedSubplebbits],
+  );
 };
 
 export const useDefaultAndSubscriptionsSubplebbitAddresses = () => {

src/views/not-found/not-found.module.css

@@ -16,6 +16,24 @@
 
 .notFound p {
   margin: 1em auto;
-  width: 500px;
   font-size: 13px;
 }
+
+.content img {
+  display: block;
+  margin: auto;
+  border: 0;
+}
+
+@media (max-width: 640px) {
+  .content {
+    min-width: 0;
+    text-align: center;
+    width: auto;
+    padding: 10px;
+  }
+
+  .content img {
+    width: 100%;
+  }
+}

src/views/not-found/not-found.tsx

@@ -1,8 +1,19 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { create } from 'zustand';
 import styles from './not-found.module.css';
 
+const totalNotFoundImages = 2;
+
+const NotFoundImage = () => {
+  const [imagePath] = useState(() => {
+    const randomBannerIndex = Math.floor(Math.random() * totalNotFoundImages) + 1;
+    return `assets/not-found/not-found-${randomBannerIndex}.jpg`;
+  });
+
+  return <img src={imagePath} alt='' />;
+};
+
 interface NotFoundState {
   isNotFound: boolean;
   setNotFound: (isNotFound: boolean) => void;
@@ -25,6 +36,7 @@ const NotFound = () => {
   return (
     <div className={styles.content}>
       <div className={styles.notFound}>
+        <NotFoundImage />
         <h1>{t('page_not_found')}</h1>
         <p>{t('not_found_description')}</p>
       </div>

src/views/pending-post/pending-post.tsx

@@ -1,12 +1,14 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
+import { useTranslation } from 'react-i18next';
 import styles from './pending-post.module.css';
 import Post from '../../components/post';
 import useStateString from '../../hooks/use-state-string';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 
 const PendingPost = () => {
+  const { t } = useTranslation();
   const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
   const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
   const post = useAccountComment({ commentIndex });
@@ -21,14 +23,12 @@ const PendingPost = () => {
     }
   }, [post, navigate]);
 
-  const loadingString = stateString && (
-    <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
-  );
-
   return (
     <div className={styles.container}>
       <Post post={post} />
-      {loadingString}
+      <div className={styles.stateString}>
+        {stateString && stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : post?.state === 'failed' && t('failed')}
+      </div>
     </div>
   );
 };

src/views/post-page/post-page.module.css

@@ -40,6 +40,7 @@
 
 .loadingString {
   padding: 5px;
+  position: absolute;
 }
 
 .dropdown {

src/views/post-page/post-page.tsx

@@ -30,15 +30,14 @@ const PendingPost = ({ commentIndex }: { commentIndex?: number }) => {
 
 const Post = ({ post }: { post: Comment }) => {
   const { t } = useTranslation();
-  const { cid, deleted, depth, locked, removed, postCid, replyCount, subplebbitAddress, timestamp } = post || {};
+  const { cid, deleted, depth, locked, removed, postCid, replyCount, state, subplebbitAddress, timestamp } = post || {};
 
   const replies = useReplies(post);
 
   const isSingleComment = post?.parentCid ? true : false;
 
   const commentCount = replyCount === 0 ? t('no_comments') : replyCount === 1 ? t('one_comment') : t('all_comments', { count: replyCount });
   const stateString = useStateString(post);
-  const loadingString = stateString && <div className={styles.stateString}>{stateString !== 'failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>;
 
   const lockedState = deleted ? t('deleted') : locked ? t('locked') : removed ? t('removed') : '';
 
@@ -84,21 +83,28 @@ const Post = ({ post }: { post: Comment }) => {
           </div>
         </div>
       )}
-      <span className={styles.loadingString}>{loadingString && loadingString}</span>
+      <span className={styles.loadingString}>
+        {stateString && stateString !== 'Failed' ? (
+          <div className={styles.stateString}>
+            <LoadingEllipsis string={stateString} />
+          </div>
+        ) : (
+          state === 'failed' && t('failed')
+        )}
+      </span>
     </>
   );
 };
 
 const PostWithContext = ({ post }: { post: Comment }) => {
   const { t } = useTranslation();
-  const { deleted, locked, postCid, removed, subplebbitAddress } = post || {};
+  const { deleted, locked, postCid, removed, state, subplebbitAddress } = post || {};
 
   const postComment = useComment({ commentCid: post?.postCid });
   const topParentCid = findTopParentCidOfReply(post.cid, postComment);
   const topParentComment = useComment({ commentCid: topParentCid || '' });
 
   const stateString = useStateString(post);
-  const loadingString = stateString && <div className={styles.stateString}>{stateString !== 'failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>;
 
   return (
     <>
@@ -117,7 +123,13 @@ const PostWithContext = ({ post }: { post: Comment }) => {
             </div>
           </div>
           <div className={styles.spacer} />
-          {loadingString && loadingString}
+          {stateString && stateString !== 'Failed' ? (
+            <div className={styles.stateString}>
+              <LoadingEllipsis string={stateString} />
+            </div>
+          ) : (
+            state === 'failed' && t('failed')
+          )}
         </div>
         <div className={styles.singleCommentInfobar}>
           <div className={styles.singleCommentInfobarText}>{t('single_comment_notice')}</div>

src/views/settings/address-settings/address-settings.tsx

@@ -155,7 +155,6 @@ const AddressSettings = () => {
           </button>{' '}
           <span className={cryptoState.resolveClass}>{cryptoState.resolveString}</span>
         </div>
-        <div></div>
       </div>
     </div>
   );

src/views/settings/plebbit-options/plebbit-options.module.css

@@ -39,6 +39,7 @@
 
 .content textarea {
   height: 80px;
+  font-size: 13px;
   font-family: Arial, Helvetica, sans-serif;
 }
 

src/views/settings/plebbit-options/plebbit-options.tsx

@@ -73,7 +73,7 @@ const PlebbitRPCSettings = ({ isElectron }: { isElectron: boolean }) => {
       </div>
       {showInfo && (
         <div className={styles.plebbitRpcSettingsInfo}>
-          use a plebbit full node locally, or remotely via SSL
+          use a plebbit full node locally, or remotely with SSL
           <br />
           <ol>
             <li>get secret auth key from the node</li>