bring over latest improvements from the workshops

.env.example

@@ -6,3 +6,8 @@ SESSION_SECRET="super-duper-s3cret"
 INTERNAL_COMMAND_TOKEN="some-made-up-token"
 RESEND_API_KEY="re_blAh_blaHBlaHblahBLAhBlAh"
 SENTRY_DSN="your-dsn"
+
+# the mocks and some code rely on these two being prefixed with "MOCK_"
+# if they aren't then the real github api will be attempted
+GITHUB_CLIENT_ID="MOCK_GITHUB_CLIENT_ID"
+GITHUB_CLIENT_SECRET="MOCK_GITHUB_CLIENT_SECRET"

.prettierrc.cjs → .prettierrc.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import("prettier").Options} */
+export default {
 	arrowParens: 'avoid',
 	bracketSameLine: false,
 	bracketSpacing: true,
@@ -25,5 +26,5 @@ module.exports = {
 			},
 		},
 	],
-	plugins: [require('prettier-plugin-tailwindcss')],
+	plugins: ['prettier-plugin-tailwindcss'],
 }

app/components/confetti.tsx

@@ -1,18 +1,15 @@
 import { Index as ConfettiShower } from 'confetti-react'
 import { ClientOnly } from 'remix-utils'
 
-/**
- * confetti is a unique random identifier which re-renders the component
- */
-export function Confetti({ confetti }: { confetti?: string }) {
-	if (!confetti) return null
+export function Confetti({ id }: { id?: string | null }) {
+	if (!id) return null
 
 	return (
 		<ClientOnly>
 			{() => (
 				<ConfettiShower
-					key={confetti}
-					run={Boolean(confetti)}
+					key={id}
+					run={Boolean(id)}
 					recycle={false}
 					numberOfPieces={500}
 					width={window.innerWidth}

app/components/search-bar.tsx

@@ -1,5 +1,5 @@
 import { Form, useSearchParams, useSubmit } from '@remix-run/react'
-import { useDebounce, useIsSubmitting } from '~/utils/misc.tsx'
+import { useDebounce, useIsPending } from '~/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'
 import { Input } from './ui/input.tsx'
 import { Label } from './ui/label.tsx'
@@ -16,7 +16,7 @@ export function SearchBar({
 }) {
 	const [searchParams] = useSearchParams()
 	const submit = useSubmit()
-	const isSubmitting = useIsSubmitting({
+	const isSubmitting = useIsPending({
 		formMethod: 'GET',
 		formAction: '/users',
 	})

app/components/toaster.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { Toaster, toast as showToast } from 'sonner'
+import { type Toast } from '~/utils/toast.server.ts'
+
+export function EpicToaster({ toast }: { toast?: Toast | null }) {
+	return (
+		<>
+			<Toaster closeButton position="top-center" />
+			{toast ? <ShowToast toast={toast} /> : null}
+		</>
+	)
+}
+
+function ShowToast({ toast }: { toast: Toast }) {
+	const { id, type, title, description } = toast
+	useEffect(() => {
+		setTimeout(() => {
+			showToast[type](title, { id, description })
+		}, 0)
+	}, [description, id, title, type])
+	return null
+}

app/components/ui/status-button.tsx

@@ -48,7 +48,7 @@ export const StatusButton = React.forwardRef<
 			className={cn('flex justify-center gap-4', className)}
 			{...props}
 		>
-			{children}
+			<div>{children}</div>
 			{message ? (
 				<TooltipProvider>
 					<Tooltip>

app/components/ui/toaster.tsx

@@ -1,33 +1,22 @@
-import {
-	Toast,
-	ToastClose,
-	ToastDescription,
-	ToastProvider,
-	ToastTitle,
-	ToastViewport,
-} from '~/components/ui/toast.tsx'
-import { useToast } from '~/components/ui/use-toast.ts'
-
-export function Toaster() {
-	const { toasts } = useToast()
+import { useEffect } from 'react'
+import { Toaster, toast as showToast } from 'sonner'
+import { type Toast } from '~/utils/toast.server.ts'
 
+export function EpicToaster({ toast }: { toast?: Toast | null }) {
 	return (
-		<ToastProvider>
-			{toasts.map(function ({ id, title, description, action, ...props }) {
-				return (
-					<Toast key={id} {...props}>
-						<div className="grid gap-1">
-							{title && <ToastTitle>{title}</ToastTitle>}
-							{description && (
-								<ToastDescription>{description}</ToastDescription>
-							)}
-						</div>
-						{action}
-						<ToastClose />
-					</Toast>
-				)
-			})}
-			<ToastViewport />
-		</ToastProvider>
+		<>
+			<Toaster closeButton position="top-center" />
+			{toast ? <ShowToast toast={toast} /> : null}
+		</>
 	)
 }
+
+function ShowToast({ toast }: { toast: Toast }) {
+	const { id, type, title, description } = toast
+	useEffect(() => {
+		setTimeout(() => {
+			showToast[type](title, { id, description })
+		}, 0)
+	}, [description, id, title, type])
+	return null
+}

app/entry.client.tsx

@@ -2,9 +2,6 @@ import { RemixBrowser } from '@remix-run/react'
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
-if (ENV.MODE === 'development') {
-	import('~/utils/devtools.tsx').then(({ init }) => init())
-}
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 	import('~/utils/monitoring.client.tsx').then(({ init }) => init())
 }