CSS Styling

src/components/ExpenseList.js

@@ -1,14 +1,14 @@
 import React, { useContext, useState, useEffect } from 'react';
 import ExpenseItem from './ExpenseItem';
 import { AppContext } from '../context/AppContext';
-
+import './css/ExpenseList.css'
-
 
 const ExpenseList = () => {
 	const [whole, setWhole] = useState('');
 	const [decimal, setDecimal] = useState('');
 	const [transaction, setTransactions] = useState('');
 	const [category, setCategories] = useState('');
+	const [time, setTime] = useState('');
 
 	function getSessionKey() {
 		var cookies = document.cookie.split(';');
@@ -68,13 +68,41 @@ const ExpenseList = () => {
 		}
 	  }
 
-	  async function buildTable(data1, data2){
+	  async function getDate() {
+		try {
+		  const response = await fetch('https://api.bb.gabefarrell.com/w/transactions/recent', {
+			method: 'GET',
+			headers: {
+			  'x-session-key': getSessionKey(),
+			},
+		  });
+		  const data = await response.json();
+		  const timestamp = data.transactions.map((item)=>item.timestamp);
+		  let dateFormat = [];
+		  let date, month, day;
+		  for (let i = 0; i < timestamp.length; i++) {
+			date = new Date(timestamp[i]);
+			month = date.getMonth();
+			day = date.getDay();
+			console.log(month, day);
+			dateFormat.push(month + '/' + day);
+		  }
+		 //let dateFormat = new Date(timestamp[0]);
+		//    console.log(date); 
+		  return dateFormat;
+		} catch (error) {
+		  console.error(error);
+		}
+	  }
+
+	  async function buildTable(data1, data2, data3){
 			var table = document.getElementById('myTable')
 	
 			for (var i = 0; i < data1.length; i++){
 				var row = `<tr>
 								<td>${data1[i]}</td>
-								<td>${data2[i]}</td>
+								<td>$${data2[i]}</td>
+								
 						  </tr>`
 				table.innerHTML += row
 	
@@ -82,17 +110,18 @@ const ExpenseList = () => {
 			}
 		}
 		
-		buildTable(category, transaction);
+		buildTable(category, transaction, time);
 
 	  async function fetchTransactions() {
 		const categories = await getTransactionsCategory();
 		const transaction_balance = await getTransactionsBalance();
+		const date = await getDate();
 		
 			
 
 		setCategories(categories);
 		setTransactions(transaction_balance);
-
+		setTime(date);
 	}
 	
 	useEffect(() => {

src/components/ExpenseTotal.js

@@ -23,9 +23,10 @@ const ExpenseTotal = () => {
 	}, [])
 
 	return (
-		<div className='widget p-4'>
+		<div>
-			<img src={logo} className='expenseTotalIcon'></img>
+			<h5 class="textttt">This Month's Expenses:</h5>
-			<span className='widgetText'>This Month's Expenses: ${expense}</span>
+			<img src={logo} class="imageee"></img>
+			<h1 class="displayyyy">${expense}</h1>
 		</div>
 	);
 };

src/components/Remaining.js

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
-import './css/ViewBudget.css'
+import './css/Remaining.css'
-import logo from './widget_logos/current_balance_logo.png';
+import logo from './widget_logos/budget_logo.png';
 
 export default function Remaining() {
 	const [budget, setBudget] = useState('');
@@ -107,7 +107,10 @@ export default function Remaining() {
 			{/* <img src={logo}></img> 
 			<span>Current Balance: ${data}</span> */}
 			{/* <button onClick={apiGet()}> TEST</button> */}
-			 <h1>{budget}</h1> 
+			 <h5 class="text">Budget Remaining</h5>
+			 
+			 
+			 <img src={logo} class="image"></img><h1 class="display">${budget}</h1> 
 			 <form id="form" onSubmit={handleSubmit}>
       			<input 
 				type = "text"

src/components/ViewBudget.js

@@ -110,7 +110,9 @@ export default function FetchAPI() {
 			{/* <img src={logo}></img> 
 			<span>Current Balance: ${data}</span> */}
 			{/* <button onClick={apiGet()}> TEST</button> */}
-			 <h1>{balance}</h1> 
+			<h5 class="text">Current Balance</h5>
+			<img src={logo} class="imagee"></img>
+			 <h1 class="displayy">${balance}</h1> 
 			 <form id="form" onSubmit={handleSubmit}>
       			<input 
 				type = "text"

src/components/css/ExpenseList.css

@@ -0,0 +1,6 @@
+td {
+    padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 50px;
+  border: 1px solid;
+}

src/components/css/ExpenseTotal.css

@@ -1,4 +1,16 @@
-.widgetText {
+.imageee {
-    padding-left: 1em;
+    margin-top: 50px;
-    color: #333;
+    margin-left: 20px;
+    max-width: 50px;
+}
+
+.displayyyy {
+    margin-top: 50px;
+    margin-left: 120px;
+    float: right;
+}
+
+.textttt {
+    position: fixed;
+    top: 10px;
 }

src/components/css/Remaining.css

@@ -1,3 +1,14 @@
-img {
+.image {
-    width: 50px;
+    margin-top: 50px;
+    margin-left: 20px;
+    width: 70px;
+}
+
+.display {
+    margin-top: 50px;
+}
+
+.text {
+    position: fixed;
+    top: 10px;
 }

src/components/css/ViewBudget.css

@@ -1,7 +1,14 @@
+.imagee {
+    margin-top: 50px;
+    margin-left: 20px;
+    width: 50px;
+}
 
-/* MAKE SURE TO BE SPECIFIC WITH STYLING CUZ THIS CHANGED DIFFERENT SPANS
+.displayy {
-span {
+    margin-top: 50px;
-    float: right;
-    margin-right: 50px;
 }
-*/
+
+.text {
+    position: fixed;
+    top: 10px;
+}

src/pages/Dashboard.jsx

@@ -3,7 +3,7 @@ import  { useState } from 'react'
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 import { AppProvider } from '../context/AppContext';
-import FetchAPI from '../components/budget';
+import FetchAPI from '../components/Budget';
 import ExpenseTotal from '../components/ExpenseTotal';
 import ExpenseList from '../components/ExpenseList';
 import AddExpenseForm from '../components/AddExpenseForm';
@@ -27,8 +27,8 @@ export default function Dashboard() {
 					<div className='col-sm widget d-flex align-items-center justify-content-between'>
 						<RemainingBudget />
 					</div>
-					<div className='col-sm'>
+					<div className='col-sm widget d-flex align-items-center justify-content-between'>
-						{/* <ExpenseTotal /> */}
+						<ExpenseTotal />
 					</div>
 				</div>