Linting, component clean up
This commit is contained in:
parent
ba732dcd71
commit
e49ca2e749
25 changed files with 97 additions and 87 deletions
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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(() => {
|
||||
|
@ -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
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -31,7 +31,8 @@ function Title({ onChange, title }: props) {
|
|||
label="Title"
|
||||
className={styles.labelAndInput}
|
||||
style={{ width: "100%" }}
|
||||
labelClassName={styles.labelAndInput} />
|
||||
labelClassName={styles.labelAndInput}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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}</>
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
||||
|
|
|
@ -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>(
|
||||
|
|
|
@ -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}`,
|
||||
{
|
||||
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} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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<
|
||||
|
|
|
@ -5,7 +5,6 @@ export default function ButtonGroup({
|
|||
verticalIfMobile,
|
||||
...props
|
||||
}: {
|
||||
children: React.ReactNode | React.ReactNode[]
|
||||
verticalIfMobile?: boolean
|
||||
} & React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
|
|
|
@ -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
|
||||
|
|
8
src/app/components/layout/index.tsx
Normal file
8
src/app/components/layout/index.tsx
Normal file
|
@ -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>
|
||||
}
|
|
@ -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>
|
||||
}
|
|
@ -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} />
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -3,11 +3,27 @@
|
|||
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>
|
||||
<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) => {
|
||||
|
@ -20,12 +36,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
|
|||
keepPreviousData: true
|
||||
}}
|
||||
>
|
||||
<RadixTooltip.Provider delayDuration={200}>
|
||||
<ThemeProvider enableSystem defaultTheme="dark">
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</RadixTooltip.Provider>
|
||||
</SWRConfig>
|
||||
</SessionProvider>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
--small-gap: 4rem;
|
||||
--big-gap: 4rem;
|
||||
--main-content: 55rem;
|
||||
--main-content: 50rem;
|
||||
--radius: 8px;
|
||||
--inline-radius: 5px;
|
||||
|
||||
|
|
|
@ -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")
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue