From 5ca7dd765025b42421d72a2b5d6b7656216dd781 Mon Sep 17 00:00:00 2001
From: Madhawa Monarawila <madawammonarawila@gmail.com>
Date: Sat, 25 Nov 2023 16:59:03 +0530
Subject: [PATCH 1/7] Add mentor application

---
 src/App.tsx                                   |  16 +-
 src/components/Layout/Navbar/Navbar.tsx       |   6 +
 .../MentorRegistrationPage/index.tsx          | 284 ++++++++++++++++++
 3 files changed, 303 insertions(+), 3 deletions(-)
 create mode 100644 src/components/MentorRegistrationPage/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4683b44b..d7d2a066 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,10 @@
 import React, { useContext, useEffect } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Home from './components/Home/Home';
 import MainLayout from './components/Layout/MainLayout';
 import { UserContext, type UserContextType } from './contexts/UserContext';
+import MentorRegistrationPage from './components/MentorRegistrationPage';
 
 const App: React.FC = () => {
   const { user, getUser } = useContext(UserContext) as UserContextType;
@@ -15,9 +17,17 @@ const App: React.FC = () => {
     console.log(`user is authenticated as ${user.primary_email}`);
 
   return (
-    <MainLayout>
-      <Home />
-    </MainLayout>
+    <BrowserRouter>
+      <MainLayout>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route
+            path="/mentor-registration"
+            element={<MentorRegistrationPage />}
+          />
+        </Routes>
+      </MainLayout>
+    </BrowserRouter>
   );
 };
 
diff --git a/src/components/Layout/Navbar/Navbar.tsx b/src/components/Layout/Navbar/Navbar.tsx
index 54605b49..efa5903a 100644
--- a/src/components/Layout/Navbar/Navbar.tsx
+++ b/src/components/Layout/Navbar/Navbar.tsx
@@ -18,6 +18,7 @@ import {
   type UserContextType,
 } from './../../../contexts/UserContext';
 import LogoutModal from '../../LogoutModal';
+import { Link } from 'react-router-dom';
 
 const { Text } = Typography;
 
@@ -84,6 +85,11 @@ const Navbar: React.FC = () => {
                 <Text className={styles.antTypography}>Join Us</Text>
               </a>
             </div>
+            {user !== null ? (
+              <Link to="/mentor-registration">
+                <Button className={styles.loginButton}>Become a Mentor</Button>
+              </Link>
+            ) : null}
           </Space>
         </Col>
         <Col md={4} lg={4} xl={3} className={styles.socialMediaContainer}>
diff --git a/src/components/MentorRegistrationPage/index.tsx b/src/components/MentorRegistrationPage/index.tsx
new file mode 100644
index 00000000..cd5f203c
--- /dev/null
+++ b/src/components/MentorRegistrationPage/index.tsx
@@ -0,0 +1,284 @@
+// MentorRegistrationPage.tsx
+import React, { useState } from 'react';
+import axios from 'axios';
+import { API_URL } from '../../constants';
+
+const MentorRegistrationPage: React.FC = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    linkedinUrl: '',
+    researchGateUrl: '',
+    googleScholarUrl: '',
+    categoryId: '',
+    country: '',
+    expertise: '',
+    mentoringStrategy: '',
+  });
+
+  const handleNext = (): void => {
+    setCurrentStep((prevStep) => prevStep + 1);
+  };
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({ ...prevData, [name]: value }));
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+    setError(null);
+    axios
+      .post(
+        `${API_URL}/mentors`,
+        {
+          application: [
+            { question: 'First Name', answer: formData.firstName },
+            { question: 'Last Name', answer: formData.lastName },
+            { question: 'Linkedin Url', answer: formData.linkedinUrl },
+            { question: 'ResearchGate Url', answer: formData.researchGateUrl },
+            {
+              question: 'GoogleScholar Url',
+              answer: formData.googleScholarUrl,
+            },
+            { question: 'Country', answer: formData.country },
+            { question: 'What is your expertise', answer: formData.expertise },
+            {
+              question: 'What is your mentoring Strategy',
+              answer: formData.mentoringStrategy,
+            },
+          ],
+          categoryId: formData.categoryId,
+        },
+        { withCredentials: true }
+      )
+      .then(() => {
+        window.location.href = '/';
+      })
+      .catch((error) => {
+        if (error.response.status !== 401) {
+          setError(error.response.data.message);
+          console.error({
+            message:
+              'Something went wrong with submitting the mentor application',
+            description: error,
+          });
+        } else {
+          console.error('Error submitting mentor application:', error);
+        }
+      });
+  };
+
+  return (
+    <div className="min-h-screen flex justify-center items-start bg-gray-50 pt-16">
+      <div className="relative max-w-lg w-full p-8 bg-white shadow-md rounded-md">
+        <div className="text-2xl font-semibold mb-6">Become a Mentor</div>
+        <div className="relative h-2 mb-10">
+          <div
+            className="absolute top-0 left-0 h-full bg-blue-500 rounded-full"
+            style={{ width: `${(currentStep + 1) * 33.33}%` }}
+          ></div>
+          <div className="flex justify-start">
+            <div className="pt-3">Step {currentStep + 1} of 3</div>
+          </div>
+        </div>
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          {currentStep === 0 && (
+            <>
+              <div className="flex">
+                <div className="block w-1/2 mr-2">
+                  <label
+                    htmlFor="firstName"
+                    className="block text-sm font-medium text-gray-600"
+                  >
+                    First Name
+                  </label>
+                  <input
+                    type="text"
+                    id="firstName"
+                    name="firstName"
+                    value={formData.firstName}
+                    onChange={handleInputChange}
+                    className="mt-1 p-2 w-full border rounded-md"
+                  />
+                </div>
+                <div className="block w-1/2 mr-2">
+                  <label
+                    htmlFor="lastName"
+                    className="block text-sm font-medium text-gray-600"
+                  >
+                    Last Name
+                  </label>
+                  <input
+                    type="text"
+                    id="lastName"
+                    name="lastName"
+                    value={formData.lastName}
+                    onChange={handleInputChange}
+                    className="mt-1 p-2 w-full border rounded-md"
+                  />
+                </div>
+              </div>
+              <div className="mb-4">
+                <label
+                  htmlFor="linkedinUrl"
+                  className="block text-sm font-medium text-gray-600"
+                >
+                  Linkedin Url
+                </label>
+                <input
+                  type="text"
+                  id="linkedinUrl"
+                  name="linkedinUrl"
+                  value={formData.linkedinUrl}
+                  onChange={handleInputChange}
+                  className="mt-1 p-2 w-full border rounded-md"
+                />
+              </div>
+              <div className="mb-4">
+                <label
+                  htmlFor="researchGateUrl"
+                  className="block text-sm font-medium text-gray-600"
+                >
+                  ResearchGate Url
+                </label>
+                <input
+                  type="text"
+                  id="researchGateUrl"
+                  name="researchGateUrl"
+                  value={formData.researchGateUrl}
+                  onChange={handleInputChange}
+                  className="mt-1 p-2 w-full border rounded-md"
+                />
+              </div>
+              <div className="mb-4">
+                <label
+                  htmlFor="googleScholarUrl"
+                  className="block text-sm font-medium text-gray-600"
+                >
+                  GoogleScholar Url
+                </label>
+                <input
+                  type="text"
+                  id="googleScholarUrl"
+                  name="googleScholarUrl"
+                  value={formData.googleScholarUrl}
+                  onChange={handleInputChange}
+                  className="mt-1 p-2 w-full border rounded-md"
+                />
+              </div>
+            </>
+          )}
+          {currentStep === 1 && (
+            <>
+              <div className="mb-4">
+                <label
+                  htmlFor="categoryId"
+                  className="block text-sm font-medium text-gray-600"
+                >
+                  Category ID
+                </label>
+                <input
+                  type="text"
+                  id="categoryId"
+                  name="categoryId"
+                  value={formData.categoryId}
+                  onChange={handleInputChange}
+                  className="mt-1 p-2 w-full border rounded-md"
+                />
+              </div>
+              <div className="mb-4">
+                <label
+                  htmlFor="country"
+                  className="block text-sm font-medium text-gray-600"
+                >
+                  What is your country?
+                </label>
+                <input
+                  type="text"
+                  id="country"
+                  name="country"
+                  value={formData.country}
+                  onChange={handleInputChange}
+                  className="mt-1 p-2 w-full border rounded-md"
+                />
+              </div>
+
+              <div className="mb-4">
+                <label
+                  htmlFor="expertise"
+                  className="block text-sm font-medium text-gray-600"
+                >
+                  What is your expertise?
+                </label>
+                <input
+                  type="text"
+                  id="expertise"
+                  name="expertise"
+                  value={formData.expertise}
+                  onChange={handleInputChange}
+                  className="mt-1 p-2 w-full border rounded-md"
+                />
+              </div>
+            </>
+          )}
+          {currentStep === 2 && (
+            <>
+              <div className="mb-4">
+                <label
+                  htmlFor="mentoringStrategy"
+                  className="block text-sm font-medium text-gray-600"
+                >
+                  What is your mentoring strategy?
+                </label>
+                <textarea
+                  id="mentoringStrategy"
+                  name="mentoringStrategy"
+                  value={formData.mentoringStrategy}
+                  onChange={handleInputChange}
+                  className="mt-1 p-2 w-full border rounded-md"
+                />
+              </div>
+            </>
+          )}
+          {error !== null ? (
+            <div
+              className="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:text-red-400"
+              role="alert"
+            >
+              {error}
+            </div>
+          ) : null}
+          <div className="flex justify-between">
+            {currentStep > 0 && (
+              <button
+                type="button"
+                onClick={() => {
+                  setCurrentStep((prevStep) => prevStep - 1);
+                }}
+                className="btn-blue"
+              >
+                Previous
+              </button>
+            )}
+            {currentStep < 2 ? (
+              <button type="button" onClick={handleNext} className="btn-blue">
+                Next
+              </button>
+            ) : (
+              <button type="submit" className="btn-blue">
+                Submit
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default MentorRegistrationPage;

From 0d6d6918e8616ac50b1b882d775c9c4c02f9f7f2 Mon Sep 17 00:00:00 2001
From: Madhawa Monarawila <madawammonarawila@gmail.com>
Date: Sat, 2 Dec 2023 00:03:40 +0530
Subject: [PATCH 2/7] populate categories dropdown from database

---
 .../MentorRegistrationPage/index.tsx          | 72 ++++++++++++++-----
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/src/components/MentorRegistrationPage/index.tsx b/src/components/MentorRegistrationPage/index.tsx
index cd5f203c..64f4f787 100644
--- a/src/components/MentorRegistrationPage/index.tsx
+++ b/src/components/MentorRegistrationPage/index.tsx
@@ -1,5 +1,4 @@
-// MentorRegistrationPage.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { API_URL } from '../../constants';
 
@@ -17,20 +16,22 @@ const MentorRegistrationPage: React.FC = () => {
     expertise: '',
     mentoringStrategy: '',
   });
+  const [categories, setCategories] = useState([]);
 
   const handleNext = (): void => {
     setCurrentStep((prevStep) => prevStep + 1);
   };
 
   const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
   ): void => {
     const { name, value } = e.target;
     setFormData((prevData) => ({ ...prevData, [name]: value }));
   };
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
+  const handleSubmit = (): void => {
     setError(null);
     axios
       .post(
@@ -73,10 +74,27 @@ const MentorRegistrationPage: React.FC = () => {
       });
   };
 
+  useEffect(() => {
+    axios
+      .get(`${API_URL}/categories`)
+      .then((response) => {
+        const categories = response.data.categories;
+        setFormData((prevData) => ({
+          ...prevData,
+          categoryId: categories[0].id,
+        }));
+        setCategories(categories);
+      })
+      .catch((error) => {
+        console.error('Error fetching categories:', error);
+      });
+  }, []);
+
   return (
-    <div className="min-h-screen flex justify-center items-start bg-gray-50 pt-16">
-      <div className="relative max-w-lg w-full p-8 bg-white shadow-md rounded-md">
-        <div className="text-2xl font-semibold mb-6">Become a Mentor</div>
+    <div className="min-h-screen flex justify-center items-start">
+      <div className="relative max-w-lg w-full p-8">
+        <div className="text-2xl font-semibold mb-2">Become a Mentor</div>
+        <hr className="border-t border-gray-300 mb-6" />
         <div className="relative h-2 mb-10">
           <div
             className="absolute top-0 left-0 h-full bg-blue-500 rounded-full"
@@ -86,7 +104,7 @@ const MentorRegistrationPage: React.FC = () => {
             <div className="pt-3">Step {currentStep + 1} of 3</div>
           </div>
         </div>
-        <form className="space-y-4" onSubmit={handleSubmit}>
+        <div className="space-y-4" onSubmit={handleSubmit}>
           {currentStep === 0 && (
             <>
               <div className="flex">
@@ -180,16 +198,23 @@ const MentorRegistrationPage: React.FC = () => {
                   htmlFor="categoryId"
                   className="block text-sm font-medium text-gray-600"
                 >
-                  Category ID
+                  Category
                 </label>
-                <input
-                  type="text"
-                  id="categoryId"
+                <select
+                  className="mt-1 p-2 w-1/2 border rounded-md"
                   name="categoryId"
+                  id="categoryId"
                   value={formData.categoryId}
                   onChange={handleInputChange}
-                  className="mt-1 p-2 w-full border rounded-md"
-                />
+                >
+                  {categories.map(
+                    (category: { id: string; category: string }) => (
+                      <option key={category.id} value={category.id}>
+                        {category.category}
+                      </option>
+                    )
+                  )}
+                </select>
               </div>
               <div className="mb-4">
                 <label
@@ -253,6 +278,7 @@ const MentorRegistrationPage: React.FC = () => {
               {error}
             </div>
           ) : null}
+          <hr className="border-t border-gray-300 my-6" />
           <div className="flex justify-between">
             {currentStep > 0 && (
               <button
@@ -260,22 +286,30 @@ const MentorRegistrationPage: React.FC = () => {
                 onClick={() => {
                   setCurrentStep((prevStep) => prevStep - 1);
                 }}
-                className="btn-blue"
+                className="text-white bg-blue-500 hover:bg-blue-600 focus:ring-1 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-small rounded-md text-sm inline-flex items-center px-3 py-1.5 text-center me-2"
               >
                 Previous
               </button>
             )}
             {currentStep < 2 ? (
-              <button type="button" onClick={handleNext} className="btn-blue">
+              <button
+                type="button"
+                onClick={handleNext}
+                className="text-white bg-blue-500 hover:bg-blue-600 focus:ring-1 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-small rounded-md text-sm inline-flex items-center px-3 py-1.5 text-center me-2"
+              >
                 Next
               </button>
             ) : (
-              <button type="submit" className="btn-blue">
+              <button
+                type="button"
+                onClick={handleSubmit}
+                className="text-white bg-blue-500 hover:bg-blue-600 focus:ring-1 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-small rounded-md text-sm inline-flex items-center px-3 py-1.5 text-center me-2"
+              >
                 Submit
               </button>
             )}
           </div>
-        </form>
+        </div>
       </div>
     </div>
   );

From d0de44dc978996ee3ed24d9bb184cc918e74d8ce Mon Sep 17 00:00:00 2001
From: Madhawa Monarawila <madawammonarawila@gmail.com>
Date: Sat, 2 Dec 2023 00:23:22 +0530
Subject: [PATCH 3/7] Add stories

---
 .../MentorRegistrationPage.stories.tsx        | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx

diff --git a/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx b/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx
new file mode 100644
index 00000000..09111105
--- /dev/null
+++ b/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import { waitFor, within } from '@storybook/testing-library';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import MentorRegistrationPage from './';
+
+const meta: Meta<typeof MentorRegistrationPage> = {
+  component: MentorRegistrationPage,
+  title: 'Mentor Registration Page',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Step1: Story = {
+  play: async ({ canvasElement }) => {
+    render(<MentorRegistrationPage />);
+    const canvas = within(canvasElement);
+
+    const firstNameInput = canvas.getByLabelText('First Name');
+    const lastNameInput = canvas.getByLabelText('Last Name');
+    const linkedinUrlInput = canvas.getByLabelText('Linkedin Url');
+    const researchGateUrlInput = canvas.getByLabelText('ResearchGate Url');
+    const googleScholarUrlInput = canvas.getByLabelText('GoogleScholar Url');
+    const nextButton = canvas.getByText('Next');
+
+    fireEvent.change(firstNameInput, { target: { value: 'John' } });
+    fireEvent.change(lastNameInput, { target: { value: 'Doe' } });
+    fireEvent.change(linkedinUrlInput, {
+      target: { value: 'https://linkedin.com/johndoe' },
+    });
+    fireEvent.change(researchGateUrlInput, {
+      target: { value: 'https://researchgate.com/johndoe' },
+    });
+    fireEvent.change(googleScholarUrlInput, {
+      target: { value: 'https://scholar.google.com/johndoe' },
+    });
+
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Category')).toBeVisible();
+    });
+  },
+};
+
+export const Step2: Story = {
+  play: async ({ canvasElement }) => {
+    render(<MentorRegistrationPage />);
+    const canvas = within(canvasElement);
+
+    const categorySelect = canvas.getByLabelText('Category');
+    const countryInput = canvas.getByLabelText('What is your country?');
+    const expertiseInput = canvas.getByLabelText('What is your expertise?');
+    const previousButton = canvas.getByText('Previous');
+    const nextButton = canvas.getByText('Next');
+
+    fireEvent.change(categorySelect, { target: { value: '1' } });
+    fireEvent.change(countryInput, { target: { value: 'United States' } });
+    fireEvent.change(expertiseInput, {
+      target: { value: 'Software Engineering' },
+    });
+
+    fireEvent.click(previousButton);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Linkedin Url')).toBeVisible();
+    });
+
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(
+        screen.getByLabelText('What is your mentoring strategy?')
+      ).toBeVisible();
+    });
+  },
+};
+
+export const Step3: Story = {
+  play: async ({ canvasElement }) => {
+    render(<MentorRegistrationPage />);
+    const canvas = within(canvasElement);
+
+    const mentoringStrategyTextarea = canvas.getByLabelText(
+      'What is your mentoring strategy?'
+    );
+    const submitButton = canvas.getByText('Submit');
+    const previousButton = canvas.getByText('Previous');
+
+    fireEvent.change(mentoringStrategyTextarea, {
+      target: { value: 'I believe in personalized guidance.' },
+    });
+
+    fireEvent.click(previousButton);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('What is your expertise?')).toBeVisible();
+    });
+
+    fireEvent.click(submitButton);
+
+    // You can handle the axios.post mock here to simulate the API response if needed
+  },
+};

From 27d973404f108766319b35881e08bdb53f2593fe Mon Sep 17 00:00:00 2001
From: Madhawa Monarawila <madawammonarawila@gmail.com>
Date: Sat, 2 Dec 2023 00:57:40 +0530
Subject: [PATCH 4/7] Fix responsiveness for name inputs

---
 src/components/MentorRegistrationPage/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MentorRegistrationPage/index.tsx b/src/components/MentorRegistrationPage/index.tsx
index 64f4f787..39ff16c3 100644
--- a/src/components/MentorRegistrationPage/index.tsx
+++ b/src/components/MentorRegistrationPage/index.tsx
@@ -107,8 +107,8 @@ const MentorRegistrationPage: React.FC = () => {
         <div className="space-y-4" onSubmit={handleSubmit}>
           {currentStep === 0 && (
             <>
-              <div className="flex">
-                <div className="block w-1/2 mr-2">
+              <div className="flex flex-wrap">
+                <div className="w-full md:w-1/2 md:pr-1 mb-4 md:mb-0">
                   <label
                     htmlFor="firstName"
                     className="block text-sm font-medium text-gray-600"
@@ -124,7 +124,7 @@ const MentorRegistrationPage: React.FC = () => {
                     className="mt-1 p-2 w-full border rounded-md"
                   />
                 </div>
-                <div className="block w-1/2 mr-2">
+                <div className="w-full md:w-1/2 md:pl-1">
                   <label
                     htmlFor="lastName"
                     className="block text-sm font-medium text-gray-600"

From 2f9bbfdcbdd7ec501adafe70c1db4f74aa4e3509 Mon Sep 17 00:00:00 2001
From: Madhawa Monarawila <madawammonarawila@gmail.com>
Date: Sat, 2 Dec 2023 01:17:56 +0530
Subject: [PATCH 5/7] fix eslint build failiure

---
 .../MentorRegistrationPage.stories.tsx                    | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx b/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx
index 09111105..02e4fb4b 100644
--- a/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx
+++ b/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { waitFor, within } from '@storybook/testing-library';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import MentorRegistrationPage from './';
@@ -17,7 +16,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Step1: Story = {
   play: async ({ canvasElement }) => {
-    render(<MentorRegistrationPage />);
     const canvas = within(canvasElement);
 
     const firstNameInput = canvas.getByLabelText('First Name');
@@ -49,7 +47,6 @@ export const Step1: Story = {
 
 export const Step2: Story = {
   play: async ({ canvasElement }) => {
-    render(<MentorRegistrationPage />);
     const canvas = within(canvasElement);
 
     const categorySelect = canvas.getByLabelText('Category');
@@ -82,7 +79,6 @@ export const Step2: Story = {
 
 export const Step3: Story = {
   play: async ({ canvasElement }) => {
-    render(<MentorRegistrationPage />);
     const canvas = within(canvasElement);
 
     const mentoringStrategyTextarea = canvas.getByLabelText(
@@ -102,7 +98,5 @@ export const Step3: Story = {
     });
 
     fireEvent.click(submitButton);
-
-    // You can handle the axios.post mock here to simulate the API response if needed
   },
 };

From 60ca076a2828cbacbd97313aad271f5e1f211f7e Mon Sep 17 00:00:00 2001
From: Madhawa Monarawila <madawammonarawila@gmail.com>
Date: Sat, 2 Dec 2023 02:14:41 +0530
Subject: [PATCH 6/7] Fix story related issues

---
 .../MentorRegistrationPage.stories.tsx        | 32 +++++++------------
 .../MentorRegistrationPage/index.tsx          |  6 ++--
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx b/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx
index 02e4fb4b..58aebf72 100644
--- a/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx
+++ b/src/components/MentorRegistrationPage/MentorRegistrationPage.stories.tsx
@@ -1,3 +1,4 @@
+import { expect } from '@storybook/jest';
 import { waitFor, within } from '@storybook/testing-library';
 import { screen, fireEvent } from '@testing-library/react';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -14,15 +15,15 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Step1: Story = {
+export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
     const firstNameInput = canvas.getByLabelText('First Name');
     const lastNameInput = canvas.getByLabelText('Last Name');
-    const linkedinUrlInput = canvas.getByLabelText('Linkedin Url');
-    const researchGateUrlInput = canvas.getByLabelText('ResearchGate Url');
-    const googleScholarUrlInput = canvas.getByLabelText('GoogleScholar Url');
+    const linkedinUrlInput = canvas.getByLabelText('LinkedIn URL');
+    const researchGateUrlInput = canvas.getByLabelText('ResearchGate URL');
+    const googleScholarUrlInput = canvas.getByLabelText('GoogleScholar URL');
     const nextButton = canvas.getByText('Next');
 
     fireEvent.change(firstNameInput, { target: { value: 'John' } });
@@ -42,18 +43,11 @@ export const Step1: Story = {
     await waitFor(() => {
       expect(screen.getByLabelText('Category')).toBeVisible();
     });
-  },
-};
-
-export const Step2: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
 
     const categorySelect = canvas.getByLabelText('Category');
     const countryInput = canvas.getByLabelText('What is your country?');
     const expertiseInput = canvas.getByLabelText('What is your expertise?');
     const previousButton = canvas.getByText('Previous');
-    const nextButton = canvas.getByText('Next');
 
     fireEvent.change(categorySelect, { target: { value: '1' } });
     fireEvent.change(countryInput, { target: { value: 'United States' } });
@@ -64,9 +58,10 @@ export const Step2: Story = {
     fireEvent.click(previousButton);
 
     await waitFor(() => {
-      expect(screen.getByLabelText('Linkedin Url')).toBeVisible();
+      expect(screen.getByLabelText('LinkedIn URL')).toBeVisible();
     });
 
+    fireEvent.click(nextButton);
     fireEvent.click(nextButton);
 
     await waitFor(() => {
@@ -74,29 +69,24 @@ export const Step2: Story = {
         screen.getByLabelText('What is your mentoring strategy?')
       ).toBeVisible();
     });
-  },
-};
-
-export const Step3: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
 
     const mentoringStrategyTextarea = canvas.getByLabelText(
       'What is your mentoring strategy?'
     );
-    const submitButton = canvas.getByText('Submit');
-    const previousButton = canvas.getByText('Previous');
 
     fireEvent.change(mentoringStrategyTextarea, {
       target: { value: 'I believe in personalized guidance.' },
     });
 
-    fireEvent.click(previousButton);
+    const secondPreviousButton = canvas.getByText('Previous');
+    fireEvent.click(secondPreviousButton);
 
     await waitFor(() => {
       expect(screen.getByLabelText('What is your expertise?')).toBeVisible();
     });
 
+    fireEvent.click(nextButton);
+    const submitButton = canvas.getByText('Submit');
     fireEvent.click(submitButton);
   },
 };
diff --git a/src/components/MentorRegistrationPage/index.tsx b/src/components/MentorRegistrationPage/index.tsx
index 39ff16c3..dde7d875 100644
--- a/src/components/MentorRegistrationPage/index.tsx
+++ b/src/components/MentorRegistrationPage/index.tsx
@@ -146,7 +146,7 @@ const MentorRegistrationPage: React.FC = () => {
                   htmlFor="linkedinUrl"
                   className="block text-sm font-medium text-gray-600"
                 >
-                  Linkedin Url
+                  LinkedIn URL
                 </label>
                 <input
                   type="text"
@@ -162,7 +162,7 @@ const MentorRegistrationPage: React.FC = () => {
                   htmlFor="researchGateUrl"
                   className="block text-sm font-medium text-gray-600"
                 >
-                  ResearchGate Url
+                  ResearchGate URL
                 </label>
                 <input
                   type="text"
@@ -178,7 +178,7 @@ const MentorRegistrationPage: React.FC = () => {
                   htmlFor="googleScholarUrl"
                   className="block text-sm font-medium text-gray-600"
                 >
-                  GoogleScholar Url
+                  GoogleScholar URL
                 </label>
                 <input
                   type="text"

From 126f09ff9b23bc5af6cf2ca78159a98d740b6226 Mon Sep 17 00:00:00 2001
From: Madhawa Monarawila <madawammonarawila@gmail.com>
Date: Sat, 23 Dec 2023 17:28:36 +0530
Subject: [PATCH 7/7] Make the become a mentor button visible without login

---
 src/components/Layout/Navbar/Navbar.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Layout/Navbar/Navbar.tsx b/src/components/Layout/Navbar/Navbar.tsx
index efa5903a..e36c1cc8 100644
--- a/src/components/Layout/Navbar/Navbar.tsx
+++ b/src/components/Layout/Navbar/Navbar.tsx
@@ -18,7 +18,7 @@ import {
   type UserContextType,
 } from './../../../contexts/UserContext';
 import LogoutModal from '../../LogoutModal';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const { Text } = Typography;
 
@@ -28,6 +28,8 @@ const Navbar: React.FC = () => {
   const [isRegisterModalVisible, setIsRegisterModalVisible] = useState(false);
   const [isLogoutModalVisible, setIsLogoutModalVisible] = useState(false);
 
+  const navigate = useNavigate();
+
   const { user } = useContext(UserContext) as UserContextType;
 
   const handleLoginModalClose = (): void => {
@@ -54,6 +56,14 @@ const Navbar: React.FC = () => {
     setIsLogoutModalVisible(true);
   };
 
+  const handleMentorRegistration = (): void => {
+    if (user === null) {
+      handleLoginModalOpen();
+    } else {
+      navigate('/mentor-registration');
+    }
+  };
+
   return (
     <>
       <Row align={'middle'} justify={'start'}>
@@ -85,11 +95,12 @@ const Navbar: React.FC = () => {
                 <Text className={styles.antTypography}>Join Us</Text>
               </a>
             </div>
-            {user !== null ? (
-              <Link to="/mentor-registration">
-                <Button className={styles.loginButton}>Become a Mentor</Button>
-              </Link>
-            ) : null}
+            <Button
+              className={styles.loginButton}
+              onClick={handleMentorRegistration}
+            >
+              Become a Mentor
+            </Button>
           </Space>
         </Col>
         <Col md={4} lg={4} xl={3} className={styles.socialMediaContainer}>