Skip to content

Frontend Components

Jump to bottom
Sweekar Burji edited this page Nov 27, 2024 · 2 revisions

LandingPage Component

The LandingPage component is a functional React component that serves as the landing page for the application. It provides users with options to sign up or log in, along with a brief description of the platform's offerings.

File Path

frontend/src/Pages/Auth/landingPage.tsx

Component Structure

Overview

The LandingPage component utilizes the useNavigate hook from react-router-dom to handle navigation between different routes in the application.

JSX Structure

The component returns a structured layout that includes:

  • A title section that highlights the challenges faced by students.
  • A description section that invites users to join the team.
  • Two buttons for user actions: Sign Up and Login.
  • Two images that enhance the visual appeal of the landing page.

Styles

Inline styles are used throughout the component to define the layout and appearance of elements. Key styles include:

  • Positioning: Absolute positioning is used to place elements precisely on the page.
  • Typography: Different font families, weights, and sizes are applied to enhance readability and aesthetics.
  • Colors: A color scheme is implemented to differentiate between buttons and text.

Navigation

  • Sign Up Button: Navigates to the registration page (/register) when clicked.
  • Login Button: Navigates to the login page (/login) when clicked.

Example Usage

To use the LandingPage component, simply import it into your desired parent component and include it in the JSX:

Props

The LandingPage component does not accept any props.

Notes

  • Ensure that the images referenced in the component are available in the specified paths.
  • The component is designed to be responsive; however, additional media queries may be necessary for optimal display on smaller screens.

License

This component is part of the CSC510 Project and is subject to the project's licensing terms.

LoginPage Component

The LoginPage component is responsible for rendering the login form for users to authenticate into the application. It utilizes React Hook Form for form management and Yup for validation.

Features

  • User authentication via email and password.
  • Form validation with error messages.
  • Navigation to the registration page.

Dependencies

  • react-router-dom: For navigation.
  • react-hook-form: For managing form state.
  • yup: For schema validation.
  • @hookform/resolvers/yup: To integrate Yup with React Hook Form.
  • @mui/material: For UI components.

Usage

To use the LoginPage component, simply import it into your desired file.

Styling

The component uses Material-UI for styling, with custom styles applied to the TextField and Button components.

Navigation

Upon successful login, the user is redirected using the useNavigate hook from react-router-dom. If the user clicks on "Create a new account", they will be navigated to the registration page.

Conclusion

The LoginPage component provides a user-friendly interface for logging into the application, with robust validation and error handling.

LogoutPage Component

Overview

The LogoutPage component is responsible for handling user logout functionality in the application. It clears user data from local storage and updates the user state in the global store before redirecting the user to the login page.

Features

  • Clears user data from local storage.
  • Resets user information in the global state.
  • Redirects to the login page after logout.

Usage

To use the LogoutPage component, simply import it and include it in your routing configuration.

Conclusion

The LogoutPage component effectively handles user logout by clearing session data and redirecting to the login page, ensuring a smooth user experience.

RegistrationPage Component

The RegistrationPage component is a part of the authentication flow in the application, allowing users to create a new account. It utilizes React hooks and Material-UI components for a responsive and user-friendly interface.

Features

  • User input fields for name, email, password, confirm password, and skills.
  • Role selection between "Manager" and "Applicant".
  • Conditional rendering of affiliation selection for Managers.
  • Form validation using react-hook-form.
  • Submission of user data to the signup function.

Dependencies

  • react-router-dom: For navigation.
  • react-hook-form: For form handling and validation.
  • @mui/material: For UI components.

Usage

To use the RegistrationPage component, import it into your desired file.

Component Structure

State Management

  • role: Manages the selected user role (default is "Applicant").
  • affiliation: Manages the selected affiliation for Managers.

Form Handling

The form is managed using react-hook-form, which provides methods for registering inputs and handling submission.

Form Fields

  • Name: Required field for the user's name.
  • Email: Required field with validation for a valid email format.
  • Password: Required field for the user's password.
  • Confirm Password: Required field that validates against the password field.
  • Skills: Required field for the user's skills.
  • Role: Dropdown selection for user role.
  • Affiliation: Dropdown selection for affiliation, shown only if the role is "Manager".

Submission

On form submission, the onSubmit function is called, which logs the form data and calls the signup function with the collected data.

Styling

The component uses Material-UI's styling system to apply consistent styles across input fields and buttons.

Navigation

After successful registration, users can navigate to the login page by clicking the "Already have an Account? Login Here" link.

Conclusion

The RegistrationPage component provides a comprehensive and user-friendly interface for new users to register for the application, ensuring data validation and a smooth user experience.

CreateJob Component

The CreateJob component is a part of the job listing application that allows users to create a new job listing by filling out a form with relevant details.

Features

  • Form Fields: Users can input job role, job type, location, pay, job description, and required skills.
  • Validation: The form includes validation to ensure required fields are filled out.
  • Navigation: Upon successful submission, the user is navigated to a questionnaire page with the job details.

Dependencies

This component relies on the following libraries:

  • react: For building the user interface.
  • react-router: For navigation between different pages.
  • react-icons: For using icons in the UI.
  • @mui/material: For Material-UI components and styling.
  • react-hook-form: For managing form state and validation.

Usage

To use the CreateJob component, import it into your desired file.

Component Structure

The CreateJob component consists of the following main parts:

  1. State Management:

    • Uses useState to manage the state of required skills and job type.
    • Uses useForm from react-hook-form for form handling.

  2. Form Submission:

    • The onSubmit function handles form submission and navigates to the questionnaire page with the job details.

  3. UI Layout:

    • The component is divided into two main sections: a sidebar for navigation steps and a main form area for job details.

Form Fields

  • Job Role: Required field for the job title.
  • Job Type: Dropdown selection for job type (Full Time or Part Time).
  • Location: Input field for the job location.
  • Pay: Required field for the job pay (numeric input).
  • Job Description: Input field for a detailed job description.
  • Required Skills: Input field for skills required for the job (required).

Conclusion

The CreateJob component is essential for allowing users to create job listings efficiently. It provides a user-friendly interface with necessary validations to ensure all required information is collected before submission.

JobPreview Component Documentation

Overview

The JobPreview component is part of the job creation workflow in the application. It allows users to review the details of a job listing before submitting it. The component displays job details, required skills, and questions, and provides a button to submit the job listing.

Features

  • Displays job details including role, job status, type, location, pay, description, and required skills.
  • Shows a questionnaire with user-provided questions.
  • Provides a visual checklist of steps completed in the job creation process.
  • Allows users to submit the job listing to the server.

Props

The JobPreview component does not accept any props directly. It retrieves data from the React Router's location state.

State Management

The component uses the useUserStore hook to access the current user's ID, which is required for submitting the job listing.

API Interaction

The component interacts with the backend API to create a job listing. It sends a POST request to the following endpoint: POST http://localhost:8000/api/v1/users/createjob

Request Body

The request body includes the following fields:

  • id: User ID
  • name: Job role
  • type: Job type
  • location: Job location
  • description: Job description
  • pay: Job pay
  • question1: First question
  • question2: Second question
  • question3: Third question
  • question4: Fourth question
  • requiredSkills: Required skills for the job

User Interface

The component is structured into two main sections:

  1. Checklist: Displays the steps completed in the job creation process.
  2. Job Details: Displays detailed information about the job, including:
    • Role
    • Job Status
    • Type
    • Location
    • Pay
    • Description
    • Required Skills
    • Questions

Usage

To use the JobPreview component, ensure that it is included in the routing setup of your application and that the necessary state is passed through the router.

Conclusion

The JobPreview component is essential for providing users with a final review of their job listing before submission, ensuring that all details are correct and complete. 0

Dashboard Component

The Dashboard component is a key part of the application, providing users with a view of their job listings or applications based on their role (Manager or Applicant). It integrates with various stores to manage user and job data, and it fetches relevant information from the backend API.

Table of Contents

Installation

To use the Dashboard component, ensure you have the necessary dependencies installed:

npm install axios react-toastify @mui/material

Features

  • Displays job listings for Managers and applications for Applicants.
  • Fetches user and job data from the backend.
  • Updates user state using a global store.
  • Provides navigation to create new job listings.

State Management

The Dashboard component utilizes the following stores:

  • User Store: Manages user-related data such as name, email, role, etc.
  • Job Store: Manages the list of jobs available.
  • Application Store: Manages the list of applications submitted by users.

API Integration

The component makes use of the following API endpoints:

  • Fetch Applications: GET http://localhost:8000/api/v1/users/fetchapplications
  • Fetch Jobs: GET http://localhost:8000/api/v1/users

These endpoints are called within the useEffect hooks to retrieve data when the component mounts.

Role-Based Display

The component checks the user's role to determine what data to display:

  • Manager: Sees their job listings.
  • Applicant: Sees their job applications.

The display list is filtered based on the user's role and the associated job or application data.

Components Used

  • JobDetailView: Displays detailed information about a selected job.
  • JobListTile: Represents individual job listings or applications.

Styling

The component uses Tailwind CSS for styling, providing a responsive and modern UI. The button for creating a job is styled with MUI's Button component.

Conclusion

The Dashboard component is essential for user interaction within the application, allowing for efficient management of job listings and applications based on user roles.

Explore_live_jobs Component

Overview

The Explore_live_jobs component is a React functional component that serves as a page for exploring live job listings. It utilizes the useUserStore for managing user state and useNavigate from react-router-dom for navigation.

Features

  • Fetches user information from a JWT token stored in local storage.
  • Updates user state with relevant information such as name, email, address, role, and more.
  • Redirects to the login page if the user is not authenticated.

Dependencies

  • React
  • React Router DOM
  • Zustand (for state management)

Code Structure

The component is structured as follows:

  1. Imports: Necessary libraries and components are imported.
  2. State Management: User state is managed using the useUserStore hook.
  3. Effect Hook: The useEffect hook is used to check for a token and update user information accordingly.
  4. Render: The component renders a layout containing the LiveJobsView component.

Notes

  • Ensure that the JWT token is correctly set in local storage for the component to function properly.
  • The component relies on the Zustand store for user state management, so make sure the store is properly configured.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Clone this wiki locally