feat(subplebbits): add settings route, header title

This commit is contained in:
plebeius.eth
2024-01-01 22:26:33 +01:00
parent 5fa218dc79
commit 91be80f3e5
8 changed files with 41 additions and 19 deletions

View File

@@ -13,6 +13,7 @@ import Profile from './views/profile';
import Settings from './views/settings';
import Submit from './views/submit';
import Subplebbit from './views/subplebbit';
import SubplebbitSettings from './views/subplebbit/subplebbit-settings';
import Subplebbits from './views/subplebbits';
import AccountBar from './components/account-bar/';
import ChallengeModal from './components/challenge-modal';
@@ -73,9 +74,9 @@ function App() {
<Route path='/profile/comments/:sortType?/:timeFilterName?' element={<Profile />} />
<Route path='/profile/submitted/:sortType?/:timeFilterName?' element={<Profile />} />
<Route path='u/:authorAddress/c/:commentCid?/:sortType?/:timeFilterName?' element={<Author />} />
<Route path='u/:authorAddress/c/:commentCid?/comments/:sortType?/:timeFilterName?' element={<Author />} />
<Route path='u/:authorAddress/c/:commentCid?/submitted/:sortType?/:timeFilterName?' element={<Author />} />
<Route path='/u/:authorAddress/c/:commentCid?/:sortType?/:timeFilterName?' element={<Author />} />
<Route path='/u/:authorAddress/c/:commentCid?/comments/:sortType?/:timeFilterName?' element={<Author />} />
<Route path='/u/:authorAddress/c/:commentCid?/submitted/:sortType?/:timeFilterName?' element={<Author />} />
</Route>
<Route element={pagesLayout}>
<Route path='/submit' element={<Submit />} />
@@ -87,6 +88,7 @@ function App() {
<Route path='/p/:subplebbitAddress/about' element={<About />} />
<Route path='/settings' element={<Settings />} />
<Route path='/p/:subplebbitAddress/settings' element={<SubplebbitSettings />} />
<Route path='/profile/:accountCommentIndex' element={<PendingPost />} />
<Route path='/profile/about' element={<About />} />
@@ -94,9 +96,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 path='/inbox/unread' element={<Inbox />} />
<Route path='/inbox/commentreplies' element={<Inbox />} />
<Route path='/inbox/postreplies' element={<Inbox />} />
<Route path='/communities' element={<Subplebbits />} />
<Route path='/communities/mine' element={<Subplebbits />} />

View File

@@ -13,15 +13,16 @@ import {
isDownvotedView,
isHomeView,
isInboxView,
isPostView,
isSettingsView,
isSubplebbitView,
isSubmitView,
isSubplebbitSubmitView,
isPendingView,
isPostView,
isProfileView,
isProfileCommentsView,
isProfileSubmittedView,
isSettingsView,
isSubmitView,
isSubplebbitView,
isSubplebbitSettingsView,
isSubplebbitSubmitView,
isSubplebbitsView,
isUpvotedView,
} from '../../lib/utils/view-utils';
@@ -229,12 +230,13 @@ const HeaderTabs = () => {
const isPostPage = isPostView(location.pathname, params);
const isProfilePage = isProfileView(location.pathname);
const isSubplebbitPage = isSubplebbitView(location.pathname, params);
const isSubplebbitSettingsPage = isSubplebbitSettingsView(location.pathname, params);
const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
const isSubplebbitsPage = isSubplebbitsView(location.pathname);
if (isPostPage) {
return <CommentsButton />;
} else if (isHomePage || (isSubplebbitPage && !isSubplebbitSubmitPage) || isAllPage) {
} else if (isHomePage || (isSubplebbitPage && !isSubplebbitSubmitPage && !isSubplebbitSettingsPage) || isAllPage) {
return <SortItems />;
} else if ((isProfilePage || isAuthorPage) && !isPendingPage) {
return <AuthorHeaderTabs />;
@@ -261,6 +263,7 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
const isSubmitPage = isSubmitView(location.pathname);
const isSubplebbitPage = isSubplebbitView(location.pathname, params);
const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
const isSubplebbitSettingsPage = isSubplebbitSettingsView(location.pathname, params);
const isSubplebbitsPage = isSubplebbitsView(location.pathname);
const subplebbitTitle = <Link to={`/p/${params.subplebbitAddress}`}>{title || shortAddress}</Link>;
@@ -274,8 +277,14 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
{subplebbitTitle}: {submitTitle}
</>
);
} else if (isPostPage || isSubplebbitPage) {
} else if (isPostPage || (isSubplebbitPage && !isSubplebbitSettingsPage)) {
return subplebbitTitle;
} else if (isSubplebbitSettingsPage) {
return (
<>
{subplebbitTitle}: {t('settings')}
</>
);
} else if (isSubmitPage) {
return submitTitle;
} else if (isSettingsPage) {
@@ -311,16 +320,17 @@ const Header = () => {
const isSubplebbitPage = isSubplebbitView(location.pathname, params);
const isSubmitPage = isSubmitView(location.pathname);
const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
const isSubplebbitSettingsPage = isSubplebbitSettingsView(location.pathname, params);
const account = useAccount();
const authorComment = useComment({ commentCid: params?.commentCid });
const author = isProfilePage ? account?.author : isAuthorPage ? authorComment?.author : null;
const { imageUrl } = useAuthorAvatar({ author });
const hasFewTabs = isPostPage || isSubmitPage || isSubplebbitSubmitPage || isSettingsPage || isInboxPage;
const hasFewTabs = isPostPage || isSubmitPage || isSubplebbitSubmitPage || isSubplebbitSettingsPage || isSettingsPage || isInboxPage;
const hasStickyHeader =
isHomePage ||
(isSubplebbitPage && !isSubplebbitSubmitPage && !isPostPage && !isAboutPage) ||
(isSubplebbitPage && !isSubplebbitSubmitPage && !isSubplebbitSettingsPage && !isPostPage && !isAboutPage) ||
(isProfilePage && !isAboutPage) ||
isAllPage ||
(isAuthorPage && !isAboutPage);

View File

@@ -102,6 +102,10 @@ export const isSubplebbitView = (pathname: string, params: ParamsType): boolean
return params.subplebbitAddress ? pathname.startsWith(`/p/${params.subplebbitAddress}`) : false;
};
export const isSubplebbitSettingsView = (pathname: string, params: ParamsType): boolean => {
return params.subplebbitAddress ? pathname === `/p/${params.subplebbitAddress}/settings` : false;
};
export const isSubplebbitSubmitView = (pathname: string, params: ParamsType): boolean => {
return params.subplebbitAddress ? pathname === `/p/${params.subplebbitAddress}/submit` : false;
};

View File

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

View File

@@ -0,0 +1,7 @@
import styles from './subplebbit-settings.module.css';
const SubplebbitSettings = () => {
return <div className={styles.content}>community settings</div>;
};
export default SubplebbitSettings;

View File

@@ -106,7 +106,7 @@
display: inline-flex;
height: 13px;
width: 13px;
margin: 2px 5px -2px 2px;
margin: 3px 5px -2px 2px;
}
.online {

View File

@@ -116,9 +116,7 @@ const Subplebbit = ({ subplebbit }: SubplebbitProps) => {
<>
{t('members_count', { count: allActiveUserCount })}, {t('community_for', { date: getFormattedTimeDuration(createdAt) })}
<div className={styles.subplebbitPreferences}>
<Link to={`/p/${address}/settings`} onClick={(e) => e.preventDefault()}>
{t('preferences')}
</Link>
<Link to={`/p/${address}/settings`}>settings</Link>
</div>
</>
) : (