Prikshit assignment for SaaS Labs

App.js

@@ -0,0 +1,28 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import styles from "./App.module.css";
+import Table from "./Assignment/Table";
+import { api } from "./Assignment/constants";
+
+const colDefs = [
+  { headerName: "S.No.", field: "s.no" },
+  {
+    headerName: "Percentage funded",
+    field: "percentage.funded",
+  },
+  {
+    headerName: "Amount pledged",
+    field: "amt.pledged",
+  },
+];
+
+const App = () => {
+  return (
+    <div className={styles.app}>
+      <Table colDefs={colDefs} api={api} rowsPerPage={5} title={"pagination"} />
+    </div>
+  );
+};
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);

App.module.css

@@ -0,0 +1,7 @@
+
+
+.app {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

Assignment/Components/Header.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./Header.module.css";
+
+const Header = ({ colDefs }) => {
+  return (
+    <thead>
+      <tr>
+        {colDefs.map((def) => (
+          <th className={styles.th} key={def.headerName}>
+            {def.headerName}
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+};
+
+Header.propTypes = {
+  colDefs: PropTypes.arrayOf(
+    PropTypes.shape({
+      headerName: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default React.memo(Header);

Assignment/Components/Header.module.css

@@ -0,0 +1,3 @@
+.th {
+    border: 1px solid;
+}

Assignment/Table.js

@@ -0,0 +1,118 @@
+import React, { useMemo, useState } from "react";
+import PropTypes from "prop-types";
+import styles from "./Table.module.css";
+import { useFetch } from "./hooks/useFetch";
+import Header from "./Components/Header";
+import { NEXT, PREV } from "./constants";
+
+const Table = ({ colDefs, api, rowsPerPage, title }) => {
+  const totalButtons = 5;
+  const { data, error, loading } = useFetch(api);
+  const [currentPage, setCurrentPage] = useState(0);
+  const _ = useMemo(() => new Array(totalButtons).fill(0), []);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+  if (error) {
+    return <div>something went wrong please try again...</div>;
+  }
+  if (!data) {
+    return <div>No data available</div>;
+  }
+
+  const renderData = data.slice(
+    currentPage * rowsPerPage,
+    (currentPage + 1) * rowsPerPage
+  );
+
+  const isNextDisabled = (currentPage + 1) * rowsPerPage >= data.length;
+  const isPrevDisabled = currentPage === 0;
+  const totalPages = Math.floor(data.length / rowsPerPage);
+
+  const nextPage = () => {
+    if (!isNextDisabled) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const prevPage = () => {
+    if (!isPrevDisabled) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className={styles.header}>{title}</h1>
+      <div className={styles.tableContainer}>
+        <table className={styles.table}>
+          <Header colDefs={colDefs} />
+          <tbody>
+            {renderData.map((item) => (
+              <tr key={item[colDefs[0].field]}>
+                {colDefs.map((col, index) => (
+                  <td className={styles.td} key={index}>
+                    {item[col.field]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className={styles.buttonContainer}>
+        <button disabled={isPrevDisabled} onClick={prevPage}>
+          {PREV}
+        </button>
+        <React.Fragment>
+          {_.map((_, index) => {
+            let iterator;
+            if (currentPage < 3) {
+              iterator = -1 * currentPage;
+            } else if (currentPage + 1 === totalPages) {
+              iterator = -1 * totalButtons + totalPages - currentPage + 1;
+            } else if (currentPage === totalPages) {
+              iterator = -1 * totalButtons + 1;
+            } else {
+              iterator = -1 * Math.floor(totalButtons / 2);
+            }
+            if (index + currentPage + iterator > totalPages) {
+              return null;
+            }
+            return (
+              <button
+                key={index}
+                className={
+                  currentPage === index + currentPage + iterator
+                    ? styles.currentPage
+                    : styles.normalPage
+                }
+                onClick={() => setCurrentPage(index + currentPage + iterator)}
+              >
+                {index + currentPage + iterator}
+              </button>
+            );
+          })}
+        </React.Fragment>
+        <button disabled={isNextDisabled} onClick={nextPage}>
+          {NEXT}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+Table.propTypes = {
+  colDefs: PropTypes.arrayOf(
+    PropTypes.shape({
+      field: PropTypes.string.isRequired,
+      headerName: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  api: PropTypes.string.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+export default React.memo(Table);

Assignment/Table.module.css

@@ -0,0 +1,26 @@
+.table {
+    border-collapse: collapse;
+    border: 1px solid;
+    margin-bottom: 10px;
+}
+
+.tableContainer {
+    min-height: 135px;
+}
+
+.buttonContainer{
+    display: flex;
+    justify-content: space-around;
+}
+
+.td {
+    border: 1px solid;
+}
+
+.header {
+    text-align: center;
+}
+
+.currentPage {
+    background-color: aquamarine;
+}

Assignment/constants.js

@@ -0,0 +1,6 @@
+export const api =
+  "https://raw.githubusercontent.com/saaslabsco/frontend-assignment/refs/heads/master/frontend-assignment.json";
+
+
+export const PREV = "Prev";
+export const NEXT = "Next";

Assignment/hooks/useFetch.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+
+export const useFetch = (api) => {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        setLoading(true);
+        const jsonResponse = await fetch(api);
+        const result = await jsonResponse.json();
+        setData(result);
+      } catch (e) {
+        setError(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getData();
+  }, [api]);
+
+  return { data, error, loading };
+};

Readme.md

@@ -1,51 +1,5 @@
-# Frontend Assignment
+# how to run the project?
 
+# run "npm install"
 
-## Assignment
-
-You are required to fetch the details of the highly-rated kickstarter projects by implementing an AJAX call to their APIs.
-
-Use the web API (link : https://raw.githubusercontent.com/saaslabsco/frontend-assignment/refs/heads/master/frontend-assignment.json) ) to fetch the details of specific projects.
-
-## Minimum Requirements
-
-1. Create a table and list the following three attributes for all the projects:
-    * S.No.
-    * Percentage funded
-    * Amount pledged
-
-1. Ensure that the UI is aesthetically pleasing to gain extra points.
-1. Implement pagination with maximum 5 records per page.
-1. UX should remain like you would see on an ecommerce website (Amazon, Flipkart, etc.) and edge cases should not break.
-1. Take care of last page.
-
-### Expected Output format
-
-| **S.No.** | **Percentage funded** | **Amount pledged** |
-|-----------|-----------------------|--------------------|
-| 0         | 186                   | 15283              |
-
-
-## Good to have
-
-1. Unit tests.
-1. Accessibility.
-
-
-## Steps for submission
-
-1. Fork this repo.
-1. Do changes to the above assignment.
-1. Email the assignment back to us with:
-    1. Link of the open source repo.
-    1. Link of the assignment hosted online. (You can use any free tools to host this assignment, eg. vercel, netlify or heroku). It should be accessible online for atleast 7 days.
-
-
-## Frameworks Allowed
-1. React/Vanilla JS for JavaScript
-1. No framework for CSS. Only Raw CSS is allowed.
-
-## Note
-
-1. Result on platforms like codesandbox, replit are not accepted. 
-1. Private unaccessible links will lead to rejection.
+# run "npm start"