feature/simple-settings-with-profile-and-sign-out

components/Settings/SettingsDashboard.tsx

@@ -0,0 +1,49 @@
+import { signOut } from 'next-auth/react';
+import React, { useState, useEffect } from 'react';
+import { QueriedUserData } from 'bookem-shared/src/types/database';
+import UserProfile from './UserProfile';
+import { DashboardContainer } from '@/styles/volunteerDashboard.styles';
+import { CenteringContainer } from '@/styles/settings.style';
+import { Button } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
+
+export default function SettingsDashboard() {
+  const [userData, setUserData] = useState<QueriedUserData | null>(null);
+
+  useEffect(() => {
+    // fetch user data
+    const fetchUserData = async () => {
+      const res = await fetch('/api/users');
+      const data = await res.json();
+      setUserData(data);
+
+      console.log(data);
+    };
+    fetchUserData();
+  }, []);
+
+  if (!userData) return <div>Loading...</div>;
+
+  return (
+    <DashboardContainer>
+      <CenteringContainer>
+        <UserProfile user={userData} />
+
+        <Button
+          style={{
+            marginTop: '20px',
+            // make it larger
+            height: '50px',
+            width: '200px',
+            fontSize: '20px',
+          }}
+          type="primary"
+          danger
+          onClick={() => signOut()}>
+          <LogoutOutlined />
+          Sign Out
+        </Button>
+      </CenteringContainer>
+    </DashboardContainer>
+  );
+}

components/Settings/UserProfile/index.tsx

@@ -0,0 +1,41 @@
+import { QueriedUserData } from 'bookem-shared/src/types/database';
+import { Card } from 'antd';
+
+const renderBackgroundCheckStatus = (backgroundCheck: any) => {
+  if (backgroundCheck) {
+    if (backgroundCheck.passed) {
+      return (
+        <>
+          <p>Background check status: Passed</p>
+          <p>
+            Background check expiration date:
+            {new Date(backgroundCheck.expirationDate).toLocaleDateString()}
+          </p>
+        </>
+      );
+    } else {
+      return <p>Background check status: Not pased</p>;
+    }
+  } else {
+    return <p>Background check status: Not available</p>;
+  }
+};
+
+export default function UserProfile({ user }: { user: QueriedUserData }) {
+  const { backgroundCheck } = user;
+
+  return (
+    <Card
+      title="Your Profile"
+      bordered
+      style={{
+        // make the border more obvious using box-shadow
+        boxShadow: '0px 0px 10px 0px rgba(0,0,0,0.1)',
+      }}>
+      <p>Name: {user.name}</p>
+      <p>Email: {user.email}</p>
+      <p>Phone: {user.phone}</p>
+      {renderBackgroundCheckStatus(backgroundCheck)}
+    </Card>
+  );
+}

pages/api/applications.ts

@@ -34,7 +34,7 @@ export default async function handler(
     case 'GET':
       try {
         await dbConnect();
-        await VolunteerEvents.find({});
+        await VolunteerEvents.findOne({});
 
         // query volunteerApplication by event id attributes
         const applicationResponses = await ApplicationResponse.find({

pages/api/volunteer-logs/index.ts

@@ -11,6 +11,7 @@ import { getSession } from 'next-auth/react';
 import VolunteerLogs from 'bookem-shared/src/models/VolunteerLogs';
 import Users from 'bookem-shared/src/models/Users';
 import { QueriedUserData } from 'bookem-shared/src/types/database';
+import VolunteerEvents from 'bookem-shared/src/models/VolunteerEvents';
 
 /**
  * /api/VolunteerLogs/:
@@ -58,6 +59,7 @@ export default async function handler(
 
         const usersId = user._id;
 
+        await VolunteerEvents.findOne();
         // get all volunteerEvents from collection that match the user's Id
         const volunteerLogs = await VolunteerLogs.find({
           userId: usersId,

pages/settings.tsx

@@ -1,18 +1,9 @@
-import { signOut, useSession } from 'next-auth/react';
-import React from 'react';
-
+import SettingsDashboard from '@/components/Settings/SettingsDashboard';
 const SettingsPage = () => {
-  const { data: session } = useSession();
-
   return (
-    <div>
-      {session && (
-        <>
-          <div>You have signed in as {session.user?.email}</div>
-          <button onClick={() => signOut()}>Sign out</button>
-        </>
-      )}
-    </div>
+    <>
+      <SettingsDashboard />
+    </>
   );
 };
 

styles/settings.style.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+// a container for centering the content
+export const CenteringContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+`;