Merge branch 'recruiter-internship-page' into 'master'

Recruiter internship page

See merge request !44

src/app/api/post/route.js

@@ -4,13 +4,27 @@ import { NextResponse } from 'next/server';
 export async function GET() {
   const post = await prisma.post.findFirst({
     select: {
+      id: true,
       name: true,
       applications: {
         select: {
           student: {
             select: {
+              id: true,
               name: true
             }
+          },
+          evidences: {
+            select: {
+              evidenceText: true,
+              rating: true,
+              requirement: {
+                select: {
+                  id: true,
+                  requirementText: true
+                }
+              }
+            }
           }
         }
       },

src/app/api/rating/route.js

+import { prisma } from '../../db/client'
+import { NextResponse } from 'next/server';
+
+export async function PUT(request) {
+  const body = await request.json()
+  console.log(body)
+  await prisma.evidence.update({
+    where: {
+      postID_requirementID_studentID: {
+        postID: body.postID,
+        requirementID: body.requirementID,
+        studentID: body.studentID
+      }
+    },
+    data: {
+      rating: body.rating
+    }
+  })
+  return NextResponse.json({})
+}

src/app/recruiterInternship/page.js

@@ -11,6 +11,7 @@ import '../globals.css'
 
 function RecruiterInternship() {
   const [post, setPost] = useState({name: "", applications: []});
+  const [selectedApplicant, setSelectedApplicant] = useState(-1);
 
   useEffect(() => {
     fetch('/api/post')
@@ -26,10 +27,10 @@ function RecruiterInternship() {
         <Card.Body>
           <Row>
             <Col xs={4}>
-              <ApplicantList post={post}/>
+              <ApplicantList post={post} setSelectedApplicant={setSelectedApplicant}/>
             </Col>
             <Col>
-              <SkillList />
+              <SkillList post={post} selectedApplicant={selectedApplicant}/>
             </Col>
           </Row>
         </Card.Body>
@@ -41,12 +42,9 @@ function RecruiterInternship() {
 export default RecruiterInternship;
 
 class ApplicantList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      applications: props.post.applications
-    };
-  }
+  selectApplicant = (n) => () => {this.props.setSelectedApplicant(n);}
+  state = { applications: this.props.post.applications };
+
   componentDidUpdate(prevProps) {
     if (prevProps.post !== this.props.post) {
       this.setState({ applications: this.props.post.applications });
@@ -63,9 +61,9 @@ class ApplicantList extends Component {
           </Card.Header>
         
           <ListGroup> {
-            this.state.applications.map((application) => (
+            this.state.applications.map((application, i) => (
               <ListGroupItem className="applicantListItem" key={application.student.name}>
-                <Container fluid style={{ cursor: "pointer" }}>
+                <Container fluid style={{ cursor: "pointer" }} onClick={this.selectApplicant(i)}>
                   <Row className="applicantListRow">
                     <Col sm={9} className="studentNameCol"><p className="text-left studentName">{application.student.name} </p></Col>
                     <Col sm={3} className="avgRatingCol"><p className="text-center avgRating">3.5</p><AiFillStar style={{alignContent: "center"}} size={30}  color="#ffc800"/></Col>
@@ -81,11 +79,15 @@ class ApplicantList extends Component {
 }
 
 class SkillList extends Component {
-  skills = [
-    {name: "skill1"},
-    {name: "skill2"},
-    {name: "skill3"}
-  ];
+  state = { skills: [] }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.selectedApplicant !== this.props.selectedApplicant) {
+      this.setState({
+        skills: (this.props.selectedApplicant != -1 ? this.props.post.applications[this.props.selectedApplicant].evidences : [])
+      });
+    }
+  }
   render() {
     return (
       <Container style={{height: "80vh"}}>
@@ -97,18 +99,19 @@ class SkillList extends Component {
           </Card.Header>
           
           <Accordion>{
-            this.skills.map((skill) => (
-              <Accordion.Item eventKey={skill.name} key={skill.name}>
-                <Accordion.Header>{skill.name}</Accordion.Header>
+            this.state.skills.map((skill) => (
+              <Accordion.Item eventKey={skill.requirement.requirementText} key={skill.requirement.requirementText}>
+                <Accordion.Header>{skill.requirement.requirementText}</Accordion.Header>
                 <Accordion.Body>
-                  <Card><Card.Body>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.</Card.Body></Card>
-                <Card className="ratingCard" ><Card.Body style={{ alignSelf: "flex-end" }}><StarRating /></Card.Body></Card>
+                  <Card><Card.Body>{skill.evidenceText}</Card.Body></Card>
+                  <Card className="ratingCard"><Card.Body style={{ alignSelf: "flex-end" }}>
+                    <StarRating 
+                      initialRating={skill.rating}
+                      postID={this.props.post.id}
+                      studentID={this.props.post.applications[this.props.selectedApplicant].student.id}
+                      requirementID={skill.requirement.id}
+                    />
+                  </Card.Body></Card>
                 </Accordion.Body>
               </Accordion.Item>
             ))}
@@ -119,9 +122,23 @@ class SkillList extends Component {
   }
 }
 
-const StarRating = () => {
-  const [rating, setRating] = useState(0);
+const StarRating = ({ initialRating, studentID, postID, requirementID }) => {
+  const [rating, setRating] = useState(initialRating);
   const [hover, setHover] = useState(0);
+
+  const selectRating = (n) => {
+    setRating(n);
+    fetch('/api/rating', {
+      method: 'PUT',
+      body: JSON.stringify({
+        studentID: studentID,
+        postID: postID,
+        requirementID: requirementID,
+        rating: n
+      })
+    });
+  }
+
   return (
     <div className="star-rating">
       {[...Array(5)].map((_, index) => {
@@ -130,10 +147,9 @@ const StarRating = () => {
             type="button"
             key={index + 1}
             className={index + 1 <= (hover || rating) ? starStyle.on : starStyle.off}
-            onClick={() => setRating(index + 1)}
+            onClick={() => selectRating(index + 1)}
             onMouseEnter={() => setHover(index + 1)}
             onMouseLeave={() => setHover(rating)}
-            onDoubleClick={() => {setRating(0); setHover(0);}}
           >
               <span className="star"><AiFillStar size={20} /></span>
           </button>