+ {!queryHasDateFields && (
+
}
+ onDelete={handleDateRangeClick}
+ />
+ )}
+ {queryHasDateFields && (
+
}
+ onDelete={() => {
+ resetDateRange();
+ }}
+ />
+ )}
+ {!xsBreakpoint && (
+
+
+
+ )}
+ {xsBreakpoint && (
+
+
+
+
+ )}
+
+ );
+};
+
+export default TransactionListDateRangeFilter;
diff --git a/src/components/TransactionDetail.tsx b/src/components/TransactionDetail.tsx
new file mode 100644
index 0000000..ae87dc6
--- /dev/null
+++ b/src/components/TransactionDetail.tsx
@@ -0,0 +1,214 @@
+import React from "react";
+import { Button, Typography, Grid, Avatar, Paper, IconButton, makeStyles } from "@material-ui/core";
+import { AvatarGroup } from "@material-ui/lab";
+import { ThumbUpAltOutlined as LikeIcon, CommentRounded as CommentIcon } from "@material-ui/icons";
+import { TransactionResponseItem, TransactionRequestStatus, User } from "../models";
+import CommentForm from "./CommentForm";
+import {
+ isPendingRequestTransaction,
+ receiverIsCurrentUser,
+ currentUserLikesTransaction,
+} from "../utils/transactionUtils";
+import CommentsList from "./CommentList";
+import TransactionTitle from "./TransactionTitle";
+import TransactionAmount from "./TransactionAmount";
+
+const useStyles = makeStyles((theme) => ({
+ paper: {
+ padding: theme.spacing(2),
+ display: "flex",
+ overflow: "auto",
+ flexDirection: "column",
+ },
+ paperComments: {
+ marginTop: theme.spacing(6),
+ padding: theme.spacing(2),
+ display: "flex",
+ overflow: "auto",
+ flexDirection: "column",
+ },
+ avatar: {
+ width: theme.spacing(2),
+ },
+ headline: {
+ marginTop: theme.spacing(4),
+ },
+ avatarLarge: {
+ width: theme.spacing(7),
+ height: theme.spacing(7),
+ },
+ avatarGroup: {
+ margin: 10,
+ },
+ redButton: {
+ backgrounColor: "red",
+ color: "#ffffff",
+ backgroundColor: "red",
+ paddingTop: 5,
+ paddingBottom: 5,
+ paddingRight: 20,
+ fontWeight: "bold",
+ "&:hover": {
+ backgroundColor: "red",
+ borderColor: "red",
+ boxShadow: "none",
+ },
+ },
+ greenButton: {
+ marginRight: theme.spacing(2),
+ color: "#ffffff",
+ backgroundColor: "#00C853",
+ paddingTop: 5,
+ paddingBottom: 5,
+ paddingRight: 20,
+ fontWeight: "bold",
+ "&:hover": {
+ backgroundColor: "#4CAF50",
+ borderColor: "#00C853",
+ boxShadow: "none",
+ },
+ },
+}));
+
+type TransactionProps = {
+ transaction: TransactionResponseItem;
+ transactionLike: Function;
+ transactionComment: Function;
+ transactionUpdate: Function;
+ currentUser: User;
+};
+
+const TransactionDetail: React.FC