linked feedback ui with backend endpoints

frontend/package.json

@@ -22,6 +22,7 @@
  "react-router-dom": "^5.2.0",
  "react-scripts": "4.0.3",
  "react-scrollbars-custom": "^4.0.25",
+ "react-star-picker": "^2.0.4",
  "react-stripe-checkout": "^2.6.3",
  "react-toastify": "^7.0.3",
  "reactstrap": "^8.9.0",

frontend/src/App.js

@@ -101,7 +101,7 @@ function App() {
  <Route exact path="/patient/book-slot" component={BookingSlots} />
  <Route exact path="/patient/payment" component={Payment} />
  <Route exact path="/patient/appointment-status" component={AppointmentStatus} />
- <Route exact path="/patient/feedback" component={Pfeedback} />
+ <Route exact path="/patient/feedback/:id" component={Pfeedback} />
 
  <Route path="*">
  <Error />

frontend/src/Patient/Feedback.js

@@ -1,62 +1,90 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Navbar from '../Basic/Navbar';
-import {Col,Row, Input, Button} from 'reactstrap'
-import { Link } from 'react-router-dom';
+import { Row, Input, Button } from 'reactstrap'
+import { Link, useHistory, useParams } from 'react-router-dom';
+import StarPicker from 'react-star-picker';
+import axios from 'axios';
 
-const Feedback=()=>{
+const Feedback = () => {
+ const [rating, setRating] = useState(0);
+ const [title, setTitle] = useState('');
+ const [review, setReview] = useState('');
+ const appointmentId = useParams();
 
- return(<div>
- <Navbar/>
- <div class="container mt-5"
- style={{
- border: "15px solid #03203C ",
- height: "65vh",
- backgroundColor: "#35BDD0",
- }}
- >
- <h4 className="text-center m-3">It will be helful if you share your Experience</h4>
- <Row className="m-3">
-
- <Input
- placeholder="Feel Free to Share your Experience"
- />
-
- </Row>
- <Row className="m-3">
-
- <Input
- type="textarea"
- placeholder="Provide Short Information"
- maxLength="50px"
- style={{height:"30vh"}}
- />
-
-
- </Row>
- <div className="row mt-5 ml-5">
- <div className="col-4">
- <Link to="/patient/previousappointments">
- <Button color="danger">GO BACK</Button>
- </Link>
- </div>
- <div className="col-4 justify-content-end">
-
- </div>
-
- <div className="col-4 justify-content-end ">
-
- <Button color="warning">Sumbit</Button>
-
- </div>
- </div>
+ const history = useHistory();
+
+ const onChange = (value) => {
+ setRating(value);
+ }
+
+ const putFeedback = async () => {
+ try {
+ const { data } = axios.put(
+ `${process.env.REACT_APP_SERVER_URL}/appointments/feedback/`,
+ {
+ appointmentId : appointmentId.id,
+ stars : rating,
+ title : title,
+ review : review
+ }
+ )
+
+ if(data) {
+ console.log(data)
+ }
 
+ history.push("/patient/");
+ }
+ catch(err) {
+ console.log(err);
+ }
+ }
+
+ return (<div>
+ <Navbar />
+ <div class="container mt-5 mb-5"
+ style={{
+ display: 'flex',
+ flexFlow: 'column',
+ padding: '20px',
+ border: "15px solid #03203C ",
+ height: "max-content",
+ backgroundColor: "#35BDD0",
+ }}
+ >
+ <h4 className="text-center m-3">It will be helpful if you share your Experience</h4>
+ <Row style={{justifyContent : 'center'}}>
+ <StarPicker onChange={onChange} value={rating} size={40}></StarPicker>
+ </Row>
+ <Row className="m-3">
+ <Input
+ placeholder="Feel Free to Share your Experience"
+ onChange={e => setTitle(e.target.value)}
+ />
+ </Row>
+ <Row className="m-3">
+ <Input
+ type="textarea"
+ placeholder="Provide Short Information"
+ maxLength="50px"
+ style={{ height: "30vh" }}
+ onChange={e => setReview(e.target.value)}
+ />
+ </Row>
 
-
-
- </div>
-
-
- </div>)
+ <Row
+ style={{
+ display: 'flex',
+ justifyContent: 'space-around',
+ padding: '20px 0px'
+ }}>
+ <Link to="/patient/previousappointments">
+ <Button color="danger">GO BACK</Button>
+ </Link>
+ <Button color="warning" onClick={putFeedback}>Sumbit</Button>
+ </Row>
+ </div>
+ </div>)
 
 }
 

frontend/src/Patient/PerviousAppointments.js

@@ -11,12 +11,10 @@ import Leftside from "../Dashbaord/LeftsidePatient";
 import { Link } from "react-router-dom";
 
 const PatientAppointments = () => {
-
-
  const [Appointments, setAppointments] = useState([]);
 
  const fetchAppointments = async () => {
- 
+
  const { data } = await Axios.post(
  `${process.env.REACT_APP_SERVER_URL}/patients/previous-appointments/`,
  {
@@ -71,11 +69,17 @@ const PatientAppointments = () => {
  <th scope="row">{Appointment.slotTime}</th>
  <th scope="row">{Appointment.doctorName}</th>
  <th scope="row">
- <Link to="/patient/feedback">
- <BsPencilSquare/>
- </Link>
- </th>
-
+ <div style={{
+ display: 'flex'
+ }}>
+ <Link to={`/patient/feedback/${Appointment._id}`}>
+ <BsPencilSquare />
+ </Link>
+ {Appointment.feedback.given && <div style={{
+ margin: '0 15px'
+ }}>{Appointment.feedback.stars}/5</div>}
+ </div>
+ </th>
  </tr>
  ))}
  </tbody>