next 15 and react 19 rc upgrades

cdleveille · Jun 8, 2024 · 30c0075 · 30c0075
1 parent 8fa23ff
commit 30c0075
Show file tree

Hide file tree

Showing 19 changed files with 116 additions and 116 deletions.
diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml
@@ -1,6 +1,7 @@
 name: cicd
 
 env:
+  API_URL: ${{ secrets.API_URL }}
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
   CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
 

diff --git a/.gitignore b/.gitignore
@@ -25,9 +25,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
-.env
-.env*.local
+# env files (can opt-in for commiting if needed)
+.env*
 
 # vercel
 .vercel

diff --git a/README.md b/README.md
@@ -8,7 +8,6 @@ A responsive disc golf disc search engine.
 
 ![image](https://github.com/cdleveille/discit/assets/1410481/9149c718-1810-43b3-9bf7-8e09e674aeb0)
 
-
 ## See Also
 
 -   [DiscIt API](https://github.com/cdleveille/discit-api)

diff --git a/bun.lockb b/bun.lockb
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,20 +1,11 @@
-/** @type {import('next').NextConfig} */
 // @ts-check
 
 import withPWAInit from "@ducanh2912/next-pwa";
 
-const withPWA = withPWAInit({
-	dest: "public",
-	cacheOnFrontEndNav: true,
-	aggressiveFrontEndNavCaching: true,
-	reloadOnOnline: true,
-	disable: process.env.NODE_ENV === "development",
-	workboxOptions: {
-		disableDevLogs: true
-	}
-});
+const isDev = process.env.NODE_ENV === "development";
 
-export default withPWA({
+/** @type {import('next').NextConfig} */
+const nextConfig = {
 	images: {
 		remotePatterns: [
 			{
@@ -26,5 +17,23 @@ export default withPWA({
 				hostname: "img.clerk.com"
 			}
 		]
+	},
+	experimental: {
+		reactCompiler: true
+	}
+};
+
+const withPWA = withPWAInit({
+	dest: "public",
+	cacheOnFrontEndNav: true,
+	aggressiveFrontEndNavCaching: true,
+	reloadOnOnline: true,
+	disable: isDev,
+	workboxOptions: {
+		disableDevLogs: true
 	}
 });
+
+const config = isDev ? nextConfig : withPWA(nextConfig);
+
+export default config;
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "discit",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -15,19 +15,24 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.19",
     "@mui/material": "^5.15.19",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
+    "next": "15.0.0-rc.0",
+    "react": "19.0.0-rc-f994737d14-20240522",
+    "react-dom": "19.0.0-rc-f994737d14-20240522",
     "react-hot-toast": "^2.4.1",
     "react-infinite-scroll-hook": "^4.1.1"
   },
   "devDependencies": {
-    "@types/node": "20.14.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^20",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "15.0.0-rc.0",
     "prettier": "^3.3.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,29 +1,57 @@
+import type { Metadata, Viewport } from "next";
 import "./globals.css";
 
 import { Inter } from "next/font/google";
 import { Toaster } from "react-hot-toast";
 
-import { ClerkProvider } from "@clerk/nextjs";
-import { METADATA, VIEWPORT } from "@constants";
+import { APP_INFO } from "@constants";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export default async function RootLayout({
+export default function RootLayout({
 	children
 }: Readonly<{
 	children: React.ReactNode;
 }>) {
 	return (
-		<ClerkProvider>
-			<html lang="en">
-				<body className={inter.className}>
-					<Toaster position="bottom-center" toastOptions={{ duration: 3000 }} />
-					{children}
-				</body>
-			</html>
-		</ClerkProvider>
+		<html lang="en">
+			<body className={inter.className}>
+				<Toaster position="bottom-center" toastOptions={{ duration: 3000 }} />
+				{children}
+			</body>
+		</html>
 	);
 }
 
-export const metadata = METADATA;
-export const viewport = VIEWPORT;
+export const metadata: Metadata = {
+	title: APP_INFO.title,
+	applicationName: APP_INFO.title,
+	description: APP_INFO.description,
+	authors: { name: APP_INFO.author.name, url: APP_INFO.author.url },
+	publisher: APP_INFO.author.name,
+	manifest: "/manifest.json",
+	appleWebApp: {
+		capable: true,
+		statusBarStyle: "default",
+		title: APP_INFO.title
+	},
+	openGraph: {
+		title: APP_INFO.title,
+		description: APP_INFO.description,
+		type: "website",
+		emails: APP_INFO.author.email,
+		url: APP_INFO.url,
+		images: {
+			url: "https://github.com/cdleveille/discit/assets/1410481/ce638b92-5142-4b1c-814a-5240e3cf8fde",
+			secureUrl: "https://github.com/cdleveille/discit/assets/1410481/ce638b92-5142-4b1c-814a-5240e3cf8fde",
+			type: "image/png",
+			alt: APP_INFO.title,
+			width: 256,
+			height: 256
+		}
+	}
+};
+
+export const viewport: Viewport = {
+	themeColor: "#ffffff"
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,4 @@
+import { ClerkProvider } from "@clerk/nextjs";
 import { auth } from "@clerk/nextjs/server";
 import { AppContextProvider, Controls, DiscGrid, Filters, Header, ScrollToTop } from "@components";
 import { getBags, getDiscs } from "@services";
@@ -9,14 +10,16 @@ export default async function HomePage({ searchParams }: { searchParams: Record<
 	const { disc, view } = searchParams;
 	const [discs, bags = []] = await Promise.all([getDiscs(), userId ? getBags({ userId }) : []]);
 	return (
-		<AppContextProvider discs={discs} bags={bags} initialView={view as ViewOption} initialDiscSlug={disc}>
-			<main className="flex-column-center">
-				<Header />
-				<Filters />
-				<Controls />
-				<DiscGrid />
-				<ScrollToTop />
-			</main>
-		</AppContextProvider>
+		<ClerkProvider>
+			<AppContextProvider discs={discs} bags={bags} initialView={view as ViewOption} initialDiscSlug={disc}>
+				<main className="flex-column-center">
+					<Header />
+					<Filters />
+					<Controls />
+					<DiscGrid />
+					<ScrollToTop />
+				</main>
+			</AppContextProvider>
+		</ClerkProvider>
 	);
 }
diff --git a/src/components/bag/BagAdd.tsx b/src/components/bag/BagAdd.tsx
@@ -18,7 +18,7 @@ export const BagAdd = ({ onClose }: BagAddProps) => {
 	const { isLoading, error, setError, createBag } = useApi();
 	const { userId } = useAuth();
 
-	const inputRef = useRef<HTMLInputElement>();
+	const inputRef = useRef<HTMLInputElement>(null);
 
 	useEffect(() => {
 		const timeout = setTimeout(() => {

diff --git a/src/components/bag/BagEdit.tsx b/src/components/bag/BagEdit.tsx
@@ -17,7 +17,7 @@ export const BagEdit = ({ bag, onClose }: BagEditProps) => {
 	const { isLoading, error, setError, editBagName } = useApi();
 	const { userId } = useAuth();
 
-	const inputRef = useRef<HTMLInputElement>();
+	const inputRef = useRef<HTMLInputElement>(null);
 
 	useEffect(() => {
 		const timeout = setTimeout(() => {

diff --git a/src/components/context/AppContextProvider.tsx b/src/components/context/AppContextProvider.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { BagAdd, BagDelete, BagEdit, DiscDetail, Modal, Settings, SignIn } from "@components";
 import { INITIAL_FILTER_VALUES, INITIAL_FILTERS_ENABLED, View } from "@constants";
 import { AppContext } from "@contexts";
-import { useApi, usePrevious, useQueryString } from "@hooks";
+import { usePrevious, useQueryString } from "@hooks";
 
 import type { AppContextProviderProps, Bag, Disc, ModalProps, ViewOption } from "@types";
 export const AppContextProvider = ({
@@ -26,7 +26,6 @@ export const AppContextProvider = ({
 	const [filtersEnabled, setFiltersEnabled] = useState(INITIAL_FILTERS_ENABLED);
 	const [view, setView] = useState<ViewOption>(initialView ?? View.SEARCH);
 
-	const { createBag, editBagName, deleteBag } = useApi();
 	const { updateQueryString } = useQueryString();
 
 	const { bags: bagsPrevious } = usePrevious({ bags }) ?? {};

diff --git a/src/components/disc/DiscDetail.tsx b/src/components/disc/DiscDetail.tsx
@@ -13,6 +13,7 @@ import RemoveIcon from "@mui/icons-material/Remove";
 import { copyToClipboard, hexToRgba } from "@util";
 
 import type { DiscDetailProps } from "@types";
+
 export const DiscDetail = ({ disc }: DiscDetailProps) => {
 	const { isSignedIn } = useAuth();
 	const { filteredDiscs, selectedBag, showDiscDetailModal } = useAppContext();

diff --git a/src/components/misc/Modal.tsx b/src/components/misc/Modal.tsx
@@ -23,16 +23,10 @@ export const Modal = ({ children, open, onClose, showCloseBtn }: ModalProps) =>
 	const onRequestClose = () => setIsZoomed(false);
 
 	return (
-		<MuiModal
-			open={open}
-			onClose={onRequestClose}
-			sx={{ outline: "none" }}
-			style={{ outline: "none" }}
-			disableScrollLock
-		>
+		<MuiModal open={open} onClose={onRequestClose} disableScrollLock>
 			<div className="absolute-centered" style={{ borderRadius: "50%", outline: "none" }}>
 				<Zoom in={isZoomed}>
-					<div style={{ position: "relative", borderRadius: "50%", outline: "none" }}>
+					<div style={{ position: "relative", borderRadius: "50%" }}>
 						{showCloseBtn && (
 							<IconButton
 								aria-label="close"

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -38,42 +38,9 @@ export const INITIAL_FILTERS_ENABLED: FiltersEnabled = {
 	fade: false
 };
 
-const APP_INFO = {
+export const APP_INFO = {
 	title: "DiscIt",
 	description: "A responsive disc golf disc search engine.",
 	author: { name: "Chris Leveille", email: "cdleveille@gmail.com", url: "https://www.cdleveille.net" },
 	url: "https://discit.vercel.app"
 };
-
-export const METADATA: Metadata = {
-	title: APP_INFO.title,
-	applicationName: APP_INFO.title,
-	description: APP_INFO.description,
-	authors: { name: APP_INFO.author.name, url: APP_INFO.author.url },
-	publisher: APP_INFO.author.name,
-	manifest: "/manifest.json",
-	appleWebApp: {
-		capable: true,
-		statusBarStyle: "default",
-		title: APP_INFO.title
-	},
-	openGraph: {
-		title: APP_INFO.title,
-		description: APP_INFO.description,
-		type: "website",
-		emails: APP_INFO.author.email,
-		url: APP_INFO.url,
-		images: {
-			url: "https://github.com/cdleveille/discit/assets/1410481/ce638b92-5142-4b1c-814a-5240e3cf8fde",
-			secureUrl: "https://github.com/cdleveille/discit/assets/1410481/ce638b92-5142-4b1c-814a-5240e3cf8fde",
-			type: "image/png",
-			alt: APP_INFO.title,
-			width: 256,
-			height: 256
-		}
-	}
-};
-
-export const VIEWPORT: Viewport = {
-	themeColor: "#ffffff"
-};
diff --git a/src/hooks/usePrevious.ts b/src/hooks/usePrevious.ts
@@ -3,7 +3,7 @@
 import { useEffect, useRef } from "react";
 
 export const usePrevious = <T>(value: T) => {
-	const ref = useRef<T>();
+	const ref = useRef<T>(null);
 	useEffect(() => {
 		ref.current = value;
 	});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,7 +8,6 @@ A responsive disc golf disc search engine.

		![image](https://github.com/cdleveille/discit/assets/1410481/9149c718-1810-43b3-9bf7-8e09e674aeb0)


		## See Also

		- [DiscIt API](https://github.com/cdleveille/discit-api)
Expand Down