progress commit

Author: bradwestfall

.gitignore

@@ -4,6 +4,8 @@ dist
 dist-ssr
 *.local
 
+.react-router
+
 # misc
 db.json
 preferences.json

app-react-router-framework/app/components/ProductsSidebar.tsx

@@ -93,7 +93,7 @@ function FilterByPrice() {
           <b>$5000</b>
         </div>
       </div>
-      <input type="range" className="block w-full" />
+      <input type="range" className="block w-full bg-slate-200" />
       <div className="flex justify-between items-center">
         <div className="text-sm">$10</div>
         <div className="text-sm">$5000</div>

app-react-router-framework/app/styles/app.css app-react-router-framework/app/index.css

@@ -13,13 +13,13 @@ body {
   min-height: 100vh;
   width: 100vw;
   overflow-x: hidden;
-  color: var(--colors-textColor);
+  color: var(--color-textColor);
 }
 
 body {
   /* https://twitter.com/AllThingsSmitty/status/1254151507412496384 */
   min-height: -webkit-fill-available;
-  background-image: linear-gradient(to bottom, var(--colors-slate-200), var(--colors-slate-100));
+  background-image: linear-gradient(to bottom, var(--color-slate-200), var(--color-slate-100));
   background-repeat: no-repeat;
 }
 
@@ -46,7 +46,7 @@ body {
   h5,
   h6 {
     font-family: 'Inter';
-    color: var(--colors-headingColor);
+    color: var(--color-headingColor);
     font-weight: 700;
     margin: 0;
     letter-spacing: 0.03em;
@@ -59,7 +59,7 @@ body {
 
 @layer base {
   a {
-    color: var(--colors-brandColor);
+    color: var(--color-brandColor);
     text-decoration: none;
   }
   a:focus {
@@ -122,7 +122,7 @@ body {
     font-size: 0.8rem;
     letter-spacing: 0.08rem;
     line-height: 1.2em;
-    background-color: var(--colors-brandColor);
+    background-color: var(--color-brandColor);
     color: #fff;
     border: 1px solid transparent;
     border-radius: 0.2rem;
@@ -133,17 +133,17 @@ body {
 
   .button:hover,
   .button:focus {
-    background-color: var(--colors-sky-700);
+    background-color: var(--color-sky-700);
   }
 
   .button.button-outline {
     border-color: currentColor;
     background-color: #fff;
-    color: var(--colors-brandColor);
+    color: var(--color-brandColor);
   }
 
   .button[disabled] {
-    background-color: var(--colors-slate-400);
+    background-color: var(--color-slate-400);
     color: #fff;
   }
 }
@@ -157,17 +157,17 @@ body {
     width: 100%;
     padding: 0.5em 0.7em;
     background-color: #fff;
-    border: 1px solid var(--colors-slate-300);
+    border: 1px solid var(--color-slate-300);
     font-size: 1.1rem;
     font-weight: 300;
-    color: var(--colors-slate-700);
+    color: var(--color-slate-700);
     border-radius: 5px;
   }
 
   .form-field:focus,
   .form-field:focus-within {
     outline: none;
-    border-color: var(--colors-sky-400);
+    border-color: var(--color-sky-400);
   }
 
   textarea.form-field {
@@ -200,7 +200,7 @@ body {
 
 @layer base {
   input {
-    accent-color: var(--colors-brandColor);
+    accent-color: var(--color-brandColor);
   }
 
   input[type='range'] {
@@ -210,7 +210,7 @@ body {
     cursor: pointer;
     border-radius: 1em;
 
-    background: var(--colors-slate-300);
+    background: var(--color-slate-300);
     height: 0.5rem;
   }
 
@@ -229,14 +229,14 @@ body {
   .notice {
     padding: 0.5em 1em;
     border-radius: 0.5em;
-    background-color: var(--colors-slate-300);
-    border: 1px solid var(--colors-slate-400);
-    color: var(--colors-slate-700);
+    background-color: var(--color-slate-300);
+    border: 1px solid var(--color-slate-400);
+    color: var(--color-slate-700);
   }
   .notice.error {
-    background-color: var(--colors-rose-200);
-    border: 1px solid var(--colors-rose-400);
-    color: var(--colors-rose-700);
+    background-color: var(--color-rose-200);
+    border: 1px solid var(--color-rose-400);
+    color: var(--color-rose-700);
   }
 }
 
@@ -246,6 +246,6 @@ body {
 
 @layer components {
   .primary-nav a.active {
-    border-color: var(--colors-brandColor);
+    border-color: var(--color-brandColor);
   }
 }

app-react-router-framework/app/root.tsx

@@ -6,17 +6,20 @@ import {
   ScrollRestoration,
   isRouteErrorResponse,
   useRouteLoaderData,
+  useMatches,
   type LinksFunction,
   type LoaderFunctionArgs,
 } from 'react-router'
 import { MainLayout } from '~/components/MainLayout'
 import { Heading } from '~/components/Heading'
 import { CenterContent } from '~/components/CenterContent'
+// import { useRouteLoaderData } from '~/utils/hooks'
+
 import { getSessionUser } from '~/utils/auth.server'
 import { AuthProvider } from '~/state/AuthContext'
 import { CartProvider } from '~/state/CartContext'
 import { getCart } from '~/utils/cart.server'
-import stylesheet from '~/styles/app.css?url'
+import stylesheet from '~/index.css?url'
 import type { PropsWithChildren } from 'react'
 
 import type { Route } from './+types/root'
@@ -28,12 +31,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
   return { sessionUser, cart }
 }
 
+type LoaderData = Awaited<ReturnType<typeof loader>>
+
 export default function App() {
   return <Outlet />
 }
 
 export function Layout({ children }: PropsWithChildren) {
-  const { sessionUser, cart } = useRouteLoaderData<typeof loader>('root')!
+  const { sessionUser, cart } = useRouteLoaderData<LoaderData>('root')!
 
   return (
     <html lang="en">
@@ -82,56 +87,3 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
     </CenterContent>
   )
 }
-
-// import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
-
-// import type { Route } from './+types/root'
-
-// export function Layout({ children }: { children: React.ReactNode }) {
-//   return (
-//     <html lang="en">
-//       <head>
-//         <meta charSet="utf-8" />
-//         <meta name="viewport" content="width=device-width, initial-scale=1" />
-//         <Meta />
-//         <Links />
-//       </head>
-//       <body>
-//         {children}
-//         <ScrollRestoration />
-//         <Scripts />
-//       </body>
-//     </html>
-//   )
-// }
-
-// export default function App() {
-//   return <Outlet />
-// }
-
-// export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-//   let message = 'Oops!'
-//   let details = 'An unexpected error occurred.'
-//   let stack: string | undefined
-
-//   if (isRouteErrorResponse(error)) {
-//     message = error.status === 404 ? '404' : 'Error'
-//     details =
-//       error.status === 404 ? 'The requested page could not be found.' : error.statusText || details
-//   } else if (import.meta.env.DEV && error && error instanceof Error) {
-//     details = error.message
-//     stack = error.stack
-//   }
-
-//   return (
-//     <main className="pt-16 p-4 container mx-auto">
-//       <h1>{message}</h1>
-//       <p>{details}</p>
-//       {stack && (
-//         <pre className="w-full p-4 overflow-x-auto">
-//           <code>{stack}</code>
-//         </pre>
-//       )}
-//     </main>
-//   )
-// }

app-react-router-framework/app/routes.ts

@@ -1,10 +1,13 @@
 import { type RouteConfig, index, layout, route } from '@react-router/dev/routes'
 
 export default [
-  //
   layout('./routes/products-layout.tsx', [
     index('./routes/home.tsx'),
-    // route("login", "./auth/login.tsx"),
-    // route("register", "./auth/register.tsx"),
+    route('products', './routes/products-home.tsx'),
+    route('products/:productId', './routes/product-profile.tsx'),
   ]),
+  route('login', './routes/login.tsx'),
+  route('register', './routes/register.tsx'),
+  route('logout', './routes/logout.tsx'),
+  route('cart', './routes/cart.tsx'),
 ] satisfies RouteConfig

app-react-router-framework/app/routes/cart.tsx

@@ -0,0 +1,20 @@
+import { type ActionFunctionArgs } from 'react-router'
+import { addToCart, removeFromCart } from '~/utils/cart.server'
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData()
+  const productId = parseInt(formData.get('productId') as string)
+  const quantity = parseInt(formData.get('quantity') as string)
+
+  switch (request.method) {
+    case 'POST': {
+      return await addToCart(request, productId, quantity)
+    }
+    case 'DELETE': {
+      return await removeFromCart(request, productId)
+    }
+    default: {
+      return null
+    }
+  }
+}

app-react-router-framework/app/routes/home.tsx

@@ -1,13 +1,13 @@
-import { Link, useRouteLoaderData } from 'react-router'
+import { type MetaFunction, Link, useRouteLoaderData } from 'react-router'
 import { BrowseProducts } from '~/components/BrowseProducts'
-import type { MetaFunction } from 'react-router'
+import type { LoaderData as ProductsLayoutLoaderData } from './products-layout'
 
 export const meta: MetaFunction = () => {
   return [{ title: 'Tech Shopper' }]
 }
 
-export default function () {
-  // const { products } = useRouteLoaderData('routes/_products-layout') as LoaderData
+export default function Page() {
+  const { products } = useRouteLoaderData('routes/products-layout') as ProductsLayoutLoaderData
 
   return (
     <>
@@ -27,7 +27,7 @@ export default function () {
         <img src="/images/hero.png" alt="iphone hero" className="absolute left-0 bottom-0 w-1/2" />
       </div>
 
-      {/* <BrowseProducts products={products} /> */}
+      {products && <BrowseProducts products={products} />}
     </>
   )
 }

app-react-router-framework/app/routes/login.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import * as z from 'zod'
+import { data } from 'react-router'
+import { Form, Link, useActionData } from 'react-router'
+import { createUserSession, verifyUser } from '~/utils/auth.server'
+import { FieldWrap } from '~/components/FormFields'
+import { Heading } from '~/components/Heading'
+import type { ActionFunctionArgs } from 'react-router'
+
+const formSchema = z.object({
+  username: z.string().min(5, 'Must be at least 5 characters'),
+  password: z.string().min(5, 'Must be at least 5 characters'),
+})
+
+type FormDataType = z.infer<typeof formSchema>
+type FormErrorType = {
+  [k in keyof FormDataType]?: string[] | undefined
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData()
+  const formValues = Object.fromEntries(formData)
+  const results = formSchema.safeParse(formValues)
+  if (!results.success) return data({ error: 'Invalid Data' }, { status: 400 })
+
+  const { username, password } = results.data
+  const userId = await verifyUser(username, password)
+  if (!userId) return data({ error: 'User not found' }, { status: 400 })
+
+  return createUserSession(userId, '/')
+}
+
+export default function Login() {
+  const [formErrors, setFormErrors] = useState<FormErrorType>()
+  const { error } = useActionData<typeof action>() || {}
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    const formValues = Object.fromEntries(new FormData(event.currentTarget))
+    const results = formSchema.safeParse(formValues)
+    if (!results.success) {
+      event.preventDefault()
+      setFormErrors(results.error.flatten().fieldErrors)
+    }
+  }
+
+  return (
+    <div className="ml-auto mr-auto max-w-[600px]">
+      <div className="bg-white rounded-md shadow-md p-6 space-y-6">
+        <Heading size={4}>Login</Heading>
+        {error && <div className="notice">{error}</div>}
+        <Form onSubmit={onSubmit} method="post" className="space-y-3" autoComplete="off">
+          <FieldWrap label="Username" required errors={formErrors?.username}>
+            {(field) => <input {...field} className="form-field" type="text" name="username" />}
+          </FieldWrap>
+          <FieldWrap label="Password" required errors={formErrors?.password}>
+            {(field) => <input {...field} className="form-field" type="password" name="password" />}
+          </FieldWrap>
+          <footer className="flex justify-between items-center">
+            <div>
+              <button type="submit" className="button">
+                Login
+              </button>
+            </div>
+            <div>
+              <Link to="/register" type="button">
+                Need an account? Register
+              </Link>
+            </div>
+          </footer>
+        </Form>
+      </div>
+    </div>
+  )
+}

app-react-router-framework/app/routes/logout.tsx

@@ -0,0 +1,6 @@
+import type { LoaderFunctionArgs } from 'react-router'
+import { logout } from '~/utils/auth.server'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  return logout(request)
+}