From 2bc3cba7f769bf5200b8286f88d5b69df63acb05 Mon Sep 17 00:00:00 2001 From: Iceship Date: Thu, 19 Sep 2024 14:07:50 +0000 Subject: [PATCH] refactor: Fix formatting in middleware.ts, route.ts, loading.tsx, and use-system-theme.ts --- .devcontainer/devcontainer.json | 6 +- public/dark-bg.svg | 8 +- public/light-bg.svg | 8 +- src/app/api/auth/[...nextauth]/route.ts | 14 +- src/app/loading.tsx | 26 +-- src/app/not-found.tsx | 30 ++-- src/app/profile/page.tsx | 46 ++--- src/components/app-navbar/auth-button.tsx | 126 +++++++------- src/components/app-navbar/index.tsx | 166 +++++++++---------- src/components/app-navbar/theme-switcher.tsx | 50 +++--- src/components/providers.tsx | 50 +++--- src/config/auth.ts | 36 ++-- src/env/server.ts | 46 ++--- src/hooks/use-system-theme.ts | 32 ++-- src/middleware.ts | 6 +- 15 files changed, 325 insertions(+), 325 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 82b50ea..ac390b3 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -3,16 +3,16 @@ { "name": "Node.js & TypeScript", // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile - "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm", + "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm" // Features to add to the dev container. More info: https://containers.dev/features. // "features": {}, // Use 'forwardPorts' to make a list of ports inside the container available locally. - "forwardPorts": [3000], + //"forwardPorts": [3000] // Use 'postCreateCommand' to run commands after the container is created. - "postCreateCommand": "npm install" + //"postCreateCommand": "npm install" // Configure tool-specific properties. // "customizations": {}, diff --git a/public/dark-bg.svg b/public/dark-bg.svg index 202bca3..8107c72 100644 --- a/public/dark-bg.svg +++ b/public/dark-bg.svg @@ -1,5 +1,5 @@ - - - - + + + + \ No newline at end of file diff --git a/public/light-bg.svg b/public/light-bg.svg index 71b114d..4e01890 100644 --- a/public/light-bg.svg +++ b/public/light-bg.svg @@ -1,5 +1,5 @@ - - - - + + + + \ No newline at end of file diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts index 0eac5e9..00e3afa 100644 --- a/src/app/api/auth/[...nextauth]/route.ts +++ b/src/app/api/auth/[...nextauth]/route.ts @@ -1,7 +1,7 @@ -import NextAuth from "next-auth"; - -import options from "@/config/auth"; - -const handler = NextAuth(options); - -export { handler as GET, handler as POST }; +import NextAuth from "next-auth"; + +import options from "@/config/auth"; + +const handler = NextAuth(options); + +export { handler as GET, handler as POST }; diff --git a/src/app/loading.tsx b/src/app/loading.tsx index 1a491b7..0d4609e 100644 --- a/src/app/loading.tsx +++ b/src/app/loading.tsx @@ -1,13 +1,13 @@ -import { CircularProgress } from "@nextui-org/react"; - -export default function Loading() { - return ( - - ); -} +import { CircularProgress } from "@nextui-org/react"; + +export default function Loading() { + return ( + + ); +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index ab1653b..5ba8d42 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -1,15 +1,15 @@ -import { Card, CardBody } from "@nextui-org/react"; -import { IconFileUnknown } from "@tabler/icons-react"; - -export default function NotFound() { - return ( - - -

- - 404 | Page Not Found -

- - - ); -} +import { Card, CardBody } from "@nextui-org/react"; +import { IconFileUnknown } from "@tabler/icons-react"; + +export default function NotFound() { + return ( + + +

+ + 404 | Page Not Found +

+ + + ); +} diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 4787dbe..1e2177c 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -1,23 +1,23 @@ -import { Card, CardBody, User } from "@nextui-org/react"; -import { getServerSession } from "next-auth"; - -import options from "@/config/auth"; - -export default async function Profile() { - const session = await getServerSession(options); - - return ( - - - - - - ); -} +import { Card, CardBody, User } from "@nextui-org/react"; +import { getServerSession } from "next-auth"; + +import options from "@/config/auth"; + +export default async function Profile() { + const session = await getServerSession(options); + + return ( + + + + + + ); +} diff --git a/src/components/app-navbar/auth-button.tsx b/src/components/app-navbar/auth-button.tsx index 627b875..01d76c4 100644 --- a/src/components/app-navbar/auth-button.tsx +++ b/src/components/app-navbar/auth-button.tsx @@ -1,63 +1,63 @@ -"use client"; - -import { - Avatar, - Button, - CircularProgress, - Dropdown, - DropdownItem, - DropdownMenu, - DropdownTrigger, -} from "@nextui-org/react"; -import { IconBrandGoogle } from "@tabler/icons-react"; -import { signIn, signOut, useSession } from "next-auth/react"; - -export default function AuthButton({ minimal = true }: { minimal?: boolean }) { - const { data, status } = useSession(); - if (status === "loading") { - return ; - } - if (status === "authenticated") { - const signOutClick = () => signOut({ callbackUrl: "/" }); - if (minimal) { - return ( - - ); - } - return ( - - - - - - -

Signed in as

-

{data.user?.email}

- - - Sign Out - - - - ); - } - return ( - - ); -} +"use client"; + +import { + Avatar, + Button, + CircularProgress, + Dropdown, + DropdownItem, + DropdownMenu, + DropdownTrigger, +} from "@nextui-org/react"; +import { IconBrandGoogle } from "@tabler/icons-react"; +import { signIn, signOut, useSession } from "next-auth/react"; + +export default function AuthButton({ minimal = true }: { minimal?: boolean }) { + const { data, status } = useSession(); + if (status === "loading") { + return ; + } + if (status === "authenticated") { + const signOutClick = () => signOut({ callbackUrl: "/" }); + if (minimal) { + return ( + + ); + } + return ( + + + + + + +

Signed in as

+

{data.user?.email}

+ + + Sign Out + + + + ); + } + return ( + + ); +} diff --git a/src/components/app-navbar/index.tsx b/src/components/app-navbar/index.tsx index 583ac41..3eee84f 100644 --- a/src/components/app-navbar/index.tsx +++ b/src/components/app-navbar/index.tsx @@ -1,83 +1,83 @@ -"use client"; - -import { useState } from "react"; - -import { - Link, - Navbar, - NavbarBrand, - NavbarContent, - NavbarItem, - NavbarMenu, - NavbarMenuItem, - NavbarMenuToggle, -} from "@nextui-org/react"; -import { IconPackage } from "@tabler/icons-react"; -import { useSession } from "next-auth/react"; - -import AuthButton from "./auth-button"; -import { ThemeSwitcher } from "./theme-switcher"; - -export default function AppNavBar() { - const [isMenuOpen, setIsMenuOpen] = useState(false); - const { status } = useSession(); - - const menuItems = [ - { - label: "Home", - href: "/", - }, - ]; - if (status === "authenticated") { - menuItems.push({ - label: "Profile", - href: "/profile", - }); - } - - return ( - - - - - -

Next.js Starter

- - - - - {menuItems.map((item, index) => ( - - - {item.label} - - - ))} - - - - - - - - - - - - {menuItems.map((item, index) => ( - - - {item.label} - - - ))} - - - - - - ); -} +"use client"; + +import { useState } from "react"; + +import { + Link, + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + NavbarMenu, + NavbarMenuItem, + NavbarMenuToggle, +} from "@nextui-org/react"; +import { IconPackage } from "@tabler/icons-react"; +import { useSession } from "next-auth/react"; + +import AuthButton from "./auth-button"; +import { ThemeSwitcher } from "./theme-switcher"; + +export default function AppNavBar() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const { status } = useSession(); + + const menuItems = [ + { + label: "Home", + href: "/", + }, + ]; + if (status === "authenticated") { + menuItems.push({ + label: "Profile", + href: "/profile", + }); + } + + return ( + + + + + +

Next.js Starter

+ + + + + {menuItems.map((item, index) => ( + + + {item.label} + + + ))} + + + + + + + + + + + + {menuItems.map((item, index) => ( + + + {item.label} + + + ))} + + + + + + ); +} diff --git a/src/components/app-navbar/theme-switcher.tsx b/src/components/app-navbar/theme-switcher.tsx index de6cf9b..2c1f69c 100644 --- a/src/components/app-navbar/theme-switcher.tsx +++ b/src/components/app-navbar/theme-switcher.tsx @@ -1,25 +1,25 @@ -"use client"; - -import { Switch } from "@nextui-org/react"; -import { IconMoon, IconSun } from "@tabler/icons-react"; - -import useSystemTheme from "@/hooks/use-system-theme"; - -export function ThemeSwitcher({ showLabel }: { showLabel?: boolean }) { - const { theme, setTheme } = useSystemTheme(); - - return ( - - theme === "dark" ? setTheme("light") : setTheme("dark") - } - size="lg" - color="success" - startContent={} - endContent={} - > - {showLabel && "Theme"} - - ); -} +"use client"; + +import { Switch } from "@nextui-org/react"; +import { IconMoon, IconSun } from "@tabler/icons-react"; + +import useSystemTheme from "@/hooks/use-system-theme"; + +export function ThemeSwitcher({ showLabel }: { showLabel?: boolean }) { + const { theme, setTheme } = useSystemTheme(); + + return ( + + theme === "dark" ? setTheme("light") : setTheme("dark") + } + size="lg" + color="success" + startContent={} + endContent={} + > + {showLabel && "Theme"} + + ); +} diff --git a/src/components/providers.tsx b/src/components/providers.tsx index c50b90e..ee53640 100644 --- a/src/components/providers.tsx +++ b/src/components/providers.tsx @@ -1,25 +1,25 @@ -"use client"; - -import { useRouter } from "next/navigation"; -import { ReactNode } from "react"; - -import { NextUIProvider } from "@nextui-org/react"; -import { SessionProvider } from "next-auth/react"; -import { ThemeProvider as NextThemesProvider } from "next-themes"; - -export default function Providers({ children }: { children: ReactNode }) { - const router = useRouter(); - - return ( - - - {children} - - - ); -} +"use client"; + +import { useRouter } from "next/navigation"; +import { ReactNode } from "react"; + +import { NextUIProvider } from "@nextui-org/react"; +import { SessionProvider } from "next-auth/react"; +import { ThemeProvider as NextThemesProvider } from "next-themes"; + +export default function Providers({ children }: { children: ReactNode }) { + const router = useRouter(); + + return ( + + + {children} + + + ); +} diff --git a/src/config/auth.ts b/src/config/auth.ts index 17ed98c..a8d01c0 100644 --- a/src/config/auth.ts +++ b/src/config/auth.ts @@ -1,18 +1,18 @@ -import { NextAuthOptions } from "next-auth"; -import GoogleProvider from "next-auth/providers/google"; - -import { env } from "@/env/server"; - -const options: NextAuthOptions = { - pages: { - signIn: "/", - }, - providers: [ - GoogleProvider({ - clientId: env.GOOGLE_CLIENT_ID, - clientSecret: env.GOOGLE_CLIENT_SECRET, - }), - ], -}; - -export default options; +import { NextAuthOptions } from "next-auth"; +import GoogleProvider from "next-auth/providers/google"; + +import { env } from "@/env/server"; + +const options: NextAuthOptions = { + pages: { + signIn: "/", + }, + providers: [ + GoogleProvider({ + clientId: env.GOOGLE_CLIENT_ID, + clientSecret: env.GOOGLE_CLIENT_SECRET, + }), + ], +}; + +export default options; diff --git a/src/env/server.ts b/src/env/server.ts index 417c115..80ca2a9 100644 --- a/src/env/server.ts +++ b/src/env/server.ts @@ -1,23 +1,23 @@ -import { createEnv } from "@t3-oss/env-nextjs"; -import { ZodError, z } from "zod"; - -export const env = createEnv({ - server: { - NODE_ENV: z.enum(["development", "production"]), - NEXTAUTH_URL: z.string().url(), - NEXTAUTH_SECRET: z.string(), - GOOGLE_CLIENT_ID: z.string(), - GOOGLE_CLIENT_SECRET: z.string(), - }, - onValidationError: (error: ZodError) => { - console.error( - "❌ Invalid environment variables:", - error.flatten().fieldErrors - ); - //throw new Error("Invalid environment variables"); - process.exit(1); - }, - emptyStringAsUndefined: true, - // eslint-disable-next-line n/no-process-env - experimental__runtimeEnv: process.env, -}); +import { createEnv } from "@t3-oss/env-nextjs"; +import { ZodError, z } from "zod"; + +export const env = createEnv({ + server: { + NODE_ENV: z.enum(["development", "production"]), + NEXTAUTH_URL: z.string().url(), + NEXTAUTH_SECRET: z.string(), + GOOGLE_CLIENT_ID: z.string(), + GOOGLE_CLIENT_SECRET: z.string(), + }, + onValidationError: (error: ZodError) => { + console.error( + "❌ Invalid environment variables:", + error.flatten().fieldErrors + ); + //throw new Error("Invalid environment variables"); + process.exit(1); + }, + emptyStringAsUndefined: true, + // eslint-disable-next-line n/no-process-env + experimental__runtimeEnv: process.env, +}); diff --git a/src/hooks/use-system-theme.ts b/src/hooks/use-system-theme.ts index 724ce9a..c7fb1d9 100644 --- a/src/hooks/use-system-theme.ts +++ b/src/hooks/use-system-theme.ts @@ -1,16 +1,16 @@ -import { Dispatch, SetStateAction, useMemo } from "react"; - -import { useTheme } from "next-themes"; - -type Theme = "dark" | "light"; -type SetTheme = Dispatch>; - -export default function useSystemTheme() { - const { theme, setTheme, systemTheme } = useTheme(); - return useMemo(() => { - return { - theme: theme === "system" ? systemTheme : theme, - setTheme, - } as { theme: Theme; setTheme: SetTheme }; - }, [theme, setTheme, systemTheme]); -} +import { Dispatch, SetStateAction, useMemo } from "react"; + +import { useTheme } from "next-themes"; + +type Theme = "dark" | "light"; +type SetTheme = Dispatch>; + +export default function useSystemTheme() { + const { theme, setTheme, systemTheme } = useTheme(); + return useMemo(() => { + return { + theme: theme === "system" ? systemTheme : theme, + setTheme, + } as { theme: Theme; setTheme: SetTheme }; + }, [theme, setTheme, systemTheme]); +} diff --git a/src/middleware.ts b/src/middleware.ts index 551ca2a..3450526 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -1,3 +1,3 @@ -export { default } from "next-auth/middleware"; - -export const config = { matcher: ["/profile"] }; +export { default } from "next-auth/middleware"; + +export const config = { matcher: ["/profile"] };