kmchandler · rechandler · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "prettier"]
 }
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,23 +1,23 @@
-import type { Metadata } from "next";
-import { Nanum_Pen_Script } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Nanum_Pen_Script } from 'next/font/google';
+import './globals.css';
 import {
   ClerkProvider,
   SignedIn,
   SignedOut,
-  RedirectToSignIn
-} from '@clerk/nextjs'
-import NavBar from "./ui/navigation";
+  RedirectToSignIn,
+} from '@clerk/nextjs';
+import NavBar from './ui/navigation';
 
-const nanum = Nanum_Pen_Script({ 
+const nanum = Nanum_Pen_Script({
   weight: '400',
   subsets: ['latin'],
-  style: 'normal'
+  style: 'normal',
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({
@@ -27,25 +27,37 @@ export default function RootLayout({
 }>) {
   return (
     <ClerkProvider>
-      <html lang="en" className="inter.className" >
+      <html lang='en' className='inter.className'>
         <head>
-          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-          <link rel="manifest" href="/site.webmanifest" />
+          <link
+            rel='apple-touch-icon'
+            sizes='180x180'
+            href='/apple-touch-icon.png'
+          />
+          <link
+            rel='icon'
+            type='image/png'
+            sizes='32x32'
+            href='/favicon-32x32.png'
+          />
+          <link
+            rel='icon'
+            type='image/png'
+            sizes='16x16'
+            href='/favicon-16x16.png'
+          />
+          <link rel='manifest' href='/site.webmanifest' />
         </head>
-        <body className={`${nanum.className} flex h-screen w-screen `}>
-        <SignedIn>
-        <main className="h-screen w-screen flex flex-wrap flex-col bg-light-yellow text-oxford-blue">
-          <NavBar />
-          <div className="overflow-auto pt-36 pb-8">
-            {children}
-          </div>
-        </main>
-        </SignedIn>
-            <SignedOut>
-              <RedirectToSignIn />
-            </SignedOut>
+        <body className={`${nanum.className} flex h-screen w-screen`}>
+          <SignedIn>
+            <main className='flex h-screen w-screen flex-col flex-wrap bg-light-yellow text-oxford-blue'>
+              <NavBar />
+              <div className='overflow-auto pb-8 pt-36'>{children}</div>
+            </main>
+          </SignedIn>
+          <SignedOut>
+            <RedirectToSignIn />
+          </SignedOut>
         </body>
       </html>
     </ClerkProvider>

diff --git a/app/loading.tsx b/app/loading.tsx
@@ -1,5 +1,9 @@
-import {Spinner} from "@nextui-org/spinner";
+import { Spinner } from '@nextui-org/spinner';
 
-const Loading = () => <div className="flex justify-center items-center"><Spinner label="Loading..." color="default" /></div>
+const Loading = () => (
+  <div className='flex items-center justify-center'>
+    <Spinner label='Loading...' color='default' />
+  </div>
+);
 
-export default Loading
+export default Loading;
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,40 +1,41 @@
-import { fetchDashboardForUser } from "@/lib/dashboard";
-import Link from "next/link";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPeopleRoof } from '@fortawesome/free-solid-svg-icons'
-import AddFamilyForm from "./pufflings/addFamily";
+import { fetchDashboardForUser } from '@/lib/dashboard';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPeopleRoof } from '@fortawesome/free-solid-svg-icons';
+import AddFamilyForm from './pufflings/addFamily';
 import Image from 'next/image';
 
 //this will be the home page
 
 export default async function Home() {
-
   const dashboardData = await fetchDashboardForUser();
 
-  const icon = <FontAwesomeIcon icon={faPeopleRoof} />
+  const icon = <FontAwesomeIcon icon={faPeopleRoof} />;
 
   if (dashboardData?.id) {
-
     return (
-      <div className="flex flex-col items-center">
+      <div className='flex flex-col items-center'>
         <div>
-          <Image src="/pufflingsIcon.png" width="140" height="140" alt="pufflings icon" />
+          <Image
+            src='/pufflingsIcon.png'
+            width='140'
+            height='140'
+            alt='pufflings icon'
+          />
         </div>
-        <h1 className="text-oxford-blue text-5xl
-        mb-5">pufflings</h1>
-        <Link href={`/pufflings/family/${dashboardData?.id}`} className="text-oxford-blue py-2 px-4 rounded shadow order-3 bg-tea-green hover:drop-shadow-xl transition-all transition-duration-100 text-xl flex flex-col mt-7">
-            <div className="text-8xl pt-6 pl-6 pr-6 pb-2 self-center">
-              {icon}
-            </div>
-            <div className="text-2xl self-center pb-4">
-              the {dashboardData?.family_name.toLocaleLowerCase()} family
-            </div>
+        <h1 className='mb-5 text-5xl text-oxford-blue'>pufflings</h1>
+        <Link
+          href={`/pufflings/family/${dashboardData?.id}`}
+          className='transition-duration-100 order-3 mt-7 flex flex-col rounded bg-tea-green px-4 py-2 text-xl text-oxford-blue shadow transition-all hover:drop-shadow-xl'
+        >
+          <div className='self-center pb-2 pl-6 pr-6 pt-6 text-8xl'>{icon}</div>
+          <div className='self-center pb-4 text-2xl'>
+            the {dashboardData?.family_name.toLocaleLowerCase()} family
+          </div>
         </Link>
       </div>
     );
   } else {
-    return (
-      <AddFamilyForm />
-    );
+    return <AddFamilyForm />;
   }
 }
diff --git a/app/pufflings/addFamily.tsx b/app/pufflings/addFamily.tsx
@@ -1,20 +1,27 @@
-import { createFamily } from "@/lib/family"
+import { createFamily } from '@/lib/family';
 
 const AddFamilyForm = () => {
-
   return (
     <form action={createFamily}>
-      <div className="flex flex col">
+      <div className='col flex'>
         create a new family below, or ask to be added to an existing family.
       </div>
-
-      <label        
-        className="text-3xl">family name
-      </label>
-      <input type="text" name="family_name" className="outline outline-1 outline-oxford-blue rounded text-2xl" />
-      <button type="submit" className="text-oxford-blue py-2 px-4 rounded shadow flex bg-tea-green transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl mt-7"> submit new family </button>
+
+      <label className='text-3xl'>family name</label>
+      <input
+        type='text'
+        name='family_name'
+        className='rounded text-2xl outline outline-1 outline-oxford-blue'
+      />
+      <button
+        type='submit'
+        className='transition-duration-100 mt-7 flex rounded bg-tea-green px-4 py-2 text-xl text-oxford-blue shadow transition transition-all hover:drop-shadow-xl'
+      >
+        {' '}
+        submit new family{' '}
+      </button>
     </form>
-  )
-}
+  );
+};
 
-export default AddFamilyForm
+export default AddFamilyForm;
diff --git a/app/pufflings/family/[id]/addChild/page.tsx b/app/pufflings/family/[id]/addChild/page.tsx
@@ -1,20 +1,33 @@
-import { createChild } from "@/lib/child"
+import { createChild } from '@/lib/child';
 
 const AddChildForm = () => {
-
   return (
     <form action={createChild}>
-      <div  className="flex flex-col">
-        <label className="text-3xl">name</label>
-        <input type="text" name="name" className="outline outline-1 outline-oxford-blue rounded"/>
+      <div className='flex flex-col'>
+        <label className='text-3xl'>name</label>
+        <input
+          type='text'
+          name='name'
+          className='rounded outline outline-1 outline-oxford-blue'
+        />
       </div>
-      <div  className="flex flex-col">
-        <label className="text-3xl">birthday</label>
-        <input type="date" name="birthday" className="outline outline-1 outline-oxford-blue rounded text-2xl"/>
+      <div className='flex flex-col'>
+        <label className='text-3xl'>birthday</label>
+        <input
+          type='date'
+          name='birthday'
+          className='rounded text-2xl outline outline-1 outline-oxford-blue'
+        />
       </div>
-      <button type="submit" className="text-oxford-blue py-2 px-4 rounded shadow flex order-3 bg-tea-green transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl flex flex-col mt-7"> submit </button>
+      <button
+        type='submit'
+        className='transition-duration-100 order-3 mt-7 flex flex-col rounded bg-tea-green px-4 py-2 text-xl text-oxford-blue shadow transition transition-all hover:drop-shadow-xl'
+      >
+        {' '}
+        submit{' '}
+      </button>
     </form>
-  )
-}
+  );
+};
 
-export default AddChildForm
+export default AddChildForm;
diff --git a/app/pufflings/family/[id]/addMember/page.tsx b/app/pufflings/family/[id]/addMember/page.tsx
@@ -1,10 +1,7 @@
-import UserSearchBar from "@/app/ui/userSearch"
+import UserSearchBar from '@/app/ui/userSearch';
 
-const AddCaregiver = ({ params: { id }}: {params: { id: string}}) => { 
+const AddCaregiver = ({ params: { id } }: { params: { id: string } }) => {
+  return <UserSearchBar familyId={id} />;
+};
 
-  return (
-    <UserSearchBar familyId={id} />
-  )
-}
-
-export default AddCaregiver
+export default AddCaregiver;
diff --git a/app/pufflings/family/[id]/caregiver/[caregiverId]/page.tsx b/app/pufflings/family/[id]/caregiver/[caregiverId]/page.tsx
@@ -1,14 +1,20 @@
-import { getUserById } from "@/lib/family";
+import { getUserById } from '@/lib/family';
 
-const caregiverPage = async ({ params: { caregiverId }}: {params: { caregiverId: string}}) => {
+const caregiverPage = async ({
+  params: { caregiverId },
+}: {
+  params: { caregiverId: string };
+}) => {
   const user = await getUserById(caregiverId);
 
   return (
-    <div className="text-oxford-blue py-2 px-4 rounded shadow flex bg-tea-green transition hover:drop-shadow-xl transition-all transition-duration-100 text-3xl flex flex-col mt-4 inline-block text-center">
-      <p>{user.firstName} {user.lastName}</p>
+    <div className='transition-duration-100 mt-4 inline-block flex flex-col rounded bg-tea-green px-4 py-2 text-center text-3xl text-oxford-blue shadow transition transition-all hover:drop-shadow-xl'>
+      <p>
+        {user.firstName} {user.lastName}
+      </p>
       <p>{user.emailAddresses[0].emailAddress}</p>
     </div>
-  )
-}
+  );
+};
 
 export default caregiverPage;