Add ErrorBoundary to /mine, remove header underline

This commit is contained in:
Max Leiter 2023-02-23 23:46:26 -08:00
parent 0b6d31373d
commit f2d42a6c0c
4 changed files with 15 additions and 17 deletions

View file

@ -3,9 +3,7 @@ import { Providers } from "./providers"
import Layout from "@components/layout" import Layout from "@components/layout"
import { Toasts } from "@components/toasts" import { Toasts } from "@components/toasts"
import Header from "@components/header" import Header from "@components/header"
import { Inter } from "@next/font/google" import { Inter } from "next/font/google"
import { Suspense } from "react"
import { Spinner } from "@components/spinner"
const inter = Inter({ subsets: ["latin"], variable: "--inter-font" }) const inter = Inter({ subsets: ["latin"], variable: "--inter-font" })
@ -22,9 +20,7 @@ export default async function RootLayout({
<Toasts /> <Toasts />
<Layout> <Layout>
<Providers> <Providers>
<Suspense fallback={<Spinner />}>
<Header /> <Header />
</Suspense>
{children} {children}
</Providers> </Providers>
</Layout> </Layout>

View file

@ -4,6 +4,7 @@ import PostList from "@components/post-list"
import { getCurrentUser } from "@lib/server/session" import { getCurrentUser } from "@lib/server/session"
import { authOptions } from "@lib/server/auth" import { authOptions } from "@lib/server/auth"
import { Suspense } from "react" import { Suspense } from "react"
import ErrorBoundary from "@components/error/fallback"
export default async function Mine() { export default async function Mine() {
const userId = (await getCurrentUser())?.id const userId = (await getCurrentUser())?.id
@ -14,6 +15,7 @@ export default async function Mine() {
const posts = (await getPostsByUser(userId, true)).map(serverPostToClientPost) const posts = (await getPostsByUser(userId, true)).map(serverPostToClientPost)
return ( return (
<ErrorBoundary>
<Suspense fallback={<PostList skeleton={true} initialPosts={[]} />}> <Suspense fallback={<PostList skeleton={true} initialPosts={[]} />}>
<PostList <PostList
userId={userId} userId={userId}
@ -22,6 +24,7 @@ export default async function Mine() {
hideSearch={false} hideSearch={false}
/> />
</Suspense> </Suspense>
</ErrorBoundary>
) )
} }

View file

@ -21,13 +21,12 @@
.tabs button, .tabs button,
.tabs a { .tabs a {
color: var(--darker-gray); color: var(--darker-gray);
transition: color, box-shadow 0.2s ease-in-out; transition: color 0.2s ease;
} }
.tabs .buttons a:hover, .tabs .buttons a:hover,
.tabs .buttons button:hover { .tabs .buttons button:hover {
color: var(--fg); color: var(--fg);
box-shadow: inset 0 -1px 0 var(--fg);
} }
.wrapper { .wrapper {

View file

@ -2,7 +2,7 @@ import "@styles/globals.css"
import "@styles/markdown.css" import "@styles/markdown.css"
import Layout from "@components/layout" import Layout from "@components/layout"
import { Inter } from "@next/font/google" import { Inter } from "next/font/google"
import ThemeProvider from "./theme-provider" import ThemeProvider from "./theme-provider"
const inter = Inter({ subsets: ["latin"], variable: "--inter-font" }) const inter = Inter({ subsets: ["latin"], variable: "--inter-font" })