SRS 4: Added writeup

supplemental-react/03_reducing_state_management_problems/exercises/src/pages/ReducerPage.tsx

@@ -1,19 +1,12 @@
-import React, { useReducer } from "react";
+import React, { useReducer, useState } from "react";
 import DataChart from "./DataChart";
 
-const nums = [1, 2, 3, 4, 5];
 interface HistogramSection {
   x: string;
   y: number;
   weight: number;
 }
-const initialHistogram: Histogram = nums.map((num) => ({
-  x: "Object " + num,
-  y: 20 - 5 * (num - 1),
-  weight: 0.2,
-}));
 
-//pass in your current complex state object and what action you want to take
 type Histogram = HistogramSection[];
 
 interface HistogramSection {
@@ -33,44 +26,43 @@ interface HistogramAction {
   sectionName?: string;
 }
 
+const nums = [1, 2, 3, 4, 5];
+const initialHistogram: Histogram = nums.map((num) => ({
+  x: "Object " + num,
+  y: 20 - 5 * (num - 1),
+  weight: 0.2,
+}));
+
 const histogramReducer = (
   prevHistogram: Histogram,
   action: HistogramAction
-): Histogram => {
+) => {
   switch (action.type) {
     case HistogramActionType.INCREMENT_ALL: {
-      /* return a NEW ARRAY that is based off of the previous state,
-      DON'T modify the previous one!
-      */
-      //increment just one section
-      const newHistogram: Histogram = prevHistogram.map((section) => ({
+      const newHistogram = prevHistogram.map((section) => ({
         ...section,
         y: section.y + 1,
       }));
+
       newHistogram.sort((a, b) => b.y - a.y);
       return newHistogram;
     }
 
     case HistogramActionType.INCREMENT_ONE: {
-      //specifying which one to increment through our action.sectionName
       const newHistogram = prevHistogram.map((section) => {
         if (section.x === action.sectionName) {
           return { ...section, y: section.y + 1 };
         } else return section;
       });
+
       newHistogram.sort((a, b) => b.y - a.y);
       return newHistogram;
     }
 
     case HistogramActionType.RESET: {
-      //reset everything to zero
-      const zeroHistogram: Histogram = prevHistogram.map((section) => ({
-        ...section,
-        y: 0,
-      }));
-      //sort the histogram alphabetically
-      zeroHistogram.sort((a, b) => (a.x > b.x ? 1 : -1));
-      return zeroHistogram;
+      const newHistogram = prevHistogram.map((arr) => ({ ...arr, y: 0 }));
+      newHistogram.sort((a, b) => (a.x < b.x ? -1 : 1));
+      return newHistogram;
     }
 
     default: {
@@ -79,8 +71,56 @@ const histogramReducer = (
   }
 };
 
+// const histogramReducer = (
+//   prevHistogram: Histogram,
+//   action: HistogramAction
+// ): Histogram => {
+//   switch (action.type) {
+//     case HistogramActionType.INCREMENT_ALL: {
+//       /* return a NEW ARRAY that is based off of the previous state,
+//       DON'T modify the previous one!
+//       */
+//       //increment just one section
+//       const newHistogram: Histogram = prevHistogram.map((section) => ({
+//         ...section,
+//         y: section.y + 1,
+//       }));
+//       newHistogram.sort((a, b) => b.y - a.y);
+//       return newHistogram;
+//     }
+
+//     case HistogramActionType.INCREMENT_ONE: {
+//       //specifying which one to increment through our action.sectionName
+//       const newHistogram = prevHistogram.map((section) => {
+//         if (section.x === action.sectionName) {
+//           return { ...section, y: section.y + 1 };
+//         } else return section;
+//       });
+//       newHistogram.sort((a, b) => b.y - a.y);
+//       return newHistogram;
+//     }
+
+//     case HistogramActionType.RESET: {
+//       //reset everything to zero
+//       const zeroHistogram: Histogram = prevHistogram.map((section) => ({
+//         ...section,
+//         y: 0,
+//       }));
+//       //sort the histogram alphabetically
+//       zeroHistogram.sort((a, b) => (a.x > b.x ? 1 : -1));
+//       return zeroHistogram;
+//     }
+
+//     default: {
+//       return prevHistogram;
+//     }
+//   }
+// };
+
 export default function ReducerPage() {
   //left side: a name to read the data of our state, and a "dispatch" function to update the state
+  const [nums, setNums] = useState([1, 2, 3]);
+  //increment
 
   /*args passed into useReducer: the function which you will pass your "dispatch function" to, and
       initial state */