Merge pull request #98 from Full-Stack-Collective/dj/adjust-routes

Initial routes adjustment
Full-Stack-Collective · Sep 10, 2023 · 2ed9350 · 2ed9350
2 parents 99b9e00 + dd19219
commit 2ed9350
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 139 deletions.
diff --git a/lib/database.types.ts b/lib/database.types.ts
@@ -142,7 +142,7 @@ export interface Database {
           owner: string | null;
           phone: string | null;
           practice_code: string | null;
-          street_addresss: string | null;
+          street_address: string | null;
         };
         Insert: {
           city: string;
@@ -154,7 +154,7 @@ export interface Database {
           owner?: string | null;
           phone?: string | null;
           practice_code?: string | null;
-          street_addresss?: string | null;
+          street_address?: string | null;
         };
         Update: {
           city?: string;
@@ -166,7 +166,7 @@ export interface Database {
           owner?: string | null;
           phone?: string | null;
           practice_code?: string | null;
-          street_addresss?: string | null;
+          street_address?: string | null;
         };
         Relationships: [
           {

diff --git a/next.config.js b/next.config.js
@@ -3,6 +3,9 @@ const nextConfig = {
   experimental: {
     serverActions: true,
   },
-}
+  images: {
+    domains: ['vvlzpciuhggoletuwmqf.supabase.co'],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/src/app/appointment/[practiceCode]/page.tsx → src/app/[practiceCode]/book/page.tsx b/src/app/appointment/[practiceCode]/page.tsx → src/app/[practiceCode]/book/page.tsx
@@ -1,5 +1,6 @@
 import { AppointmentFooter } from '@/components/AppointmentFooter';
 import AppointmentForm from '@/components/AppointmentForm';
+import AppointmentHeader from '@/components/AppointmentHeader';
 import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
@@ -20,26 +21,23 @@ export default async function Appointment({
 
   if (!data || data?.length < 1) redirect('/');
 
-  const [{ id, name, logo, street_addresss, city, phone }] = data as Practice[];
+  const [{ id, name, logo, street_address, city, phone }] = data as Practice[];
 
   return (
     <>
       <main className="flex-1 flex flex-col gap-2 justify-center items-center">
-        <h1 className="mt-8 mb-6 w-full max-w-lg text-4xl font-extrabold tracking-wide leading-2 text-center md:leading-snug">
+        <AppointmentHeader practiceLogo={logo} practiceName={name} />
+        <h2 className="mt-4 mb-6 w-full max-w-lg sm:text-3xl text-2xl font-extrabold tracking-wide leading-2 text-center md:leading-snug">
           Request Your{' '}
           <span className="w-full text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-rose-500">
             Next Appointment
           </span>{' '}
           Expedition
-        </h1>
-        <AppointmentForm
-          practiceId={id}
-          practiceName={name}
-          practiceLogo={logo}
-        />
+        </h2>
+        <AppointmentForm practiceId={id} />
         <AppointmentFooter
           name={name}
-          streetAddress={street_addresss!}
+          streetAddress={street_address as string}
           city={city}
           phone={phone!}
         />

diff --git a/...app/appointment/[practiceCode]/layout.tsx → src/app/[practiceCode]/layout.tsx b/...app/appointment/[practiceCode]/layout.tsx → src/app/[practiceCode]/layout.tsx
@@ -1,17 +1,10 @@
 export const dynamic = 'force-dynamic'; //remove this when proper fix has been implemented
 
-import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 
-import {
-  PATIENT_PORTAL_LAYOUT_MENU,
-  PATIENT_PORTAL_FOOTER_MENU,
-} from '@/lib/constants';
-
 const AppointmentLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="min-h-screen py-2 flex flex-col">
-      <Header menuList={PATIENT_PORTAL_LAYOUT_MENU} logoLink="/" />
       <div className="px-4 py-2 m-auto max-w-7xl w-full">{children}</div>
       <Footer isUserPage={true} logoLink="/" />
     </div>

diff --git a/src/app/admin/dashboard/page.tsx b/src/app/admin/dashboard/page.tsx
@@ -49,7 +49,7 @@ const AppointmentDemo = async () => {
   } = await supabase.auth.getSession();
 
   if (!session) {
-    redirect('/admin/unauthenticated');
+    redirect('/admin/login');
   }
   // Get all the data
   const { data: emergencyAppointments }: { data: Appointment[] | null } =

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
@@ -1,15 +1,15 @@
 export const dynamic = 'force-dynamic'; //remove this when proper fix has been implemented
 
 import { cookies } from 'next/headers';
-import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
+import {
+  Session,
+  createServerComponentClient,
+} from '@supabase/auth-helpers-nextjs';
 
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 
-import {
-  ADMIN_PORTAL_LAYOUT_MENU,
-  ADMIN_PORTAL_FOOTER_MENU,
-} from '@/lib/constants';
+import { getNavigationLinks } from '@/lib/constants';
 
 const AdminLayout = async ({ children }: { children: React.ReactNode }) => {
   const supabase = createServerComponentClient<Database>({ cookies });
@@ -18,39 +18,16 @@ const AdminLayout = async ({ children }: { children: React.ReactNode }) => {
     data: { session },
   } = await supabase.auth.getSession();
 
-  const getAuthenticationMenuLink = () => {
-    // If user not authenticated, display only Login menu
-    if (!session) {
-      return [
-        {
-          name: 'Login',
-          link: '/admin/unauthenticated',
-        },
-      ];
-    }
-
-    // If user is already authenticated, display Logout & Dashboard menu
-    return [
-      {
-        name: 'Dashboard',
-        link: '/admin/dashboard',
-      },
-      {
-        name: 'Logout',
-        link: '/admin',
-      },
-    ];
-  };
-
   return (
     <div className="min-h-screen py-2 flex flex-col">
       <Header
-        menuList={[...ADMIN_PORTAL_LAYOUT_MENU, ...getAuthenticationMenuLink()]}
-        logoLink="/admin"
+        menuList={[...getNavigationLinks(session as Session)]}
+        logoLink="/"
+        session={session}
       />
       <div className="px-4 py-2 m-auto max-w-7xl w-full">{children}</div>
       <Footer
-        menuList={ADMIN_PORTAL_FOOTER_MENU}
+        menuList={[...getNavigationLinks(session as Session)]}
         logoLink="/admin"
         isUserPage={true}
       />

diff --git a/src/app/admin/unauthenticated/page.tsx → src/app/admin/login/page.tsx b/src/app/admin/unauthenticated/page.tsx → src/app/admin/login/page.tsx
@@ -4,7 +4,7 @@ import { redirect } from 'next/navigation';
 
 import LoginForm from '@/components/LoginForm';
 
-const Unauthenticated = async () => {
+const Login = async () => {
   const supabase = createServerComponentClient<Database>({ cookies });
 
   const {
@@ -18,4 +18,4 @@ const Unauthenticated = async () => {
   return <LoginForm />;
 };
 
-export default Unauthenticated;
+export default Login;
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
@@ -1,37 +1,17 @@
-import Hero from '@/components/Hero';
-import Features from '@/components/Features';
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
 
-import { ADMIN_PORTAL_FEATURES } from '@/lib/constants';
+const Login = async () => {
+  const supabase = createServerComponentClient<Database>({ cookies });
 
-const Admin = () => {
-  const getHeroTitle = () => (
-    <>
-      An{' '}
-      <span className="w-full text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-rose-500">
-        Efficient Appointment Management System
-      </span>{' '}
-      to empower Healthcare Administrators
-    </>
-  );
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
 
-  const heroSubtitle =
-    'Empowers healthcare providers and administrators with a powerful tool to efficiently manage and oversee all requested appointments in one centralized location. Simplify your appointment management process and enhance productivity with our comprehensive and intuitive dashboard.';
-
-  const heroCalloutBtn = {
-    text: 'Get Started',
-    link: '/admin/unauthenticated',
-  };
-
-  return (
-    <>
-      <Hero
-        title={getHeroTitle()}
-        subtitle={heroSubtitle}
-        calloutBtn={heroCalloutBtn}
-      />
-      <Features features={ADMIN_PORTAL_FEATURES} />
-    </>
-  );
+  if (session) {
+    redirect('/admin/dashboard');
+  } else redirect('/admin/login');
 };
 
-export default Admin;
+export default Login;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,14 +1,21 @@
+import { cookies } from 'next/headers';
+import {
+  Session,
+  createServerComponentClient,
+} from '@supabase/auth-helpers-nextjs';
+
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import Hero from '@/components/Hero';
 import Features from '@/components/Features';
-import {
-  PATIENT_PORTAL_LAYOUT_MENU,
-  PATIENT_PORTAL_FOOTER_MENU,
-  PATIENT_PORTAL_FEATURES,
-} from '@/lib/constants';
+import { ADMIN_PORTAL_FEATURES, getNavigationLinks } from '@/lib/constants';
+
+const Home = async () => {
+  const supabase = createServerComponentClient<Database>({ cookies });
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
 
-const Home = () => {
   const getHeroTitle = () => (
     <>
       An{' '}
@@ -20,26 +27,32 @@ const Home = () => {
   );
 
   const heroSubtitle =
-    'The ultimate solution for simplifying and streamlining the process of scheduling healthcare appointments. Say goodbye to lengthy phone calls and endless waiting times, and say hello to effortless appointment management.';
+    'Empower healthcare providers and administrators with a powerful tool to efficiently manage and oversee all requested appointments in one centralized location. Simplify your appointment management process and enhance productivity with our comprehensive and intuitive dashboard.';
 
   const heroCalloutBtn = {
-    text: 'Request Appointment',
-    link: '/appointment',
+    text: 'Get Started',
+    link: '/admin/',
   };
 
+  // Future use for the 'Get Started' button can be to direct users to the register page
+
   return (
     <div className="min-h-screen py-2 flex flex-col">
-      <Header menuList={PATIENT_PORTAL_LAYOUT_MENU} logoLink="/" />
+      <Header
+        menuList={[...getNavigationLinks(session as Session)]}
+        logoLink="/"
+        session={session}
+      />
       <div className="px-4 py-2 m-auto max-w-7xl w-full">
         <Hero
           title={getHeroTitle()}
           subtitle={heroSubtitle}
           calloutBtn={heroCalloutBtn}
         />
-        <Features features={PATIENT_PORTAL_FEATURES} />
+        <Features features={ADMIN_PORTAL_FEATURES} />
       </div>
       <Footer
-        menuList={PATIENT_PORTAL_FOOTER_MENU}
+        menuList={[...getNavigationLinks(session as Session)]}
         logoLink="/"
         isUserPage={false}
       />

diff --git a/src/components/AppointmentForm.tsx b/src/components/AppointmentForm.tsx
@@ -53,6 +53,7 @@ import { cn } from '@/lib/utils';
 import { useToast } from '@/components/ui/use-toast';
 import { ToastAction } from './ui/toast';
 import { error } from 'console';
+import Image from 'next/image';
 
 const formSchema = z.object({
   first_name: z
@@ -72,15 +73,7 @@ const formSchema = z.object({
   is_emergency: z.boolean().default(false),
 });
 
-const AppointmentForm = ({
-  practiceId,
-  practiceName,
-  practiceLogo,
-}: {
-  practiceId: string;
-  practiceName: string;
-  practiceLogo: string | null;
-}) => {
+const AppointmentForm = ({ practiceId }: { practiceId: string }) => {
   const [, startTransition] = useTransition();
   const [createdAppointment, setCreatedAppointment] =
     useState<Appointment | null>(null);
@@ -178,18 +171,7 @@ const AppointmentForm = ({
   return (
     <>
       <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle className="flex gap-2 items-center justify-center text-center">
-            {practiceLogo ? (
-              <img
-                src={practiceLogo}
-                className="h-28 w-28 object-contain"
-                alt={`Logo for a dental practice called ${practiceName}`}
-              />
-            ) : null}
-            {practiceName ? practiceName : null}
-          </CardTitle>
-        </CardHeader>
+        <CardHeader></CardHeader>
         <CardContent>
           <Form {...form}>
             <form

diff --git a/src/components/AppointmentHeader.tsx b/src/components/AppointmentHeader.tsx
@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import React from 'react';
+
+export default function AppointmentHeader({
+  practiceName,
+  practiceLogo,
+}: {
+  practiceName: string;
+  practiceLogo: string | null;
+}) {
+  return (
+    <header className="bg-background">
+      <div className="m-auto max-w-7xl w-full px-4 flex flex-col sm:flex-row justify-between items-center relative">
+        {practiceLogo && (
+          <Image
+            src={practiceLogo}
+            width={160}
+            height={160}
+            alt={`Logo for a dental practice called ${practiceName}`}
+          />
+        )}
+        {practiceName ? (
+          <h1 className="text-2xl font-semibold text-slate-600">
+            {practiceName}
+          </h1>
+        ) : null}
+      </div>
+    </header>
+  );
+}