re-render on pdb update

2026-06-09 08:48:05 -06:00 · 2022-03-14 16:17:39 -06:00
parent d32bf23dd3
commit f7e82d1f5a
5 changed files with 152 additions and 137 deletions
@@ -1,6 +1,7 @@
 import PouchDB from "pouchdb";
-import React, { useContext, useState } from "react";
-import { ProcessedDataBucketContext } from "./ProcessedDataBucketContext";
+import React, { useContext, useEffect, useState } from "react";
+import { ProcessedDataBucketContext, useProcessedDataBucket } from "./ProcessedDataBucketContext";
+import { getProcessedDataBucket, updateProcessedDataBucket } from "./ProcessedDataBucket";

 const LocalDbContext = React.createContext();
 const RemoteDbContext = React.createContext();
@@ -14,7 +15,9 @@ export function useRemoteDb() {
 }

 export function DbProvider({ children }) {
-  const pdb = React.useContext(ProcessedDataBucketContext);
+  // const pdbCtx = useProcessedDataBucket();
+  const { processedDataBucket, setProcessedDataBucket } = useContext(ProcessedDataBucketContext);
+  // console.log(pdb);
  const [localdb, setLocaldb] = useState(new PouchDB("testdata"));
  //used in development server
  const [remotedb, setRemotedb] = useState(
@@ -27,27 +30,28 @@ export function DbProvider({ children }) {
    })
  );

-  pdb.updateData(localdb);
-  localdb
-    .sync(remotedb, {
-      live: true,
-      retry: true,
-    })
-    .on("change", function (change) {
-      console.log('DB CHANGED');
-      pdb.updateData(localdb);
-    })
-    .on("paused", function (info) { })
-    .on("active", function (info) { })
-    .on("error", function (err) {
-      console.error(err);
-    });
+  useEffect(() => {
+    console.log("TEST");
+    updateProcessedDataBucket(localdb, setProcessedDataBucket);
+    localdb
+      .sync(remotedb, {
+        live: true,
+        retry: true,
+      })
+      .on("change", function (change) {
+        console.log("DB CHANGED");
+        updateProcessedDataBucket(localdb, setProcessedDataBucket);
+      })
+      .on("paused", function (info) {})
+      .on("active", function (info) {})
+      .on("error", function (err) {
+        console.error(err);
+      });
+  }, [localdb, setProcessedDataBucket]);

  return (
-    <LocalDbContext.Provider value={localdb}>
-      <RemoteDbContext.Provider value={remotedb}>
-        {children}
-      </RemoteDbContext.Provider>
+    <LocalDbContext.Provider value={{ localdb, setLocaldb }}>
+      <RemoteDbContext.Provider value={{ remotedb, setRemotedb }}>{children}</RemoteDbContext.Provider>
    </LocalDbContext.Provider>
  );
 }
@@ -1,35 +1,50 @@
 import React from "react";
 import { useLocalDb } from "../../DbContext";
-import { useProcessedDataBucket } from "../../ProcessedDataBucketContext";
+import { ProcessedDataBucketContext, useProcessedDataBucket } from "../../ProcessedDataBucketContext";
 import Chart from "react-apexcharts";
 import { DataGrid } from "@mui/x-data-grid";
 import { Box } from "@mui/material";

 const DashboardPage = () => {
-  //https://react-charts.js.org/examples/column
-  const pdb = useProcessedDataBucket();
-  const makePieChartData = (pdb, team_num) => {
-    // console.log(team_num);
-    // console.log(pdb.teamData);
-    return {
-      labels: ["None", "Low", "Mid", "High", "Transversal"],
-      datasets: [
-        {
-          label: "Climbs",
-          data: pdb.teamData[4388].climb_counts,
-          backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(160,220,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
-        },
-      ],
-    };
-  };
-  console.log(pdb);
+  // <ProcessedDataBucketContext.Consumer>
+  {
+    /* {(pdbCtx) => { */
+  }
+  // const pdb = useProcessedDataBucket().processedDataBucket;
+  // const makePieChartData = (pdb, team_num) => {
+  //   // console.log(team_num);
+  //   // console.log(pdb.teamData);
+  //   return {
+  //     labels: ["None", "Low", "Mid", "High", "Transversal"],
+  //     datasets: [
+  //       {
+  //         label: "Climbs",
+  //         data: pdb.teamData[4388].climb_counts,
+  //         backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(160,220,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
+  //       },
+  //     ],
+  //   };
+  // };
+  let { processedDataBucket, setProcessedDataBucket } = useProcessedDataBucket();
+  console.log(processedDataBucket);
+  if (processedDataBucket == null) {
+    return <div />;
+  }
+  // const { processedDataBucket, setProcessedDataBucket } = pdbCtx;
+  // console.log(pdbCtx);

  //format data for the data grid
  let grid_data = [];
  //turns the values of the key value pairs in the list into an array
-  let team_data_array = Object.values(pdb.teamData);
+  console.log(processedDataBucket.teamData);
+  let team_data_array = Object.values(processedDataBucket.teamData);
+  // let team_data_array = Array.from(processedDataBucket.teamData);
  const roundPlaces = (n, d) => Math.round(n * Math.pow(10, d)) / Math.pow(10, d);
-  team_data_array.forEach((value, index, array) => {
+  // team_data_array.forEach((value, index, array) => {
+  for (const property in processedDataBucket.teamData) {
+    console.log(property);
+    let value = processedDataBucket.teamData[property];
+    console.log(value);
    grid_data.push({
      id: value.team_number,
      average_auto_points: roundPlaces(value.average_auto_points, 2),
@@ -37,7 +52,8 @@ const DashboardPage = () => {
      average_climb_points: roundPlaces(value.average_climb_points, 2),
      average_total_match_points: roundPlaces(value.average_total_match_points, 2),
    });
-  });
+  }
+  // });
  console.log(grid_data);

  return (
@@ -60,6 +76,7 @@ const DashboardPage = () => {
            // { field: "matched_played", headerName: "Matches", width: 100 },
          ]}
          checkboxSelection
+          pageSize={15}
          rowsPerPageOptions={[15]}
        />
      </Box>
@@ -77,6 +94,8 @@ const DashboardPage = () => {
      /> */}
    </div>
  );
+  //}}
+  // </ProcessedDataBucketContext.Consumer>
 };

 export default DashboardPage;
@@ -1,92 +1,88 @@
-export class ProcessedDataBucket {
-  constructor() {
-    this.teamData = {};
-    this.matchData = {};
-    this.updateData = (db) => {
-      db.allDocs({
-        include_docs: true,
-      })
-        .then((result) => {
-          //reset data
-          this.teamData = {};
-          this.matchData = {};
+export function updateProcessedDataBucket(db, setProcessedDataBucket) {
+  return db
+    .allDocs({
+      include_docs: true,
+    })
+    .then((result) => {
+      //reset data
+      let teamData = {};
+      let matchData = {};

-          //   console.log(result);
-          result.rows.forEach((dbentry) => {
-            let doc = dbentry.doc;
-            // console.log(doc);
+      //   console.log(result);
+      result.rows.forEach((dbentry) => {
+        let doc = dbentry.doc;
+        // console.log(doc);

-            //if there's no processed data on a team yet, create a default data entry
-            if (typeof this.teamData[doc.team_number] === "undefined") {
-              this.teamData[doc.team_number] = {
-                team_number: doc.team_number,
-                matched_played: 0,
-                data_sets: {
-                  upper_hub_auto: [],
-                  lower_hub_auto: [],
-                  upper_hub_teleop: [],
-                  lower_hub_teleop: [],
-                  auto_points: [],
-                  teleop_hub_points: [],
-                  climb_points: [],
-                  total_match_points: [],
-                },
-                climb_counts: [0, 0, 0, 0, 0],
-                average_auto_points: 0,
-                average_teleop_hub_points: 0,
-                average_climb_points: 0,
-                average_total_match_points: 0,
-                num_disables: 0,
-                num_flips: 0,
-                fouls: 0,
-                fouls_tech: 0,
-                red_cards: 0,
-                yellow_cards: 0,
-              };
-            }
+        //if there's no processed data on a team yet, create a default data entry
+        if (typeof teamData[doc.team_number] === "undefined") {
+          teamData[doc.team_number] = {
+            team_number: doc.team_number,
+            matched_played: 0,
+            data_sets: {
+              upper_hub_auto: [],
+              lower_hub_auto: [],
+              upper_hub_teleop: [],
+              lower_hub_teleop: [],
+              auto_points: [],
+              teleop_hub_points: [],
+              climb_points: [],
+              total_match_points: [],
+            },
+            climb_counts: [0, 0, 0, 0, 0],
+            average_auto_points: 0,
+            average_teleop_hub_points: 0,
+            average_climb_points: 0,
+            average_total_match_points: 0,
+            num_disables: 0,
+            num_flips: 0,
+            fouls: 0,
+            fouls_tech: 0,
+            red_cards: 0,
+            yellow_cards: 0,
+          };
+        }

-            //add this game's data to the respective team data:
-            let thisTeamData = this.teamData[doc.team_number];
-            thisTeamData.matched_played++;
+        //add this game's data to the respective team data:
+        let thisTeamData = teamData[doc.team_number];
+        thisTeamData.matched_played++;

-            let auto_points = (parseInt(doc.taxi_auto) ? 2 : 0) + parseInt(doc.upper_hub_auto) * 4 + parseInt(doc.lower_hub_auto) * 2;
-            let teleop_hub_points = parseInt(doc.upper_hub_teleop) * 2 + parseInt(doc.lower_hub_teleop) * 1;
-            let climb_points = (parseInt(doc.climb_level) == 0 ? 4 : 0) + (parseInt(doc.climb_level) == 1 ? 6 : 0) + (parseInt(doc.climb_level) == 2 ? 10 : 0) + (parseInt(doc.climb_level) == 3 ? 15 : 0);
-            let total_match_points = auto_points + teleop_hub_points + climb_points;
-            //data sets
-            thisTeamData.data_sets.upper_hub_auto.push(parseInt(doc.upper_hub_auto));
-            thisTeamData.data_sets.lower_hub_auto.push(parseInt(doc.lower_hub_auto));
-            thisTeamData.data_sets.upper_hub_teleop.push(parseInt(doc.upper_hub_teleop));
-            thisTeamData.data_sets.lower_hub_teleop.push(parseInt(doc.lower_hub_teleop));
-            thisTeamData.data_sets.auto_points.push(auto_points);
-            thisTeamData.data_sets.teleop_hub_points.push(teleop_hub_points);
-            thisTeamData.data_sets.climb_points.push(climb_points);
-            thisTeamData.data_sets.total_match_points.push(total_match_points);
+        let auto_points = (parseInt(doc.taxi_auto) ? 2 : 0) + parseInt(doc.upper_hub_auto) * 4 + parseInt(doc.lower_hub_auto) * 2;
+        let teleop_hub_points = parseInt(doc.upper_hub_teleop) * 2 + parseInt(doc.lower_hub_teleop) * 1;
+        let climb_points = (parseInt(doc.climb_level) == 0 ? 4 : 0) + (parseInt(doc.climb_level) == 1 ? 6 : 0) + (parseInt(doc.climb_level) == 2 ? 10 : 0) + (parseInt(doc.climb_level) == 3 ? 15 : 0);
+        let total_match_points = auto_points + teleop_hub_points + climb_points;
+        //data sets
+        thisTeamData.data_sets.upper_hub_auto.push(parseInt(doc.upper_hub_auto));
+        thisTeamData.data_sets.lower_hub_auto.push(parseInt(doc.lower_hub_auto));
+        thisTeamData.data_sets.upper_hub_teleop.push(parseInt(doc.upper_hub_teleop));
+        thisTeamData.data_sets.lower_hub_teleop.push(parseInt(doc.lower_hub_teleop));
+        thisTeamData.data_sets.auto_points.push(auto_points);
+        thisTeamData.data_sets.teleop_hub_points.push(teleop_hub_points);
+        thisTeamData.data_sets.climb_points.push(climb_points);
+        thisTeamData.data_sets.total_match_points.push(total_match_points);

-            //climb data
-            thisTeamData.climb_counts[parseInt(doc.climb_level)]++;
+        //climb data
+        thisTeamData.climb_counts[parseInt(doc.climb_level)]++;

-            //misc data
-            thisTeamData.num_disables += doc.disabled ? 1 : 0;
-            thisTeamData.num_flips += doc.flipped ? 1 : 0;
-            thisTeamData.fouls += parseInt(doc.fouls);
-            thisTeamData.fouls_tech += parseInt(doc.fouls_tech);
-            thisTeamData.red_cards += parseInt(doc.red_cards);
-            thisTeamData.yellow_cards += parseInt(doc.yellow_cards);
+        //misc data
+        thisTeamData.num_disables += doc.disabled ? 1 : 0;
+        thisTeamData.num_flips += doc.flipped ? 1 : 0;
+        thisTeamData.fouls += parseInt(doc.fouls);
+        thisTeamData.fouls_tech += parseInt(doc.fouls_tech);
+        thisTeamData.red_cards += parseInt(doc.red_cards);
+        thisTeamData.yellow_cards += parseInt(doc.yellow_cards);

-            //sum of all points in the match points data set for this team
-            //function for getting the sum of an array, use in reduce function of array
-            const sum = (accum, current) => accum + current;
-            thisTeamData.average_auto_points = thisTeamData.data_sets.auto_points.reduce(sum, 0) / thisTeamData.matched_played;
-            thisTeamData.average_teleop_hub_points = thisTeamData.data_sets.teleop_hub_points.reduce(sum, 0) / thisTeamData.matched_played;
-            thisTeamData.average_climb_points = thisTeamData.data_sets.climb_points.reduce(sum, 0) / thisTeamData.matched_played;
-            thisTeamData.average_total_match_points = thisTeamData.data_sets.total_match_points.reduce(sum, 0) / thisTeamData.matched_played;
-          });
-        })
-        .catch((err) => {
-          console.log("Error while processing data!");
-          console.error(err);
-        });
-    };
-  }
+        //sum of all points in the match points data set for this team
+        //function for getting the sum of an array, use in reduce function of array
+        const sum = (accum, current) => accum + current;
+        thisTeamData.average_auto_points = thisTeamData.data_sets.auto_points.reduce(sum, 0) / thisTeamData.matched_played;
+        thisTeamData.average_teleop_hub_points = thisTeamData.data_sets.teleop_hub_points.reduce(sum, 0) / thisTeamData.matched_played;
+        thisTeamData.average_climb_points = thisTeamData.data_sets.climb_points.reduce(sum, 0) / thisTeamData.matched_played;
+        thisTeamData.average_total_match_points = thisTeamData.data_sets.total_match_points.reduce(sum, 0) / thisTeamData.matched_played;
+      });
+      setProcessedDataBucket({ teamData: teamData, matchData: matchData });
+    })
+    .catch((err) => {
+      console.log("Error while processing data!");
+      console.error(err);
+    });
 }
@@ -1,17 +1,13 @@
 import React, { useContext, useState } from "react";
-import { ProcessedDataBucket } from "./ProcessedDataBucket.jsx"
+import { ProcessedDataBucket } from "./ProcessedDataBucket.jsx";

 export const ProcessedDataBucketContext = React.createContext();
 export function useProcessedDataBucket() {
-    return useContext(ProcessedDataBucketContext);
+  return useContext(ProcessedDataBucketContext);
 }

 export function ProcessedDataBucketProvider({ children }) {
-    //create the processed data bucket object
-    const [processedDataBucket, setProcessedDataBucket] = useState(new ProcessedDataBucket());
-    return (
-        <ProcessedDataBucketContext.Provider value={processedDataBucket}>
-            {children}
-        </ProcessedDataBucketContext.Provider>
-    );
-};
+  //create the processed data bucket object
+  const [processedDataBucket, setProcessedDataBucket] = useState(null);
+  return <ProcessedDataBucketContext.Provider value={{ processedDataBucket, setProcessedDataBucket }}>{children}</ProcessedDataBucketContext.Provider>;
+}