Server side data fetch

README.md

@@ -1,8 +1,33 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Project Name
+
+TEST DEMO
+
+This is a Demo project Developed in NextJS with Tanstack React Table.
+
+## Features
+
+1. **Login**: User authentication functionality.
+2. **Signup**: User registration functionality.
+3. **Table Data**: Data loaded from [Dummy JSON](https://dummyjson.com/products) and displayed on the home page.
+4. **Review Modal**: A modal that opens from the "View Reviews" button in each table row to display product reviews.
 
 ## Getting Started
 
-First, run the development server:
+### Installation
+
+First, install the dependencies:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+### Running the Development Server:
 
 ```bash
 npm run dev
@@ -14,23 +39,30 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open http://localhost:3000 with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+Project Structure
+Login: Navigate to the login page to authenticate users.
+Signup: Navigate to the signup page to register new users.
+Table Data: The home page fetches and displays product data from Dummy JSON.
+Review Modal: Click the "View Reviews" button in any table row to open a modal displaying the product reviews.
+API
+This project uses the Dummy JSON API to fetch product data. The data is displayed in a table on the home page.
 
-## Learn More
+Components
+Login Component: Handles user login functionality.
+Signup Component: Handles user registration functionality.
+Table Component: Displays product data in a table format.
+Review Modal Component: Displays product reviews in a modal when the "View Reviews" button is clicked.
+Contributing
+If you would like to contribute to this project, please fork the repository and submit a pull request.
 
-To learn more about Next.js, take a look at the following resources:
+License
+This project is licensed under the MIT License.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+```
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+This README includes more details about the project structure, components, and API usage.
-
+```
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

src/app/(dashboard)/home/page.tsx

@@ -3,8 +3,10 @@ import { Box, Card, Typography } from "@mui/material";
 import React from "react";
 import CardHeader from "@mui/material/CardHeader";
 import CardContent from "@mui/material/CardContent";
+import homeServices from "@/services/home.services";
 
-const HomePage = () => {
+const HomePage = async () => {
+  const data = await homeServices.getProducts();
   return (
     <Box>
       <Card>
@@ -12,7 +14,7 @@ const HomePage = () => {
           <Typography variant="h4">Projects</Typography>
         </CardHeader>
         <CardContent>
-          <TanStackTable />
+          <TanStackTable data={data} />
         </CardContent>
       </Card>
     </Box>

src/components/table/TanStackTable.tsx

@@ -6,16 +6,17 @@ import {
   flexRender,
 } from "@tanstack/react-table";
 import styles from "./TanStackTable.module.scss";
-import axios from "axios";
 import { useEffect, useState } from "react";
 import ReviewModal from "../reviewModal/ReviewModal";
 
-const TanStackTable = () => {
+const TanStackTable = ({ data }: any) => {
   const [tableData, setTableData] = useState([]);
   const [open, setOpen] = useState(false);
   const [reviewModalData, setReviewModalData] = useState([]);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+
+  /** Set Title and api data object key for the Table title and data */
   const columns: any = [
     {
       header: "ID",
@@ -71,6 +72,7 @@ const TanStackTable = () => {
     },
   ];
 
+  /** Send Review array to Review Modal before openning */
   const handleButtonClick = (rowData: any) => {
     setReviewModalData(rowData?.reviews);
     handleOpen();
@@ -84,12 +86,9 @@ const TanStackTable = () => {
   });
 
   useEffect(() => {
-    (async () => {
+    setTableData(data?.products);
-      const tableData = await axios.get("https://dummyjson.com/products");
+    console.log("Server data", data);
-      console.log("tableData", tableData);
+  }, [data]);
-      setTableData(tableData?.data?.products);
-    })();
-  }, []);
 
   return (
     <>

src/services/home.services.ts

@@ -0,0 +1,17 @@
+import axios, { isAxiosError } from "axios";
+
+const homeServices = {
+  getProducts: async () => {
+    try {
+      const res = await axios.get("https://dummyjson.com/products");
+      return res.data;
+    } catch (error: any) {
+      if (isAxiosError(error)) {
+        throw new Error(error.response?.data.message);
+      }
+      throw new Error("Something went wrong. Please try again.");
+    }
+  },
+};
+
+export default homeServices;