Improve Nav Bar & use Wasp Link components (#311)

* fix Links and Nav Bar * update app_diff * Update NavBar.tsx * use react-router-dom instead of wasp router * fix app_diff * use Wasp Router Link where necessary * Update NavBar.tsx
wasp-lang · Nov 15, 2024 · a8654e3 · a8654e3
1 parent 304c49d
commit a8654e3
Show file tree

Hide file tree

Showing 21 changed files with 257 additions and 349 deletions.
diff --git a/opensaas-sh/app_diff/migrations/20241030143842_checkout_session_id/migration.sql.diff b/opensaas-sh/app_diff/migrations/20241030143842_checkout_session_id/migration.sql.diff
@@ -0,0 +1,11 @@
+--- template/app/migrations/20241030143842_checkout_session_id/migration.sql
++++ opensaas-sh/app/migrations/20241030143842_checkout_session_id/migration.sql
+@@ -0,0 +1,8 @@
++/*
++  Warnings:
++
++  - You are about to drop the column `checkoutSessionId` on the `User` table. All the data in the column will be lost.
++
++*/
++-- AlterTable
++ALTER TABLE "User" DROP COLUMN "checkoutSessionId";
diff --git a/opensaas-sh/app_diff/src/auth/LoginPage.tsx.diff b/opensaas-sh/app_diff/src/auth/LoginPage.tsx.diff
@@ -1,9 +1,9 @@
 --- template/app/src/auth/LoginPage.tsx
 +++ opensaas-sh/app/src/auth/LoginPage.tsx
-@@ -1,8 +1,14 @@
--import { Link } from 'react-router-dom';
+@@ -1,8 +1,15 @@
++import { Navigate } from 'react-router-dom';
+ import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 -import { LoginForm } from 'wasp/client/auth';
-+import { Navigate, Link } from 'react-router-dom';
 +import { LoginForm, useAuth } from 'wasp/client/auth';
  import { AuthPageLayout } from './AuthPageLayout';
 

diff --git a/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff b/opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff
@@ -0,0 +1,79 @@
+--- template/app/src/client/components/NavBar/NavBar.tsx
++++ opensaas-sh/app/src/client/components/NavBar/NavBar.tsx
+@@ -32,6 +32,7 @@
+           !isLandingPage,
+       })}
+     >
++      {isLandingPage && <Announcement />}
+       <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
+         <div className='flex items-center lg:flex-1'>
+           <WaspRouterLink
+@@ -39,9 +40,7 @@
+             className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
+           >
+             <NavLogo />
+-            {isLandingPage && (
+-              <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
+-            )}
++            {isLandingPage && <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open Saas</span>}
+           </WaspRouterLink>
+         </div>
+         <div className='flex lg:hidden'>
+@@ -61,8 +60,8 @@
+           </ul>
+           {isUserLoading ? null : !user ? (
+             <WaspRouterLink to={routes.LoginRoute.to} className='text-sm font-semibold leading-6 ml-3'>
+-              <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
+-                Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
++                <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white test-sm'>
++                  Try the demo App <BiLogIn size='1.1rem' className='ml-1' />
+               </div>
+             </WaspRouterLink>
+           ) : (
+@@ -77,7 +76,7 @@
+         <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
+           <div className='flex items-center justify-between'>
+             <WaspRouterLink to={routes.LandingPageRoute.to} className='-m-1.5 p-1.5'>
+-              <span className='sr-only'>Your SaaS</span>
++              <span className='sr-only'>Open SaaS</span>
+               <NavLogo />
+             </WaspRouterLink>
+             <button
+@@ -96,7 +95,7 @@
+                 {isUserLoading ? null : !user ? (
+                   <WaspRouterLink to={routes.LoginRoute.to}>
+                     <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
+-                      Log in <BiLogIn size='1.1rem' className='ml-1' />
++                      Try the Demo App{' '} <BiLogIn size='1.1rem' className='ml-1' />
+                     </div>
+                   </WaspRouterLink>
+                 ) : (
+@@ -138,3 +137,27 @@
+     );
+   });
+ }
++
++const ContestURL =
++  'https://docs.opensaas.sh/blog/';
++
++function Announcement() {
++  return (
++    <div className='flex justify-center items-center gap-3 p-3 w-full bg-gradient-to-r from-[#d946ef] to-[#fc0] font-semibold text-white text-center z-49'>
++      <p onClick={() => window.open(ContestURL, '_blank')} className='hidden lg:block cursor-pointer hover:opacity-90 hover:drop-shadow'>🍪 THE MOST ANNOYING COOKIE BANNER EVER HACKATHON 🤬</p>
++      <div className='hidden lg:block self-stretch w-0.5 bg-white'></div>
++      <div
++        onClick={() => window.open(ContestURL, '_blank')}
++        className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
++      >
++        Enter here and win prizes! →
++      </div>
++      <div
++        onClick={() => window.open(ContestURL, '_blank')}
++        className='lg:hidden cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
++      >
++        🍪 The Most Annoying Cookie Banner Contest! 🤬 →
++      </div>
++    </div>
++  );
++}
+\ No newline at end of file
diff --git a/opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff
diff --git a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
@@ -1,17 +1,18 @@
 --- template/app/src/landing-page/contentSections.ts
 +++ opensaas-sh/app/src/landing-page/contentSections.ts
-@@ -1,74 +1,131 @@
+@@ -1,75 +1,132 @@
+ import type { NavigationItem } from '../client/components/NavBar/NavBar';
+-import { routes } from 'wasp/client/router';
 -import { DocsUrl, BlogUrl } from '../shared/common';
 -import daBoiAvatar from '../client/static/da-boi.webp';
 -import avatarPlaceholder from '../client/static/avatar-placeholder.webp';
--import { routes } from 'wasp/client/router';
 +import { DocsUrl, BlogUrl, GithubUrl } from '../shared/common';
 
- export const navigation = [
-   { name: 'Features', href: '#features' },
--  { name: 'Pricing', href: routes.PricingPageRoute.build() },
-   { name: 'Documentation', href: DocsUrl },
-   { name: 'Blog', href: BlogUrl },
+ export const landingPageNavigationItems: NavigationItem[] = [
+   { name: 'Features', to: '#features' },
+-  { name: 'Pricing', to: routes.PricingPageRoute.to },
+   { name: 'Documentation', to: DocsUrl },
+   { name: 'Blog', to: BlogUrl },
  ];
  export const features = [
    {

diff --git a/template/app/src/admin/layout/Breadcrumb.tsx b/template/app/src/admin/layout/Breadcrumb.tsx
@@ -1,20 +1,18 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 interface BreadcrumbProps {
   pageName: string;
 }
 const Breadcrumb = ({ pageName }: BreadcrumbProps) => {
   return (
-    <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-      <h2 className="text-title-md2 font-semibold text-black dark:text-white">
-        {pageName}
-      </h2>
+    <div className='mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+      <h2 className='text-title-md2 font-semibold text-black dark:text-white'>{pageName}</h2>
 
       <nav>
-        <ol className="flex items-center gap-2">
+        <ol className='flex items-center gap-2'>
           <li>
-            <Link to="/">Dashboard /</Link>
+            <WaspRouterLink to={routes.AdminRoute.to}>Dashboard /</WaspRouterLink>
           </li>
-          <li className="text-primary">{pageName}</li>
+          <li className='text-primary'>{pageName}</li>
         </ol>
       </nav>
     </div>

diff --git a/template/app/src/auth/LoginPage.tsx b/template/app/src/auth/LoginPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { LoginForm } from 'wasp/client/auth';
 import { AuthPageLayout } from './AuthPageLayout';
 
@@ -9,17 +9,17 @@ export default function Login() {
       <br />
       <span className='text-sm font-medium text-gray-900 dark:text-gray-900'>
         Don't have an account yet?{' '}
-        <Link to='/signup' className='underline'>
+        <WaspRouterLink to={routes.SignupRoute.to} className='underline'>
           go to signup
-        </Link>
+        </WaspRouterLink>
         .
       </span>
       <br />
       <span className='text-sm font-medium text-gray-900'>
         Forgot your password?{' '}
-        <Link to='/request-password-reset' className='underline'>
+        <WaspRouterLink to={routes.RequestPasswordResetRoute.to} className='underline'>
           reset it
-        </Link>
+        </WaspRouterLink>
         .
       </span>
     </AuthPageLayout>

diff --git a/template/app/src/auth/SignupPage.tsx b/template/app/src/auth/SignupPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { SignupForm } from 'wasp/client/auth';
 import { AuthPageLayout } from './AuthPageLayout';
 
@@ -9,9 +9,9 @@ export function Signup() {
       <br />
       <span className='text-sm font-medium text-gray-900'>
         I already have an account (
-        <Link to='/login' className='underline'>
+        <WaspRouterLink to={routes.LoginRoute.to} className='underline'>
           go to login
-        </Link>
+        </WaspRouterLink>
         ).
       </span>
       <br />

diff --git a/template/app/src/auth/email-and-pass/EmailVerificationPage.tsx b/template/app/src/auth/email-and-pass/EmailVerificationPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { VerifyEmailForm } from 'wasp/client/auth';
 import { AuthPageLayout } from '../AuthPageLayout';
 
@@ -8,7 +8,7 @@ export function EmailVerificationPage() {
       <VerifyEmailForm />
       <br />
       <span className='text-sm font-medium text-gray-900'>
-        If everything is okay, <Link to='/login' className='underline'>go to login</Link>
+        If everything is okay, <WaspRouterLink to={routes.LoginRoute.to} className='underline'>go to login</WaspRouterLink>
       </span>
     </AuthPageLayout>
   );

diff --git a/template/app/src/auth/email-and-pass/PasswordResetPage.tsx b/template/app/src/auth/email-and-pass/PasswordResetPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link as WaspRouterLink, routes } from 'wasp/client/router';
 import { ResetPasswordForm } from 'wasp/client/auth';
 import { AuthPageLayout } from '../AuthPageLayout';
 
@@ -8,7 +8,7 @@ export function PasswordResetPage() {
       <ResetPasswordForm />
       <br />
       <span className='text-sm font-medium text-gray-900'>
-        If everything is okay, <Link to='/login'>go to login</Link>
+        If everything is okay, <WaspRouterLink to={routes.LoginRoute.to}>go to login</WaspRouterLink>
       </span>
     </AuthPageLayout>
   );

diff --git a/template/app/src/client/App.tsx b/template/app/src/client/App.tsx
@@ -1,10 +1,14 @@
-import { useAuth } from 'wasp/client/auth';
-import { updateCurrentUser } from 'wasp/client/operations';
 import './Main.css';
-import AppNavBar from './components/AppNavBar';
+import NavBar from './components/NavBar/NavBar';
 import CookieConsentBanner from './components/cookie-consent/Banner';
+import { appNavigationItems } from './components/NavBar/contentSections';
+import { landingPageNavigationItems } from '../landing-page/contentSections';
 import { useMemo, useEffect } from 'react';
+import { routes } from 'wasp/client/router';
 import { Outlet, useLocation } from 'react-router-dom';
+import { useAuth } from 'wasp/client/auth';
+import { useIsLandingPage } from './hooks/useIsLandingPage';
+import { updateCurrentUser } from 'wasp/client/operations';
 
 /**
  * use this component to wrap all child components
@@ -13,9 +17,11 @@ import { Outlet, useLocation } from 'react-router-dom';
 export default function App() {
   const location = useLocation();
   const { data: user } = useAuth();
+  const isLandingPage = useIsLandingPage();
+  const navigationItems = isLandingPage ? landingPageNavigationItems : appNavigationItems;
 
   const shouldDisplayAppNavBar = useMemo(() => {
-    return location.pathname !== '/' && location.pathname !== '/login' && location.pathname !== '/signup';
+    return location.pathname !== routes.LoginRoute.build() && location.pathname !== routes.SignupRoute.build();
   }, [location]);
 
   const isAdminDashboard = useMemo(() => {
@@ -49,7 +55,7 @@ export default function App() {
           <Outlet />
         ) : (
           <>
-            {shouldDisplayAppNavBar && <AppNavBar />}
+            {shouldDisplayAppNavBar && <NavBar navigationItems={navigationItems} />}
             <div className='mx-auto max-w-7xl sm:px-6 lg:px-8'>
               <Outlet />
             </div>