[feat] introduces simple onboarding form (#16)

* adds queries to profile table in supabase * adds create profile page * responds to feedback * reruns npm install * makes edits to create profile page --------- Co-authored-by: Pragya Kallanagoudar <[email protected]>
calblueprint · Oct 24, 2023 · 1988eac · 1988eac
1 parent 506e701
commit 1988eac
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/create-profile/page.tsx b/src/app/create-profile/page.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { UUID } from 'crypto';
+import { useState } from 'react';
+import { insertProfile } from '../../api/supabase/queries/profiles';
+import { Profile } from '../../types/schema';
+import styles from '../page.module.css';
+
+export default function Profile() {
+  const [firstName, setFirstName] = useState<string>('');
+  const [lastName, setLastName] = useState<string>('');
+
+  const handleInsert = async () => {
+    if (!firstName || !lastName) return;
+    const newProfile: Profile = {
+      // hardcoded values for now
+      location: 'Berkeley, CA',
+      user_id: crypto.randomUUID() as UUID,
+      roles: ['blah'],
+      languages: ['blah', 'blah'],
+      hours_per_month: 40,
+      immigration_law_experience: '5 years',
+      bar_number: '12345',
+      start_date: new Date().toDateString(),
+      interest_ids: [crypto.randomUUID()] as UUID[],
+      availability_description: 'blah blah blah',
+      eoir_registered: false,
+      first_name: firstName,
+      last_name: lastName,
+    };
+    await insertProfile(newProfile);
+    setFirstName('');
+    setLastName('');
+  };
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>Create Profile Form</div>
+      <form>
+        <div>
+          <label htmlFor="firstName">
+            First Name:
+            <input
+              type="text"
+              name="firstName"
+              required
+              value={firstName}
+              onChange={event => setFirstName(event.target.value)}
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="lastName">
+            Last Name:
+            <input
+              type="text"
+              name="lastName"
+              required
+              value={lastName}
+              onChange={event => setLastName(event.target.value)}
+            />
+          </label>
+        </div>
+        <button type="button" onClick={handleInsert}>
+          Submit
+        </button>
+      </form>
+    </main>
+  );
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -2,11 +2,7 @@
 
 import 'crypto';
 import React, { useEffect, useState } from 'react';
-import {
-  fetchProfiles,
-  insertProfile,
-  updateProfile,
-} from '../../api/supabase/queries/profiles';
+import { fetchProfiles } from '../../api/supabase/queries/profiles';
 import { Profile } from '../../types/schema';
 
 import styles from '../page.module.css';
@@ -19,6 +15,7 @@ export default function Page() {
       const allProfiles = await fetchProfiles();
       setProfiles(allProfiles);
 
+      /** 
       type UUID = `${string}-${string}-${string}-${string}-${string}`;
 
       const mockProfile: Profile = {
@@ -42,6 +39,7 @@ export default function Page() {
       await updateProfile(mockProfile.user_id, {
         hours_per_month: -200, // Update the roles field with new data
       });
+      */
     })();
   }, []);
 
@@ -62,11 +60,12 @@ export default function Page() {
             <p>Languages: {profile.languages.join(', ')}</p>
             <p>hoursPerMonth: {profile.hours_per_month}</p>
             <p>
-              immigrationLawExperience: {profile.immigration_law_experience}
+              immigrationLawExperience:{' '}
+              {profile.immigration_law_experience.toString()}
             </p>
-            <p>barNumber: {profile.bar_number}</p>
-            <p>startDate: {profile.start_date}</p>
-            <p>interestIds: {profile.interest_ids}</p>
+            <p>barNumber: {profile.bar_number.toString()}</p>
+            <p>startDate: {profile.start_date.toString()}</p>
+            <p>interestIds: {profile.interest_ids.toString()}</p>
           </li>
         ))}
       </ul>