Opportunity Postings Page

[shortxmas]

This page implementation requires you to have and to be logged into an authorizer-poster account so make sure to create an account using the admin key code in the #comp-sci-hi project channel in our discord. The OpportunityPostings.tsx (the page you're implementing in this issue) page is the page that employers, admins and other authorized opportunity posters will go to for CRUD (Create, read, update, delete) operations on their opportunity postings. To start the issue, do the following first:

1. Add the following state under the existing state

   const [opportunities, setOpportunities] = React.useState<Opportunity[]>([]);
   const [filterData, setFilterData] = React.useState<Map<string, number>>(
   new Map()
   );

2. On the useEffect that initializes flowbite, add the opportunities state variable to its dependency array

   useEffect(() => {
   initFlowbite();
   }, [email, loggedIn, loading, opportunities]);

3. Copy the whole opportunity type, useEffect, mockOpportunities array AND opportunity function from the Opportunities.tsx page into this page and uncomment the // setOpportunities(mockOpportunities); line in the useEffect that you just copied over.

To actually do the issue, you will be essentially copy and pasting the whole UI from the Opportunities.tsx page (Including search bar and sorting/filter/order buttons) and doing changes. The changes you will need to implement to finish the issue will be

1. Remove the apply dropdown from the opportunity
2. Replace the title of the page to "Your Opportunity Postings" and the subtitle "Create, edit and delete your opportunity postings here"
3. Add a green button to the right of the Filter button that says "New Opportunity" and when clicked will pop up modal form (you can use the template here that accepts all of the inputs from the Opportunity type

   type Opportunity = {
   id: string;
   active: boolean;
   title: string;
   company: string;
   location: string;
   locationType: "Remote" | "On-site" | "Hybrid";
   pay?: number;
   payPer?: string;
   jobType: "Full-time" | "Part-time" | "Contract" | "Internship" | "Co-op";
   description: string;
   qualifications: string[];
   skills: string[];
   benefits?: string[];
   postedDate: string;
   applicationInstructions: string;
   applyLink?: string;
   clicks: number;
   };

   The ? attributes on the opportunity types are optional inputs, the jobType and locationType should be drop-down inputs and the rest are required inputs

4. Where the apply button used to be on the opportunity component function, put two buttons, a blue Edit button and a red Delete button. The edit button will popup the same create opportunity modal form but will prepoluate the input values with that opportunity posting data. The delete button will also popup a modal that asks the user if they are sure they want to delete that data, you can use the template here for the are you sure you want to delete modal.

You are not implementing the searching, filter and sorting or CRUD operations for this issue, just the UI.

You will likely not complete this issue with one PR, you are definitely going to need to revise a couple times so make sure your code is clean, commented and re-visitable.

DM me for any questions or problems

[shortxmas]

Switching opportunity posting handling and data to Django server