Prettier format and fix pipeline

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["prettier"]
+  "extends": ["prettier", "next/core-web-vitals"]
 }

.github/workflows/build_test.yml

@@ -13,15 +13,11 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: "18.x"
-          
+
       - name: yarn install
         run: |
           yarn install
 
-      - name: server build and test
-        run: |
-          yarn workspace server build
-
-      - name: client build and test
+      - name: Build Next app
         run: |
-          yarn workspace client build
+          yarn build

package.json

@@ -12,21 +12,31 @@
     "@auth/prisma-adapter": "^1.0.1",
     "@prisma/client": "^5.1.1",
     "@tanstack/react-query": "^4.32.6",
-    "@types/node": "18.15.10",
-    "@types/react": "18.0.29",
-    "@types/react-dom": "18.0.11",
-    "eslint": "8.36.0",
-    "eslint-config-next": "13.2.4",
+    "eslint": "^8.47.0",
+    "eslint-config-next": "^13.4.13",
     "next": "^13.4.13",
     "next-auth": "^4.22.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "5.0.2"
+    "react-icons": "^4.10.1",
+    "typescript": "^5.1.6"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
+    "@svgr/webpack": "^8.0.1",
+    "@types/eslint": "^8.44.2",
+    "@types/next-auth": "^3.15.0",
+    "@types/node": "^20.5.0",
+    "@types/prettier": "^3.0.0",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "autoprefixer": "^10.4.15",
+    "eslint-config-prettier": "^9.0.0",
+    "postcss": "^8.4.27",
+    "prettier": "^3.0.1",
+    "prettier-plugin-tailwindcss": "^0.5.2",
     "prisma": "^5.1.1",
-    "tailwindcss": "^3.2.7"
+    "tailwindcss": "^3.3.3"
   }
 }

src/app/auth/signin/page.tsx

@@ -1,17 +1,13 @@
-"use client"
-
-import Button from "@/components/Button/Button";
-import { signIn } from "next-auth/react"
+"use client";
 
+import { signIn } from "next-auth/react";
 
 const SignInPage = () => {
-
-    return (
-        <div className="w-full h-full">
-            <button onClick={() => signIn("google")}>Sign in</button>
-        </div>
-    )
-
-}
-
-export default SignInPage;
+  return (
+    <div className="w-full h-full">
+      <button onClick={() => signIn("google")}>Sign in</button>
+    </div>
+  );
+};
+
+export default SignInPage;

src/app/confirmation/page.tsx

@@ -2,11 +2,10 @@
  * @author Angela Guo <aguo921@aucklanduni.ac.nz>
  */
 
-"use client";
-
 import ConfirmationIcon from "@/components/ConfirmationIcon/ConfirmationIcon";
 import ConfirmedSessionCard from "@/components/ConfirmedSessionCard/ConfirmedSessionCard";
-import { getSession, useSession } from "next-auth/react";
+import { getSession } from "next-auth/react";
+import Image from "next/image";
 import ConfirmationBannerSVG from "public/images/ConfirmationBannerSVG.svg";
 
 const sessions = [
@@ -31,18 +30,20 @@ const sessions = [
 const confirmed = true;
 
 export default async function ConfirmationPage() {
-
-
   // const {data} = useSession();
   // console.log(data)
 
-  const session = await getSession()
-  console.log(session)
+  const session = await getSession();
+  console.log(session);
 
   return (
     <div className="flex flex-col h-[100dvh]">
       <div className="relative">
-        <img src={ConfirmationBannerSVG.src} className="w-full" />
+        <Image
+          src={ConfirmationBannerSVG.src}
+          className="w-full"
+          alt={"Confirmation Banner"}
+        />
         <p className="text-5xl font-bold text-center text-blue-600 z-10 absolute left-0 right-0 top-10">
           UABC
         </p>

src/app/globals.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

src/app/layout.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import './globals.css'
-import { SessionProvider } from 'next-auth/react';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "./globals.css";
+import { SessionProvider } from "next-auth/react";
 
 // export const metadata = {
 //   title: 'Create Next App',
@@ -12,20 +12,17 @@ import { SessionProvider } from 'next-auth/react';
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
-
   const queryClient = new QueryClient();
 
   return (
     <html lang="en">
       <body>
         <QueryClientProvider client={queryClient}>
-          <SessionProvider>
-          {children}
-          </SessionProvider>
+          <SessionProvider>{children}</SessionProvider>
         </QueryClientProvider>
       </body>
     </html>
-  )
+  );
 }

src/app/page.tsx

@@ -8,12 +8,8 @@ export default function HomePage() {
   return (
     <div>
       <p>Welcome to UABC Booking Portal.</p>
-      <TextInput
-        label="Label"
-        value={value}
-        onChange={setValue}
-      />
+      <TextInput label="Label" value={value} onChange={setValue} />
       <p>{value}</p>
     </div>
-  )
-}
+  );
+}

src/app/payment/page.tsx

@@ -11,26 +11,27 @@ import PaymentOptionCard from "../../components/PaymentOptionCard/PaymentOptionC
 export default function PaymentOptionsPage() {
   return (
     <div>
-        <Heading>Payment</Heading>
-
-        <div className="p-2">
-          <PaymentInfoCard amount={15} />
-        </div>
+      <Heading>Payment</Heading>
 
-        <div className="absolute bottom-5 left-0 w-full p-2">
-          <p className="font-medium text-center">Please select a payment method:</p>
-          <PaymentOptionCard
-            onClick={() => alert('Direct debit')}
-            title="Direct Debit"
-            subtitle="Pay via Bank Transfer"
-          />
-          <PaymentOptionCard
-            onClick={() => alert('Pay now')}
-            title="Pay Now"
-            subtitle="Pay via a Debit or Credit Card"
-          />
-        </div>
+      <div className="p-2">
+        <PaymentInfoCard amount={15} />
+      </div>
 
+      <div className="absolute bottom-5 left-0 w-full p-2">
+        <p className="font-medium text-center">
+          Please select a payment method:
+        </p>
+        <PaymentOptionCard
+          onClick={() => alert("Direct debit")}
+          title="Direct Debit"
+          subtitle="Pay via Bank Transfer"
+        />
+        <PaymentOptionCard
+          onClick={() => alert("Pay now")}
+          title="Pay Now"
+          subtitle="Pay via a Debit or Credit Card"
+        />
+      </div>
     </div>
-  )
-}
+  );
+}

src/app/session/page.tsx

@@ -10,28 +10,25 @@ import { useGetSessions } from "@/useQuery/useGetSessions";
 import { useEffect } from "react";
 
 export default function SessionPage() {
+  const { data } = useGetSessions();
 
-    const { data } = useGetSessions();
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
 
-    useEffect(() => {
-        console.log(data)
-    }, [data])
-
-    return data ? (
-        <div>
-            {
-                data.map((session) => {
-                    return (
-                        <SessionCard
-                            startdate={new Date(session.bookingOpen)}
-                            enddate={new Date(session.bookingClose)}
-                            location={session.location}
-                            status={SessionCardStatus.DEFAULT}
-                        />
-                    )
-                })
-            }
-        </div>
-
-    ) : null
-}
+  return data ? (
+    <div>
+      {data.map((session) => {
+        return (
+          <SessionCard
+            key={session.id}
+            startdate={new Date(session.bookingOpen)}
+            enddate={new Date(session.bookingClose)}
+            location={session.location}
+            status={SessionCardStatus.DEFAULT}
+          />
+        );
+      })}
+    </div>
+  ) : null;
+}

src/authOption.ts

@@ -7,15 +7,15 @@ import GoogleProvider from "next-auth/providers/google";
 const prisma = new PrismaClient();
 
 export const authOption: AuthOptions = {
-    adapter: PrismaAdapter(prisma) as Adapter,
-    providers: [
-        GoogleProvider({
-            clientId: process.env.GOOGLE_CLIENT_ID!,
-            clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
-            checks: ["none"]
-        }),
-    ],
-    session: {
-        strategy: "jwt"
-    },
-}
+  adapter: PrismaAdapter(prisma) as Adapter,
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID!,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+      checks: ["none"],
+    }),
+  ],
+  session: {
+    strategy: "jwt",
+  },
+};

src/components/Card/CardProps.tsx

@@ -3,8 +3,8 @@
  */
 
 type CardProps = {
-    className?: string,
-    onClick?: () => void
-}
+  className?: string;
+  onClick?: () => void;
+};
 
-export default CardProps
+export default CardProps;

src/components/ConfirmationIcon/ConfirmationIconProps.tsx

@@ -3,7 +3,7 @@
  */
 
 type ConfirmationIconProps = {
-    confirmed: boolean
-}
+  confirmed: boolean;
+};
 
-export default ConfirmationIconProps
+export default ConfirmationIconProps;

src/components/ConfirmedSessionCard/ConfirmedSessionCard.tsx

@@ -2,19 +2,20 @@
  * @author Angela Guo <aguo921@aucklanduni.ac.nz>
  */
 
-import Card from '../Card/Card';
-import ConfirmedSessionCardProps from './ConfirmedSessionCardProps';
+import Card from "../Card/Card";
+import ConfirmedSessionCardProps from "./ConfirmedSessionCardProps";
 
 const ConfirmedSessionCard = (props: ConfirmedSessionCardProps) => {
+  return (
+    <Card className="bg-blue-500 text-blue-100 p-5">
+      <p className="text-white font-medium">{props.weekDay}</p>
+      <p className="text-sm mb-2">{props.locationName}</p>
+      <p className="text-sm">{props.address}</p>
+      <p className="text-sm">
+        {props.startTime} - {props.endTime}
+      </p>
+    </Card>
+  );
+};
 
-    return (
-        <Card className="bg-blue-500 text-blue-100 p-5">
-            <p className="text-white font-medium">{props.weekDay}</p>
-            <p className="text-sm mb-2">{props.locationName}</p>
-            <p className="text-sm">{props.address}</p>
-            <p className="text-sm">{props.startTime} - {props.endTime}</p>
-        </Card>
-    )
-}
-
-export default ConfirmedSessionCard
+export default ConfirmedSessionCard;