Eslint changes and linting (no-mix-spaces)

.eslintrc.json

@@ -7,5 +7,8 @@
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
   "root": true,
-  "ignorePatterns": ["node_modules/", "__tests__/"]
+  "ignorePatterns": ["node_modules/", "__tests__/"],
+  "rules": {
+	"no-mixed-spaces-and-tabs": ["off"]
+  }
 }

package.json

@@ -6,7 +6,7 @@
 		"dev": "next dev --port 3000",
 		"build": "next build",
 		"start": "next start --port 3000",
-		"lint": "next lint && prettier --list-different --config .prettierrc '{components,lib,app,pages}/**/*.{ts,tsx}' --write",
+		"lint": "next lint && prettier --list-different --config .prettierrc 'src/{components,lib,app,pages}/**/*.{ts,tsx}' --write",
 		"analyze": "cross-env ANALYZE=true next build",
 		"find:unused": "next-unused",
 		"prisma": "prisma",

src/app/(posts)/new/components/description/index.tsx

@@ -1,5 +1,5 @@
 import Input from "@components/input"
-import { ChangeEvent, memo } from "react"
+import { ChangeEvent } from "react"
 
 import styles from "../post.module.css"
 

src/app/(posts)/new/components/new.tsx

@@ -55,7 +55,6 @@ const Post = ({
 				title: doc.title,
 				content: doc.content,
 				id: doc.id
-				// eslint-disable-next-line no-mixed-spaces-and-tabs
 		  }))
 		: [emptyDoc]
 
@@ -285,7 +284,6 @@ const Post = ({
 							}
 						])
 					}}
-					type="default"
 					style={{
 						flex: 1
 					}}

src/app/(posts)/post/[id]/components/header/post-buttons/index.tsx

@@ -13,7 +13,7 @@ export const PostButtons = ({
 	files,
 	loading,
 	postId,
-	parentId,
+	parentId
 }: {
 	title: string
 	files?: Pick<PostWithFiles, "files">["files"]

src/app/(posts)/post/[id]/components/header/title/index.tsx

@@ -21,9 +21,9 @@ export const PostTitle = ({
 	visibility,
 	createdAt,
 	expiresAt,
-	loading,
+	loading
-	// authorId
+}: // authorId
-}: TitleProps) => {
+TitleProps) => {
 	return (
 		<span className={styles.title}>
 			<h1

src/app/(posts)/post/[id]/components/post-files/password-modal-wrapper.tsx

@@ -22,35 +22,38 @@ const PasswordModalPage = ({ setPost, postId, authorId }: Props) => {
 			? undefined
 			: session?.user && session?.user?.id === authorId
 	const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false)
-	const onSubmit = useCallback(async (password: string) => {
+	const onSubmit = useCallback(
-		const res = await fetch(`/api/post/${postId}?password=${password}`, {
+		async (password: string) => {
-			method: "GET",
+			const res = await fetch(`/api/post/${postId}?password=${password}`, {
-			headers: {
+				method: "GET",
-				"Content-Type": "application/json"
+				headers: {
-			}
+					"Content-Type": "application/json"
-		})
+				}
-
-		if (!res.ok) {
-			setToast({
-				type: "error",
-				message: "Wrong password"
 			})
-			return
-		}
 
-		const data = await res.json()
+			if (!res.ok) {
-		if (data) {
-			if (data.error) {
 				setToast({
-					message: data.error,
+					type: "error",
-					type: "error"
+					message: "Wrong password"
 				})
-			} else {
+				return
-				setIsPasswordModalOpen(false)
-				setPost(data.post)
 			}
-		}
+
-	}, [postId, setPost, setToast])
+			const data = await res.json()
+			if (data) {
+				if (data.error) {
+					setToast({
+						message: data.error,
+						type: "error"
+					})
+				} else {
+					setIsPasswordModalOpen(false)
+					setPost(data.post)
+				}
+			}
+		},
+		[postId, setPost, setToast]
+	)
 
 	const onClose = () => {
 		setIsPasswordModalOpen(false)

src/app/(posts)/post/[id]/components/post-files/view-document/index.tsx

@@ -21,11 +21,9 @@ type SharedProps = {
 type Props = (
 	| {
 			skeleton?: true
-			// eslint-disable-next-line no-mixed-spaces-and-tabs
 	  }
 	| {
 			skeleton?: false
-			// eslint-disable-next-line no-mixed-spaces-and-tabs
 	  }
 ) &
 	SharedProps

src/app/components/badges/badge.tsx

@@ -6,7 +6,7 @@ type BadgeProps = {
 } & React.HTMLAttributes<HTMLDivElement>
 
 const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-	({ type, children, ...rest}: BadgeProps, ref) => {
+	({ type, children, ...rest }: BadgeProps, ref) => {
 		return (
 			<div className={styles.container} {...rest}>
 				<div className={`${styles.badge} ${styles[type]}`} ref={ref}>

src/app/components/badges/visibility-control/index.tsx

@@ -15,7 +15,11 @@ type Props = {
 	visibility: string
 }
 
-const VisibilityControl = ({ authorId, postId, visibility: postVisibility }: Props) => {
+const VisibilityControl = ({
+	authorId,
+	postId,
+	visibility: postVisibility
+}: Props) => {
 	const { data: session } = useSession()
 	const isAuthor = session?.user && session?.user?.id === authorId
 	const [visibility, setVisibility] = useState<string>(postVisibility)
@@ -23,7 +27,7 @@ const VisibilityControl = ({ authorId, postId, visibility: postVisibility }: Pro
 	const [isSubmitting, setSubmitting] = useState<string | null>()
 	const [passwordModalVisible, setPasswordModalVisible] = useState(false)
 	const { setToast } = useToasts()
-	const router = useRouter();
+	const router = useRouter()
 
 	const sendRequest = useCallback(
 		async (visibility: string, password?: string) => {
@@ -43,7 +47,6 @@ const VisibilityControl = ({ authorId, postId, visibility: postVisibility }: Pro
 					message: "Visibility updated",
 					type: "success"
 				})
-				
 			} else {
 				setToast({
 					message: "An error occurred",
@@ -84,10 +87,12 @@ const VisibilityControl = ({ authorId, postId, visibility: postVisibility }: Pro
 
 	return (
 		<>
-			<ButtonGroup style={{
+			<ButtonGroup
-				maxWidth: 600,
+				style={{
-				margin: "var(--gap) auto",
+					maxWidth: 600,
-			}}>
+					margin: "var(--gap) auto"
+				}}
+			>
 				<Button
 					disabled={visibility === "private"}
 					onClick={() => onSubmit("private")}

src/app/components/button/index.tsx

@@ -1,9 +1,12 @@
 import styles from "./button.module.css"
-import { forwardRef, Ref } from "react"
+import { forwardRef } from "react"
 import clsx from "clsx"
 import { Spinner } from "@components/spinner"
 
-type Props = React.HTMLProps<HTMLButtonElement> & {
+type Props = React.DetailedHTMLProps<
+	React.ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
+> & {
 	children?: React.ReactNode
 	buttonType?: "primary" | "secondary"
 	className?: string
@@ -25,7 +28,6 @@ const Button = forwardRef<HTMLButtonElement, Props>(
 			onClick,
 			className,
 			buttonType = "primary",
-			type = "button",
 			disabled = false,
 			iconRight,
 			iconLeft,
@@ -41,11 +43,10 @@ const Button = forwardRef<HTMLButtonElement, Props>(
 		return (
 			<button
 				ref={ref}
-				className={clsx(
+				className={clsx(styles.button, className, {
-					styles.button,
+					[styles.primary]: buttonType === "primary",
-					type === "primary" || (type === "secondary" && styles[type]),
+					[styles.secondary]: buttonType === "secondary"
-					className
+				})}
-				)}
 				disabled={disabled || loading}
 				onClick={onClick}
 				style={{ height, width, margin, padding }}

src/app/components/input/index.tsx

@@ -17,7 +17,7 @@ type InputProps = Omit<Props, "onChange" | "value" | "label" | "aria-label"> &
 		| {
 				onChange: Props["onChange"]
 				value: Props["value"]
-		  } // if onChange or value is passed, we require both
+		  }
 		| {
 				onChange?: never
 				value?: never
@@ -64,6 +64,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 					ref={ref}
 					id={labelId}
 					className={clsx(styles.input, label && styles.withLabel, className)}
+					required={required}
 					{...props}
 					style={{
 						width,

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

@@ -92,33 +92,35 @@ const ListItem = ({
 									<ExpirationBadge postExpirationDate={post.expiresAt} />
 								</div>
 							</span>
-							{!hideActions ? <span className={styles.buttons}>
+							{!hideActions ? (
-								{post.parentId && (
+								<span className={styles.buttons}>
-									<Tooltip content={"View parent"}>
+									{post.parentId && (
+										<Tooltip content={"View parent"}>
+											<Button
+												iconRight={<ArrowUpCircle />}
+												onClick={viewParentClick}
+												height={38}
+											/>
+										</Tooltip>
+									)}
+									<Tooltip content={"Make a copy"}>
 										<Button
-											iconRight={<ArrowUpCircle />}
+											iconRight={<Edit />}
-											onClick={viewParentClick}
+											onClick={editACopy}
 											height={38}
 										/>
 									</Tooltip>
-								)}
+									{isOwner && (
-								<Tooltip content={"Make a copy"}>
+										<Tooltip content={"Delete"}>
-									<Button
+											<Button
-										iconRight={<Edit />}
+												iconRight={<Trash />}
-										onClick={editACopy}
+												onClick={deletePost}
-										height={38}
+												height={38}
-									/>
+											/>
-								</Tooltip>
+										</Tooltip>
-								{isOwner && (
+									)}
-									<Tooltip content={"Delete"}>
+								</span>
-										<Button
+							) : null}
-											iconRight={<Trash />}
-											onClick={deletePost}
-											height={38}
-										/>
-									</Tooltip>
-								)}
-							</span> : null}
 						</div>
 
 						{post.description && (

src/app/hooks/swr/use-api-tokens.ts

@@ -53,7 +53,7 @@ export function useApiTokens({ userId, initialTokens }: UseApiTokens) {
 
 		mutate([...(data || []), response])
 
-        return response as SerializedApiToken
+		return response as SerializedApiToken
 	}
 
 	const expireToken = async (id: string) => {

src/app/lib/copy-to-clipboard.ts

@@ -1,3 +1,3 @@
-export async function copyToClipboard(text: string ) {
+export async function copyToClipboard(text: string) {
-    await navigator.clipboard.writeText(text)
+	await navigator.clipboard.writeText(text)
 }

src/app/mine/page.tsx

@@ -24,4 +24,4 @@ export default async function Mine() {
 	)
 }
 
-export const revalidate = 0;
+export const revalidate = 0

src/app/page.tsx

@@ -68,7 +68,9 @@ export default async function Page() {
 			<div>
 				<h2>Recent public posts</h2>
 				<Suspense
-					fallback={<PostList skeleton hideSearch initialPosts={JSON.stringify({})} />}
+					fallback={
+						<PostList skeleton hideSearch initialPosts={JSON.stringify({})} />
+					}
 				>
 					{/* @ts-expect-error because of async RSC */}
 					<PublicPostList getPostsPromise={getPostsPromise} />

src/app/settings/components/sections/api-keys.tsx

@@ -5,7 +5,10 @@ import Input from "@components/input"
 import Note from "@components/note"
 import { Spinner } from "@components/spinner"
 import { useToasts } from "@components/toasts"
-import { SerializedApiToken, useApiTokens } from "src/app/hooks/swr/use-api-tokens"
+import {
+	SerializedApiToken,
+	useApiTokens
+} from "src/app/hooks/swr/use-api-tokens"
 import { copyToClipboard } from "src/app/lib/copy-to-clipboard"
 import { useSession } from "next-auth/react"
 import { useState } from "react"

src/lib/server/auth.ts

@@ -146,7 +146,7 @@ export const authOptions: NextAuthOptions = {
 			if (config.enable_admin && totalUsers === 1) {
 				await prisma.user.update({
 					where: {
-						id: user.id,
+						id: user.id
 					},
 					data: {
 						role: "admin"
@@ -161,7 +161,7 @@ export const authOptions: NextAuthOptions = {
 					},
 					data: {
 						username: user.name,
-						displayName: user.name,
+						displayName: user.name
 					}
 				})
 			}

src/pages/api/post/[id].ts

@@ -68,7 +68,7 @@ async function handleGet(req: NextApiRequest, res: NextApiResponse<unknown>) {
 				post: {
 					id: post.id,
 					visibility: post.visibility,
-					authorId: post.authorId,
+					authorId: post.authorId
 				}
 			})
 		}

src/pages/api/user/tokens.ts

@@ -25,7 +25,7 @@ export default async function handle(
 					expiresAt: true,
 					name: true
 				}
-			});
+			})
 
 			console.log(tokens)