31 |
35 |
36 |
44 | 46 | {post?.title} 47 |
48 |
64 |
66 |
77 |
78 | 67 | by{" "} 68 | 73 | {username} 74 | 75 |
76 |
25 |
26 |
28 |
29 |
30 |
32 |
33 |
35 | {message}
34 |
27 |
28 |
30 |
31 |
44 |
32 |
33 |
38 |
39 |
40 |
42 |
43 |
45 |
47 |
51 |
52 | );
53 | };
54 |
55 | export default CommentSection;
56 |
--------------------------------------------------------------------------------
/src/components/Comments.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import type { CommentWithChildren } from "@utils/types";
3 | import { useAutoAnimate } from "@formkit/auto-animate/react";
4 | import Comment from "./Comment";
5 | import clsx from "clsx";
6 |
7 | type Props = { comments?: Array
48 |
50 |
20 | {comments?.map((comment) => {
21 | return
24 | );
25 | };
26 |
27 | export default Comments;
28 |
--------------------------------------------------------------------------------
/src/components/CompactCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import type { TaggedPosts } from "@utils/types";
3 | import clsx from "clsx";
4 | import getUserDisplayName from "@utils/getUserDisplayName";
5 | import { useContextualRouting } from "next-use-contextual-routing";
6 | import LikeCount from "./LikeCount";
7 | import Link from "next/link";
8 | import ShouldRender from "./ShouldRender";
9 | import Skeleton from "./Skeleton";
10 | import HTMLBody from "./HTMLBody";
11 |
12 | type Props = {
13 | slide?: boolean;
14 | post?: TaggedPosts;
15 | loading?: boolean;
16 | bgClass?: string;
17 | };
18 |
19 | const CompactCard: React.FC
47 |
48 |
52 |
53 |
54 |
56 |
57 |
62 | {post?.body}
63 |
64 |
65 |
66 | 49 | {post?.title} 50 |
51 |
67 |
73 |
79 |
80 |
81 | );
82 | };
83 |
84 | export default CompactCard;
85 |
--------------------------------------------------------------------------------
/src/components/ConfirmationModal.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useCallback } from "react";
2 | import { BsExclamationCircleFill } from "react-icons/bs";
3 | import Button from "./Button";
4 | import { Modal } from "./Modal";
5 | import ShouldRender from "./ShouldRender";
6 |
7 | type Props = {
8 | title: string;
9 | description?: string;
10 | confirmationLabel?: string;
11 | onConfirm?: () => void;
12 | onCancel?: () => void;
13 | openState: [boolean, Dispatch
68 |
71 |
72 |
74 |
78 | 75 | By {username} 76 |
77 |
39 |
81 |
40 |
62 |
41 |
42 |
44 |
45 | {icon}
46 |
47 |
48 |
49 |
53 | {title}
54 |
55 |
61 |
56 |
60 | 57 | {description} 58 |
59 |
63 |
71 |
79 |
80 |
31 |
56 |
57 |
58 |
65 |
66 | );
67 | };
68 |
69 | export default Avatar;
70 |
--------------------------------------------------------------------------------
/src/components/EditAccountModal/UserLink/UserLinkPreview.tsx:
--------------------------------------------------------------------------------
1 | import ShouldRender from "@components/ShouldRender";
2 | import { urlSchema } from "@schema/user.schema";
3 | import { useState } from "react";
4 | import { infer as zodInfer } from "zod";
5 |
6 | type PreviewProps = {
7 | data: zodInfer setHovering(true)}
18 | onMouseLeave={() => setHovering(false)}
19 | className="mt-2 flex h-[40px] w-full cursor-pointer items-center gap-2 rounded-md bg-white p-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-100 dark:bg-zinc-700 dark:ring-0 dark:hover:bg-zinc-600"
20 | >
21 | {/* eslint-disable-next-line @next/next/no-img-element */}
22 | 
23 |
24 |
28 |
29 | 25 | {hovering ? data?.url : data?.title} 26 |
27 |
29 |
36 |
40 | {redirectMessage}
41 |
42 |
43 |
44 | );
45 | };
46 |
47 | export default EmptyMessage;
48 |
--------------------------------------------------------------------------------
/src/components/ErrorMessage.tsx:
--------------------------------------------------------------------------------
1 | import { FieldError } from "react-hook-form";
2 | import ShouldRender from "./ShouldRender";
3 |
4 | type Props = {
5 | error?: FieldError;
6 | };
7 |
8 | const ErrorMessage: React.FC{message}
35 |12 | {error?.message} 13 |
14 |
27 |
28 |
51 |
54 | );
55 | };
56 |
57 | export default Field;
58 |
--------------------------------------------------------------------------------
/src/components/Follows/UserCard.tsx:
--------------------------------------------------------------------------------
1 | import type { FollowingUser } from "@utils/types";
2 | import Image from "@components/Image";
3 | import { useRouter } from "next/router";
4 | import React, { useCallback } from "react";
5 | import ShouldRender from "../ShouldRender";
6 | import Skeleton from "../Skeleton";
7 |
8 | type Props = {
9 | user?: FollowingUser;
10 | loading: boolean;
11 | onClickCard?: () => void;
12 | };
13 |
14 | const UserCard: React.FC
29 |
39 |
40 |
49 |
50 | 46 | {description} 47 |
48 |{children}
53 |
30 |
49 | );
50 | };
51 |
52 | export default UserCard;
53 |
--------------------------------------------------------------------------------
/src/components/HTMLBody.tsx:
--------------------------------------------------------------------------------
1 | import ShouldRender from "./ShouldRender";
2 | import Skeleton, { SkeletonProps } from "./Skeleton";
3 |
4 | type Props = SkeletonProps & {
5 | children?: string;
6 | className?: string;
7 | loading?: boolean;
8 | style?: React.CSSProperties;
9 | };
10 |
11 | /**
12 | * This component receives HTML and renders it on the page.
13 | *
14 | * It is intended to be used to render a post or a comment's body,
15 | * which is parsed from markdown into HTML in the server. (tRPC router)
16 | */
17 | const HTMLBody: React.FC
31 |
40 |
41 |
42 |
44 |
45 |
47 |
48 | {user?.name}
43 |
19 |
20 |
22 |
23 |
24 |
26 |
27 |
29 | );
30 | };
31 |
32 | export default LikeCount;
33 |
--------------------------------------------------------------------------------
/src/components/MetaTags.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import { baseUrl } from "@utils/constants";
3 | import Head from "next/head";
4 | import { trpc } from "@utils/trpc";
5 | import { useSession } from "next-auth/react";
6 |
7 | type Props = {
8 | title?: string;
9 | description?: string;
10 | image?: string;
11 | url?: string;
12 | };
13 |
14 | const MetaTags: React.FC{label}
28 |
61 |
88 |
62 |
78 |
87 | 63 | {option.title} 64 |
65 | 66 |
67 |
68 |
74 |
75 |
77 | {percentage}
76 |
68 |
77 | -
74 | {children}
75 |
24 |
31 |
33 |
34 |
25 | {icon}
29 |
30 | 26 | {title} 27 |
28 |{subtitle}
32 |
63 |
72 |
64 |
71 |
14 |
15 | {/* eslint-disable-next-line @next/next/no-img-element */}
16 | 
21 |
22 |
23 |
24 |
32 |
33 |
34 |
32 |
52 |
58 |
67 | See more
68 |
69 |
70 |
71 |
72 |
73 |
33 |
34 |
43 |
44 | {title}
45 |
46 |
47 |
49 |
50 |
51 | 40 | {title} 41 |
42 |
74 | {children}
75 |
76 |
27 | {Array.from({ length: lines }).map((_, i) => (
28 |
38 | ))}
39 | Loading...
40 |
41 | );
42 | };
43 |
44 | export default Skeleton;
45 |
--------------------------------------------------------------------------------
/src/components/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import React from "react";
3 |
4 | type Props = {
5 | alwaysWhite?: boolean;
6 | alwaysDark?: boolean;
7 | };
8 |
9 | const Spinner: React.FC
23 | Loading...
24 |
25 | );
26 | };
27 |
28 | export default Spinner;
29 |
--------------------------------------------------------------------------------
/src/components/Tab.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | title?: string;
3 | active: boolean;
4 | onClick: () => void;
5 | label: string;
6 | className?: string;
7 | };
8 |
9 | const Tab: React.FC
36 |
37 |
45 |
66 |
46 |
47 |
55 |
59 | {tag?.name}
60 |
61 |
65 |
62 | {tag?.description}
63 |
64 |
31 | {(loading ? loadingArray : tags)?.map((tag, i) => (
32 |
38 |
47 | );
48 | };
49 |
50 | export default TagList;
51 |
--------------------------------------------------------------------------------
/src/components/TagPreview.tsx:
--------------------------------------------------------------------------------
1 | import { TagType } from "@utils/types";
2 | import Image from "@components/Image";
3 | import ShouldRender from "./ShouldRender";
4 | import Skeleton from "./Skeleton";
5 | import clsx from "clsx";
6 | import Link from "next/link";
7 |
8 | type Props = {
9 | loading: boolean;
10 | tag?: TagType;
11 | };
12 |
13 | const TagPreview: React.FC
22 |
46 |
47 | );
48 | };
49 |
50 | export default TagPreview;
51 |
--------------------------------------------------------------------------------
/src/components/TagSection.tsx:
--------------------------------------------------------------------------------
1 | import { TagWithPosts } from "@utils/types";
2 | import CompactCard from "./CompactCard";
3 | import Image from "./Image";
4 | import Section from "./Section";
5 | import ShouldRender from "./ShouldRender";
6 | import Skeleton from "./Skeleton";
7 |
8 | type Props = {
9 | loading: boolean;
10 | tag?: TagWithPosts;
11 | };
12 |
13 | type TitleProps = {
14 | name?: string;
15 | description?: string;
16 | avatar?: string;
17 | loading?: boolean;
18 | };
19 |
20 | const SectionHeader = ({ name, description, avatar, loading }: TitleProps) => {
21 | return (
22 |
31 |
32 |
35 |
36 |
44 |
45 | 37 | {tag?.name} 38 |
39 | 40 |41 | {tag?.description} 42 |
43 |
23 |
33 |
43 |
44 |
45 |
50 |
51 | );
52 | };
53 |
54 | export const TagSection: React.FC
34 |
42 | 35 | {name} 36 |
37 | 38 |39 | {description} 40 |
41 |
46 |
49 |
24 |
58 | );
59 | };
60 |
61 | export default TagImagePreview;
62 |
--------------------------------------------------------------------------------
/src/components/UpsertTagModal/index.ts:
--------------------------------------------------------------------------------
1 | import { UpsertTagModal } from "./UpsertTagModal";
2 |
3 | export default UpsertTagModal;
4 |
--------------------------------------------------------------------------------
/src/components/UserPreview.tsx:
--------------------------------------------------------------------------------
1 | import type { User } from "@utils/types";
2 | import Image from "@components/Image";
3 | import Link from "next/link";
4 | import React from "react";
5 | import ShouldRender from "./ShouldRender";
6 | import Skeleton from "./Skeleton";
7 |
8 | type Props = {
9 | user?: Pick
25 | {/* eslint-disable-next-line @next/next/no-img-element */}
26 | 
35 |
57 |
21 |
47 |
48 | );
49 | };
50 |
51 | export default UserPreview;
52 |
--------------------------------------------------------------------------------
/src/hooks/aws/useUploadTagImagesToS3.ts:
--------------------------------------------------------------------------------
1 | import { env } from "@env";
2 | import { trpc } from "@utils/trpc";
3 | import { useCallback } from "react";
4 | import { generateS3Url } from "@utils/aws/generateS3Url";
5 | import { uploadFileToS3 } from "@utils/aws/uploadFileToS3";
6 |
7 | type Files = {
8 | avatar?: File;
9 | banner?: File;
10 | };
11 |
12 | /**
13 | * This helper hook will upload a tag avatar and/or banner to S3.
14 | */
15 | export const useUploadTagImagesToS3 = () => {
16 | const { mutateAsync: createPresignedTagUrl } =
17 | trpc.attachments.createPresignedTagUrl.useMutation();
18 |
19 | const uploadTagImages = useCallback(
20 | async (tagName: string, filesToUpload: Files) => {
21 | const files = Object.values(filesToUpload).filter(
22 | (item) => item instanceof File
23 | );
24 |
25 | const fileUrls = await Promise.all(
26 | files?.map(async (file) => {
27 | const isAvatar = file === filesToUpload?.avatar;
28 | const type = isAvatar ? "avatar" : "background";
29 |
30 | const { url, fields } = await createPresignedTagUrl({
31 | tagName,
32 | type,
33 | });
34 |
35 | await uploadFileToS3(url, fields, file as File);
36 | const generatedUrl = generateS3Url(
37 | env.NEXT_PUBLIC_AWS_S3_TAG_IMAGES_BUCKET_NAME,
38 | `${tagName}/${type}`
39 | );
40 |
41 | // by adding a timestamp to the url, we ensure that the image cache is invalidated.
42 | const timestamp = new Date().getTime().toString();
43 | const stampedUrl = `${generatedUrl}?${timestamp}`;
44 |
45 | return {
46 | url: stampedUrl,
47 | type,
48 | };
49 | })
50 | );
51 |
52 | const uploadedAvatar = fileUrls.find((url) => url.type === "avatar");
53 | const uploadedBanner = fileUrls.find((url) => url.type === "background");
54 |
55 | const filteredUrls = {
56 | avatarUrl: uploadedAvatar?.url,
57 | backgroundUrl: uploadedBanner?.url,
58 | };
59 |
60 | return filteredUrls;
61 | },
62 | [createPresignedTagUrl]
63 | );
64 |
65 | return { uploadTagImages };
66 | };
67 |
--------------------------------------------------------------------------------
/src/hooks/useClickOutside/index.ts:
--------------------------------------------------------------------------------
1 | import useOnClickOutside from "./useClickOutside";
2 |
3 | export default useOnClickOutside;
4 |
--------------------------------------------------------------------------------
/src/hooks/useClickOutside/useClickOutside.ts:
--------------------------------------------------------------------------------
1 | import { RefObject } from "react";
2 | import useEventListener from "./useEventListener";
3 |
4 | type Handler = (event: MouseEvent) => void;
5 |
6 | // https://usehooks-ts.com/react-hook/use-on-click-outside
7 | function useOnClickOutside
22 |
31 |
32 |
33 |
37 |
38 |
39 |
45 |
46 | {user?.name}
40 | 41 |42 | {user?.bio} 43 |
44 |
50 |
51 |
55 |
56 |
57 |
59 |
60 |
66 |
83 | );
84 | };
85 |
86 | export default SearchDropdown;
87 |
--------------------------------------------------------------------------------
/src/layouts/MainLayout/Header/SearchDropdown/index.ts:
--------------------------------------------------------------------------------
1 | import SearchDropdown from "./SearchDropdown";
2 |
3 | export default SearchDropdown;
4 |
--------------------------------------------------------------------------------
/src/layouts/MainLayout/Header/index.ts:
--------------------------------------------------------------------------------
1 | import Header from "./Header";
2 |
3 | export default Header;
4 |
--------------------------------------------------------------------------------
/src/layouts/MainLayout/MainLayout.tsx:
--------------------------------------------------------------------------------
1 | import Header from "./Header";
2 | import Sidebar from "./Sidebar";
3 |
4 | type Props = {
5 | children: React.ReactNode;
6 | };
7 |
8 | const MainLayout: React.FC
67 |
82 |
68 |
80 |
11 |
17 | );
18 | };
19 |
20 | export default MainLayout;
21 |
--------------------------------------------------------------------------------
/src/layouts/MainLayout/Sidebar/ThemeButton.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from "react";
2 | import { RiMoonClearFill, RiSunFill } from "react-icons/ri";
3 | import { Transition } from "@headlessui/react";
4 | import Button from "@components/Button";
5 | import ShouldRender from "@components/ShouldRender";
6 | import { useTheme } from "next-themes";
7 | import clsx from "clsx";
8 |
9 | const iconProps = {
10 | className: "text-white w-5 h-5 -xs:w-4 -xs:h-4",
11 | };
12 |
13 | const icons = [
14 |
13 |
16 |
6 |
23 | );
24 | };
25 |
26 | export default Custom404;
27 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import type { AppProps } from "next/app";
3 | import { ToastContainer } from "react-toastify";
4 | import RouterProgressBar from "@components/RouterProgressBar";
5 | import MainLayout from "@layouts/MainLayout";
6 | import { ThemeProvider } from "next-themes";
7 | import { SessionProvider } from "next-auth/react";
8 | import { trpc } from "@utils/trpc";
9 | import PostModal from "@components/PostModal";
10 | import "@styles/globals.scss";
11 | import "react-markdown-editor-lite/lib/index.css";
12 | import "react-toastify/dist/ReactToastify.css";
13 | import "nprogress/nprogress.css";
14 | import "keen-slider/keen-slider.min.css";
15 |
16 | function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
17 | return (
18 | 7 | 404 8 |
9 | 10 |
11 |
15 |
16 |
20 | Click here to go back to the homepage
21 |
22 | 12 | Sorry, the page you are looking for could not be found. 13 |
14 |
18 |
20 |
21 | );
22 | };
23 |
24 | export default NewUserPage;
25 |
26 | export async function getServerSideProps({
27 | req,
28 | res,
29 | ...context
30 | }: GetServerSidePropsContext) {
31 | const session = await getServerAuthSession({ req, res });
32 |
33 | const callbackUrl = context.query.callbackUrl as string;
34 |
35 | if (!session?.user) {
36 | return { redirect: { destination: "/" } };
37 | }
38 |
39 | // Only create welcome notifications once.
40 | const userHasAlreadyBeenWelcomed = await prisma.notification.findFirst({
41 | where: {
42 | type: "WELCOME",
43 | notifiedId: session?.user.id,
44 | },
45 | });
46 |
47 | if (!userHasAlreadyBeenWelcomed) {
48 | const noAvatar = !session?.user?.image;
49 | const noUsername = !session?.user?.name;
50 |
51 | const createSystemNotification = (type: string) => {
52 | return prisma.notification.create({
53 | data: {
54 | type,
55 | notifierId: session?.user.id,
56 | notifiedId: session?.user.id,
57 | },
58 | });
59 | };
60 |
61 | const welcomeNotification = createSystemNotification("WELCOME");
62 | const firstPostNotification = createSystemNotification("FIRST-POST");
63 | const noUsernameNotification = createSystemNotification("NO-USERNAME");
64 | const noAvatarNotification = createSystemNotification("NO-AVATAR");
65 |
66 | const promisesToAwait = [welcomeNotification, firstPostNotification];
67 |
68 | // If the user does not have avatar or username, they will be alerted on first sign-in.
69 | if (noAvatar) promisesToAwait.push(noAvatarNotification);
70 | if (noUsername) promisesToAwait.push(noUsernameNotification);
71 |
72 | // fetching in parallel to reduce wait.
73 | await Promise.all(promisesToAwait);
74 | }
75 |
76 | return { redirect: { destination: callbackUrl || "/" } };
77 | }
78 |
--------------------------------------------------------------------------------
/src/pages/auth/signout.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState } from "react";
2 | import type { GetServerSidePropsContext } from "next";
3 | import { signOut } from "next-auth/react";
4 | import Link from "next/link";
5 | import { useRouter } from "next/router";
6 | import MetaTags from "@components/MetaTags";
7 | import Button from "@components/Button";
8 | import { getServerAuthSession } from "@server/utils/auth";
9 |
10 | const SignoutPage: React.FC = () => {
11 | const [isLoading, setIsLoading] = useState
29 |
58 |
59 | );
60 | };
61 |
62 | export default SignoutPage;
63 |
64 | export async function getServerSideProps({
65 | req,
66 | res,
67 | }: GetServerSidePropsContext) {
68 | const session = await getServerAuthSession({ req, res });
69 |
70 | // If the user is not logged in, redirect.
71 | if (!session) {
72 | return { redirect: { destination: "/" } };
73 | }
74 |
75 | return {
76 | props: {},
77 | };
78 | }
79 |
--------------------------------------------------------------------------------
/src/pages/auth/verify-request.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import type { GetServerSidePropsContext } from "next";
3 | import AuthFeedbackMessage from "@components/AuthFeedbackMessage";
4 | import MetaTags from "@components/MetaTags";
5 | import Link from "next/link";
6 | import { getServerAuthSession } from "@server/utils/auth";
7 |
8 | const VerifyEmailPage: React.FC = () => {
9 | return (
10 | <>
11 |
30 |
57 |
31 |
44 |
45 | 32 | Are you sure you want to sign out? 33 |
34 |35 | Or{" "} 36 | 40 | go back to home 41 | 42 |
43 |
46 |
55 |
56 |
13 |
37 |
38 | );
39 | };
40 |
41 | export default VerifyEmailPage;
42 |
43 | export async function getServerSideProps({
44 | req,
45 | res,
46 | }: GetServerSidePropsContext) {
47 | const session = await getServerAuthSession({ req, res });
48 |
49 | // If the user is already logged in, redirect.
50 | if (session) {
51 | return { redirect: { destination: "/" } };
52 | }
53 |
54 | return {
55 | props: {},
56 | };
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/posts/[postId].tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { trpc } from "@utils/trpc";
3 | import { useRouter } from "next/router";
4 | import {
5 | GetServerSidePropsContext,
6 | InferGetServerSidePropsType,
7 | NextPage,
8 | } from "next";
9 | import { generateSSGHelper } from "@server/ssgHepers";
10 | import { PostDetails } from "@components/PostDetails";
11 |
12 | const SinglePostPage: NextPage<
13 | InferGetServerSidePropsType
15 |
36 | 16 | E-mail sent to your e-mail address. 17 |
18 | 19 |20 | Check your inbox for your magic link. It provides a{" "} 21 | 22 | password-less{" "} 23 | 24 | access to your account. 25 |
26 | 27 |
28 |
32 | Go back to home
33 |
34 |
35 |