Integrated the current cart data from firestore with the top items se…

…ction of the statistics page

components/statistics/SingleTopItem.tsx

@@ -12,7 +12,9 @@ const SingleTopItem: React.FC<{ data: ExpectedSingleTopItemFormat }> = (
     <li>
       <div className={styles.head}>
         <span>{props.data.name}</span>
-        <span className={styles.percentage}>{`${props.data.percentage}%`}</span>
+        <span className={styles.percentage}>{`${Math.floor(
+          props.data.percentage
+        )}%`}</span>
       </div>
       <div className={styles.bar}>
         <div

pages/statistics/index.tsx

@@ -8,15 +8,25 @@ import TopItems, {
 } from "../../components/statistics/TopItems";
 import styles from "./index.module.css";
 import { ExpectedChartData } from "../../components/statistics/Graph";
-import { GetStaticProps } from "next";
+import { GetStaticProps, NextPage } from "next";
 import { GET_AJAX } from "../../public/utils/http";
+import { generateTopItems } from "../../public/utils/statistics/generate-top-items";
 const Graph = dynamic(import("../../components/statistics/Graph"), {
   ssr: false,
 });
 
-const Home = () => {
+type ExpectedData = {
+  topItemsData: ExpectedTopItemFormat;
+  topCategoriesData: ExpectedTopCategoryFormat;
+  monthlySpending: ExpectedChartData;
+  error: boolean;
+};
+
+const Home: NextPage<ExpectedData> = (props) => {
   const [isloading, setIsloading] = useState(true);
 
+  console.log("Props: ", props);
+
   const topItemsData: ExpectedTopItemFormat = [
     {
       name: "Banana",
@@ -73,7 +83,7 @@ const Home = () => {
   return (
     <React.Fragment>
       <section className={styles["top-part"]}>
-        <TopItems fetchingData={isloading} data={topItemsData} />
+        <TopItems fetchingData={isloading} data={props.topItemsData} />
         <TopCategories fetchingData={isloading} data={topCategoriesData} />
       </section>
       <section>
@@ -84,11 +94,32 @@ const Home = () => {
 };
 
 export const getStaticProps: GetStaticProps = async () => {
+  // initialize the error flag
+  let error = false;
+
   // fetch the current cart data from the backend
   const currentCart = await GET_AJAX("/current-cart");
-  console.log("current cart: ", currentCart.message);
+  // console.log("current cart: ", currentCart.message);
+
+  if (!currentCart.success) {
+    error = true;
+  }
+  // generate the "top items" data
+  console.log("Current cart: ", currentCart.message);
+  const topItems = generateTopItems(
+    currentCart.message.items,
+    currentCart.message.totalQuantity
+  );
+
+  const props: ExpectedData = {
+    topItemsData: topItems,
+    topCategoriesData: [],
+    monthlySpending: [],
+    error,
+  };
+
   return {
-    props: {},
+    props,
     revalidate: 1,
   };
 };

public/utils/statistics/generate-top-items.ts

@@ -0,0 +1,43 @@
+import { ExpectedTopItemFormat } from "../../../components/statistics/TopItems";
+
+type ItemType = {
+  isCompleted: boolean;
+  itemId: string;
+  quantity: number;
+};
+
+type ExpectedDataType = { categoryName: string; items: ItemType[] }[];
+
+export const generateTopItems = (
+  items: ExpectedDataType,
+  totalQuantity: number
+) => {
+  //   console.log("Items: ", items);
+  //   create a variable to store all the items
+  let allItems: ItemType[] = [{ itemId: "", isCompleted: false, quantity: 0 }];
+
+  //   create an array of all the items in each category
+  items.forEach((category) => {
+    // allItems.concat(category.items);
+    const tmpItems = [...allItems, ...category.items];
+    allItems = tmpItems;
+  });
+
+  //   sort the extracted items in descending order
+
+  allItems.sort((currentItem, nextItem) => {
+    return nextItem.quantity - currentItem.quantity;
+  });
+
+  //   take the highest 3 items and convert them to the expected top items type
+  const topItemsWithPercentages: ExpectedTopItemFormat = allItems
+    .slice(0, 3)
+    .map((item) => {
+      return {
+        name: item.itemId,
+        percentage: (item.quantity / totalQuantity) * 100,
+      };
+    });
+  //   return the highest 3 items
+  return topItemsWithPercentages;
+};

tsconfig.json

@@ -15,6 +15,12 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/custom.d.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/custom.d.ts",
+    "public/utils"
+  ],
   "exclude": ["node_modules"]
 }