Linting, component clean up

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<HTMLFormElement>) {
 		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"
 						/>
-						<Button width={"100%"} type="submit">
+						<Button width={"100%"} type="submit" loading={submitting}>
 							Sign {signText}
 						</Button>
 						{isGithubEnabled ? <hr style={{ width: "100%" }} /> : null}

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<PostWithFiles, "files">["files"]
 	loading?: boolean

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<string>(content)
 	const [isLoading, setIsLoading] = useState<boolean>(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
-			}} />
+			}}
+		/>
 	)
 }

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"
+			/>
 		</div>
 	)
 }

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<TextareaMarkdownRef>
 	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: <Bold />,
@@ -81,7 +83,8 @@ function FormattingIcons({
 						iconRight={icon}
 						onMouseDown={(e) => e.preventDefault()}
 						onClick={action}
-						buttonType="secondary" />
+						buttonType="secondary"
+					/>
 				</Tooltip>
 			))}
 		</div>

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}
+			/>
 		</div>
 	)
 }

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}</>
 }

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 <NewPost />
+	return <NewPost />
 }
 
 export const dynamic = "force-static"

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"
 

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
 	}

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<unknown>) {
 	const user = await getCurrentUser()
 	const isAdmin = user?.role === "admin"
 

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<HTMLDivElement>
 
 const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(

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<string>(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} />
 		</>
 	)
 }

src/app/components/button-dropdown/index.tsx

@@ -8,7 +8,7 @@ type Props = {
 	height?: number | string
 }
 
-type Attrs = Omit<React.HTMLAttributes<any>, keyof Props>
+type Attrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>
 type ButtonDropdownProps = Props & Attrs
 
 const ButtonDropdown: React.FC<

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<HTMLDivElement>) {
 	return (

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<HTMLElement>) {
 	const Element = as || "div"
 	return (
 		<Element

src/app/components/layout/index.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import { PropsWithChildren } from "react"
+import styles from "./page.module.css"
+
+export default function Layout({ children }: PropsWithChildren<unknown>) {
+	return <div className={styles.page}>{children}</div>
+}

src/app/components/page/index.tsx

@@ -1,5 +0,0 @@
-import styles from "./page.module.css"
-
-export default function Page({ children }: { children: React.ReactNode }) {
-	return <div className={styles.page}>{children}</div>
-}

src/app/components/post-list/list-item-skeleton.tsx

@@ -5,7 +5,7 @@ import Skeleton from "@components/skeleton"
 export const ListItemSkeleton = () => (
 	<li>
 		<Card style={{ overflowY: "scroll" }}>
-			<div style={{display: 'flex', gap: 16}}>
+			<div style={{ display: "flex", gap: 16 }}>
 				<div className={styles.title}>
 					{/* title */}
 					<Skeleton width={80} height={32} />

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<unknown>) {
 	return (
 		// suppressHydrationWarning is required because of next-themes
 		<html lang="en" className={inter.variable} suppressHydrationWarning>
 			<head />
 			<body>
 				<Toasts />
-				<Page>
+				<Layout>
 					<Providers>
 						<Header />
 						{children}
 					</Providers>
-				</Page>
+				</Layout>
 			</body>
 		</html>
 	)

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 (
 		<SessionProvider>
-			<SWRConfig
-				value={{
-					fetcher: async (url: string) => {
-						const data = await fetch(url).then((res) => res.json())
-						if (data.error) {
-							throw new Error(data.error)
-						}
-						return data
-					},
-					keepPreviousData: true
-				}}
-			>
-				<RadixTooltip.Provider delayDuration={200}>
-					<ThemeProvider enableSystem defaultTheme="dark">
-						{children}
-					</ThemeProvider>
-				</RadixTooltip.Provider>
-			</SWRConfig>
+			<RadixTooltip.Provider delayDuration={200}>
+				<ThemeProvider enableSystem defaultTheme="dark">
+					<SWRProvider>{children}</SWRProvider>
+				</ThemeProvider>
+			</RadixTooltip.Provider>
 		</SessionProvider>
 	)
 }
+
+function SWRProvider({ children }: PropsWithChildren<unknown>) {
+	return (
+		<SWRConfig
+			value={{
+				fetcher: async (url: string) => {
+					const data = await fetch(url).then((res) => res.json())
+					if (data.error) {
+						throw new Error(data.error)
+					}
+					return data
+				},
+				keepPreviousData: true
+			}}
+		>
+			{children}
+		</SWRConfig>
+	)
+}

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<User>(
+	const { data: userData } = useSWR<User>(
 		session?.user?.id ? `/api/user/${session?.user?.id}` : null
 	)
 	const [name, setName] = useState<string>(userData?.displayName || "")

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;
 

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")
 					}