Skip to content

Commit 402464a

Browse files
nandcodernandcoder
authored
Merge pull request #25 from nandcoder/nrj
form and validation
2 parents df994df + 09de9ae commit 402464a

File tree

12 files changed

+539
-305
lines changed

12 files changed

+539
-305
lines changed

‎src/components/AddButton.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import AddRoundedIcon from '@mui/icons-material/AddRounded';
44

55
const AddButton = ({ handler }) => {
66
return (
7-
<Button style={{ position: "fixed", width: "60px", height: "60px", right: "5%", bottom: "15vh", borderRadius: "50%", border: '0', backgroundColor: "black", color: '#04bef8' }} onClick={handler}><AddRoundedIcon fontSize='large' /> </Button>
7+
<Button style={{ zIndex: 5, position: "fixed", width: "60px", height: "60px", right: "5%", bottom: "15vh", borderRadius: "50%", border: '0', backgroundColor: "black", color: '#04bef8' }} onClick={handler}><AddRoundedIcon fontSize='large' /> </Button>
88
)
99
}
1010

‎src/components/Authentication/Profile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Profile = () => {
3838
<Dropdown as={ButtonGroup} align={{ lg: 'end' }}>
3939
{/* <Avatar name={userData[0].data.name} size='sm' bg="blue.500" /> */}
4040
{userData?.map((item, key) => (
41-
<>
41+
<div key={key} style={{ display: "flex" }}>
4242
<Avatar name={item.data.name} size='sm' bg="blue.500" />
4343
<Dropdown.Toggle as={NavLink} split variant="success" id="dropdown-split-basic" />
4444
<Dropdown.Menu key={key} style={{ padding: 0, textAlign: "center" }}>
@@ -49,7 +49,7 @@ const Profile = () => {
4949
logout();
5050
}} >Logout</Dropdown.Item>
5151
</Dropdown.Menu>
52-
</>
52+
</div>
5353
))}
5454
</Dropdown>
5555
</>

‎src/components/Card.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function BasicExample({ head, text, link, imgUrl }) {
2020
{text}
2121
</Card.Text>
2222
<Link style={{ position: 'absolute', bottom: "5px", left: "30%" }} to={link}>
23-
<Button variant="info">Go somewhere</Button>
23+
<Button variant="info">Details</Button>
2424
</Link>
2525
</Card.Body>
2626
</Card>

‎src/components/GroupTable.js‎

Lines changed: 70 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,17 @@
11
import Table from 'react-bootstrap/Table';
2-
// import Badge from 'react-bootstrap/Badge';
3-
// import data from '../assets/TransactionData';
42
import { db } from '../utils/firebase';
53
import { useContext, useEffect, useState } from 'react';
64
import { AuthContext } from './Authentication/AuthProvider';
7-
import { Badge, IconButton } from '@chakra-ui/react';
5+
import { DataContext } from './Authentication/DataProvider';
6+
import { Badge, Box, IconButton, useToast } from '@chakra-ui/react';
87
import DeleteIcon from '@mui/icons-material/Delete';
98
import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
10-
// import getUserById from '../assets/queries';
11-
12-
// function descendingComparator(a, b, orderBy) {
13-
// if (b[orderBy] < a[orderBy]) {f
14-
// return -1;
15-
// }
16-
// if (b[orderBy] > a[orderBy]) {
17-
// return 1;
18-
// }
19-
// return 0;
20-
// }
21-
// function getComparator(order, orderBy) {
22-
// return order === 'desc'
23-
// ? (a, b) => descendingComparator(a, b, orderBy)
24-
// : (a, b) => -descendingComparator(a, b, orderBy);
25-
// }
26-
// function stableSort(array, comparator) {
27-
// const stabilizedThis = array.map((el, index) => [el, index]);
28-
// stabilizedThis.sort((a, b) => {
29-
// const order = comparator(a[0], b[0]);
30-
// if (order !== 0) {
31-
// return order;
32-
// }
33-
// return a[1] - b[1];
34-
// });
35-
// return stabilizedThis.map((el) => el[0]);
36-
// }
37-
function GroupTable({ id }) {
9+
10+
function GroupTable({ request, setRequest, id }) {
3811
const { user } = useContext(AuthContext);
12+
const { users } = useContext(DataContext)
3913
const [transactions, setTransactions] = useState([]);
40-
14+
const toast = useToast();
4115

4216
useEffect(() => {
4317
let temp = [];
@@ -47,62 +21,63 @@ function GroupTable({ id }) {
4721
.get()
4822
.then((querySnapshot) => {
4923
querySnapshot.forEach((doc) => {
50-
51-
52-
// db.collection("users")
53-
// .where("userId", "==", doc.data().paidBy)
54-
// .get()
55-
// .then((querySnapshot) => {
56-
// querySnapshot.forEach((payer) => {
57-
// // payer.data() is never undefined for query payer snapshots
58-
// // console.log(payer.id, " => ", payer.data());
59-
// arr.push(payer.data());
60-
// });
61-
62-
// })
63-
// .catch((error) => {
64-
// console.log("Error getting documents: ", error);
65-
// })
66-
67-
// doc.data() is never undefined for query doc snapshots
6824
console.log(doc.id, " => ", doc.data());
6925
temp.push({ id: doc.id, data: doc.data() });
70-
// temp.push(doc.data());
7126
});
7227
})
7328
.catch((error) => {
7429
console.log("Error getting documents: ", error);
7530
})
7631
.finally(() => {
7732
setTransactions(temp)
78-
console.log(temp);
79-
// setUsers(arr)
8033
});
81-
82-
83-
// const getUserById=(id)=>{
84-
// db.collection("users")
85-
// .where("userId", "==", id)
86-
// .get()
87-
// .then((querySnapshot) => {
88-
// querySnapshot.forEach((doc) => {
89-
// // doc.data() is never undefined for query doc snapshots
90-
// console.log(doc.id, " => ", doc.data());
91-
// temp.push(doc.data());
92-
// });
93-
// })
94-
// .catch((error) => {
95-
// console.log("Error getting documents: ", error);
96-
// })
97-
// .finally(() => setTransactions(temp))
98-
// }
99-
}, [user, id]);
100-
// const getUserName = (id) => {
101-
// console.log(users);
102-
// // console.log(payer);
103-
// return 'payer';
104-
// }
105-
34+
}, [user, id, request]);
35+
36+
const deleteTransaction = (id) => {
37+
db.collection("transactions").doc(id).delete().then(() => {
38+
toast({
39+
title: 'top-right toast',
40+
position: 'top-right',
41+
isClosable: true,
42+
render: () => (
43+
<Box color='white' p={3} bg='red.500'>
44+
Transaction deleted successfully!!
45+
</Box>
46+
),
47+
})
48+
setRequest(!request)
49+
console.log("Document successfully deleted!");
50+
}).catch((error) => {
51+
console.error("Error removing document: ", error);
52+
});
53+
}
54+
const settleTransaction = (id) => {
55+
// Add a new document in collection "cities"
56+
db.collection("transactions").doc(id).set({
57+
status: "settled",
58+
}, { merge: true })
59+
.then(() => {
60+
toast({
61+
title: 'top-right toast',
62+
position: 'top-right',
63+
isClosable: true,
64+
render: () => (
65+
<Box color='white' p={3} bg='green.500'>
66+
Transaction settled up!!
67+
</Box>
68+
),
69+
})
70+
setRequest(!request)
71+
console.log("Document successfully written!");
72+
})
73+
.catch((error) => {
74+
console.error("Error writing document: ", error);
75+
});
76+
}
77+
const getDate = (isoString) => {
78+
const date = new Date(isoString).toDateString()
79+
return date
80+
}
10681

10782
return (
10883

@@ -134,8 +109,10 @@ function GroupTable({ id }) {
134109

135110

136111
<div className="ms-3">
137-
<p className="fw-bold mb-1">User 1</p>
138-
<p className="text-muted mb-0">928338479</p>
112+
<p className="fw-bold mb-1">{transaction.data.title}</p>
113+
<p className="text-muted mb-0">
114+
{users && transaction.data.paidBy === user.uid ? "YOU Paid" : `Paid by: ${users[transaction.data.paidBy].name}`}
115+
</p>
139116
</div>
140117

141118

@@ -144,7 +121,7 @@ function GroupTable({ id }) {
144121
<p className="text-muted mb-0">{transaction.data.desc}</p>
145122
</td>
146123
<td>{transaction.data.day}</td>
147-
<td>{transaction.data.date}</td>
124+
<td>{getDate(transaction.data.datetime)}</td>
148125
<td>
149126

150127
{transaction.data.status !== 'pending' ? (
@@ -167,20 +144,24 @@ function GroupTable({ id }) {
167144
<td>{transaction.data.amount}</td>
168145

169146
<td>
170-
<IconButton
171-
variant='outline'
172-
colorScheme='green'
173-
aria-label='Send email'
174-
icon={<CheckCircleOutlineRoundedIcon />}
175-
/>
176-
{" "}
177147
<IconButton
178148
variant='outline'
179149
colorScheme='red'
180150
aria-label='Send email'
151+
onClick={() => deleteTransaction(transaction.id)}
181152
icon={<DeleteIcon />}
182153
/>
183-
{/* <button type="button" className="btn btn-primary btn-sm">Edit</button> */}
154+
{" "}
155+
{transaction.data.status === 'pending' && transaction.data.paidBy === user.uid && (
156+
<IconButton
157+
variant='outline'
158+
colorScheme='green'
159+
aria-label='Send email'
160+
onClick={() => settleTransaction(transaction.id)}
161+
icon={<CheckCircleOutlineRoundedIcon />}
162+
/>
163+
)}
164+
184165

185166
</td>
186167
</tr>

0 commit comments

Comments
 (0)