refactor: rename PostPage to Post, export Post component from Post view

src/app.tsx

@@ -9,7 +9,7 @@ import Catalog from './views/catalog';
 import Home from './views/home';
 import NotFound from './views/not-found';
 import PendingPost from './views/pending-post';
-import PostPage from './views/post-page';
+import Post from './views/post';
 import { DesktopBoardButtons, MobileBoardButtons } from './components/board-buttons';
 import BoardHeader from './components/board-header';
 import ChallengeModal from './components/challenge-modal';
@@ -85,16 +85,16 @@ const App = () => {
             <Route path='/p/:subplebbitAddress/catalog' element={<Catalog />} />
             <Route path='/p/:subplebbitAddress/catalog/settings' element={<Catalog />} />
 
-            <Route path='/p/:subplebbitAddress/c/:commentCid' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/c/:commentCid' element={<Post />} />
-            <Route path='/p/:subplebbitAddress/c/:commentCid/settings' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/c/:commentCid/settings' element={<Post />} />
-            <Route path='/p/:subplebbitAddress/description' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/description' element={<Post />} />
-            <Route path='/p/:subplebbitAddress/description/settings' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/description/settings' element={<Post />} />
-            <Route path='/p/:subplebbitAddress/rules' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/rules' element={<Post />} />
-            <Route path='/p/:subplebbitAddress/rules/settings' element={<PostPage />} />
+            <Route path='/p/:subplebbitAddress/rules/settings' element={<Post />} />
 
             <Route path='/p/all/:timeFilterName?' element={<Board />} />
             <Route path='/p/all/:timeFilterName?/settings' element={<Board />} />
-            <Route path='/p/all/description' element={<PostPage />} />
+            <Route path='/p/all/description' element={<Post />} />
             <Route path='/p/all/catalog/:timeFilterName?' element={<Catalog />} />
             <Route path='/p/all/catalog/:timeFilterName?/settings' element={<Catalog />} />
 

src/components/catalog-row/catalog-row.tsx

@@ -10,7 +10,7 @@ import { isAllView } from '../../lib/utils/view-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useEditCommentPrivileges from '../../hooks/use-author-privileges';
-import PostMenuDesktop from '../post/post-desktop/post-menu-desktop/';
+import PostMenuDesktop from '../post-desktop/post-menu-desktop';
 import styles from './catalog-row.module.css';
 import _ from 'lodash';
 

src/components/edit-menu/edit-menu.tsx

@@ -3,10 +3,10 @@ import { Trans, useTranslation } from 'react-i18next';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { PublishCommentEditOptions, useComment, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
 import styles from './edit-menu.module.css';
-import { alertChallengeVerificationFailed } from '../../../lib/utils/challenge-utils';
+import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
-import useChallengesStore from '../../../stores/use-challenges-store';
+import useChallengesStore from '../../stores/use-challenges-store';
 import _ from 'lodash';
-import useIsMobile from '../../../hooks/use-is-mobile';
+import useIsMobile from '../../hooks/use-is-mobile';
 
 const { addChallenge } = useChallengesStore.getState();
 

src/components/post-desktop/post-desktop.tsx

@@ -3,22 +3,22 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { Comment, useAccount, useBlock, useComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
-import styles from '../post.module.css';
+import styles from '../../views/post/post.module.css';
-import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
+import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
-import { isValidURL } from '../../../lib/utils/url-utils';
+import { isValidURL } from '../../lib/utils/url-utils';
-import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
+import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
-import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
+import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
-import useEditCommentPrivileges from '../../../hooks/use-author-privileges';
+import useEditCommentPrivileges from '../../hooks/use-author-privileges';
-import useReplies from '../../../hooks/use-replies';
+import useReplies from '../../hooks/use-replies';
-import useStateString from '../../../hooks/use-state-string';
+import useStateString from '../../hooks/use-state-string';
-import CommentMedia from '../../comment-media';
+import CommentMedia from '../comment-media';
-import { canEmbed } from '../../embed';
+import { canEmbed } from '../embed';
-import LoadingEllipsis from '../../loading-ellipsis';
+import LoadingEllipsis from '../loading-ellipsis';
-import Markdown from '../../markdown';
+import Markdown from '../markdown';
-import PostMenuDesktop from './post-menu-desktop/';
+import PostMenuDesktop from './post-menu-desktop';
 import EditMenu from '../edit-menu/edit-menu';
 import ReplyQuotePreview from '../reply-quote-preview';
-import { PostProps } from '../post';
+import { PostProps } from '../../views/post/post';
 import Timestamp from '../timestamp';
 import _ from 'lodash';
 

src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
 import styles from './post-menu-desktop.module.css';
-import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
+import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
-import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
+import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
-import { isAllView, isCatalogView, isPostPageView, isSubscriptionsView } from '../../../../lib/utils/view-utils';
+import { isAllView, isCatalogView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
 import _ from 'lodash';
 
 interface PostMenuDesktopProps {

src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx

@@ -4,9 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import styles from './post-menu-mobile.module.css';
-import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
+import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
-import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
+import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
-import useEditCommentPrivileges from '../../../../hooks/use-author-privileges';
+import useEditCommentPrivileges from '../../../hooks/use-author-privileges';
 import EditMenu from '../../edit-menu/edit-menu';
 
 interface PostMenuMobileProps {

src/components/post-mobile/post-mobile.tsx

@@ -3,18 +3,18 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { Comment, useAccount, useComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
-import styles from '../post.module.css';
+import styles from '../../views/post/post.module.css';
-import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
+import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
-import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
+import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
-import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
+import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
-import useReplies from '../../../hooks/use-replies';
+import useReplies from '../../hooks/use-replies';
-import useStateString from '../../../hooks/use-state-string';
+import useStateString from '../../hooks/use-state-string';
-import CommentMedia from '../../comment-media';
+import CommentMedia from '../comment-media';
-import LoadingEllipsis from '../../loading-ellipsis';
+import LoadingEllipsis from '../loading-ellipsis';
-import Markdown from '../../markdown';
+import Markdown from '../markdown';
 import ReplyQuotePreview from '../reply-quote-preview';
 import PostMenuMobile from './post-menu-mobile';
-import { PostProps } from '../post';
+import { PostProps } from '../../views/post/post';
 import Timestamp from '../timestamp';
 import _ from 'lodash';
 

src/components/post/index.ts

@@ -1 +0,0 @@
-export { default } from './post';

src/components/post/post.tsx

@@ -1,35 +0,0 @@
-import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks';
-import useIsMobile from '../../hooks/use-is-mobile';
-import styles from './post.module.css';
-import PostDesktop from './post-desktop';
-import PostMobile from './post-mobile';
-
-export interface PostProps {
-  index?: number;
-  isHidden?: boolean;
-  post?: any;
-  reply?: any;
-  roles?: Role[];
-  showAllReplies?: boolean;
-  showReplies?: boolean;
-  openReplyModal?: (cid: string) => void;
-}
-
-const Post = ({ post, showAllReplies = false, showReplies = true, openReplyModal }: PostProps) => {
-  const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
-  const isMobile = useIsMobile();
-
-  return (
-    <div className={styles.thread}>
-      <div className={styles.postContainer}>
-        {isMobile ? (
-          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
-        ) : (
-          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Post;

src/components/reply-quote-preview/reply-quote-preview.tsx

@@ -3,9 +3,9 @@ import { createPortal } from 'react-dom';
 import { Link } from 'react-router-dom';
 import { Comment, useAccount } from '@plebbit/plebbit-react-hooks';
 import { useFloating, offset, shift, size, autoUpdate, Placement } from '@floating-ui/react';
-import useIsMobile from '../../../hooks/use-is-mobile';
+import useIsMobile from '../../hooks/use-is-mobile';
-import styles from '../post.module.css';
+import styles from '../../views/post/post.module.css';
-import Post from '../post';
+import { Post } from '../../views/post';
 
 interface ReplyQuotePreviewProps {
   isBacklinkReply?: boolean;

src/components/subplebbit-description/subplebbit-description.tsx

@@ -1,4 +1,4 @@
-import Post from '../post';
+import { Post } from '../../views/post';
 import { useTranslation } from 'react-i18next';
 import { isAllView } from '../../lib/utils/view-utils';
 import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';

src/components/subplebbit-rules/subplebbit-rules.tsx

@@ -1,4 +1,4 @@
-import Post from '../post';
+import { Post } from '../../views/post';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 

src/components/timestamp/timestamp.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { getFormattedDate, getFormattedTimeAgo } from '../../../lib/utils/time-utils';
+import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
 
 const Timestamp = ({ timestamp }: { timestamp: number }) => {

src/views/board/board.tsx

@@ -12,7 +12,7 @@ import useTimeFilter from '../../hooks/use-time-filter';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useSortingStore from '../../stores/use-sorting-store';
 import LoadingEllipsis from '../../components/loading-ellipsis';
-import Post from '../../components/post';
+import { Post } from '../post';
 import ReplyModal from '../../components/reply-modal';
 import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';

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

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { isSettingsView } from '../../lib/utils/view-utils';
-import Post from '../../components/post';
+import { Post } from '../post';
 import SettingsModal from '../../components/settings-modal';
 
 const PendingPost = () => {

src/views/post-page/index.ts

@@ -1 +0,0 @@
-export { default } from './post-page';

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

@@ -1,4 +0,0 @@
-.content {
-  margin-bottom: 150px;
-  overflow-x: hidden;
-}

src/views/post/index.ts

@@ -0,0 +1 @@
+export { Post, default } from './post';

src/views/post/post.module.css

@@ -1,3 +1,8 @@
+.content {
+  margin-bottom: 150px;
+  overflow-x: hidden;
+}
+
 .thread {
   clear: both;
 }

src/views/post/post.tsx

@@ -1,15 +1,45 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Comment, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useLocation, useParams } from 'react-router-dom';
-import styles from './post-page.module.css';
 import { isDescriptionView, isRulesView, isSettingsView } from '../../lib/utils/view-utils';
+import useIsMobile from '../../hooks/use-is-mobile';
 import useReplyModal from '../../hooks/use-reply-modal';
-import Post from '../../components/post';
+import PostDesktop from '../../components/post-desktop';
+import PostMobile from '../../components/post-mobile';
 import ReplyModal from '../../components/reply-modal';
 import SettingsModal from '../../components/settings-modal';
 import SubplebbitDescription from '../../components/subplebbit-description';
 import SubplebbitRules from '../../components/subplebbit-rules';
+import styles from './post.module.css';
+
+export interface PostProps {
+  index?: number;
+  isHidden?: boolean;
+  post?: any;
+  reply?: any;
+  roles?: Role[];
+  showAllReplies?: boolean;
+  showReplies?: boolean;
+  openReplyModal?: (cid: string) => void;
+}
+
+export const Post = ({ post, showAllReplies = false, showReplies = true, openReplyModal }: PostProps) => {
+  const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.thread}>
+      <div className={styles.postContainer}>
+        {isMobile ? (
+          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
+        ) : (
+          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
+        )}
+      </div>
+    </div>
+  );
+};
 
 const PostPage = () => {
   const { t } = useTranslation();