Merge pull request #14 from Daddysboi/feature/transaction

Feature/transaction

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",

src/App.css

@@ -1,22 +1,32 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700;800;900&display=swap");
-
 
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700;800;900&display=swap");
 
+/* 
 .paystack-button {
   cursor: pointer;
   text-align: center;
   font-size: 10px;
   letter-spacing: 0.1rem;
   text-transform: uppercase;
-  background-color: #0fef31;
+  background-color: #00ff00;
   font-weight: bold;
-  color: #e0eafc;
+  color: #ffffff;
   border: none;
   border-radius: 5px;
-  width: 30%;
-  height: 30px;
-  margin-top: 10px;
-  &:hover{
-    background-color: #026712;
-  }
-}
+  width: 5rem;
+  height: 2rem;
+  margin: 2rem 0;
+
+  transition: background-color 0.3s;
+  display: block;
+}
+
+.paystack-button:hover {
+  background-color: #00cc00;
+}
+
+.paystack-button:focus {
+  outline: none;
+}
+
+ */

src/App.js

@@ -31,20 +31,12 @@ const router = createBrowserRouter(
       <Route path="/login" element={<SignIn />} />
       <Route path="/signup" element={<SignUp />} />
       <Route path="/forgot-password" element={<ForgotPassword />} />
-
-      <Route path="/dashboard" index element={<Dashboard />} />
       <Route
         path="/reset-password/:userId/:resetString"
         element={<ResetPassword />}
       />
-      <Route
-        path="/otp"
-        element={
-          <AuthGuard>
-            <Otp />
-          </AuthGuard>
-        }
-      />
+      <Route path="/otp" element={<Otp />} />
+      <Route path="/dashboard" index element={<Dashboard />}></Route>
       <Route path="/" element={<RootLayout />}>
         <Route path="/" element={<Home />} />
         <Route
@@ -53,7 +45,6 @@ const router = createBrowserRouter(
         ></Route>
         <Route path="/privacy-policy" element={<PrivacyPolicy />} />
         <Route path="/terms-and-conditions" element={<TermsAndConditions />} />
-
         <Route path="*" element={<Error404 />} />
       </Route>
     </Route>

src/Components/Dashboard/Dashboard.js

@@ -29,6 +29,7 @@ import { USER_ID, USER_TOKEN } from "../../services/CONSTANTS";
 const StyledContainer = styled.div`
   display: flex;
   height: 100vh;
+  background-color: #f8f7f7;
   overflow: hidden;
 `;
 
@@ -207,8 +208,8 @@ const Dashboard = () => {
 
   const logOut = () => {
     googleLogout();
-    setUser({});
-    setProfile({});
+    // setUser({}); // Clear user state
+    setProfile({}); // Clear profile state
     localStorage.removeItem("token");
     localStorage.removeItem(USER_TOKEN);
     localStorage.removeItem(USER_ID);
@@ -290,10 +291,10 @@ const Dashboard = () => {
         <StyledRight>
           {page === "home" && <Home />}
           {page === "profile" && <Profile />}
-          {page === "transactions" && <Transactions />}
+          {page === "transactions" && <Transactions navigateTo={navigateTo} />}
           {page === "wallet" && <Wallet />}
           {page === "settings" && <Settings />}
-          {page === "tracker" && <Tracker />}
+          {page === "tracker" && <Tracker navigateTo={navigateTo} />}
           {page === "resolution" && <Resolution />}
         </StyledRight>
       </StyledContainer>

src/Components/Dashboard/Header.Dashboard.js

@@ -1,13 +1,12 @@
 import React, { useState, useEffect, useContext } from "react";
 import styled from "styled-components";
 import { NavLink } from "react-router-dom";
+import logo from "../../assets/logo/favicon.png";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUser } from "@fortawesome/free-regular-svg-icons";
 import axios from "axios";
 import Switch from "react-switch";
-
 import { userContext } from "../../App";
-import logo from "../../assets/logo/favicon.png";
 
 const StyledContainer = styled.div`
   display: flex;
@@ -20,26 +19,19 @@ const StyledContainer = styled.div`
   top: 0;
   background: #ffffff;
   z-index: 1;
-  align-items: center;
-  justify-content: space-between;
 `;
 
 const StyledLogo = styled(NavLink)`
   color: #f26600;
   font-size: 2rem;
   text-decoration: none;
-
-  font-weight: 600;
 `;
 
 const StyledImg = styled.img`
   height: 2rem;
-  padding-right: 0.5rem;
 `;
 
-const StyledAccount = styled.div`
-  font-size: 0.9rem;
-`;
+const StyledAccount = styled.div``;
 
 const StyledNavLink = styled(NavLink)`
   color: black;
@@ -54,7 +46,7 @@ const StyledProfilePix = styled.img`
 `;
 
 const StyledAccountIcon = styled(FontAwesomeIcon)`
-  font-size: 1rem;
+  font-size: 1.5rem;
   color: gray;
 `;
 
@@ -100,13 +92,16 @@ const Header = () => {
         if (res.status === 200) {
           const contentType = res.headers["content-type"];
           if (contentType.includes("image")) {
+            // console.log("Image data:", res.data);
             setUserData((prevUserData) => ({
               ...prevUserData,
               profilePicture: url,
             }));
           }
         } else {
           console.error("Failed to fetch user data");
+          const jsonData = JSON.parse(new TextDecoder().decode(res.data));
+          console.log("JSON data:", jsonData);
         }
       } catch (error) {
         console.error("Error loading user data:", error);
@@ -131,13 +126,13 @@ const Header = () => {
               <StyledLoader />
             ) : (
               <>
-                {profile && profile.picture ? (
-                  <StyledProfilePix src={profile.picture} alt="" />
+                {profile.picture ? (
+                  <StyledProfilePix src={profile.picture} alt={profile.name} />
                 ) : (
                   <StyledAccountIcon icon={faUser} />
                 )}
                 <span style={{ marginLeft: "0.5rem", textDecoration: "none" }}>
-                  {profile && profile.name ? profile.name : "User"}
+                  {profile.name || "User"}
                 </span>
               </>
             )}