Skip to content

Commit

Permalink
Merge pull request #140 from plebbit/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@plebeius-eth
plebeius-eth authored Dec 22, 2023
2 parents 03b6229 + 0a0d96c commit 5f68247
Show file tree
Hide file tree
Showing 19 changed files with 249 additions and 183 deletions.
3 changes: 3 additions & 0 deletions src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,9 @@ function App() {
<Route path='/u/:authorAddress/c/:commentCid/about' element={<About />} />

<Route path='/inbox' element={<Inbox />} />
<Route path='inbox/unread' element={<Inbox />} />
<Route path='inbox/commentreplies' element={<Inbox />} />
<Route path='inbox/postreplies' element={<Inbox />} />
</Route>
</Route>
</Routes>
Expand Down
5 changes: 1 addition & 4 deletions src/components/challenge-modal/challenge-modal.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,9 @@
margin-top: 20px;
}

.counter {
margin-right: auto;
}

.buttons {
position: absolute;
left: 20px;
}

.challengeFooter button {
Expand Down
35 changes: 21 additions & 14 deletions src/components/header/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
isSubplebbitView,
isSubmitView,
isSubplebbitSubmitView,
isPendingView,
isProfileView,
isProfileCommentsView,
isProfileSubmittedView,
Expand Down Expand Up @@ -188,6 +189,7 @@ const HeaderTabs = () => {
const isAllPage = isAllView(location.pathname);
const isAuthorPage = isAuthorView(location.pathname);
const isHomePage = isHomeView(location.pathname, params);
const isPendingPage = isPendingView(location.pathname, params);
const isPostPage = isPostView(location.pathname, params);
const isProfilePage = isProfileView(location.pathname);
const isSubplebbitPage = isSubplebbitView(location.pathname, params);
Expand All @@ -197,8 +199,10 @@ const HeaderTabs = () => {
return <CommentsButton />;
} else if (isHomePage || (isSubplebbitPage && !isSubplebbitSubmitPage) || isAllPage) {
return <SortItems />;
} else if (isProfilePage || isAuthorPage) {
} else if ((isProfilePage || isAuthorPage) && !isPendingPage) {
return <AuthorHeaderTabs />;
} else if (isPendingPage) {
return <span className={styles.pageName}>pending</span>;
}
return null;
};
Expand All @@ -208,35 +212,38 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
const { t } = useTranslation();
const params = useParams();
const location = useLocation();
const isAuthor = isAuthorView(location.pathname);
const isPost = isPostView(location.pathname, params);
const isProfile = isProfileView(location.pathname);
const isSubplebbit = isSubplebbitView(location.pathname, params);
const isSubmit = isSubmitView(location.pathname);
const isSubplebbitSubmit = isSubplebbitSubmitView(location.pathname, params);
const isSettings = isSettingsView(location.pathname);
const isAuthorPage = isAuthorView(location.pathname);
const isInboxPage = isInboxView(location.pathname);
const isPostPage = isPostView(location.pathname, params);
const isProfilePage = isProfileView(location.pathname);
const isSubplebbitPage = isSubplebbitView(location.pathname, params);
const isSubmitPage = isSubmitView(location.pathname);
const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
const isSettingsPage = isSettingsView(location.pathname);

const subplebbitTitle = <Link to={`/p/${params.subplebbitAddress}`}>{title || shortAddress}</Link>;
const submitTitle = <span className={styles.submitTitle}>{t('submit')}</span>;
const profileTitle = <Link to='/profile'>{account?.author?.shortAddress}</Link>;
const authorTitle = <Link to={`/u/${params.authorAddress}/c/${params.commentCid}`}>{params.authorAddress && getShortAddress(params.authorAddress)}</Link>;

if (isSubplebbitSubmit) {
if (isSubplebbitSubmitPage) {
return (
<>
{subplebbitTitle}: {submitTitle}
</>
);
} else if (isPost || isSubplebbit) {
} else if (isPostPage || isSubplebbitPage) {
return subplebbitTitle;
} else if (isSubmit) {
} else if (isSubmitPage) {
return submitTitle;
} else if (isSettings) {
} else if (isSettingsPage) {
return t('preferences');
} else if (isProfile) {
} else if (isProfilePage) {
return profileTitle;
} else if (isAuthor) {
} else if (isAuthorPage) {
return authorTitle;
} else if (isInboxPage) {
return 'inbox';
}
return null;
};
Expand Down
25 changes: 14 additions & 11 deletions src/components/post/comment-tools/comment-tools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface CommentToolsProps {
cid: string;
failed?: boolean;
hasLabel?: boolean;
index?: number;
isReply?: boolean;
isSingleReply?: boolean;
parentCid?: string;
Expand All @@ -21,15 +22,15 @@ interface CommentToolsProps {
showReplyForm?: () => void;
}

const PostTools = ({ author, cid, hasLabel, subplebbitAddress, replyCount = 0 }: CommentToolsProps) => {
const PostTools = ({ author, cid, hasLabel, index, subplebbitAddress, replyCount = 0 }: CommentToolsProps) => {
const { t } = useTranslation();
const validReplyCount = isNaN(replyCount) ? 0 : replyCount;
const commentCount = validReplyCount === 0 ? t('post_no_comments') : `${validReplyCount} ${validReplyCount === 1 ? t('post_comment') : t('post_comments')}`;

return (
<>
<li className={`${styles.button} ${!hasLabel ? styles.firstButton : ''}`}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`}>{commentCount}</Link>
<Link to={cid ? `/p/${subplebbitAddress}/c/${cid}` : `/profile/${index}`}>{commentCount}</Link>
</li>
<ShareMenu cid={cid} subplebbitAddress={subplebbitAddress} />
<li className={styles.button}>
Expand All @@ -43,12 +44,13 @@ const PostTools = ({ author, cid, hasLabel, subplebbitAddress, replyCount = 0 }:
);
};

const ReplyTools = ({ cid, hasLabel, showReplyForm, subplebbitAddress }: CommentToolsProps) => {
const ReplyTools = ({ cid, hasLabel, index, showReplyForm, subplebbitAddress }: CommentToolsProps) => {
const { t } = useTranslation();

return (
<>
<li className={`${styles.button} ${!hasLabel ? styles.firstButton : ''}`}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`}>{t('reply_permalink')}</Link>
<Link to={cid ? `/p/${subplebbitAddress}/c/${cid}` : `/profile/${index}`}>{t('reply_permalink')}</Link>
</li>
<li className={styles.button}>
<span>{t('reply_embed')}</span>
Expand All @@ -63,23 +65,23 @@ const ReplyTools = ({ cid, hasLabel, showReplyForm, subplebbitAddress }: Comment
);
};

const SingleReplyTools = ({ cid, hasLabel, parentCid, subplebbitAddress }: CommentToolsProps) => {
const SingleReplyTools = ({ cid, hasLabel, index, parentCid, subplebbitAddress }: CommentToolsProps) => {
const { t } = useTranslation();
const comment = useComment({ commentCid: parentCid });

return (
<>
<li className={`${styles.button} ${!hasLabel ? styles.firstButton : ''}`}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`}>{t('reply_permalink')}</Link>
<Link to={cid ? `/p/${subplebbitAddress}/c/${cid}` : `/profile/${index}`}>{t('reply_permalink')}</Link>
</li>
<li className={styles.button}>
<span>{t('save')}</span>
</li>
<li className={styles.button}>
<Link to={`/p/${subplebbitAddress}/c/${parentCid}`}>context</Link>
<Link to={cid ? `/p/${subplebbitAddress}/c/${parentCid}` : `/profile/${index}`}>context</Link>
</li>
<li className={styles.button}>
<Link to={`/p/${subplebbitAddress}/c/${parentCid}`}>full comments ({comment?.replyCount || 0})</Link>
<Link to={cid ? `/p/${subplebbitAddress}/c/${parentCid}` : `/profile/${index}`}>full comments ({comment?.replyCount || 0})</Link>
</li>
</>
);
Expand All @@ -100,6 +102,7 @@ const CommentTools = ({
cid,
failed,
hasLabel = false,
index,
isReply,
isSingleReply,
parentCid,
Expand All @@ -118,12 +121,12 @@ const CommentTools = ({
{hasLabel && <CommentToolsLabel cid={cid} failed={failed} isReply={isReply} spoiler={spoiler} subplebbitAddress={subplebbitAddress} />}
{isReply ? (
isSingleReply ? (
<SingleReplyTools cid={cid} hasLabel={hasLabel} parentCid={parentCid} subplebbitAddress={subplebbitAddress} />
<SingleReplyTools cid={cid} hasLabel={hasLabel} index={index} parentCid={parentCid} subplebbitAddress={subplebbitAddress} />
) : (
<ReplyTools cid={cid} hasLabel={hasLabel} parentCid={parentCid} showReplyForm={showReplyForm} subplebbitAddress={subplebbitAddress} />
<ReplyTools cid={cid} hasLabel={hasLabel} index={index} parentCid={parentCid} showReplyForm={showReplyForm} subplebbitAddress={subplebbitAddress} />
)
) : (
<PostTools author={author} cid={cid} hasLabel={hasLabel} subplebbitAddress={subplebbitAddress} replyCount={replyCount} />
<PostTools author={author} cid={cid} hasLabel={hasLabel} index={index} subplebbitAddress={subplebbitAddress} replyCount={replyCount} />
)}
{isMod && <ModTools cid={cid} />}
</ul>
Expand Down
41 changes: 9 additions & 32 deletions src/components/post/comment-tools/hide-menu/hide-menu.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,46 +9,23 @@
.modal {
z-index: 7;
background-color: var(--background);
padding: 5px;
border: 1px solid var(--border-text);
outline: none;
font-size: 11px;
box-shadow: var(--box-shadow-modal);
}

.modal input {
margin-right: 3px;
font-size: 12px;
}

.menuItem {
color: var(--text-primary);
padding-bottom: 5px;
}

.menuReason {
padding-bottom: 2px;
}

.menuItem input[type="text"] {
padding: 2px;
box-shadow: var(--box-shadow-input);
margin-top: 2px;
}

.menuItem button {
text-transform: capitalize;
}

.menuItem {
cursor: pointer;
padding: 2px 3px 1px 3px;
display: block;
}

.modalTitle {
background: var(--background-primary);
padding-bottom: 2px;
margin-bottom: 6px;
text-align: center;
.menuItem a {
color: var(--text-primary);
font-size: 13px;
font-weight: bold;
text-decoration: none;
}

.menuItem:hover {
background-color: var(--background-primary);
}
37 changes: 19 additions & 18 deletions src/components/post/comment-tools/hide-menu/hide-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,24 @@ import { getShortAddress } from '@plebbit/plebbit-js';
type HideMenuProps = {
author?: Author | undefined;
cid?: string;
toggleIsMenuOpen?: () => void;
subplebbitAddress?: string;
};

const BlockAuthorButton = ({ author }: HideMenuProps) => {
const BlockAuthorButton = ({ author, toggleIsMenuOpen }: HideMenuProps) => {
// const { t } = useTranslation();
const { blocked, unblock, block } = useBlock({ address: author?.address });

return (
<>
<div className={styles.menuItem} onClick={blocked ? unblock : block}>
{blocked ? 'unblock' : 'block'} u/{author?.shortAddress}
</div>
</>
<div
className={styles.menuItem}
onClick={() => {
(blocked ? unblock : block)();
toggleIsMenuOpen && toggleIsMenuOpen();
}}
>
{blocked ? 'unblock' : 'block'} u/{author?.shortAddress}
</div>
);
};

Expand All @@ -29,11 +34,9 @@ const BlockSubplebbitButton = ({ subplebbitAddress }: HideMenuProps) => {
const { blocked, unblock, block } = useBlock({ address: subplebbitAddress });

return (
<>
<div className={styles.menuItem} onClick={blocked ? unblock : block}>
{blocked ? 'unblock' : 'block'} p/{subplebbitAddress && getShortAddress(subplebbitAddress)}
</div>
</>
<div className={styles.menuItem} onClick={blocked ? unblock : block}>
{blocked ? 'unblock' : 'block'} p/{subplebbitAddress && getShortAddress(subplebbitAddress)}
</div>
);
};

Expand All @@ -42,17 +45,16 @@ const BlockCommentButton = ({ cid }: HideMenuProps) => {
const { blocked, unblock, block } = useBlock({ address: cid });

return (
<>
<div className={styles.menuItem} onClick={blocked ? unblock : block}>
{blocked ? 'unhide' : 'hide'} post
</div>
</>
<div className={styles.menuItem} onClick={blocked ? unblock : block}>
{blocked ? 'unhide' : 'hide'} post
</div>
);
};

const HideMenu = ({ author, cid, subplebbitAddress }: HideMenuProps) => {
const { t } = useTranslation();
const [isHideMenuOpen, setIsHideMenuOpen] = useState(false);
const toggleIsMenuOpen = () => setIsHideMenuOpen(!isHideMenuOpen);

const { refs, floatingStyles, context } = useFloating({
placement: 'bottom-start',
Expand All @@ -78,9 +80,8 @@ const HideMenu = ({ author, cid, subplebbitAddress }: HideMenuProps) => {
{isHideMenuOpen && (
<FloatingFocusManager context={context} modal={false}>
<div className={styles.modal} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
<div className={styles.modalTitle}>hide</div>
<div className={styles.modMenu}>
<BlockCommentButton cid={cid} />
<BlockCommentButton cid={cid} toggleIsMenuOpen={toggleIsMenuOpen} />
<BlockSubplebbitButton subplebbitAddress={subplebbitAddress} />
<BlockAuthorButton author={author} />
</div>
Expand Down
21 changes: 6 additions & 15 deletions src/components/post/comment-tools/mod-menu/mod-menu.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,22 @@
.modal {
z-index: 7;
background-color: var(--background);
padding: 5px;
padding: 1px 0;
padding-top: 2px;
color: var(--text);
font-size: 11px;
font-size: 12px;
border: 1px solid var(--border-text);
box-shadow: var(--box-shadow-modal);
width: 200px;
}

.modalTitle {
background: var(--background-primary);
padding-bottom: 2px;
margin-bottom: 6px;
text-align: center;
color: var(--text-primary);
font-size: 13px;
font-weight: bold;
}

.modal input[type="checkbox"] {
margin-right: 3px;
outline: none;
cursor: pointer;
}

.menuItem {
padding-bottom: 5px;
padding: 2px 3px 1px 3px;
text-transform: lowercase;
cursor: pointer;
}
Expand All @@ -54,13 +44,14 @@
.bottom {
clear: both;
display: block;
padding-bottom: 3px;
}

.bottom button {
text-transform: lowercase;
cursor: pointer;
padding: 2px 6px 3px;
margin-left: 2px;
margin-bottom: 2px;
}

.optional {
Expand Down
1 change: 0 additions & 1 deletion src/components/post/comment-tools/mod-menu/mod-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ const ModTools = ({ cid }: ModToolsProps) => {
<FloatingFocusManager context={context} modal={false}>
<div className={styles.modal} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
<div className={styles.modTools}>
<div className={styles.modalTitle}>moderation</div>
<div className={styles.menuItem}>
<label>
<input onChange={onCheckbox} checked={publishCommentEditOptions.removed} type='checkbox' id='removed' />
Expand Down
Loading

0 comments on commit 5f68247

Please sign in to comment.