From e49ca2e7498efabd949e249e7f0f35146f851872 Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Thu, 12 Jan 2023 23:56:04 -0800 Subject: [PATCH] Linting, component clean up --- src/app/(auth)/components/index.tsx | 5 +- .../components/file-dropdown/index.tsx | 3 +- src/app/(posts)/components/preview/index.tsx | 16 +++--- .../new/components/description/index.tsx | 3 +- .../edit-document/formatting-icons/index.tsx | 9 ++-- .../(posts)/new/components/title/index.tsx | 3 +- src/app/(posts)/new/layout.tsx | 4 +- src/app/(posts)/new/page.tsx | 2 +- .../[id]/components/header/title/index.tsx | 1 - src/app/(posts)/post/[id]/layout.tsx | 6 +-- src/app/admin/layout.tsx | 5 +- src/app/components/badges/badge.tsx | 1 - .../badges/visibility-control/index.tsx | 28 +++++------ src/app/components/button-dropdown/index.tsx | 2 +- src/app/components/button-group/index.tsx | 1 - src/app/components/fade-in/index.tsx | 11 ++--- src/app/components/layout/index.tsx | 8 +++ .../{page => layout}/page.module.css | 0 src/app/components/page/index.tsx | 5 -- .../post-list/list-item-skeleton.tsx | 2 +- src/app/layout.tsx | 15 +++--- src/app/providers.tsx | 49 ++++++++++++------- .../settings/components/sections/profile.tsx | 2 +- src/app/styles/globals.css | 2 +- src/lib/server/auth.ts | 1 + 25 files changed, 97 insertions(+), 87 deletions(-) create mode 100644 src/app/components/layout/index.tsx rename src/app/components/{page => layout}/page.module.css (100%) delete mode 100644 src/app/components/page/index.tsx diff --git a/src/app/(auth)/components/index.tsx b/src/app/(auth)/components/index.tsx index 065ac078..7de0a4aa 100644 --- a/src/app/(auth)/components/index.tsx +++ b/src/app/(auth)/components/index.tsx @@ -27,6 +27,7 @@ function Auth({ const signText = signingIn ? "In" : "Up" const [username, setUsername] = useState("") const [password, setPassword] = useState("") + const [submitting, setSubmitting] = useState(false) const queryParams = useSearchParams() useEffect(() => { @@ -40,6 +41,7 @@ function Auth({ async function handleSubmit(event: React.FormEvent) { event.preventDefault() + setSubmitting(true) const res = await signIn("credentials", { username, @@ -54,6 +56,7 @@ function Auth({ type: "error", message: res.error }) + setSubmitting(false) } else { startTransition(() => { router.push("/new") @@ -126,7 +129,7 @@ function Auth({ width="100%" aria-label="Password" /> - {isGithubEnabled ?
: null} diff --git a/src/app/(posts)/components/file-dropdown/index.tsx b/src/app/(posts)/components/file-dropdown/index.tsx index ddf6ee4e..e6a67e0d 100644 --- a/src/app/(posts)/components/file-dropdown/index.tsx +++ b/src/app/(posts)/components/file-dropdown/index.tsx @@ -9,7 +9,8 @@ import { Spinner } from "@components/spinner" import Link from "next/link" function FileDropdown({ - files, loading + files, + loading }: { files: Pick["files"] loading?: boolean diff --git a/src/app/(posts)/components/preview/index.tsx b/src/app/(posts)/components/preview/index.tsx index cc5d914c..8061711b 100644 --- a/src/app/(posts)/components/preview/index.tsx +++ b/src/app/(posts)/components/preview/index.tsx @@ -12,9 +12,7 @@ type Props = { title?: string } -function MarkdownPreview({ - height = 500, fileId, content = "", title -}: Props) { +function MarkdownPreview({ height = 500, fileId, content = "", title }: Props) { const [preview, setPreview] = useState(content) const [isLoading, setIsLoading] = useState(true) useEffect(() => { @@ -25,9 +23,9 @@ function MarkdownPreview({ const body = fileId ? undefined : JSON.stringify({ - title: title || "", - content: content - }) + title: title || "", + content: content + }) const resp = await fetchWithUser(path, { method: method, @@ -61,7 +59,8 @@ function MarkdownPreview({ export default memo(MarkdownPreview) export function StaticPreview({ - preview, height = 500 + preview, + height = 500 }: { preview: string height: string | number @@ -72,6 +71,7 @@ export function StaticPreview({ dangerouslySetInnerHTML={{ __html: preview }} style={{ height - }} /> + }} + /> ) } diff --git a/src/app/(posts)/new/components/description/index.tsx b/src/app/(posts)/new/components/description/index.tsx index 7d668d58..5cced53e 100644 --- a/src/app/(posts)/new/components/description/index.tsx +++ b/src/app/(posts)/new/components/description/index.tsx @@ -17,7 +17,8 @@ function Description({ onChange, description }: props) { label="Description" maxLength={256} width="100%" - placeholder="An optional description of your post" /> + placeholder="An optional description of your post" + /> ) } diff --git a/src/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx b/src/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx index 76504b93..225bdcc9 100644 --- a/src/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx +++ b/src/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx @@ -15,7 +15,8 @@ import clsx from "clsx" // TODO: clean up function FormattingIcons({ - textareaRef, className + textareaRef, + className }: { textareaRef?: RefObject className?: string @@ -26,7 +27,8 @@ function FormattingIcons({ const handleLinkClick = () => textareaRef?.current?.trigger("link") const handleImageClick = () => textareaRef?.current?.trigger("image") const handleCodeClick = () => textareaRef?.current?.trigger("code") - const handleListClick = () => textareaRef?.current?.trigger("unordered-list") + const handleListClick = () => + textareaRef?.current?.trigger("unordered-list") return [ { icon: , @@ -81,7 +83,8 @@ function FormattingIcons({ iconRight={icon} onMouseDown={(e) => e.preventDefault()} onClick={action} - buttonType="secondary" /> + buttonType="secondary" + /> ))} diff --git a/src/app/(posts)/new/components/title/index.tsx b/src/app/(posts)/new/components/title/index.tsx index 35e2a8ba..13fa0a51 100644 --- a/src/app/(posts)/new/components/title/index.tsx +++ b/src/app/(posts)/new/components/title/index.tsx @@ -31,7 +31,8 @@ function Title({ onChange, title }: props) { label="Title" className={styles.labelAndInput} style={{ width: "100%" }} - labelClassName={styles.labelAndInput} /> + labelClassName={styles.labelAndInput} + /> ) } diff --git a/src/app/(posts)/new/layout.tsx b/src/app/(posts)/new/layout.tsx index 6be613b1..1b55a7af 100644 --- a/src/app/(posts)/new/layout.tsx +++ b/src/app/(posts)/new/layout.tsx @@ -1,3 +1,5 @@ -export default function NewLayout({ children }: { children: React.ReactNode }) { +import { ChildrenProps } from "src/app/providers" + +export default function NewLayout({ children }: ChildrenProps) { return <>{children} } diff --git a/src/app/(posts)/new/page.tsx b/src/app/(posts)/new/page.tsx index b2f18bf6..93d2b9d8 100644 --- a/src/app/(posts)/new/page.tsx +++ b/src/app/(posts)/new/page.tsx @@ -2,7 +2,7 @@ import NewPost from "src/app/(posts)/new/components/new" import "./react-datepicker.css" export default function New() { - return + return } export const dynamic = "force-static" diff --git a/src/app/(posts)/post/[id]/components/header/title/index.tsx b/src/app/(posts)/post/[id]/components/header/title/index.tsx index 6d12b678..f3d5d7a3 100644 --- a/src/app/(posts)/post/[id]/components/header/title/index.tsx +++ b/src/app/(posts)/post/[id]/components/header/title/index.tsx @@ -1,7 +1,6 @@ import CreatedAgoBadge from "@components/badges/created-ago-badge" import ExpirationBadge from "@components/badges/expiration-badge" import VisibilityBadge from "@components/badges/visibility-badge" -import Link from "@components/link" import Skeleton from "@components/skeleton" import styles from "./title.module.css" diff --git a/src/app/(posts)/post/[id]/layout.tsx b/src/app/(posts)/post/[id]/layout.tsx index 4dff8783..4a75f864 100644 --- a/src/app/(posts)/post/[id]/layout.tsx +++ b/src/app/(posts)/post/[id]/layout.tsx @@ -5,16 +5,16 @@ import { PostButtons } from "./components/header/post-buttons" import styles from "./layout.module.css" import { PostTitle } from "./components/header/title" import { getPost } from "./get-post" +import { PropsWithChildren } from "react" export default async function PostLayout({ children, params -}: { +}: PropsWithChildren<{ params: { id: string } - children: React.ReactNode -}) { +}>) { const { post } = (await getPost(params.id)) as { post: PostWithFilesAndAuthor } diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx index 92a478f9..229a52f8 100644 --- a/src/app/admin/layout.tsx +++ b/src/app/admin/layout.tsx @@ -1,11 +1,10 @@ import { getCurrentUser } from "@lib/server/session" import { redirect } from "next/navigation" +import { PropsWithChildren } from "react" export default async function AdminLayout({ children -}: { - children: React.ReactNode -}) { +}: PropsWithChildren) { const user = await getCurrentUser() const isAdmin = user?.role === "admin" diff --git a/src/app/components/badges/badge.tsx b/src/app/components/badges/badge.tsx index 84584be4..2e2668a2 100644 --- a/src/app/components/badges/badge.tsx +++ b/src/app/components/badges/badge.tsx @@ -2,7 +2,6 @@ import React from "react" import styles from "./badge.module.css" type BadgeProps = { type: "primary" | "secondary" | "error" | "warning" - children: React.ReactNode } & React.HTMLAttributes const Badge = React.forwardRef( diff --git a/src/app/components/badges/visibility-control/index.tsx b/src/app/components/badges/visibility-control/index.tsx index 4f9128fd..3d0e1f8a 100644 --- a/src/app/components/badges/visibility-control/index.tsx +++ b/src/app/components/badges/visibility-control/index.tsx @@ -16,11 +16,9 @@ type Props = { visibility: string } -const VisibilityControl = ({ - authorId, - postId, - visibility: postVisibility -}: Props) => { +function VisibilityControl({ + authorId, postId, visibility: postVisibility +}: Props) { const { session } = useSessionSWR() const isAuthor = session?.user && session?.user?.id === authorId const [visibility, setVisibility] = useState(postVisibility) @@ -32,16 +30,13 @@ const VisibilityControl = ({ const sendRequest = useCallback( async (visibility: string, password?: string) => { - const res = await fetchWithUser( - `/api/post/${postId}`, - { - method: "PUT", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({ visibility, password }) - } - ) + const res = await fetchWithUser(`/api/post/${postId}`, { + method: "PUT", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ visibility, password }) + }) if (res.ok) { const json = await res.json() @@ -129,8 +124,7 @@ const VisibilityControl = ({ creating={true} isOpen={passwordModalVisible} onClose={onClosePasswordModal} - onSubmit={submitPassword} - /> + onSubmit={submitPassword} /> ) } diff --git a/src/app/components/button-dropdown/index.tsx b/src/app/components/button-dropdown/index.tsx index 12bec7dc..3d4eee93 100644 --- a/src/app/components/button-dropdown/index.tsx +++ b/src/app/components/button-dropdown/index.tsx @@ -8,7 +8,7 @@ type Props = { height?: number | string } -type Attrs = Omit, keyof Props> +type Attrs = Omit, keyof Props> type ButtonDropdownProps = Props & Attrs const ButtonDropdown: React.FC< diff --git a/src/app/components/button-group/index.tsx b/src/app/components/button-group/index.tsx index 309d59be..fdea51bf 100644 --- a/src/app/components/button-group/index.tsx +++ b/src/app/components/button-group/index.tsx @@ -5,7 +5,6 @@ export default function ButtonGroup({ verticalIfMobile, ...props }: { - children: React.ReactNode | React.ReactNode[] verticalIfMobile?: boolean } & React.HTMLAttributes) { return ( diff --git a/src/app/components/fade-in/index.tsx b/src/app/components/fade-in/index.tsx index 11bae2b2..44a0c00b 100644 --- a/src/app/components/fade-in/index.tsx +++ b/src/app/components/fade-in/index.tsx @@ -1,19 +1,14 @@ // https://www.joshwcomeau.com/snippets/react-components/fade-in/ import styles from "./fade.module.css" -const FadeIn = ({ - duration = 300, - delay = 0, - children, - as, - ...delegated +function FadeIn({ + duration = 300, delay = 0, children, as, ...delegated }: { duration?: number delay?: number children: React.ReactNode as?: React.ElementType - [key: string]: any -}) => { +} & React.HTMLAttributes) { const Element = as || "div" return ( ) { + return
{children}
+} diff --git a/src/app/components/page/page.module.css b/src/app/components/layout/page.module.css similarity index 100% rename from src/app/components/page/page.module.css rename to src/app/components/layout/page.module.css diff --git a/src/app/components/page/index.tsx b/src/app/components/page/index.tsx deleted file mode 100644 index 13f08078..00000000 --- a/src/app/components/page/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import styles from "./page.module.css" - -export default function Page({ children }: { children: React.ReactNode }) { - return
{children}
-} diff --git a/src/app/components/post-list/list-item-skeleton.tsx b/src/app/components/post-list/list-item-skeleton.tsx index 9033eb9d..a08f28f5 100644 --- a/src/app/components/post-list/list-item-skeleton.tsx +++ b/src/app/components/post-list/list-item-skeleton.tsx @@ -5,7 +5,7 @@ import Skeleton from "@components/skeleton" export const ListItemSkeleton = () => (
  • -
    +
    {/* title */} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d2b624c1..5f52e814 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,29 +1,28 @@ import "@styles/globals.css" import { Providers } from "./providers" -import Page from "@components/page" +import Layout from "@components/layout" import { Toasts } from "@components/toasts" import Header from "@components/header" import { Inter } from "@next/font/google" +import { PropsWithChildren } from "react" const inter = Inter({ subsets: ["latin"], variable: "--inter-font" }) -interface RootLayoutProps { - children: React.ReactNode -} - -export default async function RootLayout({ children }: RootLayoutProps) { +export default async function RootLayout({ + children +}: PropsWithChildren) { return ( // suppressHydrationWarning is required because of next-themes - +
    {children} - + ) diff --git a/src/app/providers.tsx b/src/app/providers.tsx index c7a645ce..e0081c6d 100644 --- a/src/app/providers.tsx +++ b/src/app/providers.tsx @@ -3,29 +3,40 @@ import * as RadixTooltip from "@radix-ui/react-tooltip" import { SessionProvider } from "next-auth/react" import { ThemeProvider } from "next-themes" +import { PropsWithChildren } from "react" import { SWRConfig } from "swr" -export function Providers({ children }: { children: React.ReactNode }) { +export type ChildrenProps = { + children?: React.ReactNode +} + +export function Providers({ children }: ChildrenProps) { return ( - { - const data = await fetch(url).then((res) => res.json()) - if (data.error) { - throw new Error(data.error) - } - return data - }, - keepPreviousData: true - }} - > - - - {children} - - - + + + {children} + + ) } + +function SWRProvider({ children }: PropsWithChildren) { + return ( + { + const data = await fetch(url).then((res) => res.json()) + if (data.error) { + throw new Error(data.error) + } + return data + }, + keepPreviousData: true + }} + > + {children} + + ) +} diff --git a/src/app/settings/components/sections/profile.tsx b/src/app/settings/components/sections/profile.tsx index d716e150..3955425a 100644 --- a/src/app/settings/components/sections/profile.tsx +++ b/src/app/settings/components/sections/profile.tsx @@ -13,7 +13,7 @@ import { User } from "@prisma/client" function Profile() { const { session } = useSessionSWR() console.log(session) - const { data: userData } = useSWR( + const { data: userData } = useSWR( session?.user?.id ? `/api/user/${session?.user?.id}` : null ) const [name, setName] = useState(userData?.displayName || "") diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css index 7212db86..038067a3 100644 --- a/src/app/styles/globals.css +++ b/src/app/styles/globals.css @@ -7,7 +7,7 @@ --small-gap: 4rem; --big-gap: 4rem; - --main-content: 55rem; + --main-content: 50rem; --radius: 8px; --inline-radius: 5px; diff --git a/src/lib/server/auth.ts b/src/lib/server/auth.ts index 2cbbaf27..131f6641 100644 --- a/src/lib/server/auth.ts +++ b/src/lib/server/auth.ts @@ -49,6 +49,7 @@ const providers = () => { // @ts-expect-error TODO: fix types credentials: credentialsOptions() as unknown, async authorize(credentials) { + console.log("credentials") if (!credentials || !credentials.username || !credentials.password) { throw new Error("Missing credentials") }