Merge pull request #360 from plebbit/development

Development
plebbit · Jun 29, 2024 · 35478f9 · 35478f9
2 parents 8c788cc + 89ea442
commit 35478f9
Show file tree

Hide file tree

Showing 10 changed files with 1,455 additions and 1,796 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@capacitor/app": "1.1.1",
     "@floating-ui/react": "0.26.1",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#ebad94cad75020c6eef2516fffc87f5a7b7181ff",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#a80ef4b155abf119e66c019576cbc1b338390e00",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "13.0.0",
     "@testing-library/user-event": "13.2.1",

diff --git a/src/app.tsx b/src/app.tsx
@@ -77,16 +77,14 @@ const App = () => {
         <Route element={globalLayout}>
           <Route element={feedLayout}>
             <Route element={<CheckRouteParams />}>
-              <Route path='/:sortType?' element={<Home />} />
               <Route path='/:sortType?/:timeFilterName?' element={<Home />} />
 
-              <Route path='/p/all/:sortType?' element={<All />} />
               <Route path='/p/all/:sortType?/:timeFilterName?' element={<All />} />
 
-              <Route path='/p/:subplebbitAddress/:sortType?' element={<Subplebbit />} />
               <Route path='/p/:subplebbitAddress/:sortType?/:timeFilterName?' element={<Subplebbit />} />
 
               <Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
+
               <Route path='/profile/:sortType?/:timeFilterName?' element={<Profile />} />
               <Route path='/profile/upvoted/:sortType?/:timeFilterName?' element={<Profile />} />
               <Route path='/profile/downvoted/:sortType?/:timeFilterName?' element={<Profile />} />

diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -1,7 +1,7 @@
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
-import { useAccount, useBlock, Role, useSubplebbitStats, useAccountComment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useBlock, Role, Subplebbit, useSubplebbitStats, useAccountComment } from '@plebbit/plebbit-react-hooks';
 import styles from './sidebar.module.css';
 import { getFormattedDate, getFormattedTimeDuration, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { findSubplebbitCreator } from '../../lib/utils/user-utils';
@@ -16,22 +16,6 @@ const { version } = packageJson;
 const commitRef = process.env.REACT_APP_COMMIT_REF;
 const isElectron = window.isElectron === true;
 
-interface sidebarProps {
-  address?: string | undefined;
-  cid?: string;
-  createdAt?: number;
-  description?: string;
-  isSubCreatedButNotYetPublished?: boolean;
-  downvoteCount?: number;
-  roles?: Record<string, Role>;
-  rules?: string[];
-  timestamp?: number;
-  title?: string;
-  updatedAt?: number;
-  upvoteCount?: number;
-  settings?: any;
-}
-
 const RulesList = ({ rules }: { rules: string[] }) => {
   const { t } = useTranslation();
   const markdownRules = rules.map((rule, index) => `${index + 1}. ${rule}`).join('\n');
@@ -64,7 +48,20 @@ const ModeratorsList = ({ roles }: { roles: Record<string, Role> }) => {
   );
 };
 
-const PostInfo = ({ address, cid, downvoteCount = 0, timestamp = 0, upvoteCount = 0 }: sidebarProps) => {
+const PostInfo = ({
+  address,
+  cid,
+  downvoteCount = 0,
+  timestamp = 0,
+  upvoteCount = 0,
+}: {
+  address?: string;
+  cid?: string;
+  downvoteCount?: number;
+  timestamp?: number;
+  updatedAt?: number;
+  upvoteCount?: number;
+}) => {
   const { t, i18n } = useTranslation();
   const { language } = i18n;
   const postScore = upvoteCount - downvoteCount;
@@ -88,7 +85,7 @@ const PostInfo = ({ address, cid, downvoteCount = 0, timestamp = 0, upvoteCount
   );
 };
 
-const ModerationTools = ({ address }: sidebarProps) => {
+const ModerationTools = ({ address }: { address?: string }) => {
   const { t } = useTranslation();
   const location = useLocation();
   const params = useParams();
@@ -125,24 +122,20 @@ const downloadAppLink = (() => {
   }
 })();
 
-const Sidebar = ({
-  address,
-  cid,
-  createdAt,
-  description,
-  downvoteCount = 0,
-  isSubCreatedButNotYetPublished,
-  roles,
-  rules,
-  timestamp = 0,
-  title,
-  updatedAt,
-  upvoteCount = 0,
-  settings,
-}: sidebarProps) => {
+interface sidebarProps {
+  comment?: Comment;
+  isSubCreatedButNotYetPublished?: boolean;
+  settings?: any;
+  subplebbit?: Subplebbit;
+}
+
+const Sidebar = ({ comment, isSubCreatedButNotYetPublished, settings, subplebbit }: sidebarProps) => {
   const { t } = useTranslation();
+  const { address, createdAt, description, roles, rules, title, updatedAt } = subplebbit || {};
+  const { cid, downvoteCount, timestamp, upvoteCount } = comment || {};
+
   const { allActiveUserCount, hourActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address });
-  const isOnline = updatedAt && updatedAt > Date.now() / 1000 - 60 * 30;
+  const isOnline = updatedAt && updatedAt > Date.now() / 1000 - 60 * 60;
   const onlineNotice = t('users_online', { count: hourActiveUserCount });
   const offlineNotice = updatedAt && t('posts_last_synced', { dateAgo: getFormattedTimeAgo(updatedAt) });
   const onlineStatus = isOnline ? onlineNotice : offlineNotice;
@@ -216,7 +209,7 @@ const Sidebar = ({
       {!isInHomeView && !isInHomeAboutView && !isInAllView && !isInPendingView && !isInSubplebbitsView && (
         <div className={styles.titleBox}>
           <Link className={styles.title} to={`/p/${address}`}>
-            {address}
+            {subplebbit?.address}
           </Link>
           <div className={styles.subscribeContainer}>
             <span className={styles.subscribeButton}>

diff --git a/src/views/about/about.tsx b/src/views/about/about.tsx
@@ -6,37 +6,15 @@ import { useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { isAuthorView, isProfileView } from '../../lib/utils/view-utils';
 
 const About = () => {
-  const { commentCid, subplebbitAddress } = useParams();
-  const subplebbit = useSubplebbit({ subplebbitAddress });
-  const comment = useComment({ commentCid });
-  const { address, createdAt, description, roles, rules, title, updatedAt } = subplebbit || {};
-  const { cid, downvoteCount, timestamp, upvoteCount } = comment || {};
-
   const location = useLocation();
   const isAuthor = isAuthorView(location.pathname);
   const isProfile = isProfileView(location.pathname);
 
-  return (
-    <div className={styles.content}>
-      {isProfile || isAuthor ? (
-        <AuthorSidebar />
-      ) : (
-        <Sidebar
-          address={address}
-          cid={cid}
-          createdAt={createdAt}
-          description={description}
-          downvoteCount={downvoteCount}
-          roles={roles}
-          rules={rules}
-          timestamp={timestamp}
-          title={title}
-          updatedAt={updatedAt}
-          upvoteCount={upvoteCount}
-        />
-      )}
-    </div>
-  );
+  const { commentCid, subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const comment = useComment({ commentCid });
+
+  return <div className={styles.content}>{isProfile || isAuthor ? <AuthorSidebar /> : <Sidebar comment={comment} subplebbit={subplebbit} />}</div>;
 };
 
 export default About;
diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx
@@ -148,15 +148,11 @@ const PostWithContext = ({ post }: { post: Comment }) => {
 const PostPage = () => {
   const params = useParams();
   const location = useLocation();
-
   const isInPendingView = isPendingView(location.pathname, params);
   const isInPostContextView = isPostContextView(location.pathname, params, location.search);
 
   const post = useComment({ commentCid: params?.commentCid });
-  const { cid, downvoteCount, timestamp, upvoteCount } = post || {};
-
   const subplebbit = useSubplebbit({ subplebbitAddress: params?.subplebbitAddress });
-  const { createdAt, description, roles, rules, updatedAt } = subplebbit || {};
 
   const postTitle = post.title?.slice(0, 40) || post?.content?.slice(0, 40);
   const subplebbitTitle = subplebbit?.title || subplebbit?.shortAddress;
@@ -171,19 +167,7 @@ const PostPage = () => {
   return (
     <div className={styles.content}>
       <div className={styles.sidebar}>
-        <Sidebar
-          address={params?.subplebbitAddress}
-          cid={cid}
-          createdAt={createdAt}
-          description={description}
-          downvoteCount={downvoteCount}
-          roles={roles}
-          rules={rules}
-          timestamp={timestamp}
-          title={subplebbit?.title}
-          updatedAt={updatedAt}
-          upvoteCount={upvoteCount}
-        />
+        <Sidebar subplebbit={subplebbit} comment={post} />
       </div>
       {isInPendingView && params?.accountCommentIndex ? (
         <PendingPost commentIndex={+params?.accountCommentIndex || undefined} />

diff --git a/src/views/settings/avatar-settings/avatar-settings.tsx b/src/views/settings/avatar-settings/avatar-settings.tsx
@@ -33,7 +33,7 @@ const AvatarPreview = ({ areSettingsShown, avatar, showSettings }: AvatarSetting
     <>
       <div className={styles.avatar} onClick={showSettings}>
         {imageUrl && state !== 'initializing' ? (
-          <img src={imageUrl} alt='avatar' />
+          <img src={imageUrl} alt='' />
         ) : (
           <span className={styles.emptyAvatar}>{areSettingsShown ? '–' + t('hide') : '+' + t('add')}</span>
         )}

diff --git a/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx b/src/views/subplebbit/subplebbit-settings/subplebbit-settings.tsx
@@ -837,7 +837,7 @@ const SubplebbitSettings = () => {
   const { t } = useTranslation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
   const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { address, challenges, createdAt, description, rules, shortAddress, settings, suggested, roles, title, updatedAt } = subplebbit || {};
+  const { address, challenges, description, rules, shortAddress, settings, suggested, roles, title } = subplebbit || {};
 
   const account = useAccount();
   const location = useLocation();
@@ -965,7 +965,7 @@ const SubplebbitSettings = () => {
     <div className={styles.content}>
       {!isInCreateSubplebbitView && (
         <div className={styles.sidebar}>
-          <Sidebar address={subplebbitAddress} createdAt={createdAt} description={description} roles={roles} rules={rules} title={title} updatedAt={updatedAt} />
+          <Sidebar subplebbit={subplebbit} />
         </div>
       )}
       {/* subplebbit.settings is private, only shows to the sub owner */}

diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx
@@ -24,8 +24,10 @@ const Subplebbit = () => {
   const { timeFilter } = useTimeFilter(sortType, timeFilterName);
   const { feed, hasMore, loadMore, reset, subplebbitAddressesWithNewerPosts } = useFeed({ subplebbitAddresses, sortType, filter: timeFilter });
 
-  const { subplebbit, error } = useSubplebbit({ subplebbitAddress });
-  const { createdAt, description, roles, rules, shortAddress, started, title, updatedAt, settings } = subplebbit || {};
+  const { error } = useSubplebbit({ subplebbitAddress });
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+
+  const { createdAt, shortAddress, started, title, updatedAt, settings } = subplebbit || {};
 
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
   const loadingString = (
@@ -40,7 +42,7 @@ const Subplebbit = () => {
     </>
   );
 
-  let isOnline = updatedAt && updatedAt > Date.now() / 1000 - 60 * 30;
+  let isOnline = updatedAt && updatedAt > Date.now() / 1000 - 60 * 60;
   const isSubCreatedButNotYetPublished = typeof createdAt === 'number' && !updatedAt;
 
   const { blocked } = useBlock({ address: subplebbitAddress });
@@ -88,17 +90,7 @@ const Subplebbit = () => {
   return (
     <div className={styles.content}>
       <div className={styles.sidebar}>
-        <Sidebar
-          address={subplebbitAddress}
-          createdAt={createdAt}
-          description={description}
-          isSubCreatedButNotYetPublished={started && isSubCreatedButNotYetPublished}
-          roles={roles}
-          rules={rules}
-          title={title}
-          updatedAt={updatedAt}
-          settings={settings}
-        />
+        <Sidebar subplebbit={subplebbit} isSubCreatedButNotYetPublished={started && isSubCreatedButNotYetPublished} settings={settings} />
       </div>
       <div className={styles.feed}>
         <NewerPostsButton reset={reset} subplebbitAddressesWithNewerPosts={subplebbitAddressesWithNewerPosts} />

diff --git a/src/views/subplebbits/subplebbits.tsx b/src/views/subplebbits/subplebbits.tsx
@@ -130,7 +130,7 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => {
 
   const postScore = upvoteCount === 0 && downvoteCount === 0 ? '•' : upvoteCount - downvoteCount || '•';
   const { allActiveUserCount } = useSubplebbitStats({ subplebbitAddress: address });
-  const isOnline = updatedAt && updatedAt > Date.now() / 1000 - 60 * 30;
+  const isOnline = updatedAt && updatedAt > Date.now() / 1000 - 60 * 60;
 
   return (
     <div className={styles.subplebbit}>