contact us screen

src/App.js

@@ -13,6 +13,7 @@ import LoginScreen from './screens/LoginScreen'
 import RegisterScreen from './screens/RegisterScreen'
 import ProfileScreen from './screens/ProfileScreen'
 import RequestEditScreen from './screens/RequestEditScreen'
+import ContactUsScreen from './screens/ContactUsScreen'
 
 const App = () => {
   return (
@@ -29,7 +30,7 @@ const App = () => {
             <Route path='/donars' element={<DonarsScreen />} />
             <Route path='/donars/:id' element={<DonarProfileScreen />} />
             <Route path='/faq' element={<FaqScreen />} />
-            {/* <Route path='/contact' element={<ContactPage />} /> */}
+            <Route path='/contact' element={<ContactUsScreen />} />
             <Route path='/login' element={<LoginScreen />} />
             <Route path='/register' element={<RegisterScreen />} />
             <Route path='/profile' element={<ProfileScreen />} />

src/actions/userActions.js

@@ -1,7 +1,7 @@
 import { USER_INFO_SET, USER_INFO_REMOVE } from '../constants/userConstants'
 
 export const setUser = (data) => async (dispatch) => {
-  console.log(data)
+  // console.log(data)
   dispatch({
     type: USER_INFO_SET,
     payload: data,

src/components/Header.js

@@ -45,6 +45,10 @@ const Header = () => {
                 <Nav.Link>FAQ</Nav.Link>
               </LinkContainer>
 
+              <LinkContainer to='/contact'>
+                <Nav.Link>Contact Us</Nav.Link>
+              </LinkContainer>
+
               {userInfo ? (
                 <NavDropdown title={userInfo.name} id='username'>
                   <LinkContainer to='/profile'>

src/components/Request.js

@@ -39,7 +39,7 @@ const Donar = ({ request }) => {
         <Card.Text>Contuct Number: {contact}</Card.Text>
         <Card.Text>Location: {location}</Card.Text>
         <Card.Text>Bag managed: {numManaged}</Card.Text>
-        <Card.Text>Total response: {response}</Card.Text>
+        <Card.Text>Total response: {response.length}</Card.Text>
       </Card.Body>
       <Link to={`/feed/${id}`}>
         <Button>Details</Button>

src/firebase.js

@@ -1,6 +1,6 @@
 import { initializeApp } from 'firebase/app'
 import { getFirestore } from 'firebase/firestore'
-import { getAuth } from 'firebase/auth'
+import { getAuth, GoogleAuthProvider } from 'firebase/auth'
 
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_API_KEY,
@@ -18,3 +18,4 @@ const app = initializeApp(firebaseConfig)
 // Initialize Cloud Firestore and get a reference to the service
 export const db = getFirestore(app)
 export const auth = getAuth(app)
+export const provider = new GoogleAuthProvider()

src/index.css

@@ -13,3 +13,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.btn-google {
+  border: none;
+  border-radius: 2px;
+  padding: 10px 20px;
+}

src/screens/ContactUsScreen.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { Form, Row, Col, Button } from 'react-bootstrap'
+
+const ContactUsScreen = () => {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [text, setText] = useState('')
+
+  const submitHandler = (e) => {
+    e.preventDefaul()
+  }
+  return (
+    <>
+      <h1 className='text-center my-5'>Contact Us</h1>
+      <Form onSubmit={submitHandler}>
+        <Row>
+          <Col md={6}>
+            <Form.Group controlId='name' className='mb-3'>
+              <Form.Label>Name</Form.Label>
+              <Form.Control
+                type='text'
+                placeholder='Your name'
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required={true}
+              ></Form.Control>
+            </Form.Group>
+          </Col>
+
+          <Col md={6}>
+            <Form.Group controlId='email' className='mb-3'>
+              <Form.Label>Email Address</Form.Label>
+              <Form.Control
+                type='email'
+                placeholder='Your email address'
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required={true}
+              ></Form.Control>
+            </Form.Group>
+          </Col>
+        </Row>
+
+        <Form.Group controlId='text' className='mb-3'>
+          <Form.Label>Message</Form.Label>
+          <Form.Control
+            as='textarea'
+            placeholder='Your Message'
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            required={true}
+          ></Form.Control>
+        </Form.Group>
+
+        <Button type='submit'>Send your message</Button>
+      </Form>
+    </>
+  )
+}
+
+export default ContactUsScreen

src/screens/HomeScreen.js

@@ -1,7 +1,24 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 function HomeScreen() {
-  return <h1 className='text-center mt-5'>HomeScreen</h1>
+  return (
+    <>
+      <h1 className='text-center mt-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>
+    </>
+  )
 }
 
 export default HomeScreen

src/screens/LoginScreen.js

@@ -14,7 +14,7 @@ import { db } from './../firebase'
 const LoginScreen = () => {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-  const [message, setMessage] = useState(null)
+  const [error, setError] = useState(null)
   const [loading, setLoading] = useState(false)
 
   const navigate = useNavigate()
@@ -34,33 +34,50 @@ const LoginScreen = () => {
     e.preventDefault()
 
     setLoading(true)
-    setMessage(null)
+    setError(null)
     try {
       const userCredential = await signInWithEmailAndPassword(
         auth,
         email,
         password
       )
-
       const { user } = userCredential
 
       const res = await getDoc(doc(db, 'users', user.uid))
-      // console.log(res.id, res.data())
 
       dispatch(setUser({ uid: user.uid, ...res.data() }))
       setLoading(false)
     } catch (error) {
       setLoading(false)
-      setMessage(error.message)
-      console.error(error.message)
+      setError(error.error)
+      console.error(error.error)
     }
   }
 
+  // const googleSignIn = async () => {
+  //   try {
+  //     setError(null)
+  //     const data = await signInWithPopup(auth, provider)
+  //     const { user } = data
+
+  //     setLoading(true)
+
+  //     const res = await getDoc(doc(db, 'users', user.uid))
+
+  //     dispatch(setUser({ uid: user.uid, ...res.data() }))
+  //     setLoading(false)
+  //   } catch (error) {
+  //     setLoading(false)
+  //     setError(error.error)
+  //     console.log(error.code, error.error)
+  //   }
+  // }
+
   return (
     <FormContainer>
       <h1 className='text-center my-5'>Sign In</h1>
 
-      {message && <Message variant='danger'>{message}</Message>}
+      {error && <Message variant='danger'>{error}</Message>}
       {loading && <Loader />}
 
       <Form onSubmit={submitHandler} className='my-5'>
@@ -99,6 +116,12 @@ const LoginScreen = () => {
           </Col>
         </Row>
       </Form>
+
+      {/* <div className='text-center my-5'>
+        <button className='btn-google' onClick={googleSignIn}>
+          <i className='fa-brands fa-google'></i> Sign in with google
+        </button>
+      </div> */}
     </FormContainer>
   )
 }

src/screens/RegisterScreen.js

@@ -16,7 +16,7 @@ const RegisterScreen = () => {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
-  const [message, setMessage] = useState(null)
+  const [error, setError] = useState(null)
   const [loading, setLoading] = useState(false)
 
   const navigate = useNavigate()
@@ -36,10 +36,10 @@ const RegisterScreen = () => {
     e.preventDefault()
 
     if (password !== confirmPassword) {
-      setMessage('Password do not match')
+      setError('Password do not match')
     } else {
       setLoading(true)
-      setMessage(null)
+      setError(null)
 
       try {
         // register user
@@ -55,6 +55,7 @@ const RegisterScreen = () => {
         await setDoc(doc(db, 'users', user.uid), {
           name,
           email: user.email,
+          photoURL: '',
           phone: '',
           bloodGroup: '',
           status: '',
@@ -73,6 +74,7 @@ const RegisterScreen = () => {
             uid: user.uid,
             email: user.email,
             name,
+            photoURL: '',
             phone: '',
             bloodGroup: '',
             status: '',
@@ -89,20 +91,74 @@ const RegisterScreen = () => {
         setLoading(false)
       } catch (error) {
         setLoading(false)
-        setMessage(error.message)
+        setError(error.message)
         console.error(error.message)
       }
     }
   }
 
+  // const googleSignUp = async () => {
+  //   try {
+  //     setError(null)
+  //     const res = await signInWithPopup(auth, provider)
+
+  //     const { user } = res
+  //     const { uid, displayName, email, photoURL } = user
+
+  //     setLoading(true)
+
+  //     // storing user into firestore
+  //     await setDoc(doc(db, 'users', uid), {
+  //       name: displayName,
+  //       email,
+  //       photoURL,
+  //       phone: '',
+  //       bloodGroup: '',
+  //       status: '',
+  //       isDonar: false,
+  //       isAdmin: false,
+  //       numDonation: 0,
+  //       area: '',
+  //       district: '',
+  //       lastDonation: '',
+  //       response: 0,
+  //       timeStamp: serverTimestamp(),
+  //     })
+
+  //     dispatch(
+  //       setUser({
+  //         uid,
+  //         email,
+  //         name: displayName,
+  //         photoURL,
+  //         phone: '',
+  //         bloodGroup: '',
+  //         status: '',
+  //         isDonar: false,
+  //         isAdmin: false,
+  //         numDonation: 0,
+  //         area: '',
+  //         district: '',
+  //         lastDonation: '',
+  //         response: 0,
+  //       })
+  //     )
+  //     setLoading(false)
+  //   } catch (error) {
+  //     setLoading(false)
+  //     setError(error.message)
+  //     console.log(error.code, error.message)
+  //   }
+  // }
+
   return (
     <FormContainer>
       <h1 className='text-center my-5'>Sign Up</h1>
 
-      {message && <Message variant='danger'>{message}</Message>}
+      {error && <Message variant='danger'>{error}</Message>}
       {loading && <Loader />}
 
-      <Form onSubmit={submitHandler} className='my-5'>
+      <Form onSubmit={submitHandler} className='mt-5'>
         <Form.Group controlId='name' className='mb-3'>
           <Form.Label>Name</Form.Label>
           <Form.Control
@@ -165,6 +221,12 @@ const RegisterScreen = () => {
           </Col>
         </Row>
       </Form>
+
+      {/* <div className='text-center my-5'>
+        <button className='btn-google' onClick={googleSignUp}>
+          <i className='fa-brands fa-google'></i> Sign up with google
+        </button>
+      </div> */}
     </FormContainer>
   )
 }

src/screens/RequestScreen.js

@@ -127,7 +127,7 @@ const RequestPage = () => {
             ></Form.Control>
           </Form.Group>
 
-          <Form.Group controlId='time' className='mb-3'>
+          {/* <Form.Group controlId='time' className='mb-3'>
             <Form.Label>Time</Form.Label>
             <Form.Control
               type='time'
@@ -136,6 +136,17 @@ const RequestPage = () => {
               onChange={(e) => setTime(e.target.value)}
               required={true}
             ></Form.Control>
+          </Form.Group> */}
+
+          <Form.Group controlId='time' className='mb-3'>
+            <Form.Label>Time</Form.Label>
+            <Form.Control
+              type='string'
+              placeholder='Time'
+              value={time}
+              onChange={(e) => setTime(e.target.value)}
+              required={true}
+            ></Form.Control>
           </Form.Group>
 
           <Form.Group controlId='lastDonation' className='mb-3'>