timeline responsive, request delete, admin route fixed

src/components/AdminRoute.js

@@ -9,7 +9,7 @@ const AdminRoute = () => {
   const userDetails = useSelector((state) => state.userDetails)
   const { userInfo } = userDetails
 
-  return isAuth && userInfo.isAdmin ? <Outlet /> : <LoginScreen />
+  return isAuth && userInfo?.isAdmin ? <Outlet /> : <LoginScreen />
 }
 
 export default AdminRoute

src/components/HowItWorks.js

@@ -3,15 +3,24 @@ import { Container } from 'react-bootstrap'
 import './HowItWorks.css'
 
 import Timeline from '@mui/lab/Timeline'
-import TimelineItem from '@mui/lab/TimelineItem'
+import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem'
+import useMediaQuery from '@mui/material/useMediaQuery'
 import TimelineSeparator from '@mui/lab/TimelineSeparator'
 import TimelineConnector from '@mui/lab/TimelineConnector'
 import TimelineContent from '@mui/lab/TimelineContent'
 import TimelineDot from '@mui/lab/TimelineDot'
-// import Typography from '@mui/material/Typography'
 import steps from './../assets/data/stepsData'
 
 const HowItWorks = () => {
+  const isMobile = useMediaQuery('(max-width:768px)')
+
+  // const [isMobile, setIsMobile] = useState(window.innerWidth < 768)
+  // useEffect(() => {
+  //   window.addEventListener('resize', () => {
+  //     setIsMobile(window.innerWidth < 768)
+  //   })
+  // }, [])
+
   return (
     <section className='works-container'>
       <Container className='my-5'>
@@ -23,7 +32,19 @@ const HowItWorks = () => {
         </div>
 
         <div style={{ maxWidth: '800px' }} className='mx-auto'>
-          <Timeline position='alternate'>
+          <Timeline
+            position={`${isMobile ? 'right' : 'alternate'}`}
+            sx={
+              isMobile
+                ? {
+                    [`& .${timelineItemClasses.root}:before`]: {
+                      flex: 0,
+                      padding: 0,
+                    },
+                  }
+                : {}
+            }
+          >
             {steps.map((step) => (
               <TimelineItem key={step.id}>
                 <TimelineSeparator>
@@ -42,11 +63,6 @@ const HowItWorks = () => {
                   <TimelineConnector />
                 </TimelineSeparator>
                 <TimelineContent sx={{ py: '12px', px: 2 }}>
-                  {/* <Typography variant='h6' component='span'>
-                    {step.title}
-                  </Typography>
-                  <Typography>{step.text}</Typography> */}
-
                   <p className='step-title'>{step.title}</p>
                   <p className='step-subtitle'>{step.text}</p>
                 </TimelineContent>

src/components/Statistics/Statistics.js

@@ -45,7 +45,7 @@ const Statistics = () => {
             <h3 className='text-center'>Total Donars</h3>
             {inView ? (
               <h2 className='count'>
-                <CountUp start={0} end={donarCount} duration={2} />
+                <CountUp start={0} end={donarCount} duration={1} />
               </h2>
             ) : null}
           </Col>

src/screens/DonarDetailsScreen.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { doc, onSnapshot } from 'firebase/firestore'
 import { db } from '../firebase'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import Loader from '../components/Loader'
 import Message from '../components/Message'
 import { Card, Col, Container, Row } from 'react-bootstrap'

src/screens/ManageRequestsScreen.js

@@ -1,7 +1,15 @@
-import { collection, onSnapshot, orderBy, query } from 'firebase/firestore'
+import {
+  collection,
+  deleteDoc,
+  doc,
+  onSnapshot,
+  orderBy,
+  query,
+} from 'firebase/firestore'
 import moment from 'moment'
 import React, { useEffect, useState } from 'react'
 import { Container, Table } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
 import Loader from '../components/Loader'
 import Message from '../components/Message'
 import { db } from '../firebase'
@@ -10,6 +18,7 @@ import SubHero from './../components/SubHero/SubHero'
 const ManageRequestsScreen = () => {
   const [requests, setRequests] = useState([])
   const [error, setError] = useState(null)
+  const [message, setMessage] = useState(null)
   const [loading, setLoading] = useState(false)
 
   useEffect(() => {
@@ -40,11 +49,30 @@ const ManageRequestsScreen = () => {
     }
   }, [])
 
+  const deleteHandler = async (id) => {
+    if (window.confirm('Are you sure?')) {
+      try {
+        setLoading(true)
+        setError(null)
+        setMessage(null)
+
+        await deleteDoc(doc(db, 'requests', id))
+
+        setMessage('Request is deleted.')
+      } catch (error) {
+        setLoading(false)
+
+        setError(error.message)
+      }
+    }
+  }
+
   return (
     <>
       <SubHero title='Manage Requests'></SubHero>
       <Container className='my-5'>
         {loading && <Loader />}
+        {message && <Message>{message}</Message>}
         {error && <Message variant='error'>{error}</Message>}
 
         <Table striped bordered size='sm' responsive='xl'>
@@ -68,9 +96,18 @@ const ManageRequestsScreen = () => {
                   <td>{isManaged ? 'Managed' : 'Not Managed'}</td>
                   <td>{moment(createdAt?.toDate()).fromNow()}</td>
                   <td>
-                    <i className='fa-solid fa-eye me-3'></i>
-                    <i className='fa-solid fa-pen-to-square me-3'></i>
-                    <i className='fa-solid fa-trash-can'></i>
+                    <Link to={`/feed/${id}`}>
+                      <i className='fa-solid fa-eye me-3'></i>
+                    </Link>
+                    <Link to={`/feed/${id}/edit`}>
+                      <i className='fa-solid fa-pen-to-square me-3'></i>
+                    </Link>
+                    <span
+                      style={{ cursor: 'pointer' }}
+                      onClick={() => deleteHandler(id)}
+                    >
+                      <i className='fa-solid fa-trash-can text-danger'></i>
+                    </span>
                   </td>
                 </tr>
               )

src/screens/RequestDetailsScreen.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import moment from 'moment'
 import { doc, onSnapshot } from 'firebase/firestore'
 import { db } from '../firebase'
 import { useParams } from 'react-router-dom'
@@ -110,8 +109,8 @@ function RequestDetailsScreen() {
                     <Card.Text>Bag managed: {numManaged}</Card.Text>
                     <Card.Text>
                       Posted in:{' '}
-                      {new Date(createdAt?.toDate()).toLocaleString()} (
-                      {moment(createdAt?.toDate()).fromNow()})
+                      {new Date(createdAt?.toDate()).toLocaleString()}
+                      {/* ({moment(createdAt?.toDate()).fromNow()}) */}
                     </Card.Text>
                   </Col>
                 </Row>

src/screens/RequestEditScreen.js

@@ -104,7 +104,7 @@ const RequestEditScreen = () => {
         {error && <Message variant='danger'>{error}</Message>}
         {loading && <Loader />}
 
-        {uid === userInfo.uid ? (
+        {uid === userInfo.uid || userInfo.isAdmin ? (
           <Form onSubmit={submitHandler} className='my-5'>
             <Form.Group controlId='isManged' className='mb-3'>
               <Form.Check
@@ -246,7 +246,7 @@ const RequestEditScreen = () => {
             </Row>
 
             <Button type='submit' varient='primary'>
-              Update Your Request
+              Update Request
             </Button>
           </Form>
         ) : (

src/screens/RequestScreen.js

@@ -7,6 +7,7 @@ import Loader from './../components/Loader'
 import { useSelector } from 'react-redux'
 import Required from './../components/Required'
 import SubHero from '../components/SubHero/SubHero'
+import { useNavigate } from 'react-router-dom'
 
 const RequestPage = () => {
   const [problem, setProblem] = useState('')
@@ -24,6 +25,8 @@ const RequestPage = () => {
   const userDetails = useSelector((state) => state.userDetails)
   const { userInfo } = userDetails
 
+  const navigate = useNavigate()
+
   const submitHandler = async (e) => {
     e.preventDefault()
 
@@ -57,6 +60,8 @@ const RequestPage = () => {
       setDate('')
       setLoading(false)
       setSuccess(true)
+
+      navigate('/feed')
     } catch (error) {
       setLoading(false)
       setError(error.message)
@@ -83,6 +88,7 @@ const RequestPage = () => {
               <Required />
             </Form.Label>
             <Form.Control
+              className='shadow-none'
               as='textarea'
               placeholder="Enter patient's problem"
               value={problem}
@@ -99,6 +105,7 @@ const RequestPage = () => {
                   <Required />
                 </Form.Label>
                 <Form.Select
+                  className='shadow-none'
                   value={bloodGroup}
                   onChange={(e) => setBloodGroup(e.target.value)}
                   required={true}
@@ -122,6 +129,7 @@ const RequestPage = () => {
                   <Required />
                 </Form.Label>
                 <Form.Control
+                  className='shadow-none'
                   type='number'
                   placeholder='Num of bages'
                   value={numBag}
@@ -141,6 +149,7 @@ const RequestPage = () => {
                   <Required />
                 </Form.Label>
                 <Form.Control
+                  className='shadow-none'
                   type='text'
                   placeholder='Enter location'
                   value={location}
@@ -156,6 +165,7 @@ const RequestPage = () => {
                   <Required />
                 </Form.Label>
                 <Form.Control
+                  className='shadow-none'
                   type='text'
                   placeholder='Enter district'
                   value={district}
@@ -174,6 +184,7 @@ const RequestPage = () => {
                   <Required />
                 </Form.Label>
                 <Form.Control
+                  className='shadow-none'
                   type='string'
                   placeholder='Time'
                   value={time}
@@ -189,6 +200,7 @@ const RequestPage = () => {
                   <Required />
                 </Form.Label>
                 <Form.Control
+                  className='shadow-none'
                   type='date'
                   placeholder='Date'
                   value={date}
@@ -205,6 +217,7 @@ const RequestPage = () => {
               <Required />
             </Form.Label>
             <Form.Control
+              className='shadow-none'
               type='text'
               placeholder='Contact Number'
               value={contact}