Merge branch 'add_listing' into 'master'

Add listing

See merge request !39

src/app/addListing/addListing.css

+recruiterDashboard {
+  margin: 5px;
+}
+
+clickable {
+  cursor: pointer;
+}
+
+.listing{
+  border: 1px solid lightgrey !important;
+}
+
+.listing:hover{
+  background-color: lightgrey;
+  border: 1px solid grey;
+}
\ No newline at end of file

src/app/addListing/page.js

+'use client'
+
+import './addListing.css'
+import "bootstrap/dist/css/bootstrap.min.css"
+import { FormText, FormCheck, Nav, Button, ListGroup, Container, Navbar, Card, ListGroupItem, Form } from "react-bootstrap";
+import { Component, useEffect, useState } from "react";
+import StudentNavbar from "../studentNavbar";
+
+function AddListing() {
+
+  const [listings, setListings] = useState([]);
+
+  useEffect(() => {
+    fetch('/api/listings')
+      .then((response) => response.json())
+      .then((data) => setListings(data));
+  }, []);
+
+
+  return (
+    <main className="addListing">
+      <StudentNavbar/>
+      
+      <Container  style={{height: "80vh"}}>
+        <h1 className="text-center mt-4">IT Intern</h1>
+        <Card className="mt-4 h-100">
+          <Card.Header className="d-flex justify-content-between">
+          <Container className="d-flex justify-content-start">
+            <FormCheck className="align-middle">
+                <FormCheck.Input/>
+                <FormCheck.Label>Ask for Cover Letter</FormCheck.Label>
+              </FormCheck>
+              <FormCheck className="mx-2">
+                <FormCheck.Input/>
+                <FormCheck.Label>Ask for Academic Results</FormCheck.Label>
+              </FormCheck>
+            </Container>
+            <Button>Publish</Button>
+          </Card.Header>
+          <JobDescription/>    
+          <JobRequirementsList/>
+          <SavedBox/>   
+        </Card>
+      </Container>
+    </main>
+    
+  );
+}
+
+export default AddListing;
+
+class JobDescription extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      description: "Bowtie’s mission is to make insurance good again and our vision is to build a category-defining health insurance company.\nAs a young and fast-growing company, grooming and learning from the next generation is always our priority. We are looking for interns to join us throughout the year - as a Bowtie intern, you will be treated and work like the rest of the team (no fetching coffee duties), and gain experience in substantive marketing or growth projects.\nWe also offer return offers for high achievers who share our values!"
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.listings !== this.props.listings) {
+      this.setState({
+        description: "Bowtie’s mission is to make insurance good again and our vision is to build a category-defining health insurance company.\nAs a young and fast-growing company, grooming and learning from the next generation is always our priority. We are looking for interns to join us throughout the year - as a Bowtie intern, you will be treated and work like the rest of the team (no fetching coffee duties), and gain experience in substantive marketing or growth projects.\nWe also offer return offers for high achievers who share our values!"
+      });
+    }
+  }
+
+  render() {
+    return (
+      <Card className="mt-4 mb-2 mx-3">
+        <Card.Header className="d-flex justify-content-between">
+        <p>Job Description</p>
+        <Button>Edit</Button>
+        </Card.Header>
+        <Container className="px-4 py-3">
+          {this.state.description.split("\n").map((para) => {return <p key={para}>{para}</p>})}
+        </Container>
+      </Card>
+    )
+  }
+}
+
+class JobRequirementsList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      description: "Bowtie’s mission is to make insurance good again and our vision is to build a category-defining health insurance company.\nAs a young and fast-growing company, grooming and learning from the next generation is always our priority. We are looking for interns to join us throughout the year - as a Bowtie intern, you will be treated and work like the rest of the team (no fetching coffee duties), and gain experience in substantive marketing or growth projects.\nWe also offer return offers for high achievers who share our values!"
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.listings !== this.props.listings) {
+      this.setState({
+        description: "Bowtie’s mission is to make insurance good again and our vision is to build a category-defining health insurance company.\nAs a young and fast-growing company, grooming and learning from the next generation is always our priority. We are looking for interns to join us throughout the year - as a Bowtie intern, you will be treated and work like the rest of the team (no fetching coffee duties), and gain experience in substantive marketing or growth projects.\nWe also offer return offers for high achievers who share our values!"
+      });
+    }
+  }
+
+  render() {
+    return (
+      <Card className="my-2 mx-3">
+        <Card.Header className="d-flex justify-content-between">
+        <p>Requirements</p>
+        <Button>Edit</Button>
+        </Card.Header>
+        <Container className="px-4 py-3">
+          <JobRequirementsItem/>
+          <JobRequirementsItem/>
+          <JobRequirementsItem/>
+        </Container>
+      </Card>
+    )
+  }
+}
+
+class JobRequirementsItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      requirement: "Hold a bachelor's degree or above, with graduation expected in 2023"
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.listings !== this.props.listings) {
+      this.setState({
+        requirement: "Hold a bachelor's degree or above, with graduation expected in 2023"
+      });
+    }
+  }
+
+  render() {
+    let requirement = "- " + this.state.requirement
+    return (
+      <Container className="px-0 py-0">
+        {<p key={requirement}>{requirement}</p>}
+      </Container>
+    )
+  }
+}
+
+class SavedBox extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: "Saved as Draft"
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.listings !== this.props.listings) {
+      this.setState({
+        message: "Saved as Draft"
+      });
+    }
+  }
+
+  render() {
+    return (
+      <Container className="mt-2 d-flex justify-content-around">
+        <Button className="btn-success">{this.state.message}</Button>
+      </Container>
+    )
+  }
+}
\ No newline at end of file

src/app/recruiterDashboard/page.js

@@ -27,7 +27,7 @@ function RecruiterDashboard() {
           <Card.Header className="d-flex justify-content-between">
             <Button>Sort</Button>
             <h4>My Listings</h4>
-            <Button>New Post</Button>
+            <Button href="./addListing">New Post</Button>
           </Card.Header>
           <ApplicantList listings={listings}/>          
         </Card>

src/app/studentNavbar.js

-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
-import NavDropdown from 'react-bootstrap/NavDropdown';
-import Container from 'react-bootstrap/Container';
+import { Nav, Navbar, Image, Container } from 'react-bootstrap';
 
 function StudentNavbar() { 
     return (
         <Navbar bg="light" expand="lg">
       <Container>
-        <Navbar.Brand href="/"><img
+        <Navbar.Brand href="/">
+          <Image
               alt=""
               src="/favicon.ico"
               width="30"