Review Modal dynamic data load from API

2024-08-07 14:34:32 +05:30 · 2024-08-07 14:34:32 +05:30 · d17a2811da
commit d17a2811da
parent a42e51f216
7 changed files with 181 additions and 85 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -16,6 +16,7 @@
        "@mui/material-nextjs": "^5.16.6",
        "@tanstack/react-table": "^8.20.1",
        "axios": "^1.7.3",
+        "moment": "^2.30.1",
        "next": "14.2.5",
        "react": "^18",
        "react-dom": "^18",
@ -3842,6 +3843,15 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "@mui/material-nextjs": "^5.16.6",
    "@tanstack/react-table": "^8.20.1",
    "axios": "^1.7.3",
+    "moment": "^2.30.1",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18",
--- a/src/app/(dashboard)/review/page.tsx
+++ b/src/app/(dashboard)/review/page.tsx
@ -4,8 +4,9 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Modal from "@mui/material/Modal";
 import Stack from "@mui/material/Stack";
-import ReviewModalContent from "./reviewModalContent/ReviewModalContent";
+import ReviewModalContent from "../../../components/reviewModal/components/reviewModalContent/ReviewModalContent";
 import { Typography } from "@mui/material";
+import TanStackTable from "@/components/table/TanStackTable";
 const style = {
  position: "absolute" as "absolute",
  top: "50%",
@ -34,37 +35,7 @@ const labels: { [index: string]: string } = {
 };

 const HomePage = () => {
-  const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-  return (
-    <Box>
-      <Button onClick={handleOpen}>Open modal</Button>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={style}>
-          <Typography
-            variant="h5"
-            sx={{ lineHeight: 1, marginBlockEnd: "20px" }}
-          >
-            Reviews
-          </Typography>
-          <Stack
-            spacing={2}
-            direction={"column"}
-            sx={{ maxHeight: "350px", overflow: "auto" }}
-          >
-            <ReviewModalContent />
-            <ReviewModalContent />
-          </Stack>
-        </Box>
-      </Modal>
-    </Box>
-  );
+  return <Box>{/* <Button onClick={handleOpen}>Open modal</Button> */}</Box>;
 };

 export default HomePage;
--- a/src/components/reviewModal/ReviewModal.tsx
+++ b/src/components/reviewModal/ReviewModal.tsx
@ -0,0 +1,88 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Stack from "@mui/material/Stack";
+import ReviewModalContent from "./components/reviewModalContent/ReviewModalContent";
+import { Typography } from "@mui/material";
+
+const style = {
+  position: "absolute" as "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90%",
+  maxWidth: 400,
+  bgcolor: "background.paper",
+  border: "none",
+  boxShadow: 24,
+  borderRadius: 4,
+  paddingInline: 2,
+  paddingBlock: 4,
+};
+
+const labels: { [index: string]: string } = {
+  0.5: "Useless",
+  1: "Useless+",
+  1.5: "Poor",
+  2: "Poor+",
+  2.5: "Ok",
+  3: "Ok+",
+  3.5: "Good",
+  4: "Good+",
+  4.5: "Excellent",
+  5: "Excellent+",
+};
+
+interface ReviewModalProps {
+  open: boolean;
+  handleClose: () => void;
+  reviewModalData: ReviewModalData[];
+}
+
+export interface ReviewModalData {
+  reviewerName: string;
+  reviewerEmail: string;
+  date: string;
+  comment: string;
+  rating: number;
+}
+
+const ReviewModal = ({
+  open,
+  handleClose,
+  reviewModalData,
+}: ReviewModalProps) => {
+  console.log("reviewModalData", reviewModalData);
+
+  return (
+    <Box>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography
+            variant="h5"
+            sx={{ lineHeight: 1, marginBlockEnd: "20px" }}
+          >
+            Reviews
+          </Typography>
+          <Stack
+            spacing={2}
+            direction={"column"}
+            sx={{ maxHeight: "350px", overflow: "auto" }}
+          >
+            {reviewModalData.map((review: ReviewModalData, index: number) => (
+              <ReviewModalContent key={index} data={review} />
+            ))}
+          </Stack>
+        </Box>
+      </Modal>
+    </Box>
+  );
+};
+
+export default ReviewModal;
--- a/src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx
+++ b/src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx
@ -3,11 +3,16 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Rating from "@mui/material/Rating";
 import StarIcon from "@mui/icons-material/Star";
-import { Avatar } from "@mui/material";
+import moment from "moment";
+import { ReviewModalData } from "../../ReviewModal";

-const ReviewModalContent = () => {
-  const [value, setValue] = React.useState<number | null>(2);
-  const [hover, setHover] = React.useState(-1);
+interface ReviewModalContentProps {
+  data: ReviewModalData;
+}
+
+const ReviewModalContent = ({ data }: ReviewModalContentProps) => {
+  // const [value, setValue] = React.useState<number | null>(data?.rating);
+  // const [hover, setHover] = React.useState(-1);
  return (
    <>
      <Box
@ -33,10 +38,10 @@ const ReviewModalContent = () => {
              }}
            >
              <Typography variant="body1" sx={{ m: 0, lineHeight: 1 }}>
-                Amit Roy
+                {data?.reviewerName}
              </Typography>
              <Typography variant="caption" sx={{ m: 0 }}>
-                amit.roy@sentientgeeks.com
+                {data?.reviewerEmail}
              </Typography>
            </Box>
            <Box
@ -49,34 +54,36 @@ const ReviewModalContent = () => {
            >
              <Rating
                name="hover-feedback"
-                value={value}
+                value={data?.rating}
                size="small"
                precision={0.5}
-                onChange={(event, newValue) => {
-                  setValue(newValue);
-                }}
-                onChangeActive={(event, newHover) => {
-                  setHover(newHover);
-                }}
+                readOnly
+                // onChange={(event, newValue) => {
+                //   setValue(newValue);
+                // }}
+                // onChangeActive={(event, newHover) => {
+                //   setHover(newHover);
+                // }}
                emptyIcon={
                  <StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />
                }
              />
-              <Typography
-                variant="caption"
-                display="block"
-                gutterBottom
-                sx={{ textAlign: "center", m: 0 }}
-              >
-                April 17, 03:30PM
-              </Typography>
+              {data?.date && (
+                <Typography
+                  variant="caption"
+                  display="block"
+                  gutterBottom
+                  sx={{ textAlign: "center", m: 0 }}
+                >
+                  {moment(data?.date).format("MMMM D, hh:mmA")}
+                </Typography>
+              )}
            </Box>
          </Box>
        </Box>

        <Typography variant="body2" id="modal-modal-description" sx={{ mt: 2 }}>
-          "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus
-          Dolorem."
+          {data?.comment}
        </Typography>
      </Box>
    </>
--- a/src/components/table/TanStackTable.tsx
+++ b/src/components/table/TanStackTable.tsx
@ -8,9 +8,14 @@ import {
 import styles from "./TanStackTable.module.scss";
 import axios from "axios";
 import { useEffect, useState } from "react";
+import ReviewModal from "../reviewModal/ReviewModal";

 const TanStackTable = () => {
  const [tableData, setTableData] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [reviewModalData, setReviewModalData] = useState([]);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
  const columns: any = [
    {
      header: "ID",
@ -67,7 +72,9 @@ const TanStackTable = () => {
  ];

  const handleButtonClick = (rowData: any) => {
-    console.log("Button clicked for row:", rowData?.reviews);
+    setReviewModalData(rowData?.reviews);
+    handleOpen();
+    // console.log("Button clicked for row:", rowData?.reviews);
  };

  const table = useReactTable({
@ -85,35 +92,42 @@ const TanStackTable = () => {
  }, []);

  return (
-    <div className="w3-container">
-      <table className="w3-table-all">
-        <thead>
-          {table.getHeaderGroups().map((headerGroup: any) => (
-            <tr key={headerGroup?.id}>
-              {headerGroup.headers.map((header: any) => (
-                <th key={header?.id}>
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row: any) => (
-            <tr key={row.id}>
-              {row.getVisibleCells().map((cell: any) => (
-                <td key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+    <>
+      <div className="w3-container">
+        <table className="w3-table-all">
+          <thead>
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <tr key={headerGroup?.id}>
+                {headerGroup.headers.map((header: any) => (
+                  <th key={header?.id}>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row: any) => (
+              <tr key={row.id}>
+                {row.getVisibleCells().map((cell: any) => (
+                  <td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <ReviewModal
+        open={open}
+        handleClose={handleClose}
+        reviewModalData={reviewModalData}
+      />
+    </>
  );
 };

--- a/yarn.lock
+++ b/yarn.lock
@ -2176,6 +2176,11 @@ minimist@^1.2.0, minimist@^1.2.6:
  resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==

+moment@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 ms@^2.1.1, ms@2.1.2:
  version "2.1.2"
  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"