Checkpoint

src/app/addProject/page.tsx

@@ -11,7 +11,7 @@ const AddProjectPage = async () => {
   loggedInProtectedPage(
     session as {
       user: { email: string; id: string; randomKey: string };
-    } | null
+    } | null,
   );
   const interests = await prisma.interest.findMany();
   const participants = await prisma.user.findMany();

src/app/auth/signin/page.tsx

@@ -14,7 +14,7 @@ const SignIn = () => {
     const email = target.email.value;
     const password = target.password.value;
     const result = await signIn('credentials', {
-      callbackUrl: '/list',
+      callbackUrl: '/home',
       email,
       password,
     });

src/app/home/HomePage.tsx

@@ -1,16 +1,37 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+
 'use client';
 
 import React from 'react';
 import { Container, Col } from 'react-bootstrap';
-import { PageIDs } from '../../utilities/ids';
-import pageStyle from '../../utilities/pageStyle';
+import { PageIDs } from '@/utilities/ids';
+import pageStyle from '@/utilities/pageStyle';
+import { Profile, Interest, Project } from '@prisma/client';
+import ProfileForm from '@/components/ProfileForm';
 
-const HomePage = () => (
-  <Container id={PageIDs.homePage} className="justify-content-center" style={pageStyle}>
+const HomePage = ({
+  profile,
+  interests,
+  projects,
+  profileInterests,
+  profileProjects,
+}: {
+  profile: Profile;
+  interests: Interest[];
+  projects: Project[];
+  profileInterests: Interest[];
+  profileProjects: Project[];
+}) => (
+  <Container id={PageIDs.homePage} style={pageStyle}>
     <Col>
-      <Col className="justify-content-center text-center">
-        <h2>Your Profile</h2>
-      </Col>
+      <h2 className="text-center">Your Profile</h2>
+      <ProfileForm
+        profile={profile}
+        interests={interests}
+        projects={projects}
+        profileInterests={profileInterests}
+        profileProjects={profileProjects}
+      />
     </Col>
   </Container>
 );

src/app/home/page.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/extensions */
 import React from 'react';
 import { getServerSession } from 'next-auth';
+import { Profile, Interest, Project } from '@prisma/client';
 import { prisma } from '@/lib/prisma';
 import { loggedInProtectedPage } from '@/lib/page-protection';
 import { authOptions } from '../api/auth/[...nextauth]/route';
@@ -25,27 +26,26 @@ const HomePageHelper = async () => {
   const profileInterests = await prisma.profileInterest.findMany({
     where: { profileId: profile!.id },
   });
-  const profileInterestNames = profileInterests.map((profileInterest) => {
+  const proInterests: Interest[] = profileInterests.map((profileInterest) => {
     const i = interests.find((interest) => interest.id === profileInterest.interestId);
-    return i ? i.name : '';
+    return i as Interest;
   });
-  console.log(profileInterestNames);
   const profileProjects = await prisma.profileProject.findMany({
     where: { profileId: profile!.id },
   });
-  const profileProjectNames = profileProjects.map((profileProject) => {
+  const proProjects: Project[] = profileProjects.map((profileProject) => {
     const p = projects.find((project) => project.id === profileProject.projectId);
-    return p ? p.name : '';
+    return p as Project;
   });
-  console.log(
-    // interests,
-    // projects,
-    // profileInterests,
-    // profileProjects,
-    profileInterestNames,
-    profileProjectNames,
+  return (
+    <HomePage
+      profile={profile as Profile}
+      interests={interests}
+      projects={projects}
+      profileInterests={proInterests}
+      profileProjects={proProjects}
+    />
   );
-  return <HomePage />;
 };
 
 export default HomePageHelper;

src/components/ProfileForm.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable import/extensions */
+
+'use client';
+
+import React from 'react';
+import { Form, Button, Col, Container, Card, Row } from 'react-bootstrap';
+import { useForm, Controller } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import swal from 'sweetalert';
+import Multiselect from 'multiselect-react-dropdown';
+import { IProfile, ProfileSchema } from '@/lib/validationSchemas';
+import { Interest, Profile, Project } from '@prisma/client';
+
+const ProfileForm = ({
+  profile,
+  interests,
+  projects,
+  profileInterests,
+  profileProjects,
+}: {
+  profile: Profile;
+  interests: Interest[];
+  projects: Project[];
+  profileInterests: Interest[];
+  profileProjects: Project[];
+}) => {
+  const formPadding = 'py-1';
+  const interestNames = interests.map((interest) => interest.name);
+  const profileInterestNames = profileInterests.map((interest) => interest.name);
+  const projectNames = projects.map((project) => project.name);
+  const profileProjectNames = profileProjects.map((project) => project.name);
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(ProfileSchema),
+  });
+
+  const onSubmit = async (data: IProfile) => {
+    console.log(data);
+    // const result = await upsertProject(data);
+    // if (result) {
+    //   swal('Success!', 'Project data saved successfully!', 'success');
+    //   reset();
+    // } else {
+    //   swal('Error!', 'Failed to save project data!', 'error');
+    // }
+  };
+  return (
+    <Container>
+      <Card>
+        <Card.Body>
+          <Form onSubmit={handleSubmit(onSubmit)}>
+            <Row className={formPadding}>
+              <Col xs={4}>
+                <Form.Group controlId="firstName">
+                  <Form.Label>First Name</Form.Label>
+                  <Form.Control type="text" {...register('firstName')} defaultValue={profile.firstName!} />
+                  <Form.Text className="text-danger">{errors.firstName?.message}</Form.Text>
+                </Form.Group>
+              </Col>
+              <Col xs={4}>
+                <Form.Group controlId="lastName">
+                  <Form.Label>Last Name</Form.Label>
+                  <Form.Control type="text" {...register('lastName')} defaultValue={profile.lastName!} />
+                  <Form.Text className="text-danger">{errors.lastName?.message}</Form.Text>
+                </Form.Group>
+              </Col>
+              <Col xs={4}>
+                <Form.Group controlId="email">
+                  <Form.Label>Email</Form.Label>
+                  <Form.Control type="text" {...register('email')} defaultValue={profile.email!} readOnly disabled />
+                  <Form.Text className="text-danger">{errors.email?.message}</Form.Text>
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row className={formPadding}>
+              <Col>
+                <Form.Group controlId="bio">
+                  <Form.Label>Biographical statement</Form.Label>
+                  <Form.Control
+                    as="textarea"
+                    placeholder="Your short biography."
+                    {...register('bio')}
+                    defaultValue={profile.bio!}
+                  />
+                  <Form.Text muted>(optional)</Form.Text>
+                  <Form.Text className="text-danger">{errors.bio?.message}</Form.Text>
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row className={formPadding}>
+              <Col xs={6}>
+                <Form.Group controlId="interests">
+                  <Form.Label>Interests</Form.Label>
+                  <Controller
+                    control={control}
+                    name="interests"
+                    render={({ field: { onChange } }) => (
+                      <Multiselect
+                        options={interestNames}
+                        isObject={false}
+                        showCheckbox
+                        hidePlaceholder
+                        closeOnSelect={false}
+                        onSelect={onChange}
+                        onRemove={onChange}
+                        selectedValues={profileInterestNames}
+                      />
+                    )}
+                  />
+                </Form.Group>
+              </Col>
+              <Col xs={6}>
+                <Form.Group controlId="projects">
+                  <Form.Label>Projects</Form.Label>
+                  <Controller
+                    control={control}
+                    name="projects"
+                    render={({ field: { onChange } }) => (
+                      <Multiselect
+                        options={projectNames}
+                        isObject={false}
+                        showCheckbox
+                        hidePlaceholder
+                        closeOnSelect={false}
+                        onSelect={onChange}
+                        onRemove={onChange}
+                        selectedValues={profileProjectNames}
+                      />
+                    )}
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row className={formPadding}>
+              <Col>
+                <Button variant="primary" type="submit">
+                  Update
+                </Button>
+              </Col>
+              <Col>
+                <Button variant="warning" type="reset" onClick={() => reset()}>
+                  Reset
+                </Button>
+              </Col>
+            </Row>
+          </Form>
+        </Card.Body>
+      </Card>
+    </Container>
+  );
+};
+
+export default ProfileForm;

src/lib/ProfileCardData.ts

@@ -0,0 +1,12 @@
+import { Project } from '@prisma/client';
+
+export type ProfileCardData = {
+  email: string;
+  bio: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  picture: string | null;
+  title: string | null;
+  projects: Project[];
+  interests: string[];
+};

src/lib/ProjectCardData.ts

@@ -0,0 +1,10 @@
+import { Profile } from '@prisma/client';
+
+export type ProjectCardData = {
+  name: string;
+  homepage: string | null;
+  picture: string | null;
+  description: string | null;
+  interests: string[];
+  participants: Profile[];
+};

src/lib/StickyState.ts

@@ -0,0 +1,16 @@
+import { Entity, entity } from 'simpler-state';
+
+const entities: Record<string, { savedEntity: Entity<any>; savedSetter: (value: any) => void }> = {};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useStickyState = (name: string, initialValue: any) => {
+  if (entities[name]) {
+    const { savedEntity, savedSetter } = entities[name];
+    return [savedEntity.use(), savedSetter];
+  }
+  // Otherwise create a new entity
+  const newEntity = entity(initialValue);
+  const newEntitySetter = (newValue: unknown) => newEntity.set(newValue);
+  entities[name] = { savedEntity: newEntity, savedSetter: newEntitySetter };
+  return [newEntity.use(), newEntitySetter];
+};