Remove points: reducer (#1567)

## Summary:
This adds a reducer action for removing points

Issue: LEMS-2280

## Test plan:
- Run the tests

Author: nicolecomputer

Reviewers: benchristel, mark-fitzgerald

Required Reviewers:

Approved By: benchristel

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1567

.changeset/thick-mirrors-shake.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Add a reducer action for removing unlimited points

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-action.ts

@@ -11,7 +11,8 @@ export type InteractiveGraphAction =
     | MoveRadiusPoint
     | ChangeSnapStep
     | ChangeRange
-    | AddPoint;
+    | AddPoint
+    | RemovePoint;
 
 export const actions = {
     angle: {
@@ -33,6 +34,7 @@ export const actions = {
     pointGraph: {
         movePoint,
         addPoint,
+        removePoint,
     },
     polygon: {
         movePoint,
@@ -81,6 +83,18 @@ function addPoint(location: vec.Vector2): AddPoint {
     };
 }
 
+export const REMOVE_POINT = "remove-point";
+export interface RemovePoint {
+    type: typeof REMOVE_POINT;
+    index: number;
+}
+function removePoint(index: number): RemovePoint {
+    return {
+        type: REMOVE_POINT,
+        index,
+    };
+}
+
 export const MOVE_ALL = "move-all";
 export interface MoveAll {
     type: typeof MOVE_ALL;

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.test.ts

@@ -6,7 +6,11 @@ import {changeSnapStep, changeRange, actions} from "./interactive-graph-action";
 import {interactiveGraphReducer} from "./interactive-graph-reducer";
 
 import type {GraphRange} from "../../../perseus-types";
-import type {CircleGraphState, InteractiveGraphState} from "../types";
+import type {
+    CircleGraphState,
+    PointGraphState,
+    InteractiveGraphState,
+} from "../types";
 
 const baseSegmentGraphState: InteractiveGraphState = {
     hasBeenInteractedWith: false,
@@ -30,6 +34,18 @@ const basePointGraphState: InteractiveGraphState = {
     coords: [],
 };
 
+const baseUnlimitedPointGraphState: PointGraphState = {
+    hasBeenInteractedWith: false,
+    type: "point",
+    numPoints: "unlimited",
+    range: [
+        [-10, 10],
+        [-10, 10],
+    ],
+    snapStep: [1, 1],
+    coords: [],
+};
+
 const baseAngleGraphState: InteractiveGraphState = {
     hasBeenInteractedWith: false,
     type: "angle",
@@ -953,3 +969,49 @@ describe("doMoveRadiusPoint", () => {
         ).toThrow();
     });
 });
+
+describe("unlimited points", () => {
+    it("adds points", () => {
+        const state: PointGraphState = {
+            ...baseUnlimitedPointGraphState,
+        };
+
+        const stateAfterAddingPoint = interactiveGraphReducer(
+            state,
+            actions.pointGraph.addPoint([8, 10]),
+        ) as PointGraphState;
+
+        expect(stateAfterAddingPoint.coords).toMatchObject([[8, 10]]);
+    });
+
+    it("removes points", () => {
+        let state: PointGraphState = {
+            ...baseUnlimitedPointGraphState,
+        };
+
+        state = interactiveGraphReducer(
+            state,
+            actions.pointGraph.addPoint([1, 1]),
+        ) as PointGraphState;
+
+        state = interactiveGraphReducer(
+            state,
+            actions.pointGraph.addPoint([2, 2]),
+        ) as PointGraphState;
+
+        state = interactiveGraphReducer(
+            state,
+            actions.pointGraph.addPoint([3, 3]),
+        ) as PointGraphState;
+
+        state = interactiveGraphReducer(
+            state,
+            actions.pointGraph.removePoint(1),
+        ) as PointGraphState;
+
+        expect(state.coords).toMatchObject([
+            [1, 1],
+            [3, 3],
+        ]);
+    });
+});

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts

@@ -40,6 +40,8 @@ import {
     REINITIALIZE,
     ADD_POINT,
     type AddPoint,
+    REMOVE_POINT,
+    type RemovePoint,
 } from "./interactive-graph-action";
 
 import type {Coord} from "../../../interactive2/types";
@@ -78,6 +80,8 @@ export function interactiveGraphReducer(
             return doChangeRange(state, action);
         case ADD_POINT:
             return doAddPoint(state, action);
+        case REMOVE_POINT:
+            return doRemovePoint(state, action);
         default:
             throw new UnreachableCaseError(action);
     }
@@ -528,6 +532,20 @@ function doAddPoint(
     };
 }
 
+function doRemovePoint(
+    state: InteractiveGraphState,
+    action: RemovePoint,
+): InteractiveGraphState {
+    if (state.type !== "point") {
+        return state;
+    }
+
+    return {
+        ...state,
+        coords: state.coords.filter((_, i) => i !== action.index),
+    };
+}
+
 const getDeltaVertex = (
     maxMoves: vec.Vector2[],
     minMoves: vec.Vector2[],