Dynamic header (#26)

* change pr template a bit * add dynamic header * test * am i fucking stupid * lockfile * prayge * fixes i guess * rename to account
sandboxnu · Nov 24, 2024 · 06b24ab · 06b24ab
1 parent 3a02b18
commit 06b24ab
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 52 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -1,44 +1,37 @@
-<!--- Provide a general summary of your changes in the Title above -->
-
 ## Description
 
-<!--- Describe your changes in detail -->
+<!--- What did you do? -->
 
 ## Motivation and Context
 
-<!--- Why is this change required? What problem does it solve? -->
-
-Closes [story](<!--Copy Trello card link here-->)
-
-## Screenshots (if appropriate):
+Closes [STORY NAME HERE](<!--Copy Trello card link here-->)
 
-## Types of changes
+## Type of changes
 
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+<!--- Select all that apply -->
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] CI/CD changes (changing github actions or deployment scripts)
-- [ ] Database migration
-- [ ] Environment variable change
+- [ ] Global styling changes
 - [ ] New package(s)
 - [ ] New dependencies
-- [ ] Global style changes
 - [ ] Project configuration
+- [ ] Environment variable update
+- [ ] Database migration
+- [ ] CI/CD changes (changing github actions or deployment scripts)
 
 ## Checklist:
 
-<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
-<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+<!--- Select all that apply -->
 
 - [ ] I verified my changes work in the local environment
-- [ ] I verified my changes work in the preview environment
 - [ ] I have updated the documentation accordingly.
 - [ ] I have added tests to cover my changes.
+- [ ] I verified my changes work in the preview environment
 
 ## How has this been tested?
 
-<!--- Please describe in detail how you tested your changes. -->
-<!--- Include details of your testing environment, tests ran to see how -->
-<!--- your change affects other areas of the code, etc. -->
+<!--- Please describe in detail how you tested your changes!!! -->
+
+## Screenshots (if appropriate):
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@ This repository is a monorepo for the Good Dog Licensing project, managed with T
     - [Running Scripts](#running-scripts)
   - [Running Tests](#running-tests)
   - [Tesing in Preview](#tesing-in-preview)
+  - [X feature isn't working... HELP!!](#x-feature-isnt-working-help)
 
 ## Structure
 
@@ -122,3 +123,10 @@ To test the application in a the environment, follow these steps:
    - One the workflow is complete, you can access your preview branch with the database migrations applied
 
    - Note that we only have one database instance for all preview branches, so if someone else runs the workflow, it may interfere with your preview branch.
+
+## X feature isn't working... HELP!!
+
+1. Are your dependencies up to date? Run `bun install` to make sure you have the latest versions of everything.
+2. Is your prisma schema pushed? Run `bun db:push` to make sure your database schema is up to date, or `db:migrate:dev` to apply migrations locally
+3. Did your branch up to date? Make sure to pull/merge/rebase from main.
+4. Confusing linting errors? Restart your IDE, sometimes the editor gets confused and doesn't pick up on changes.
diff --git a/apps/web/app/(pages)/layout.tsx b/apps/web/app/(pages)/layout.tsx
@@ -1,14 +1,19 @@
 import Footer from "@good-dog/components/Footer";
 import Nav from "@good-dog/components/Nav";
+import { HydrateClient, trpc } from "@good-dog/trpc/server";
 
-export default function RootLayout({
+export const dynamic = "force-dynamic";
+
+export default function Layout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
+  void trpc.user.prefetch();
+
   return (
-    <>
+    <HydrateClient>
       <Nav />
       {children}
       <Footer />
-    </>
+    </HydrateClient>
   );
 }
diff --git a/apps/web/app/(pages)/page.tsx b/apps/web/app/(pages)/page.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Image from "next/image";
+import Link from "next/link";
 
 import LandingSubmission from "@good-dog/components/LandingSubmission";
 import ProjectGallery from "@good-dog/components/ProjectGallery";
@@ -29,19 +30,19 @@ const Splash = () => {
         width={789}
         height={0}
         alt="good-dog-logo"
-        style={{ margin: "auto", display: "block", marginBottom: "1.5rem" }}
+        className="m-auto mb-6 block"
       />
 
       <div className="font-regular m-auto mb-6 w-fit font-righteous text-2xl text-good-dog-celadon">
         "Connecting Creatives"
       </div>
 
       <div className="font-regular m-auto w-fit font-righteous text-good-dog-violet">
-        <a href="/submit">
+        <Link href="/submit">
           <div className="rounded-full bg-good-dog-celadon px-6 py-2 text-5xl">
             SUBMIT A BRIEF
           </div>
-        </a>
+        </Link>
       </div>
     </div>
   );

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -12,21 +12,21 @@
     "typecheck": "tsc --noEmit --emitDeclarationOnly false"
   },
   "dependencies": {
-    "@good-dog/tailwind": "workspace:*",
-    "next": "14.2.12",
+    "@good-dog/components": "workspace:*",
+    "@good-dog/env": "workspace:*",
+    "@good-dog/trpc": "workspace:*",
+    "@good-dog/ui": "workspace:*",
+    "next": "14.2.18",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "server-only": "^0.0.1",
     "zod": "3.23.8"
   },
   "devDependencies": {
-    "@good-dog/components": "workspace:*",
-    "@good-dog/env": "workspace:*",
     "@good-dog/eslint": "workspace:*",
     "@good-dog/prettier": "workspace:*",
-    "@good-dog/trpc": "workspace:*",
+    "@good-dog/tailwind": "workspace:*",
     "@good-dog/typescript": "workspace:*",
-    "@good-dog/ui": "workspace:*",
     "@types/react": "^18.3.7",
     "eslint": "9.10.0",
     "prettier": "3.2.5",

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -26,6 +26,6 @@
   "prettier": "@good-dog/prettier",
   "dependencies": {
     "bcryptjs": "^2.4.3",
-    "next": "14.2.12"
+    "next": "14.2.18"
   }
 }
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -17,9 +17,10 @@
   "dependencies": {
     "@good-dog/trpc": "workspace:*",
     "@hookform/resolvers": "^3.9.1",
-    "next": "14.2.12",
+    "next": "14.2.18",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-hook-form": "^7.53.2"
   },
   "devDependencies": {
     "@good-dog/eslint": "workspace:*",

diff --git a/packages/components/src/Footer.tsx b/packages/components/src/Footer.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Footer() {
   return (
@@ -44,14 +45,14 @@ export default function Footer() {
             alt="good-dog-youtube"
           />
         </div>
-        <a href="/">
+        <Link href="/">
           <Image
             src="/icons/Dark Mode Logo.svg"
             width={120}
             height={120}
             alt="good-dog-logo"
           />
-        </a>
+        </Link>
       </div>
     </footer>
   );

diff --git a/packages/components/src/LandingSubmission.tsx b/packages/components/src/LandingSubmission.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export default function LandingSubmission({
   flipX = false,
@@ -31,14 +32,14 @@ export default function LandingSubmission({
         </h1>
         <p className="pt-8 text-white">{description}</p>
         <div className="pt-12">
-          <a href="/submit">
+          <Link href="/submit">
             <div
               className="rounded-full bg-good-dog-celadon px-4 py-1 font-righteous font-semibold text-good-dog-violet"
               style={{ width: "fit-content" }}
             >
               {button}
             </div>
-          </a>
+          </Link>
         </div>
       </div>
     </div>

diff --git a/packages/components/src/MediaMusicianContent.tsx b/packages/components/src/MediaMusicianContent.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Image from "next/image";
+import Link from "next/link";
 
 const CreatorData = [
   {
@@ -83,11 +84,11 @@ export default function MediaMusicianContent({ creator = "MEDIA MAKERS" }) {
           lacus eget elit. Mauris diam.
         </p>
         <div className="m-12 flex items-center justify-center">
-          <a href="/submit">
+          <Link href="/submit">
             <div className="rounded-full bg-good-dog-celadon px-4 py-1 font-righteous font-semibold text-good-dog-violet">
               {creatorObj?.buttonText}
             </div>
-          </a>
+          </Link>
         </div>
       </div>
       {/* </div> */}

diff --git a/packages/components/src/Nav.tsx b/packages/components/src/Nav.tsx
@@ -1,32 +1,65 @@
-import React from "react";
+"use client";
+
+import { useEffect } from "react";
 import Image from "next/image";
+import Link from "next/link";
+
+import { trpc } from "@good-dog/trpc/client";
 
 export default function Nav() {
+  const [user] = trpc.user.useSuspenseQuery();
+  const signOutMutation = trpc.signOut.useMutation({
+    onSuccess: () => {
+      window.location.reload();
+    },
+  });
+
+  useEffect(() => {
+    console.log(user);
+  }, [user]);
+
   return (
     <nav className="items-center bg-good-dog-violet px-9 py-12 font-righteous font-semibold">
       <ul className="flex flex-row justify-between text-white">
         <li>
-          <a href="/">
+          <Link href="/">
             <Image
               src="/icons/Minimalist Logo.svg"
               width={64}
               height={64}
               alt="good-dog-logo"
             />
-          </a>
+          </Link>
         </li>
         <div className="flex flex-row items-center space-x-16">
           <li>
-            <a href="/about">ABOUT US</a>
+            <Link href="/about">ABOUT US</Link>
           </li>
-          <li>
-            <a href="/login">LOGIN</a>
-          </li>
-          <a href="/submit">
+          {user ? (
+            <>
+              <li>
+                <Link href="/account">ACCOUNT</Link>
+              </li>
+              <li>
+                <button
+                  onClick={() => {
+                    signOutMutation.mutate();
+                  }}
+                >
+                  LOGOUT
+                </button>
+              </li>
+            </>
+          ) : (
+            <li>
+              <Link href="/login">LOGIN</Link>
+            </li>
+          )}
+          <Link href="/submit">
             <li className="rounded-full bg-good-dog-celadon px-4 py-1 text-good-dog-violet">
               SUBMIT
             </li>
-          </a>
+          </Link>
         </div>
       </ul>
     </nav>

diff --git a/packages/components/src/registration/SignInForm.tsx b/packages/components/src/registration/SignInForm.tsx
@@ -25,8 +25,16 @@ export default function SignInForm() {
     resolver: zodResolver(zSignInValues),
   });
 
+  const trpcUtils = trpc.useUtils();
+
   const signInMutation = trpc.signIn.useMutation({
-    onSuccess: () => {
+    onSuccess: async () => {
+      // Reset the user and authenticatedUser queries
+      await Promise.all([
+        trpcUtils.user.reset(),
+        trpcUtils.authenticatedUser.reset(),
+      ]);
+
       // TODO, alert the user that they have successfully signed in
       router.push("/");
     },

diff --git a/packages/trpc/package.json b/packages/trpc/package.json
@@ -34,7 +34,7 @@
     "@trpc/client": "11.0.0-rc.544",
     "@trpc/react-query": "11.0.0-rc.544",
     "@trpc/server": "11.0.0-rc.544",
-    "next": "14.2.12",
+    "next": "14.2.18",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "server-only": "^0.0.1",