reviews added

src/components/ReviewDialog/ReviewDialog.css

@@ -0,0 +1,12 @@
+.review_form__container{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 3rem;
+}
+.review_main_form{
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}

src/components/ReviewDialog/ReviewDialog.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import './ReviewDialog.css'
+import Dialog from '@mui/material/Dialog';
+import axiosInstance from '../../utils/axios';
+import { useEffect } from 'react';
+import baseUrl from '../../utils/Urls';
+const ReviewDialog = ({open,handleClose}) => {
+    const[description,setDescription]=useState('')
+    const[rate,setRate]=useState(0)
+    const[currUser,setCurrUser]=useState('')
+    const[currUserId,setCurrUserId]=useState()
+
+    useEffect(()=>{
+        axiosInstance.get(`${baseUrl}/current-user/`).then((response)=>{
+            setCurrUser(response.data.username)
+            setCurrUserId(response.data.id)
+        },(error)=>{
+
+        })
+    },[])
+    const handleSubmit=()=>{
+        axiosInstance.post(`${baseUrl}/reviews/`,{
+            desc: description,
+            rate: rate,
+            user_name: currUser,
+            user_foreign: currUserId
+        }).then((response)=>{
+            console.log(response)
+        },(error)=>{
+
+        })
+    }
+  return (
+    <div>
+        <Dialog
+        fullWidth={true}
+        maxWidth={"md"}
+        PaperProps={{
+          sx: { width: "100%", borderRadius: 5, m: 2, minHeight: "60vh" },
+        }}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description">
+            <div className="review_form__container">
+            <form className='review_main_form' onSubmit={handleSubmit}>
+                <input type='text' placeholder='Description'value={description} onChange={(e)=>{setDescription(e.target.value)}}/>
+                <input type="number" placeholder='Enter your rating out of 10' value={rate} onChange={(e)=>{setRate(e.target.value)}}/>
+                <button type='submit'>Submit</button>
+            </form>
+            </div>
+
+
+        </Dialog>
+    </div>
+  )
+}
+
+export default ReviewDialog

src/pages/ReviewPage/ReviewCards.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import './ReviewPage.css'
-function ReviewCards({ desc,rate }) {
+function ReviewCards({ desc,rate,name }) {
   return (
     <section class="t-bq-section" id="paul">
     <div class="t-bq-wrapper t-bq-wrapper-boxed">
@@ -17,8 +17,8 @@ function ReviewCards({ desc,rate }) {
                 </blockquote>
                 <div class="t-bq-quote-paul-meta">
                     <div class="t-bq-quote-paul-meta-info">
-                        <div class="t-bq-quote-paul-author"><cite>Strugatsky Brothers</cite></div>
-                        <div class="t-bq-quote-paul-source"><span>Rating {rate}</span></div>
+                        <div class="t-bq-quote-paul-author"><cite>{name}</cite></div>
+                        <div class="t-bq-quote-paul-source"><span className='rating__text'>Rating {rate}</span></div>
                     </div>
                 </div>
             </div>

src/pages/ReviewPage/ReviewPage.css

@@ -8,6 +8,10 @@ section.t-bq-section {
     padding: 30px;
     margin-bottom: 60px;
 }
+.rating__text{
+    font-size: 1rem;
+    color: cornflowerblue;
+}
 
 .t-bq-wrapper.t-bq-wrapper-boxed {
     max-width: 576px;

src/pages/ReviewPage/ReviewPage.js

@@ -4,22 +4,36 @@ import './ReviewPage.css'
 import axios from 'axios'
 import baseUrl from '../../utils/Urls'
 import ReviewCards from './ReviewCards'
+import ReviewDialog from '../../components/ReviewDialog/ReviewDialog'
 function ReviewPage() {
 const[reviews,setReviews]=useState([])
+const[open,setOpen]=useState(false)
+
+const handleClose=()=>{
+  setOpen(false)
+}
+const handleClickOpen = () => {
+  setOpen(true);
+}
 
 useEffect(()=>{
   axios.get(`${baseUrl}/reviews/`).then((response)=>{
     setReviews(response.data)
   })
 },[])
-
   return (
     <Mainlayout>
+      <ReviewDialog open={open} handleClose={handleClose} />
     <div className='review__container'>
+    {
+            (localStorage.getItem('refresh_token'))?((<button className="nav_item" onClick={handleClickOpen} >
+           Review
+          </button>  )):(( null))
+          }
      {
         reviews.map((item)=>{
           return(
-              <ReviewCards key={item.id} desc={item.desc} rate={item.rate}/>
+              <ReviewCards key={item.id} desc={item.desc} rate={item.rate} name={item.user_name}/>
           )
         })
      }

src/utils/axios.js

@@ -3,7 +3,7 @@ import baseUrl from "./Urls";
 
 const axiosInstance= axios.create({
    baseURL: "http://127.0.0.1:8000",
-    timeout:5000,
+    timeout:30000,
     headers:{
         Authorization: localStorage.getItem('access_token')
                    ? 'Bearer ' + localStorage.getItem('access_token')