978, Part 1, Creating onboarding modal component

apps/app/pages/users/me.js

@@ -1,6 +1,6 @@
 import Page from '@devlaunchers/website/src/pages/users/me';
 import IdeaApp from '@devlaunchers/website/src/pages/_app';
-export { getStaticProps } from '@devlaunchers/website/src/pages/index';
+// export { getStaticProps, getStaticPaths } from '@devlaunchers/website/src/pages/users/me';
 
 /////////////////////////////////////////
 

apps/website/src/components/modules/UserOnboardingModal/DiscordOnboarding/DiscordOnboarding.js

@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+export default function DiscordOnboarding() {
+    return(<></>);
+}

apps/website/src/components/modules/UserOnboardingModal/DiscordOnboarding/index.js

@@ -0,0 +1 @@
+export { default } from "./DiscordOnboarding";

apps/website/src/components/modules/UserOnboardingModal/PlatformOnboarding/PlatformOnboarding.js

@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+export default function PlatformOnboarding() {
+    return(<></>);
+}

apps/website/src/components/modules/UserOnboardingModal/PlatformOnboarding/index.js

@@ -0,0 +1 @@
+export { default } from "./PlatformOnboarding";

apps/website/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+export const ModalContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  font-family: "Abel", sans-serif;
+`;
+
+export const ModalHeader = styled.div`
+  width: 100%;
+  ${'' /* Enter styling */}
+`;
+
+export const ModalBody = styled.div`
+  padding: 0 120px;
+  ${'' /* Enter styling */}
+`;
+
+// Modal set up
+export const userUnboardingModalStyle = {
+  content: {
+    position: "absolute",
+    width: "50%",
+    padding: "0px",
+    height: "80%",
+    top: "50%",
+    left: "50%",
+    overflow: "hidden",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-50%",
+    transform: "translate(-50%, -50%)",
+    zIndex: 1001
+  },
+  overlay: { zIndex: 1000, backgroundColor: "rgba(0,0,0,.75)" }
+};

apps/website/src/components/modules/UserOnboardingModal/ThirdPartyOnboarding/ThirdPartyOnboarding.js

@@ -0,0 +1,4 @@
+
+export default function ThirdPartyOnboarding() {
+    return(<></>);
+}

apps/website/src/components/modules/UserOnboardingModal/ThirdPartyOnboarding/index.js

@@ -0,0 +1 @@
+export { default } from "./ThirdPartyOnboarding";

apps/website/src/components/modules/UserOnboardingModal/UserOnboardingModal.js

@@ -0,0 +1,46 @@
+import {useState, useEffect} from "react";
+import Modal from "react-modal";
+
+import PlatformOnboarding from "./PlatformOnboarding/PlatformOnboarding";
+import Typography from "@devlaunchers/components/components/atoms/Typography";
+import { ModalContainer, userUnboardingModalStyle, ModalHeader, ModalBody } from "./StyledUserOnboardingModal";
+
+Modal.setAppElement("#__next");
+
+/**
+ * @description This is custom modal for the user onboarding. 
+ */
+export default function UserOnboardingModal({isOpen}) {
+    const [modalIsOpen, setModalIsOpen] = useState(true);
+
+    const openModal = () => {
+        setModalIsOpen(true);
+    }
+    // const afterOpenModal = () => {
+    //     // references are now sync'd and can be accessed.
+    // }
+    const closeModal = () => {
+        setModalIsOpen(false);
+    }
+    return (
+        <>
+         {/* "modalIsOpen ? true : false" set this way until we start adding typescript for 
+         boolean type */}
+        <Modal
+        isOpen={modalIsOpen ? true : false}
+        onRequestOpen={openModal}
+        onRequestClose={closeModal}
+        style={userUnboardingModalStyle}
+        contentLabel="User Onboarding"
+        >
+            <ModalContainer>
+                <ModalHeader><Typography type="h4"> Modal Title</Typography></ModalHeader>
+                <ModalBody>
+                <Typography type="p"> body</Typography>                    
+                {/* Onboarding Card Component */}
+                </ModalBody>
+            </ModalContainer>
+        </Modal>
+        </>
+    );
+}

apps/website/src/components/modules/UserOnboardingModal/index.js

@@ -0,0 +1 @@
+export { default } from "./UserOnboardingModal";

apps/website/src/pages/users/me.js

@@ -1,13 +1,35 @@
 import React from "react";
 
-import Header from "../../components/common/Header";
+import { useUserDataContext } from '../../context/UserDataContext';
+
+import Head from 'next/head';
 import UserProfile from "../../components/modules/UserProfile";
-import Footer from "../../components/common/Footer";
+import UserOnboardingModal from "../../components/modules/UserOnboardingModal"
 
+/**
+ * @drescription This component renders the User Profile Component. 
+ * A Modal is opened when user has not fully completed their onboarding.
+ */
 export default function UserProfilePage() {
+  const { userData } = useUserDataContext();
+
+  /**
+   * @description Open modal when user has no username. 
+   * More conditions will be applied when modal should be opened in the future.
+   */
+  const openUserOnboardingModal = () => {
+    return !(userData && userData.username)
+  }
+
   return (
-    <div>
-      <UserProfile />
-    </div>
+    <>
+      <Head>
+        <title>User Profile</title>
+      </Head>
+      <div>
+        {openUserOnboardingModal() && <UserOnboardingModal/>}
+        <UserProfile />
+      </div>
+    </>
   );
 }