=> {
124 | const content = data.get("content")?.toString() ?? "";
125 | const response = await apiClient.editComment({
126 | comment_id: commentId,
127 | content,
128 | });
129 |
130 | return response.comment_view;
131 | };
132 | export const deleteCommentAction = async (commentId: number) => {
133 | await apiClient.deleteComment({
134 | comment_id: commentId,
135 | deleted: true,
136 | });
137 | };
138 | export const restoreCommentAction = async (commentId: number) => {
139 | await apiClient.deleteComment({
140 | comment_id: commentId,
141 | deleted: false,
142 | });
143 | };
144 |
145 | export const toggleSaveCommentAction = async (
146 | commentId: number,
147 | currentlySaved: boolean,
148 | ) => {
149 | if (!(await isLoggedIn())) {
150 | await loginPageWithRedirectAction(`/comment/${commentId}}`);
151 | return;
152 | }
153 |
154 | await apiClient.saveComment({
155 | comment_id: commentId,
156 | save: currentlySaved,
157 | });
158 | };
159 |
--------------------------------------------------------------------------------
/src/app/comment/constants.ts:
--------------------------------------------------------------------------------
1 | export const ROOT_NODES_BATCH_SIZE = 5;
2 |
--------------------------------------------------------------------------------
/src/app/communities/SubscribeButton.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import {
3 | subscribeAction,
4 | unsubscribeAction,
5 | } from "@/app/communities/subscribeActions";
6 | import { MyUserInfo, SubscribedType } from "lemmy-js-client";
7 | import { useFormStatus } from "react-dom";
8 | import { Spinner } from "@/app/(ui)/Spinner";
9 | import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
10 |
11 | export const SubscribeButton = (props: {
12 | readonly loggedInUser: MyUserInfo | undefined;
13 | readonly currentStatus: SubscribedType;
14 | readonly communityId: number;
15 | readonly communityName: string;
16 | }) => {
17 | switch (props.currentStatus) {
18 | case "Subscribed":
19 | return (
20 |
34 | );
35 | case "NotSubscribed":
36 | return (
37 |
48 | );
49 | case "Pending":
50 | return (
51 |
68 | );
69 | }
70 | };
71 |
--------------------------------------------------------------------------------
/src/app/communities/subscribeActions.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { apiClient } from "@/app/apiClient";
4 | import { revalidatePath } from "next/cache";
5 | import {
6 | isLoggedIn,
7 | loginPageWithRedirectAction,
8 | } from "@/app/login/authActions";
9 |
10 | export const subscribeAction = async (
11 | communityId: number,
12 | communityName: string,
13 | ) => {
14 | if (!(await isLoggedIn())) {
15 | await loginPageWithRedirectAction(`/c/${communityName}`);
16 | return;
17 | }
18 |
19 | await apiClient.followCommunity({ community_id: communityId, follow: true });
20 | revalidatePath("/communities");
21 | };
22 | export const unsubscribeAction = async (
23 | communityId: number,
24 | communityName: string,
25 | ) => {
26 | if (!(await isLoggedIn())) {
27 | await loginPageWithRedirectAction(`/c/${communityName}`);
28 | return;
29 | }
30 |
31 | await apiClient.followCommunity({ community_id: communityId, follow: false });
32 | revalidatePath("/communities");
33 | };
34 |
--------------------------------------------------------------------------------
/src/app/create_post/page.tsx:
--------------------------------------------------------------------------------
1 | import { apiClient } from "@/app/apiClient";
2 | import { formatCommunityName } from "@/app/c/formatCommunityName";
3 | import { PageWithSidebar } from "@/app/PageWithSidebar";
4 | import { PostEditor } from "@/app/create_post/PostEditor";
5 | import { loginPageWithRedirectAction } from "@/app/login/authActions";
6 |
7 | const CreatePostPage = async (props: {
8 | readonly searchParams: { community_id?: number };
9 | }) => {
10 | const { my_user: loggedInUser } = await apiClient.getSite();
11 | if (!loggedInUser) {
12 | await loginPageWithRedirectAction(
13 | `/create_post?community_id=${props.searchParams.community_id}`,
14 | true,
15 | );
16 | }
17 |
18 | const { community_view: communityView, moderators: mods } =
19 | await apiClient.getCommunity({
20 | id: props.searchParams.community_id,
21 | });
22 |
23 | return (
24 | mod.moderator)}
28 | stats={communityView.counts}
29 | >
30 |
31 |
32 | {"Submitting new post to "}
33 | {formatCommunityName(communityView.community)}
34 | {"..."}
35 |
36 |
40 |
22 |
23 | {"Composing direct message..."}
24 |
25 |
26 |
13 | {error.message ? `Error: ${error.message}` : "Something went wrong!"}
14 |
15 |
16 | {
17 | "Unfortunately, we ran into an issue when trying to display this page."
18 | }
19 |
20 | {error.digest && (
21 | <>
22 |
23 | {
24 | "When reporting this to instance admins, please include the error digest in your report, as it may be used to find relevant logs on the server."
25 | }
26 |
27 |
28 | {"Error digest: "}
29 | {error.digest}
30 |
31 |
32 | )}
33 |
40 |
41 | );
42 | };
43 |
44 | export default Error;
45 |
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | /*
6 | Spoiler tags in markdown
7 | */
8 |
9 | summary {
10 | cursor: pointer;
11 | }
12 |
13 | /*
14 | Input pseudo elements
15 | */
16 | html {
17 | input[type='search']::-webkit-search-cancel-button {
18 | filter: grayscale(1) brightness(1.5);
19 | }
20 | input[type='date']::-webkit-calendar-picker-indicator {
21 | filter: invert(1);
22 | }
23 | }
24 |
25 | /*Styles for TopLoader*/
26 | #nprogress {
27 | pointer-events: none;
28 | }
29 |
30 | #nprogress .bar {
31 | background: #94a3b8;
32 | position: fixed;
33 | z-index: 1600;
34 | top: 0;
35 | left: 0;
36 | width: 100%;
37 | height: 3px;
38 | }
39 |
40 | #nprogress .peg {
41 | display: block;
42 | position: absolute;
43 | right: 0;
44 | width: 100px;
45 | height: 100%;
46 | box-shadow: 0 0 10px #94a3b8,
47 | 0 0 5px #94a3b8;
48 | opacity: 1;
49 | -webkit-transform: rotate(3deg) translate(0px, -4px);
50 | -ms-transform: rotate(3deg) translate(0px, -4px);
51 | transform: rotate(3deg) translate(0px, -4px);
52 | }
53 |
54 | #nprogress .spinner {
55 | display: block;
56 | position: fixed;
57 | z-index: 1600;
58 | top: 15px;
59 | right: 15px;
60 | }
61 |
62 | #nprogress .spinner-icon {
63 | width: 18px;
64 | height: 18px;
65 | box-sizing: border-box;
66 | border: 2px solid transparent;
67 | border-top-color: #94a3b8;
68 | border-left-color: #94a3b8;
69 | border-radius: 50%;
70 | -webkit-animation: nprogress-spinner 400ms linear infinite;
71 | animation: nprogress-spinner 400ms linear infinite;
72 | }
73 |
74 | .nprogress-custom-parent {
75 | overflow: hidden;
76 | position: relative;
77 | }
78 |
79 | .nprogress-custom-parent #nprogress .bar,
80 | .nprogress-custom-parent #nprogress .spinner {
81 | position: absolute;
82 | }
83 |
84 | @-webkit-keyframes nprogress-spinner {
85 | 0% {
86 | -webkit-transform: rotate(0deg);
87 | }
88 | 100% {
89 | -webkit-transform: rotate(360deg);
90 | }
91 | }
92 |
93 | @keyframes nprogress-spinner {
94 | 0% {
95 | transform: rotate(0deg);
96 | }
97 | 100% {
98 | transform: rotate(360deg);
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/src/app/inbox/InboxMention.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { MyUserInfo, PersonMentionView, SiteView } from "lemmy-js-client";
4 | import { useState } from "react";
5 | import { Comment } from "@/app/comment/Comment";
6 | import { getVoteConfig } from "@/app/(ui)/vote/getVoteConfig";
7 | import { toggleMentionRead } from "@/app/inbox/inboxActions";
8 | import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
9 | import { MarkdownProps } from "@/app/(ui)/markdown/Markdown";
10 | import { EnvelopeIcon, EnvelopeOpenIcon } from "@heroicons/react/16/solid";
11 | import classNames from "classnames";
12 |
13 | export const InboxMention = (props: {
14 | readonly loggedInUser: MyUserInfo;
15 | readonly personMentionView: PersonMentionView;
16 | readonly siteView: SiteView;
17 | readonly markdown: MarkdownProps;
18 | }) => {
19 | const [read, setRead] = useState(props.personMentionView.person_mention.read);
20 |
21 | return (
22 |
23 | {
28 | const newState = !read;
29 | const action = toggleMentionRead.bind(
30 | null,
31 | props.personMentionView.person_mention.id,
32 | newState,
33 | );
34 | await action();
35 | setRead(newState);
36 | }}
37 | >
38 |
46 | {read && }
47 | {!read && }
48 | {`Mark ${read ? "unread" : "read"}`}
49 |
50 |
51 | }
52 | commentView={props.personMentionView}
53 | loggedInUser={props.loggedInUser}
54 | markdown={props.markdown}
55 | voteConfig={getVoteConfig(
56 | props.siteView.local_site,
57 | props.loggedInUser,
58 | )}
59 | />
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/src/app/inbox/InboxPrivateMessage.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { MyUserInfo, PrivateMessageView, SiteView } from "lemmy-js-client";
4 | import { useState } from "react";
5 | import { toggleMessageRead } from "@/app/inbox/inboxActions";
6 | import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
7 | import { MarkdownProps } from "@/app/(ui)/markdown/Markdown";
8 | import { EnvelopeIcon, EnvelopeOpenIcon } from "@heroicons/react/16/solid";
9 | import { PrivateMessage } from "@/app/inbox/PrivateMessage";
10 | import classNames from "classnames";
11 |
12 | export const InboxPrivateMessage = (props: {
13 | readonly loggedInUser: MyUserInfo;
14 | readonly privateMessageView: PrivateMessageView;
15 | readonly siteView: SiteView;
16 | readonly markdown: MarkdownProps;
17 | }) => {
18 | const [read, setRead] = useState(
19 | props.privateMessageView.private_message.read,
20 | );
21 |
22 | const isOwnMessage =
23 | props.privateMessageView.private_message.creator_id ===
24 | props.loggedInUser?.local_user_view.person.id;
25 |
26 | return (
27 |
28 |
{
33 | const newState = !read;
34 | const action = toggleMessageRead.bind(
35 | null,
36 | props.privateMessageView.private_message.id,
37 | newState,
38 | );
39 | await action();
40 | setRead(newState);
41 | }}
42 | >
43 |
51 | {read && }
52 | {!read && }
53 | {`Mark ${read ? "unread" : "read"}`}
54 |
55 |
56 | )
57 | }
58 | loggedInUser={props.loggedInUser}
59 | markdown={props.markdown}
60 | privateMessageView={props.privateMessageView}
61 | siteView={props.siteView}
62 | />
63 |
23 | {
28 | const newState = !read;
29 | const action = toggleReplyRead.bind(
30 | null,
31 | props.commentReplyView.comment_reply.id,
32 | newState,
33 | );
34 | await action();
35 | setRead(newState);
36 | }}
37 | >
38 |
46 | {read && }
47 | {!read && }
48 | {`Mark ${read ? "unread" : "read"}`}
49 |
50 |
51 | }
52 | commentView={props.commentReplyView}
53 | loggedInUser={props.loggedInUser}
54 | markdown={props.markdown}
55 | voteConfig={getVoteConfig(
56 | props.siteView.local_site,
57 | props.loggedInUser,
58 | )}
59 | />
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/src/app/inbox/PrivateMessage.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { MyUserInfo, PrivateMessageView, SiteView } from "lemmy-js-client";
4 | import React, { ReactNode, useState } from "react";
5 | import { Markdown, MarkdownProps } from "@/app/(ui)/markdown/Markdown";
6 | import { TrashIcon } from "@heroicons/react/16/solid";
7 | import {
8 | deleteCommentAction,
9 | restoreCommentAction,
10 | } from "@/app/comment/commentActions";
11 | import classNames from "classnames";
12 | import { FormattedTimestamp } from "@/app/(ui)/FormattedTimestamp";
13 | import { EditIndicator } from "@/app/(ui)/EditIndicator";
14 | import { UserLink } from "@/app/u/UserLink";
15 | import { StyledLink } from "@/app/(ui)/StyledLink";
16 |
17 | export const PrivateMessage = (props: {
18 | readonly loggedInUser: MyUserInfo;
19 | readonly privateMessageView: PrivateMessageView;
20 | readonly siteView: SiteView;
21 | readonly markdown: MarkdownProps;
22 | readonly additionalActions: ReactNode;
23 | }) => {
24 | const [editedContent, setEditedContent] = useState(null);
25 | const [deleted, setDeleted] = useState(
26 | props.privateMessageView.private_message.deleted,
27 | );
28 | const isOwnMessage =
29 | props.privateMessageView.private_message.creator_id ===
30 | props.loggedInUser?.local_user_view.person.id;
31 |
32 | const markdownProps =
33 | editedContent !== null ? { content: editedContent } : props.markdown;
34 | let body = (
35 |
39 | );
40 |
41 | if (deleted) {
42 | body = (
43 |
48 |
49 | {"Deleted"}
50 |
51 | );
52 | }
53 |
54 | return (
55 |
61 |
62 |
63 | {!isOwnMessage && (
64 | <>
65 |
{"from"}
66 |
67 |
68 |
69 |
70 | )}
71 | {isOwnMessage && (
72 | <>
73 |
{"to"}
74 |
75 |
76 |
77 |
78 | )}
79 |
80 |
84 |
87 |
88 |
89 |
90 |
{body}
91 |
92 | {props.additionalActions}
93 | {!isOwnMessage && (
94 |
95 | {"report"}
96 |
97 | )}
98 |
99 | {!isOwnMessage && (
100 |
104 | {"reply"}
105 |
106 | )}
107 | {isOwnMessage && (
108 |
130 | )}
131 |
132 |
133 |
134 |
13 |
17 |
21 |
22 | );
23 | };
24 |
25 | const InstanceList = (props: {
26 | readonly title: string;
27 | readonly instances?: InstanceWithFederationState[];
28 | }) => {
29 | if (!props.instances) {
30 | return null;
31 | }
32 |
33 | return (
34 |
35 |
{props.title}
36 | {props.instances
37 | .sort((a, b) => {
38 | const aSoftware = a.software ?? "x";
39 | const bSoftware = b.software ?? "x";
40 | const aVersion = a.version?.split("-")[0] ?? "";
41 | const bVersion = b.version?.split("-")[0] ?? "";
42 | if (aSoftware === "lemmy" && bSoftware !== "lemmy") {
43 | return -1;
44 | } else if (aSoftware !== "lemmy" && bSoftware === "lemmy") {
45 | return 1;
46 | } else {
47 | if (aSoftware > bSoftware) {
48 | return 1;
49 | } else if (aSoftware < bSoftware) {
50 | return -1;
51 | } else {
52 | if (aVersion < bVersion) {
53 | return 1;
54 | }
55 | return -1;
56 | }
57 | }
58 | })
59 | .map((instance) => (
60 |
66 |
70 | {instance.domain}
71 |
72 |
73 | {instance.software ? `• ${instance.software}` : ""}
74 |
75 |
76 | {instance.version ? `• ${instance.version}` : ""}
77 |
78 |
79 | ))}
80 |
8 |
{"Legal info"}
9 |
10 |
11 |
12 |
16 | {siteView.site.banner && (
17 |
23 | )}
24 |
29 | {"Sign in to "}
30 | {siteView.site.name}
31 |
32 |
33 |
34 |
35 |
36 |
37 | {"No account?"}{" "}
38 |
39 | {"Sign up here"}
40 |
41 |
42 |
43 |
8 |
{"Forgot password"}
9 |
10 | {
11 | "Note: if you don't have access to the e-mail address associated with your account, then you will not be able to reset your password."
12 | }
13 |
14 |
15 |
16 |
28 |
29 |
4 |
{"Forgot password"}
5 |
6 | {"A password reset link has been sent to your e-mail."}
7 |
8 |
8 |
{"Set new password"}
9 |
10 |
11 |
45 |
46 |
53 |
59 |
60 | {posts.map((postView: PostView) => (
61 |
69 | ))}
70 |
71 | {nextPage &&
}
72 |
{
17 | try {
18 | await navigator.share(props);
19 | } catch (e) {
20 | console.warn("Unable to share: ", e);
21 | }
22 | }}
23 | >
24 | {"share"}
25 |
26 | );
27 | };
28 |
29 | export const PostShareButton = dynamic(
30 | () => Promise.resolve(PostShareButtonInternal),
31 | { ssr: false },
32 | );
33 |
--------------------------------------------------------------------------------
/src/app/post/PostThumbnail.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { isImage } from "@/app/(utils)/isImage";
4 | import classNames from "classnames";
5 | import { Image } from "@/app/(ui)/Image";
6 | import {
7 | ArrowsPointingOutIcon,
8 | ChatBubbleBottomCenterTextIcon,
9 | LinkIcon,
10 | PhotoIcon,
11 | } from "@heroicons/react/24/outline";
12 | import { PlayIcon } from "@heroicons/react/16/solid";
13 | import { MyUserInfo, Post } from "lemmy-js-client";
14 | import { hasExpandableMedia } from "@/app/post/hasExpandableMedia";
15 | import React, { Dispatch, memo, SetStateAction, useState } from "react";
16 | import { getPostThumbnailSrc } from "@/app/post/getPostThumbnailSrc";
17 |
18 | type ThumbnailProps = {
19 | readonly post: Post;
20 | readonly className: string;
21 | readonly loggedInUser: MyUserInfo | undefined;
22 | readonly setInlineExpanded: Dispatch>;
23 | };
24 |
25 | export const PostThumbnail = memo(
26 | (props: ThumbnailProps) => {
27 | let src = getPostThumbnailSrc(props.post);
28 |
29 | return (
30 |
37 | {src ? (
38 | <>
39 |
40 | {
}
41 |
42 | ) : props.post.url ? (
43 |
44 | ) : (
45 |
46 | )}
47 | {hasExpandableMedia(props.post) && (
48 |
52 | )}
53 |
77 |
{"You are viewing a single thread."}
78 |
82 | {"View all comments "}
83 |
84 |
85 | {parentId && (
86 |
90 | {"View context "}
91 |
92 |
93 | )}
94 |
103 | {"No comments yet!"}
104 |
105 | );
106 | };
107 |
--------------------------------------------------------------------------------
/src/app/post/[id]/PostPageWithSidebar.tsx:
--------------------------------------------------------------------------------
1 | import { PageWithSidebar } from "@/app/PageWithSidebar";
2 | import { PostListItem } from "@/app/post/PostListItem";
3 | import { apiClient } from "@/app/apiClient";
4 | import { CommentSortType, MyUserInfo } from "lemmy-js-client";
5 | import { SearchParamLinks } from "@/app/(ui)/SearchParamLinks";
6 | import { getVoteConfig, VoteConfig } from "@/app/(ui)/vote/getVoteConfig";
7 | import { MarkdownWithFetchedContent } from "@/app/(ui)/markdown/MarkdownWithFetchedContent";
8 | import { buildCommentTreesAction } from "@/app/comment/commentActions";
9 | import { GetComments } from "lemmy-js-client/dist/types/GetComments";
10 | import { CommentsSection } from "@/app/post/[id]/CommentsSection";
11 |
12 | export const PostPageWithSidebar = async (props: {
13 | readonly postId: number;
14 | readonly singleCommentThreadRootId?: number;
15 | readonly searchParams: Record;
16 | readonly highlightCommentId?: number;
17 | }) => {
18 | const [
19 | { post_view: postView },
20 | { site_view: siteView, my_user: loggedInUser },
21 | ] = await Promise.all([
22 | apiClient.getPost({
23 | id: props.postId,
24 | }),
25 | apiClient.getSite(),
26 | ]);
27 |
28 | const { community_view: communityView, moderators } =
29 | await apiClient.getCommunity({
30 | id: postView.community.id,
31 | });
32 |
33 | return (
34 | mod.moderator)}
37 | stats={communityView.counts}
38 | >
39 |
40 |
41 | {postView.post.body && }
42 |
50 |
51 |
52 | );
53 | };
54 |
55 | const PostBody = (props: { readonly id: number }) => {
56 | return (
57 |
58 |
59 |
60 | );
61 | };
62 |
63 | const Comments = async (props: {
64 | readonly postId: number;
65 | readonly singleCommentThreadRootId?: number;
66 | readonly searchParams: Record;
67 | readonly highlightCommentId?: number;
68 | readonly voteConfig: VoteConfig;
69 | readonly loggedInUser?: MyUserInfo;
70 | }) => {
71 | const searchParamsSortType = props.searchParams[
72 | "sortType"
73 | ] as CommentSortType;
74 | const currentSortType = searchParamsSortType ?? "Hot";
75 |
76 | let maxDepth = 4;
77 | if (props.singleCommentThreadRootId) {
78 | // If we're only rendering a single thread, we can fetch a few more comments at once
79 | maxDepth = 6;
80 | }
81 |
82 | const commentRequestForm: GetComments = {
83 | post_id: props.postId,
84 | parent_id: props.singleCommentThreadRootId,
85 | max_depth: maxDepth,
86 | sort: currentSortType,
87 | type_: "All",
88 | saved_only: false,
89 | };
90 | const initialCommentTrees = await buildCommentTreesAction(
91 | commentRequestForm,
92 | new Set(),
93 | );
94 |
95 | const enabledSortOptions: CommentSortType[] = [
96 | "Hot",
97 | "Top",
98 | "Controversial",
99 | "New",
100 | "Old",
101 | ];
102 |
103 | return (
104 |
105 |
112 |
120 |
121 | );
122 | };
123 |
--------------------------------------------------------------------------------
/src/app/post/[id]/edit/page.tsx:
--------------------------------------------------------------------------------
1 | import { apiClient } from "@/app/apiClient";
2 | import { formatCommunityName } from "@/app/c/formatCommunityName";
3 | import { PageWithSidebar } from "@/app/PageWithSidebar";
4 | import { PostEditor } from "@/app/create_post/PostEditor";
5 | import { loginPageWithRedirectAction } from "@/app/login/authActions";
6 |
7 | const EditPostPage = async (props: { readonly params: { id: number } }) => {
8 | const { my_user: loggedInUser } = await apiClient.getSite();
9 | if (!loggedInUser) {
10 | await loginPageWithRedirectAction(`/post/${props.params.id}/edit`, true);
11 | }
12 |
13 | const {
14 | post_view: postView,
15 | community_view: communityView,
16 | moderators: mods,
17 | } = await apiClient.getPost({
18 | id: props.params.id,
19 | });
20 |
21 | const communityName = formatCommunityName(communityView.community);
22 |
23 | return (
24 | mod.moderator)}
28 | stats={communityView.counts}
29 | >
30 |
31 |
32 | {"Editing post in "}
33 | {communityName}
34 | {"..."}
35 |
36 |
41 |
50 |
{"Saved"}
51 |
52 |
58 |
59 |
60 |
67 |
68 |
1 ? currentPage - 1 : undefined}
71 | />
72 | {"No saved content yet!"}
;
94 | };
95 |
96 | export default SavedPage;
97 |
--------------------------------------------------------------------------------
/src/app/search/CombinedPostsAndComments.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CommentView,
3 | MyUserInfo,
4 | PostView,
5 | SiteView,
6 | SortType,
7 | } from "lemmy-js-client";
8 | import { Comment } from "@/app/comment/Comment";
9 | import { PostListItem } from "@/app/post/PostListItem";
10 | import { apiClient } from "@/app/apiClient";
11 | import { getVoteConfig } from "@/app/(ui)/vote/getVoteConfig";
12 | import { getMarkdownWithRemoteImagesAction } from "@/app/(ui)/markdown/markdownActions";
13 |
14 | type Props = {
15 | posts: PostView[];
16 | comments: CommentView[];
17 | sortType: SortType;
18 | };
19 | export const CombinedPostsAndComments = async (props: Props) => {
20 | const { site_view: siteView, my_user: loggedInUser } =
21 | await apiClient.getSite();
22 |
23 | return sort(props).map((view) => {
24 | return isComment(view) ? (
25 |
31 | ) : (
32 |
33 | );
34 | });
35 | };
36 |
37 | const CommentListItem = async (props: {
38 | readonly commentView: CommentView;
39 | readonly loggedInUser?: MyUserInfo;
40 | readonly siteView: SiteView;
41 | }) => {
42 | const markdownProps = {
43 | ...(await getMarkdownWithRemoteImagesAction(
44 | props.commentView.comment.content,
45 | `comment-${props.commentView.comment.id}`,
46 | )),
47 | localSiteName: props.siteView.site.name,
48 | };
49 | return (
50 |
59 | );
60 | };
61 |
62 | const sort = (props: Props): Array => {
63 | switch (props.sortType) {
64 | case "New":
65 | return [...props.comments, ...props.posts].sort(sortNew);
66 | case "Old":
67 | return [...props.comments, ...props.posts].sort(sortOld);
68 | default:
69 | return [...props.comments, ...props.posts].sort(sortScore);
70 | }
71 | };
72 |
73 | const sortOld = (
74 | a: PostView | CommentView,
75 | b: PostView | CommentView,
76 | ): number => {
77 | const aPublished = isComment(a) ? a.comment.published : a.post.published;
78 | const bPublished = isComment(b) ? b.comment.published : b.post.published;
79 |
80 | return aPublished > bPublished ? 1 : -1;
81 | };
82 |
83 | const sortNew = (
84 | a: PostView | CommentView,
85 | b: PostView | CommentView,
86 | ): number => {
87 | const aPublished = isComment(a) ? a.comment.published : a.post.published;
88 | const bPublished = isComment(b) ? b.comment.published : b.post.published;
89 |
90 | return aPublished < bPublished ? 1 : -1;
91 | };
92 |
93 | const sortScore = (
94 | a: PostView | CommentView,
95 | b: PostView | CommentView,
96 | ): number => {
97 | const aScore = a.counts.score;
98 | const bScore = b.counts.score;
99 |
100 | return aScore > bScore ? 1 : -1;
101 | };
102 |
103 | const isComment = (input: PostView | CommentView): input is CommentView => {
104 | return (input as CommentView).comment !== undefined;
105 | };
106 |
--------------------------------------------------------------------------------
/src/app/search/searchAction.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { redirect } from "next/navigation";
4 | import { SearchPageSearchParams } from "@/app/search/page";
5 |
6 | export const searchAction = async (
7 | searchParams: SearchPageSearchParams,
8 | data: FormData,
9 | ) => {
10 | const { page: _, q: __, ...oldSearchParams } = searchParams;
11 |
12 | const q = data.get("q")?.toString() ?? undefined;
13 |
14 | let newSearchParamsInput = {
15 | ...oldSearchParams,
16 | } as Record;
17 |
18 | if (q) {
19 | newSearchParamsInput = { ...newSearchParamsInput, q };
20 | }
21 |
22 | const newSearchParams = new URLSearchParams(newSearchParamsInput).toString();
23 | redirect(`/search?${newSearchParams}`);
24 | };
25 |
--------------------------------------------------------------------------------
/src/app/settings/2fa/disable/page.tsx:
--------------------------------------------------------------------------------
1 | import { disable2faAction } from "@/app/settings/userActions";
2 | import { Input } from "@/app/(ui)/form/Input";
3 | import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
4 |
5 | const VerifyEmailPage = async (props: {
6 | readonly params: { token: string };
7 | }) => {
8 | return (
9 |
10 |
{"Disable 2fa"}
11 |
12 |
13 | {
14 | "In order to remove 2fa from your account, please enter a 2fa code from your authenticator."
15 | }
16 |
17 |
31 |
32 |
17 |
{"Enable 2fa"}
18 |
19 |
20 | {
21 | "In order to remove 2fa from your account, please scan the following QR code with your authenticator, and enter the generated 2fa code below."
22 | }
23 |
24 |
25 |
26 | {
27 | "Note: if you're unable to scan the QR code, you may use the following otp URL to set up your authenticator:"
28 | }
29 |
30 |
{qrUrl}
31 |
45 |
46 |
17 |
{"Authentication"}
18 |
19 |
32 |
79 |
105 |
57 |
58 |
66 |
67 | {(props.type === "password" ||
68 | props.type === "email" ||
69 | props.type == "text") && (
70 |
83 | )}
84 | {props.type === "checkbox" && (
85 |
96 | )}
97 | {props.type === "select" && (
98 |
109 | )}
110 | {props.type === "textarea" && (
111 |
120 | )}
121 |
23 |
24 |
25 |
{"User settings"}
26 |
27 |
31 | {"View public profile "}
32 |
33 |
34 |
35 |
36 |
37 |
38 |
41 |
44 |
47 |
50 |
53 |
56 |
57 |
73 | {props.children}
74 |
75 | );
76 | };
77 |
78 | export default SettingsPage;
79 |
--------------------------------------------------------------------------------
/src/app/settings/userActions.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 |
3 | import { apiClient } from "@/app/apiClient";
4 | import {
5 | GetReportCountResponse,
6 | GetUnreadCountResponse,
7 | GetUnreadRegistrationApplicationCountResponse,
8 | ListingType,
9 | SortType,
10 | } from "lemmy-js-client";
11 | import { revalidatePath } from "next/cache";
12 | import { getFormBoolean } from "@/app/(utils)/getFormBoolean";
13 | import { redirect } from "next/navigation";
14 |
15 | export type UnreadCounts = {
16 | inbox: GetUnreadCountResponse;
17 | applications: GetUnreadRegistrationApplicationCountResponse | null;
18 | reports: GetReportCountResponse | null;
19 | };
20 |
21 | export const getUnreadCounts = async (
22 | isAdmin: boolean,
23 | isMod: boolean,
24 | applicationsEnabled: boolean,
25 | ): Promise => {
26 | return {
27 | inbox: await apiClient.getUnreadCount(),
28 | applications:
29 | isAdmin && applicationsEnabled
30 | ? await apiClient.getUnreadRegistrationApplicationCount()
31 | : null,
32 | reports: isAdmin || isMod ? await apiClient.getReportCount({}) : null,
33 | };
34 | };
35 |
36 | export const updateProfileAction = async (formData: FormData) => {
37 | await apiClient.saveUserSettings({
38 | display_name: formData.get("display_name")?.toString(),
39 | bio: formData.get("bio")?.toString(),
40 | matrix_user_id: formData.get("matrix")?.toString(),
41 | avatar: formData.get("avatar")?.toString(),
42 | banner: formData.get("banner")?.toString(),
43 | });
44 | revalidatePath("/settings");
45 | };
46 |
47 | export const updateSettingsAction = async (formData: FormData) => {
48 | await apiClient.saveUserSettings({
49 | email: formData.get("email")?.toString(),
50 | default_listing_type: formData.get("filter")?.toString() as
51 | | ListingType
52 | | undefined,
53 | default_sort_type: formData.get("sort")?.toString() as SortType | undefined,
54 | show_nsfw: getFormBoolean(formData, "nsfw_show"),
55 | blur_nsfw: getFormBoolean(formData, "nsfw_blur"),
56 | auto_expand: getFormBoolean(formData, "auto_expand"),
57 | show_scores: getFormBoolean(formData, "show_scores"),
58 | bot_account: getFormBoolean(formData, "is_bot"),
59 | show_bot_accounts: getFormBoolean(formData, "show_bots"),
60 | show_read_posts: getFormBoolean(formData, "show_read_posts"),
61 | send_notifications_to_email: getFormBoolean(
62 | formData,
63 | "notification_emails",
64 | ),
65 | });
66 | revalidatePath("/settings");
67 | revalidatePath("/");
68 | };
69 |
70 | export const updateEmailAction = async (formData: FormData) => {
71 | await apiClient.saveUserSettings({
72 | email: formData.get("email")?.toString(),
73 | });
74 | revalidatePath("/settings");
75 | revalidatePath("/");
76 | };
77 |
78 | export const changePasswordAction = async (formData: FormData) => {
79 | const newPassword = formData.get("password_new")?.toString();
80 | const newPasswordVerify = formData.get("password_verify")?.toString();
81 | const oldPassword = formData.get("password_current")?.toString();
82 |
83 | if (!newPassword || !newPasswordVerify || !oldPassword) {
84 | throw new Error("Form not filled");
85 | }
86 |
87 | await apiClient.changePassword({
88 | new_password: newPassword,
89 | new_password_verify: newPasswordVerify,
90 | old_password: oldPassword,
91 | });
92 | revalidatePath("/settings");
93 | revalidatePath("/");
94 | };
95 |
96 | export const disable2faAction = async (formData: FormData) => {
97 | const totpToken = formData.get("token")?.toString();
98 |
99 | if (!totpToken) {
100 | throw new Error("Missing 2fa token");
101 | }
102 |
103 | await apiClient.updateTotp({
104 | totp_token: totpToken,
105 | enabled: false,
106 | });
107 |
108 | revalidatePath("/settings");
109 | revalidatePath("/");
110 | redirect("/settings");
111 | };
112 |
113 | export const enable2faAction = async (formData: FormData) => {
114 | const totpToken = formData.get("token")?.toString();
115 |
116 | if (!totpToken) {
117 | throw new Error("Missing 2fa token");
118 | }
119 |
120 | await apiClient.updateTotp({
121 | totp_token: totpToken,
122 | enabled: true,
123 | });
124 |
125 | revalidatePath("/settings");
126 | revalidatePath("/");
127 | redirect("/settings");
128 | };
129 |
130 | export const removeUserAvatar = async () => {
131 | await apiClient.saveUserSettings({
132 | avatar: "",
133 | });
134 | revalidatePath("/settings");
135 | revalidatePath("/");
136 | };
137 |
138 | export const removeUserBanner = async () => {
139 | await apiClient.saveUserSettings({
140 | banner: "",
141 | });
142 | revalidatePath("/settings");
143 | revalidatePath("/");
144 | };
145 |
146 | export const importSettingsAction = async (settings: object) => {
147 | await apiClient.importSettings(settings);
148 | };
149 |
--------------------------------------------------------------------------------
/src/app/signup/SignupForm.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Input } from "@/app/(ui)/form/Input";
4 | import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
5 | import { signupAction } from "@/app/signup/signupActions";
6 | import { CaptchaResponse, SiteView } from "lemmy-js-client";
7 | import { TextArea } from "@/app/(ui)/form/TextArea";
8 | import { Markdown } from "@/app/(ui)/markdown/Markdown";
9 |
10 | export const SignupForm = (props: {
11 | readonly siteView: SiteView;
12 | readonly captcha?: CaptchaResponse;
13 | }) => {
14 | return (
15 |
168 | );
169 | };
170 |
--------------------------------------------------------------------------------
/src/app/signup/page.tsx:
--------------------------------------------------------------------------------
1 | import { apiClient } from "@/app/apiClient";
2 | import { Image } from "@/app/(ui)/Image";
3 | import { StyledLink } from "@/app/(ui)/StyledLink";
4 | import { SignupForm } from "@/app/signup/SignupForm";
5 |
6 | const SignupPage = async () => {
7 | const { site_view: siteView } = await apiClient.getSite();
8 | let captcha = undefined;
9 | if (siteView.local_site.captcha_enabled) {
10 | captcha = (await apiClient.getCaptcha()).ok;
11 | }
12 | return (
13 |
18 | {siteView.site.banner && (
19 |
25 | )}
26 |
31 | {"Create an account on "}
32 | {siteView.site.name}
33 |
34 |
35 |
36 |
37 |
38 |
39 | {"Already have an account?"}{" "}
40 |
41 | {"Log in here"}
42 |
43 |
44 |
45 |
14 |
{"Sign up successful!"}
15 |
16 | {requireEmailVerification && (
17 |
18 | {
19 | "This instance requires you to verify your e-mail. Please check your inbox for a verification link. If you don't see the verification e-mail, make sure to also check your spam folder."
20 | }
21 |
22 | )}
23 | {requireApproval && (
24 |
25 | {
26 | "Before you can log in, an instance admin must approve your registration. You can check out the"
27 | }
28 | {" front page "}
29 | {"while you wait!"}
30 |
31 | )}
32 |
33 |
11 |
{"Success!"}
12 |
13 |
{"Your e-mail has been verified."}
14 |
{"Return to the front page"}
15 |
16 |