App Completed

anas-aqeel · Aug 7, 2022 · 94a796e · 94a796e
1 parent 125f160
commit 94a796e
Show file tree

Hide file tree

Showing 9 changed files with 320 additions and 194 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "dotenv": "^16.0.1",
     "faker": "^5.5.3",
     "firebase": "^9.9.2",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",

diff --git a/src/Components/AddTransaction.jsx b/src/Components/AddTransaction.jsx
@@ -1,31 +1,58 @@
 import React, { useState, useContext } from 'react';
 import EditIcon from '@mui/icons-material/Edit';
 import { MyContext } from '../Contex/TxContex'
-import { Box, Modal, Fab, TextField, Button, MenuItem } from '@mui/material';
+import { Modal, Fab } from '@mui/material';
 import { AddTxItem } from '../firebase/utils';
+import TxModal from './Modal/TxModal'
 
-const style = {
-  position: 'absolute',
-  top: '40%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 450,
-  bgcolor: 'background.paper',
-  boxShadow: 'rgba(100, 100, 111, 0.3) 0px 4px 29px 0px',
-  p: 2,
-};
 let handleClose;
+
+
 export default function AddTransaction() {
+
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
+
   handleClose = () => setOpen(false);
+  const { dispatch } = useContext(MyContext);
+  const [title, setTitle] = useState({ error: false, value: '' });
+  const [desc, setDesc] = useState({ error: false, value: '' });
+  const [value, setValue] = useState({ error: false, value: 0 });
+  const [type, setType] = useState({ error: false, value: '' });
+
+  const handleSumbit = () => {
+
+    if (title.value == '') setTitle({ error: true, value: '' });
+    else if (desc.value == '') setDesc({ error: true, value: '' });
+    else if (value.value == 0) setValue({ error: true, value: 0 });
+    else if (type.value == '') setType({ error: true, value: '' });
+
+    else if (!title.error && !desc.error && !value.error && !type.error) {
+      dispatch(
+        {
+          type: 'ADD_TRANSACTION',
+          payload: {
+            title: title.value,
+            desc: desc.value,
+            value: value.value,
+            time: new Date(),
+            type: type.value
+          }
+        })
+      AddTxItem(title.value, desc.value, value.value, new Date(), type.value)
+      handleClose()
+      setTitle({ error: false, value: '' });
+      setDesc({ error: false, value: '' });
+      setValue({ error: false, value: 0 });
+      setType({ error: false, value: '' });
+    }
+  }
 
   return (
     <div>
       <Fab
         onClick={handleOpen}
         style={{
-
           'backgroundColor': 'black',
           'color': 'red',
           'position': 'absolute',
@@ -42,152 +69,20 @@ export default function AddTransaction() {
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <TxModal />
+        <TxModal
+          title={title}
+          setTitle={setTitle}
+          desc={desc}
+          setDesc={setDesc}
+          value={value}
+          setValue={setValue}
+          type={type}
+          setType={setType}
+          handleSumbit={handleSumbit}
+        />
       </Modal>
     </div>
 
   );
 }
 
-const TxModal = () => {
-  const { dispatch } = useContext(MyContext);
-  const [title, setTitle] = useState([false, '']);
-  const [desc, setDesc] = useState([false, '']);
-  const [value, setValue] = useState([false, 0]);
-  const [type, setType] = useState([false, '']);
-
-  const handleSumbit = () => {
-
-    if (title[1] == '') setTitle([true, '']);
-    else if (desc[1] == '') setDesc([true, '']);
-    else if (value[1] == 0) setValue([true, 0]);
-    else if (type[1] == '') setType([true, '']);
-
-    else if (title[0] && desc[0] && value[0] && !type[0]) {
-      dispatch(
-        {
-          type: 'ADD_TRANSACTION',
-          payload: {
-            title: title[1],
-            desc: desc[1],
-            value: value[1],
-            time: new Date(),
-            type: type[1]
-          }
-        })
-      AddTxItem(
-        title[1],
-        desc[1],
-        value[1],
-        new Date(),
-        type[1]
-      )
-      handleClose()
-    }
-  }
-
-  return (
-    <Box sx={style}>
-      <p
-        style={{
-          color: 'rgb(52,52,52)',
-          textAlign: 'center',
-          fontFamily: "Roboto, sans-serif",
-          fontWeight: ' bold',
-          fontSize: '23px'
-        }}
-      >Add New Transaction</p>
-
-      <Box
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          marginBottom: '15px'
-        }}>
-        <TextField
-          error={!title[0]}
-
-          required={true}
-          size="small"
-          id="outlined-basic"
-          label="Title"
-
-          variant="outlined"
-          onChange={(e) => setTitle([
-            e.target.value != '' && e.target.value.split('').length < 15,
-            e.target.value
-          ])}
-        />
-        <TextField
-          error={!value[0]}
-          required={true}
-          size="small"
-          id="outlined-basic"
-          type={'number'}
-          label="Value"
-          variant="outlined"
-          onChange={(e) => setValue([
-            (e.target.value > 0 && e.target.value < 9999999),
-            parseInt(e.target.value)
-          ])}
-        />
-      </Box>
-      <TextField fullWidth={true}
-        size="small"
-        style={{ marginBottom: '15px' }}
-        id="outlined-basic"
-        label="Description"
-        variant="outlined"
-        onChange={(e) => setDesc([
-          e.target.value != '' && e.target.value.split('').length < 70,
-          e.target.value
-        ])}
-        error={!desc[0]}
-        required={true}
-      />
-      <TextField
-        id="outlined-select-currency"
-        select
-        label="Select"
-        SelectProps={type}
-        fullWidth={true}
-        value={type[1]}
-        error={type[0]}
-        required={true}
-        onChange={(e) => setType([(e.target.value == ''), e.target.value])}
-        helperText="Please select your transaction type"
-      >
-        <MenuItem
-          //  onClick={()=>setType('Income')}
-          style={{
-            fontSize: '15px',
-            fontWeight: 'bold',
-            color: 'rgb(0, 100, 0)',
-            border: '1px solid green'
-
-          }}
-          value='Income'>Income</MenuItem>
-        <MenuItem
-          style={{
-            fontSize: '15px',
-            fontWeight: 'bold',
-            color: 'rgb(129, 2, 2)',
-            border: '1px solid red'
-          }}
-          value='Expense'>Expense</MenuItem>
-
-      </TextField>
-
-      <Button
-        onClick={handleSumbit}
-        style={{
-          marginTop: '15px',
-          color: 'red',
-          border: '1px solid red'
-        }} fullWidth={true} variant="outlined" size="medium">
-        Add
-      </Button>
-    </Box>
-  )
-}
-
diff --git a/src/Components/Graphs/Graphs.jsx b/src/Components/Graphs/Graphs.jsx
@@ -1,4 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react'
+import moment from "moment";
+
 import Graph from './Graph'
 import {
   labels_1,
@@ -45,7 +47,8 @@ const Graphs = () => {
         <button
           className={labels[0] == labels_2[0] ? 'active_filter' : ''}
           onClick={() => {
-            setLabels(labels_2.filter((e, i) => i < (new Date().getDay() + 1)));
+
+            setLabels( labels_2 );
             setData(_weeklyData)
           }}>
           Weekly

diff --git a/src/Components/Graphs/utils.js b/src/Components/Graphs/utils.js
@@ -1,3 +1,4 @@
+import moment from "moment";
 export const labels_1 = [
     '12:00 am',
     '3:00 am',
@@ -9,13 +10,13 @@ export const labels_1 = [
     '9:00 pm'
 ];
 export const labels_2 = [
+    'Sunday',
     'Monday',
     'Tuesday',
     'Wednesday',
     'Thursday',
     'Friday',
     'Saturday',
-    'Sunday'
 ];
 export const labels_3 = [
     'January',
@@ -33,6 +34,7 @@ export const labels_3 = [
 ];
 
 export const weeklyFilter = (transactions) => {
+
     return labels_2.map((a, b) => {
         let dayInc = 0;
         let dayExp = 0;
@@ -90,7 +92,7 @@ export const dailyFilter = (transactions) => {
             let hours = formatDate.split(':')[0]
             let amPm = formatDate.split(':')[1]
             if (
-                amPm == _amPm
+                amPm != _amPm
                 && ((hours < _hours) &&
                     i != 0 ? (hours > labels_1[i - 1]?.split(':')[0]) : true)
             ) {