Sponsor Donate page

bash.exe.stackdump

@@ -0,0 +1,9 @@
+Stack trace:
+Frame        Function    Args
+000FFFFA318  0018006133E (0018026DF0D, 0018024E186, 000FFFFA318, 000FFFF9210)
+000FFFFA318  00180049229 (00000000000, 00000000000, 00000000000, 001005D1D3C)
+000FFFFA318  00180049262 (0018026DFC9, 000FFFFA1C8, 000FFFFA318, 00000000000)
+000FFFFA318  001800B5C18 (00000000000, 00000000000, 00000000000, 00000000000)
+000FFFFA318  001800B5D9D (000FFFFA330, 00000000000, 00000000000, 00000000000)
+000FFFFA5E0  001800B73CC (000FFFFA330, 00000000000, 00000000000, 00000000000)
+End of stack trace

package.json

@@ -21,8 +21,8 @@
     "build": "parcel build ./src/index.html"
   },
   "author": {
-    "name": "Build For SDG",
-    "email": "buildforsdg@andela.com"
+    "name": "Uzor uchenna",
+    "email": "ucheuzor24@gmail.com"
   },
   "homepage": "https://github.com/BuildForSDG/js-starter#readme",
   "repository": {
@@ -38,9 +38,11 @@
     "formik": "^2.1.4",
     "jwt-decode": "^2.2.0",
     "parcel-bundler": "^1.12.4",
+    "re": "^0.1.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
+    "react-toastify": "^6.0.6",
     "yup": "^0.29.0"
   },
   "devDependencies": {

src/app.js

@@ -5,10 +5,8 @@ import About from './component/Pages/About';
 import SignIn from './component/SignIn/Login';
 import SignUp from './component/SignUp/SignUp';
 import './style.css';
-import SponsorHomePage from './component/sponsorPages/SponsorHomePage';
-import SponsorEditProfile from './component/sponsorPages/EditProfile/SponsorEditProfileHome';
-import confirmationPage from './component/confirmationPage/confirmation';
-import VerifyStatus from './component/confirmationPage/VerifyStatus';
+import  Donate from './component/Donate/Donate';
+
 
 const App = () => (
 
@@ -17,7 +15,7 @@ const App = () => (
                 <Route
                     path = '/'
                     exact
-                    component = {HomePage}
+                    component = { HomePage }
                 />
                 <Route
                     path ='/about'
@@ -30,23 +28,10 @@ const App = () => (
                 <Route
                     path ='/signup'
                     component = {SignUp}
-                />
-                <Route
-                    path ='/sponsorDashboard'
-                    component = {SponsorHomePage}
-                />
-                <Route
-                    path ='/sponsorEditProfile'
-                    component = {SponsorEditProfile}
-                />
-                <Route
-                    path ='/confirmationPage'
-                    exact
-                    component = { confirmationPage }
                 />
                  <Route
-                    path ='/verifyStatus'
-                    component = { VerifyStatus }
+                    path ='/donate'
+                    component = {Donate}
                 />
             </Switch>
        </Router>

src/component/Common/Footer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 
 const Footer = () => (
         <div className ='container-fluid text-center padding' style = {{ backgroundColor: '#342F6A' }}>
@@ -22,7 +23,7 @@ const Footer = () => (
                 <h5>Join our community</h5>
                 <h5> to help empower</h5>
                 <h5 className ='mb-md-5 mb-3'> farmer</h5>
-                <a href ='#' className ='btn btn-success px-4' style = {{ borderRadius: '2.5em' }} >Get Started</a>
+                <Link to ='/SignUp' className ='btn btn-success px-4' style = {{ borderRadius: '2.5em' }} >Get Started</Link>
             </div>
             <div className ='col-lg-12'>
               <hr className="light-100" />

src/component/Common/Header.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 const Header = (props) => (
             <div>
@@ -11,7 +11,7 @@ const Header = (props) => (
                             {props.color ? <div className="masthead-heading text-uppercase">{props.subtitle}</div>
                               : <div className="masthead-heading text-uppercase">{props.subtitle}</div>}
                             {props.showButton
-                              ? <NavLink className="btn btn-success btn-xl text-uppercase" id ='btn-link' to = {props.link}> {props.buttonText}</NavLink> : null
+                              ? <Link className="btn btn-success btn-xl text-uppercase" id ='btn-link' to = {props.link}> {props.buttonText}</Link> : null
                             }
                         </div>
                      </div>

src/component/Common/Navigation.js

@@ -2,25 +2,26 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 const Navigation = () => (
-      <div>
+    <div>
         <nav className="navbar navbar-expand-lg navbar-light bg-light fixed-top">
-            <NavLink className="navbar-brand" to="/"><span id ='nav-logo'>Empower</span>Farmers</NavLink>
+            <NavLink className="navbar-brand" to="/"><span id='nav-logo'>Empower</span>Farmers</NavLink>
             <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span className="navbar-toggler-icon"></span>
             </button>
 
             <div className="collapse navbar-collapse" id="navbarSupportedContent">
-               <ul className="navbar-nav mr-auto">
-                 <li className="nav-item active">
-                    <NavLink className="nav-link" to="/">Home <span className="sr-only">(current)</span></NavLink>
-                 </li>
-                 <li className="nav-item">
-                    <NavLink className="nav-link" to="/about">About Us</NavLink>
-                 </li>
-              </ul>
-              <ul className ='nav navbar-nav navbar-right navpadding '>
-                    <li><NavLink className ='nav-link bg-success px-3 linkcol mr-md-3' to="/signup">Sign Up</NavLink></li>
-                    <li><NavLink className ='nav-link bg-success px-3 linkcol mr-md-3' to="/login">Login</NavLink></li>
+                <ul className="navbar-nav mr-auto">
+                    <li className="nav-item active">
+                        <NavLink className="nav-link" to="/">Home <span className="sr-only">(current)</span></NavLink>
+                    </li>
+                    <li className="nav-item">
+                        <NavLink className="nav-link " to="/about">About Us</NavLink>
+                    </li>
+                </ul>
+                <ul className='nav navbar-nav navbar-right navpadding '>
+                    <li><NavLink className='nav-link bg-success px-3 linkcol mr-md-3' to="/signup">Sign Up</NavLink></li>
+                    <li><NavLink className='nav-link bg-success px-3 linkcol mr-md-3' to="/login">Login</NavLink></li>
+                    <li><NavLink className='nav-link bg-success px-3 linkcol mr-md-3' to="/donate">Donate</NavLink></li>
                 </ul>
             </div>
         </nav>

src/component/Common/ProductItem.js

@@ -1,16 +1,16 @@
 import React from 'react';
 
 const ProductItem = (props) => (
-        <div className ='col-sm-6 col-lg-3 pt-3' >
-         <div className="card" >
-            <img src={props.image} className="card-img-top" alt="..." />
-            <div className="card-body">
-               <h5 className="card-title products-col">{props.title}</h5>
-               <p className="card-text font-weight-bold">{props.price}</p>
-               <a href="#" className="btn btn-success px-4 btn-product">{props.buttonText}</a>
-            </div>
+   <div className='col-sm-6 col-lg-3 pt-3' >
+      <div className="card" style={{ borderRadius: '10px', outline: 'none' }}>
+         <img src={props.image} className="card-img-top" alt="..." />
+         <div className="card-body">
+            <h5 className="card-title products-col">{props.title}</h5>
+            <p className="card-text font-weight-bold">{props.price}</p>
+            <a href="#" className="btn btn-success px-4 btn-product">{props.buttonText}</a>
          </div>
-       </div>
+      </div>
+   </div>
 );
 
 export default ProductItem;

src/component/Common/Products.js

@@ -36,21 +36,23 @@ const products = [
 export class Products extends Component {
   render() {
     return (
-            <div className ='container text-center my-4' style = {{ backgroundColor: '#F2F2F2' }}>
-                <div className ='row'>
-                    <div className ='col-lg-12 pt-3 text-success'>
-                        <h2>Products</h2>
-                    </div>
-                </div>
-                <div className ='row reduced-width mb-4 mt-2'>
-                    {products.map((product, index) => <ProductItem {...product} key = {index} />)}
-                </div>
-                <div className ='row'>
-                    <div className ='col-lg-12 text-center'>
-                    <h5><a href = '#' className ='card-link'>More Products → </a></h5>
-                    </div>
-                </div>
+      <div className='container-fluid text-center' style={{ backgroundColor: '#F2F2F2' }}>
+        <div className="mx-5">
+          <div className='row'>
+            <div className='col-lg-12 pt-3 text-success'>
+              <h2>Products</h2>
             </div>
+          </div>
+          <div className='row reduced-width mb-4 mt-2'>
+            {products.map((product, index) => <ProductItem {...product} key={index} />)}
+          </div>
+          <div className='row'>
+            <div className='col-lg-12 text-center'>
+              <h5><a href='#' className='card-link mb-5'>More Products → </a></h5>
+            </div>
+          </div>
+        </div>
+      </div>
     );
   }
 }