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

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 useChallengesStore from '../../../stores/use-challenges-store';
+import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
+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 { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
-import { isValidURL } from '../../../lib/utils/url-utils';
-import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
-import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
-import useEditCommentPrivileges from '../../../hooks/use-author-privileges';
-import useReplies from '../../../hooks/use-replies';
-import useStateString from '../../../hooks/use-state-string';
-import CommentMedia from '../../comment-media';
-import { canEmbed } from '../../embed';
-import LoadingEllipsis from '../../loading-ellipsis';
-import Markdown from '../../markdown';
-import PostMenuDesktop from './post-menu-desktop/';
+import styles from '../../views/post/post.module.css';
+import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
+import { isValidURL } from '../../lib/utils/url-utils';
+import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
+import useEditCommentPrivileges from '../../hooks/use-author-privileges';
+import useReplies from '../../hooks/use-replies';
+import useStateString from '../../hooks/use-state-string';
+import CommentMedia from '../comment-media';
+import { canEmbed } from '../embed';
+import LoadingEllipsis from '../loading-ellipsis';
+import Markdown from '../markdown';
+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 { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
-import { isAllView, isCatalogView, isPostPageView, isSubscriptionsView } from '../../../../lib/utils/view-utils';
+import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
+import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-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 { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
-import useEditCommentPrivileges from '../../../../hooks/use-author-privileges';
+import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
+import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
+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 { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
-import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
-import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
-import useReplies from '../../../hooks/use-replies';
-import useStateString from '../../../hooks/use-state-string';
-import CommentMedia from '../../comment-media';
-import LoadingEllipsis from '../../loading-ellipsis';
-import Markdown from '../../markdown';
+import styles from '../../views/post/post.module.css';
+import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
+import useReplies from '../../hooks/use-replies';
+import useStateString from '../../hooks/use-state-string';
+import CommentMedia from '../comment-media';
+import LoadingEllipsis from '../loading-ellipsis';
+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.module.css

@@ -1,473 +0,0 @@
-.thread {
-  clear: both;
-}
-
-.hrWrapper hr {
-  margin: 0; /* margin bugs Virtuoso scrolling */
-}
-
-.postDesktop .hrWrapper {
-  padding: 0.5em 0; /* instead of using margin, wrap with padding */
-}
-
-.hideButtonWrapper {
-  height: 15px;
-  width: 18px;
-  padding-right: 5px;
-  float: left;
-}
-
-.postDesktop .hideButton {
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 18px;
-  height: 18px;
-  display: inline-block;
-  image-rendering: pixelated;
-  cursor: pointer;
-  transform: translateY(-1px);
-}
-
-.postDesktopBlocked {
-  opacity: 0.5;
-}
-
-/* clearfix to contain float elements */
-.postDesktop::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-.postDesktop .hideThread {
-  background-image: var(--post-hide-button-background-image);
-}
-
-.postDesktop .unhideThread {
-  background-image: var(--post-unhide-button-background-image);
-}
-
-.postDesktop .fileText a {
-  color: var(--post-link-text-color);
-  text-decoration: var(--post-link-text-decoration);
-}
-
-.postDesktop .fileText a:hover {
-  color: var(--post-link-text-color-hover);
-  text-decoration: var(--post-link-text-decoration-hover);
-}
-
-.postDesktop .postInfo {
-  width: 100%;
-}
-
-.postDesktop .subject {
-  color: var(--post-subject-text-color);
-  font-weight: var(--post-subject-font-weight);
-}
-
-.postDesktop .name, .replyDesktop .name {
-  color: var(--post-name-text-color);
-  font-weight: var(--post-name-font-weight);
-}
-
-.postDesktop .postNumLink a, .postDesktop .postNumLink span, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span {
-  color: unset;
-  text-decoration: unset;
-}
-
-.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
-  color: var(--button-desktop-text-color-hover);
-}
-
-.postDesktop .stickyIconWrapper, .replyDesktop .stickyIconWrapper {
-  padding-left: 5px;
-  padding-right: 10px;
-}
-
-.postDesktop .closedIconWrapper {
-  padding-left: 5px;
-  padding-right: 10px;
-}
-
-.postDesktop .addPaddingInBetween {
-  padding-left: 8px;
-}
-
-.stickyIconWrapper img, .closedIconWrapper img {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  image-rendering: pixelated;
-}
-
-.postDesktop .addPaddingBeforeReply {
-  padding-right: 15px;
-}
-
-.postDesktop .closeMedia {
-  color: var(--button-desktop-text-color);
-  text-decoration: underline;
-  text-transform: capitalize;
-}
-
-.postDesktop .closeMedia:hover {
-  cursor: pointer;
-  color: var(--button-desktop-text-color-hover);
-}
-
-.postDesktop .replyButton {
-  padding-left: 10px;
-}
-
-.postDesktop .replyButton a {
-  color: var(--button-desktop-text-color);
-  text-decoration: var(--button-desktop-text-decoration);
-  text-transform: capitalize;
-}
-
-.postDesktop .replyButton a:hover {
-  cursor: pointer;
-  color: var(--button-desktop-text-color-hover);
-}
-
-.postDesktop .spacer {
-  width: 100%;
-  padding: 5px;
-}
-
-.postDesktop .postMessage, .replyDesktop .postMessage {
-  padding: 1em 40px;
-}
-
-.postDesktop .abbr {
-  color: var(--post-mobile-abbr-text-color);
-  font-size: var(--post-mobile-abbr-font-size);
-}
-
-.postDesktop .abbr a {
-  color: var(--post-link-text-color);
-  text-decoration: var(--post-content-link-text-decoration);
-}
-
-.postDesktop .abbr a:hover {
-  color: var(--post-link-text-color-hover);
-  text-decoration: var(--post-content-link-text-decoration-hover);
-}
-
-.postDesktop .summary {
-  padding-top: 10px;
-  padding-left: 23px;
-  position: relative;
-  color: var(--post-mobile-abbr-text-color);
-}
-
-.stateString {
-  color: var(--post-mobile-abbr-text-color);
-}
-
-.postDesktop .summary .expandButtonWrapper {
-  position: absolute;
-  top: 8px;
-  left: 2px;
-}
-
-.postDesktop .summary .expandButton {
-  background-image: var(--post-replies-expand-button-background-image);
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 18px;
-  height: 18px;
-  display: inline-block;
-  image-rendering: pixelated;
-  cursor: pointer;
-}
-
-.postDesktop .summary a {
-  color: var(--post-link-text-color);
-  text-decoration: var(--post-content-link-text-decoration);
-}
-
-.postDesktop .summary a:hover {
-  color: var(--post-link-text-color-hover);
-  text-decoration: var(--post-content-link-text-decoration-hover);
-}
-
-/* clearfix to contain float elements */
-.postMobile .postOp::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-.postMobile hr {
-  padding-bottom: 30px;
-}
-
-.postMobile .thread {
-  border-top: none;
-  margin: 0;
-  clear: both;
-  padding-bottom: 30px;
-}
-
-.quotePreview {
-  padding: 3px;
-}
-
-.postMobile .postContainer {
-  background-color: var(--post-mobile-background-color);
-}
-
-.postMobile .postOp {
-  display: inline;
-}
-
-.postMobile .postInfo {
-  overflow: hidden;
-  border-bottom: var(--post-mobile-info-border-bottom);
-  border-top: var(--post-mobile-info-border-top);
-  background-color: var(--post-mobile-info-background-color);
-  color: var(--post-mobile-info-text-color);
-  padding: 5px;
-  clear: left;
-}
-
-.postMobile .nameBlock {
-  clear: none;
-}
-
-.postMobile .nameBlock .name {
-  color: var(--post-mobile-name-text-color);
-  font-weight: var(--post-mobile-name-font-weight);
-}
-
-.postMobile .stickyIconWrapper {
-  padding: 0 5px;
-}
-
-.postMobile .closedIconWrapper {
-  padding: 0 5px;
-}
-
-.postMobile .addPaddingInBetween {
-  padding: 0 13px;
-}
-
-.postMobile .nameBlock .subject {
-  color: var(--post-mobile-subject-text-color);
-  font-weight: var(--post-mobile-subject-font-weight);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-}
-
-.postMobile .dateTimePostNum {
-  display: block;
-  text-align: right;
-}
-
-.postMobile .postNumLink a {
-  color: unset;
-  text-decoration: unset;
-}
-
-.postMobile .postMessage {
-  padding: 10px;
-  font-size: var(--post-mobile-content-font-size);
-}
-
-.postMobile .postLink {
-  clear: both;
-  background-color: var(--post-mobile-link-background-color);
-  border-top: var(--post-mobile-link-border-top);
-  border-bottom: var(--post-mobile-link-border-bottom);
-  padding: 5px;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.postMobile .postLink .info {
-  color: var(--post-mobile-link-info-text-color);
-}
-
-.postMobile .abbr {
-  color: var(--post-mobile-abbr-text-color);
-  font-size: var(--post-mobile-abbr-font-size);
-}
-
-.postMobile .abbr a {
-  color: var(--post-link-text-color);
-  text-decoration: var(--post-content-link-text-decoration);
-
-}
-
-.postMobile .abbr a:hover {
-  color: var(--post-link-text-color-hover);
-  text-decoration: var(--post-content-link-text-decoration-hover);
-}
-
-.replyDesktop {
-  padding-top: 4px;
-}
-
-.replyDesktop .sideArrows {
-  color: var(--side-arrows-color);
-  float: left;
-  padding: 0 2px;
-}
-
-.replyDesktop .reply {
-  background-color: var(--reply-desktop-background-color);
-  border: var(--reply-desktop-border);
-  border-left: none;
-  border-top: none;
-  display: table;
-  padding: 0 2px 2px 2px;
-}
-
-.replyDesktop .postInfo {
-  padding: 3px 3px 0 0;
-}
-
-.quoteLink {
-  color: var(--post-quotelink-text-color);
-  text-decoration: var(--post-quotelink-text-decoration);
-}
-
-.quoteLink:hover {
-  color: var(--post-quotelink-text-color-hover);
-  text-decoration: var(--post-quotelink-text-decoration-hover);
-  cursor: pointer;
-}
-
-.replyMobile {
-  padding-top: 7px;
-}
-
-.replyMobile .replyContainer {
-  background-color: var(--post-mobile-background-color);
-  border-bottom: var(--post-mobile-border-bottom);
-}
-
-/* clearfix to contain float elements */
-.replyMobile .replyContainer::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-.replyMobile .postInfo {
-  padding: 5px;
-  border-top: var(--post-mobile-info-border-top);
-  border-bottom: var(--post-mobile-info-border-bottom);
-  background-color: var(--post-mobile-info-background-color);
-  color: var(--post-mobile-info-text-color);
-}
-
-.replyMobile .nameBlock {
-  display: inline;
-  float: left;
-}
-
-.replyMobile .dateTimePostNum {
-  float: right;
-  text-align: right;
-}
-
-.capcodeMod {
-  color: var(--post-capcode-mod-text-color) !important;
-  text-transform: capitalize;
-}
-
-.pendingCid {
-  color: red !important;
-  font-weight: 700 !important;
-}
-
-.replyToPost {
-  cursor: pointer;
-}
-
-.removedContent, .deletedContent {
-  font-weight: 700;
-  color: red;
-}
-
-.removedContent {
-  text-transform: uppercase;
-}
-
-.backlink, .backlinkHash {
-  font-size: 0.8em;
-}
-
-.backlink {
-  padding-left: 5px;
-}
-
-.backlink, .backlinkHash {
-  color: var(--post-backlink-text-color);
-  text-decoration: var(--post-backlink-text-decoration);
-}
-
-.backlink:hover, .backlinkHash:hover {
-  color: var(--post-backlink-text-color-hover);
-  text-decoration: var(--post-backlink-text-decoration-hover);
-  cursor: pointer;
-}
-
-.mobileReplyBacklinks {
-  padding: 0 0;
-  padding-bottom: 3px;
-  line-height: 2;
-  background-color: var(--reply-backlink-mobile-background-color);
-  border-top: var(--reply-backlink-mobile-border-top);
-}
-
-.highlight {
-  background: var(--reply-highlight-background-color) !important;
-}
-
-.replyQuotePreview {
-  background:  var(--quote-preview-background);
-  border: var(--quote-preview-border);
-  border-right: var(--quote-preview-border-right);
-  border-bottom: var(--quote-preview-border-bottom);
-}
-
-.postDesktop .replyQuotePreviewSpacer {
-  padding: 1.5px 0;
-}
-
-@media (max-width: 640px) {
-  .replyQuotePreview {
-    margin-right: 10px;
-  }
-
-  .postDesktop {
-    display: none;
-  }
-
-  .replyDesktop {
-    display: none;
-  }
-}
-
-@media (min-width: 640px) {
-  .replyQuotePreview {
-    padding-right: 7px;
-    padding-left: 2px;
-  }
-
-  .postMobile {
-    display: none;
-  }
-
-  .replyMobile {
-    display: none;
-  }
-}

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 styles from '../post.module.css';
-import Post from '../post';
+import useIsMobile from '../../hooks/use-is-mobile';
+import styles from '../../views/post/post.module.css';
+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 }) => {