protected routes

SMNAFI · Nov 25, 2022 · 5eac51a · 5eac51a
1 parent 697db82
commit 5eac51a
Show file tree

Hide file tree

Showing 17 changed files with 106 additions and 87 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon1.ico b/public/favicon1.ico
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Find blood easily" />
+    <meta
+      name="description"
+      content="Find donars and request for blood easily"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
@@ -17,7 +20,7 @@
       referrerpolicy="no-referrer"
     />
 
-    <title>Plasma</title>
+    <title>Plasma | Find donars and request for blood easily</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -15,6 +15,7 @@ import ProfileScreen from './screens/ProfileScreen'
 import RequestEditScreen from './screens/RequestEditScreen'
 import ContactUsScreen from './screens/ContactUsScreen'
 import PageNotFound from './screens/PageNotFound'
+import ProtectedRoute from './components/ProtectedRoute'
 
 const App = () => {
   return (
@@ -24,17 +25,20 @@ const App = () => {
         <Container>
           <Routes>
             <Route path='/' element={<HomeScreen />} />
-            <Route path='/request' element={<RequestPage />} />
-            <Route path='/feed' element={<RequestFeedScreen />} />
-            <Route path='/feed/:id' element={<RequestDetailsScreen />} />
-            <Route path='/feed/:id/edit' element={<RequestEditScreen />} />
-            <Route path='/donars' element={<DonarsScreen />} />
-            <Route path='/donars/:id' element={<DonarProfileScreen />} />
             <Route path='/faq' element={<FaqScreen />} />
             <Route path='/contact' element={<ContactUsScreen />} />
             <Route path='/login' element={<LoginScreen />} />
             <Route path='/register' element={<RegisterScreen />} />
-            <Route path='/profile' element={<ProfileScreen />} />
+
+            <Route element={<ProtectedRoute />}>
+              <Route path='/request' element={<RequestPage />} />
+              <Route path='/feed' element={<RequestFeedScreen />} />
+              <Route path='/feed/:id' element={<RequestDetailsScreen />} />
+              <Route path='/feed/:id/edit' element={<RequestEditScreen />} />
+              <Route path='/donars' element={<DonarsScreen />} />
+              <Route path='/donars/:id' element={<DonarProfileScreen />} />
+              <Route path='/profile' element={<ProfileScreen />} />
+            </Route>
 
             <Route path='/*' element={<PageNotFound />} />
           </Routes>

diff --git a/src/components/Donar.js b/src/components/Donar.js
@@ -1,28 +1,24 @@
 import React from 'react'
-import { Card } from 'react-bootstrap'
+import { Button, Card } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
-// import { Link } from 'react-router-dom'
 
 const Donar = ({ donar }) => {
-  // console.log(donar)
-  const { id, name, phone, area, district, bloodGroup, numDonation, response } =
-    donar
+  const { id, name, phone, area, district, bloodGroup } = donar
   return (
     <Card className='my-3 p-3 rounded'>
       <Card.Body>
-        <Link style={{ textDecoration: 'none' }} to={`/donars/${id}`}>
-          <Card.Text as='h3'>
-            <i className='fa-solid fa-user fs-1'></i>
-          </Card.Text>
-        </Link>
-        <Card.Title>{name}</Card.Title>
+        <Card.Title as='h1'> {bloodGroup}</Card.Title>
+        <Card.Text>Name: {name}</Card.Text>
         <Card.Text>Blood Group: {bloodGroup}</Card.Text>
-        <Card.Text>Total Response: {response}</Card.Text>
-        <Card.Text>Total Donation: {numDonation}</Card.Text>
         <Card.Text>Phone Number: {phone}</Card.Text>
         <Card.Text>
           Address: {area}, {district}
         </Card.Text>
+        <Link to={`/donars/${id}`}>
+          <Button>
+            <i className='fa-solid fa-eye me-3'></i>Details
+          </Button>
+        </Link>
       </Card.Body>
     </Card>
   )

diff --git a/src/components/ProtectedRoute.js b/src/components/ProtectedRoute.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { Outlet } from 'react-router-dom'
+import LoginScreen from '../screens/LoginScreen'
+
+const useAuth = () => {
+  const userDetails = useSelector((state) => state.userDetails)
+  const { userInfo } = userDetails
+
+  if (userInfo) return true
+
+  return false
+}
+
+const ProtectedRoute = () => {
+  const isAuth = useAuth()
+
+  return isAuth ? <Outlet /> : <LoginScreen />
+}
+
+export default ProtectedRoute
diff --git a/src/components/Request.js b/src/components/Request.js
@@ -1,59 +1,62 @@
 import React from 'react'
-import { Button, Card } from 'react-bootstrap'
+import { Button, Card, Col, Row } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import moment from 'moment'
 
 const Donar = ({ request }) => {
-  // console.log(request)
   const userDetails = useSelector((state) => state.userDetails)
   const { userInfo } = userDetails
 
   const {
     uid,
     id,
-    problem,
     bloodGroup,
     time,
     date,
-    numBag,
     contact,
     location,
     district,
-    numManaged,
+    isManaged,
     createdAt,
-    // response,
   } = request
   return (
     <Card className='my-3 p-3 rounded'>
       <Card.Body>
-        {uid === userInfo.uid && (
-          <Link to={`/feed/${id}/edit`}>
-            <h2>
-              <i className='fa-solid fa-pen-to-square'></i>
-            </h2>
-          </Link>
-        )}
-        <Card.Text>Problem: {problem}</Card.Text>
+        <Card.Title as='h1'> {bloodGroup}</Card.Title>
         <Card.Text>Blood Group: {bloodGroup}</Card.Text>
         <Card.Text>Time: {time}</Card.Text>
         <Card.Text>Date: {date}</Card.Text>
-        <Card.Text>Number of bages: {numBag}</Card.Text>
-        <Card.Text>Contuct Number: {contact}</Card.Text>
         <Card.Text>
           Location: {location}, {district}
         </Card.Text>
-        <Card.Text>Bag managed: {numManaged}</Card.Text>
+        <Card.Text>Contuct Number: {contact}</Card.Text>
         <Card.Text>
-          <small>{new Date(createdAt?.toDate()).toLocaleString()}</small>
+          Status: {isManaged ? 'Blood is managed' : 'Blood not managed yet'}
         </Card.Text>
         <Card.Text>
-          <small>{moment(createdAt?.toDate()).fromNow()}</small>
+          Posted in: {moment(createdAt?.toDate()).fromNow()}
         </Card.Text>
       </Card.Body>
-      <Link to={`/feed/${id}`}>
-        <Button>Details</Button>
-      </Link>
+
+      <Row className='align-items-center'>
+        <Col>
+          <Link to={`/feed/${id}`}>
+            <Button>
+              <i className='fa-solid fa-eye me-3'></i>Details
+            </Button>
+          </Link>
+        </Col>
+        <Col>
+          {uid === userInfo.uid && (
+            <Link to={`/feed/${id}/edit`}>
+              <Card.Text as='h3'>
+                <i className='fa-solid fa-pen-to-square my-auto'></i>
+              </Card.Text>
+            </Link>
+          )}
+        </Col>
+      </Row>
     </Card>
   )
 }

diff --git a/src/screens/ContactUsScreen.js b/src/screens/ContactUsScreen.js
@@ -6,9 +6,6 @@ import Message from '../components/Message'
 import './ContactUsScreen.css'
 
 const ContactUsScreen = () => {
-  // const [name, setName] = useState('')
-  // const [email, setEmail] = useState('')
-  // const [message, setMessage] = useState('')
   const [loading, setLoading] = useState(false)
   const [message, setMessage] = useState(null)
   const [error, setError] = useState(null)
@@ -43,7 +40,7 @@ const ContactUsScreen = () => {
   }
   return (
     <>
-      <h1 className='text-center my-5'>Contact Us</h1>
+      <h1 className='text-center my-5'>Contact with us</h1>
 
       <div className='form-container mx-auto'>
         {loading && <Loader />}

diff --git a/src/screens/DonarDetailsScreen.js b/src/screens/DonarDetailsScreen.js
@@ -46,14 +46,17 @@ function DonarProfileScreen() {
           style={{ maxWidth: '650px' }}
         >
           <Card.Body>
-            <Card.Title>{name}</Card.Title>
+            <Card.Text as='h1'>
+              <i className='fa-solid fa-user fs-1 my-3'></i>
+            </Card.Text>
+            <Card.Title className='my-3'>{name}</Card.Title>
             <Card.Text>Blood Group: {bloodGroup}</Card.Text>
-            <Card.Text>Total Response: {response}</Card.Text>
-            <Card.Text>Total Donation: {numDonation}</Card.Text>
             <Card.Text>Phone Number: {phone}</Card.Text>
             <Card.Text>
               Address: {area}, {district}
             </Card.Text>
+            <Card.Text>Total Response: {response}</Card.Text>
+            <Card.Text>Total Donation: {numDonation}</Card.Text>
           </Card.Body>
         </Card>
       )}

diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
@@ -1,22 +1,11 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
 
 function HomeScreen() {
   return (
     <>
       <h1 className='text-center my-5'>Welcome to Plasma</h1>
 
-      <h4>How it works</h4>
-      <p>Register/Login to our platform</p>
-      <Link to='/profile'>
-        <p>Become a donar</p>
-      </Link>
-      <Link to='/request'>
-        <p>Request for blood</p>
-      </Link>
-      <Link to='/donars'>
-        <p>Find donars</p>
-      </Link>
+      <h3 className='text-center my-5'>Content comming soon!!!!</h3>
     </>
   )
 }

diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js
@@ -35,6 +35,7 @@ const LoginScreen = () => {
 
     setLoading(true)
     setError(null)
+
     try {
       const userCredential = await signInWithEmailAndPassword(
         auth,

diff --git a/src/screens/RegisterScreen.js b/src/screens/RegisterScreen.js
@@ -49,7 +49,6 @@ const RegisterScreen = () => {
           password
         )
         const { user } = userCredential
-        // console.log(user)
 
         // storing user into firestore
         await setDoc(doc(db, 'users', user.uid), {

diff --git a/src/screens/RequestDetailsScreen.js b/src/screens/RequestDetailsScreen.js
@@ -1,4 +1,5 @@
 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'
@@ -28,17 +29,16 @@ function RequestDetailsScreen() {
     district,
     numManaged,
     isManaged,
+    createdAt,
     uid,
   } = requestInfo
 
   useEffect(() => {
     const unsub = onSnapshot(
       doc(db, 'requests', id),
       (doc) => {
-        //   console.log('Current data: ', doc.data())
         setLoading(false)
         setRequestInfo({ id: doc.id, ...doc.data() })
-        // console.log(doc.data().response.length)
       },
       (error) => {
         console.log(error)
@@ -52,7 +52,7 @@ function RequestDetailsScreen() {
   }, [id])
 
   return (
-    <div className='mx-auto' style={{ maxWidth: '650px' }}>
+    <div className='mx-auto my-5' style={{ maxWidth: '650px' }}>
       <h1 className='my-5 text-center'>Request Details</h1>
       {loading ? (
         <Loader />
@@ -67,22 +67,28 @@ function RequestDetailsScreen() {
           )}
           <Card className='my-3 p-3 rounded'>
             <Card.Body>
-              <Card.Text>Problem: {problem}</Card.Text>
               <Card.Text>Blood Group: {bloodGroup}</Card.Text>
+              <Card.Text>Problem: {problem}</Card.Text>
               <Card.Text>Time: {time}</Card.Text>
               <Card.Text>Date: {date}</Card.Text>
-              <Card.Text>Number of bages: {numBag}</Card.Text>
-              <Card.Text>Contuct Number: {contact}</Card.Text>
               <Card.Text>
                 Location: {location}, {district}
               </Card.Text>
+              <Card.Text>Contuct Number: {contact}</Card.Text>
+              <Card.Text>Required Number of Bags: {numBag}</Card.Text>
               <Card.Text>Bag managed: {numManaged}</Card.Text>
+              <Card.Text>
+                Posted in: {new Date(createdAt?.toDate()).toLocaleString()} (
+                {moment(createdAt?.toDate()).fromNow()})
+              </Card.Text>
+              <Card.Text></Card.Text>
             </Card.Body>
             {uid === userInfo.uid ? (
               <Link to={`/feed/${id}/edit`}>
-                <h2>
-                  <i className='fa-solid fa-pen-to-square'></i>
-                </h2>
+                <Button>
+                  <i className='fa-solid fa-pen-to-square me-3'></i>
+                  Edit Request
+                </Button>
               </Link>
             ) : (
               <Button>Respose to this request</Button>

diff --git a/src/screens/RequestEditScreen.js b/src/screens/RequestEditScreen.js
@@ -29,7 +29,6 @@ const RequestEditScreen = () => {
       try {
         const docRef = await getDoc(doc(db, 'requests', id))
         const res = docRef.data()
-        // console.log(res)
 
         setProblem(res.problem)
         setBloodGroup(res.bloodGroup)

diff --git a/src/screens/RequestFeedScreen.js b/src/screens/RequestFeedScreen.js
@@ -70,8 +70,8 @@ const RequestFeedScreen = () => {
   }
 
   return (
-    <>
-      <h1 className='my-5'>All Requests</h1>
+    <div className='my-5'>
+      <h1 className='my-5 text-center'>All Requests</h1>
 
       <Row>
         <Col md={6}>
@@ -118,7 +118,7 @@ const RequestFeedScreen = () => {
           ))}
         </Row>
       )}
-    </>
+    </div>
   )
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ const LoginScreen = () => { @@
         setLoading(true)
         setError(null)
         try {
           const userCredential = await signInWithEmailAndPassword(
             auth,
@@ Expand Down @@