Basic api handling

compass/.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# environment variables
+.env

compass/app/api/health/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+
+interface ResponseData {
+  message: string;
+}
+
+export async function GET() {
+  return NextResponse.json({ message: "Hello World!" }, { status: 200 });
+}

compass/app/page.tsx

@@ -1,13 +1,13 @@
 // pages/index.tsx
 "use client";
 
-import Button from '@/components/Button';
+import Button from "@/components/Button";
-import Input from '@/components/Input'
+import Input from "@/components/Input";
-import InlineLink from '@/components/InlineLink';
+import InlineLink from "@/components/InlineLink";
-import Paper from '@/components/auth/Paper';
+import Paper from "@/components/auth/Paper";
 // import { Metadata } from 'next'
-import Image from 'next/image';
+import Image from "next/image";
-import {ChangeEvent, useState} from "react";
+import { ChangeEvent, useState } from "react";
 
 // export const metadata: Metadata = {
 //   title: 'Login',
@@ -18,34 +18,37 @@ export default function Page()  {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
 
+  const testFetch = () => {
+    const result = fetch("/api/health");
+    console.log(result);
+  };
+
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.currentTarget.value);
     console.log("email " + email);
-    }
+  };
 
   const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(event.currentTarget.value);
-        console.log("password " + password)
+    console.log("password " + password);
-    }
+  };
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     // Priority: Incorrect combo > Missing email > Missing password
 
     if (password.trim().length === 0) {
-            setError("Please enter your password.")
+      setError("Please enter your password.");
     }
     // This shouldn't happen, <input type="email"> already provides validation, but just in case.
     if (email.trim().length === 0) {
-            setError("Please enter your email.")
+      setError("Please enter your email.");
     }
     // Placeholder for incorrect email + password combo.
     if (email === "incorrect@gmail.com" && password) {
-            setError("Incorrect password.")
+      setError("Incorrect password.");
     }
-    }
+  };
-
-
 
   return (
     <>
@@ -53,28 +56,32 @@ export default function Page()  {
         <form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
           <Image
             src="/logo.png"
-                        alt='Compass Center logo.'
+            alt="Compass Center logo."
             width={100}
             height={91}
           />
-                    <h1 className='font-bold text-xl text-purple-800'>Login</h1>
+          <h1 className="font-bold text-xl text-purple-800">Login</h1>
           <div className="mb-4">
-                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" onChange={handleEmailChange} />
+            <Input
+              type="email"
+              title="Email"
+              placeholder="janedoe@gmail.com"
+              onChange={handleEmailChange}
+            />
           </div>
           <div className="mb-6">
-                        <Input type='password' title="Password" onChange={handlePasswordChange} />
+            <Input
+              type="password"
+              title="Password"
+              onChange={handlePasswordChange}
+            />
           </div>
           <div className="flex flex-col items-left space-y-4">
-                        <InlineLink href="/forgot_password">
+            <InlineLink href="/forgot_password">Forgot password?</InlineLink>
-                            Forgot password?
+            <Button onClick={handleClick}>Login</Button>
-                        </InlineLink>
-                        <Button onClick={handleClick}>
-                            Login
-                        </Button>
             <div className="text-center text-red-600" hidden={!error}>
               <p>{error}</p>
             </div>
-
           </div>
         </form>
         <p className="text-center mt-6 text-gray-500 text-xs">
@@ -83,4 +90,4 @@ export default function Page()  {
       </Paper>
     </>
   );
-};
+}