Solved forms

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["react", "@typescript-eslint", "prettier"],
+    "rules": {
+        "prettier/prettier": [
+            "error",
+            {
+                "endOfLine": "auto"
+            }
+        ],
+        "no-extra-parens": [
+            "warn",
+            "all",
+            {
+                "nestedBinaryExpressions": false,
+                "returnAssign": false,
+                "enforceForArrowConditionals": false,
+                "ignoreJSX": "all"
+            }
+        ],
+        "brace-style": ["error", "1tbs"],
+        "indent": ["error", 4],
+        "quotes": ["error", "double"],
+        "semi": ["error", "always"]
+    }
+}

package.json

@@ -20,6 +20,7 @@
         "build": "react-scripts build",
         "test": "react-scripts test",
         "test:cov": "react-scripts test --coverage --watchAll",
+        "test:json": "react-scripts test --json --watchAll=false --outputFile jest-output.json --coverage",
         "eject": "react-scripts eject",
         "lint": "eslint ./src --ext .tsx --ext .ts --max-warnings 0",
         "eslint-output": "eslint-output ./src --ext .tsx --ext .ts --max-warnings 0",

public/tasks/task-components.md

@@ -0,0 +1,5 @@
+# Task - Components
+
+Version: 0.0.1
+
+Fix some components that are using state incorrectly.

public/tasks/task-nested.md

@@ -0,0 +1,5 @@
+# Task - Nested
+
+Version: 0.0.1
+
+Implement functions that work with nested arrays and objects immutably.

public/tasks/task-objects.md

@@ -0,0 +1,5 @@
+# Task - Objects
+
+Version: 0.0.1
+
+Implement functions that work with objects immutably.

public/tasks/task-state.md

@@ -0,0 +1,5 @@
+# Task - State
+
+Version: 0.0.1
+
+Create some new components that have React State.

src/App.tsx

@@ -1,16 +1,60 @@
 import React from "react";
 import "./App.css";
+import { ChangeType } from "./components/ChangeType";
+import { RevealAnswer } from "./components/RevealAnswer";
+import { StartAttempt } from "./components/StartAttempt";
+import { TwoDice } from "./components/TwoDice";
+import { CycleHoliday } from "./components/CycleHoliday";
+import { Counter } from "./components/Counter";
+import { DoubleHalf } from "./bad-components/DoubleHalf";
+import { ColoredBox } from "./bad-components/ColoredBox";
+import { ShoveBox } from "./bad-components/ShoveBox";
+import { ChooseTeam } from "./bad-components/ChooseTeam";
+import { CheckAnswer } from "./form-components/CheckAnswer";
+import { GiveAttempts } from "./form-components/GiveAttempts";
+import { EditMode } from "./form-components/EditMode";
+import { MultipleChoiceQuestion } from "./form-components/MultipleChoiceQuestion";
+import { ChangeColor } from "./form-components/ChangeColor";
 
 function App(): React.JSX.Element {
     return (
         <div className="App">
             <header className="App-header">
                 UD CISC275 with React Hooks and TypeScript
             </header>
-            <p>
-                Edit <code>src/App.tsx</code> and save. This page will
-                automatically reload.
-            </p>
+            <hr></hr>
+            <DoubleHalf></DoubleHalf>
+            <hr></hr>
+            <CheckAnswer expectedAnswer="42"></CheckAnswer>
+            <hr></hr>
+            <GiveAttempts></GiveAttempts>
+            <hr></hr>
+            <EditMode></EditMode>
+            <hr></hr>
+            <ChangeColor></ChangeColor>
+            <hr></hr>
+            <MultipleChoiceQuestion
+                options={["a", "b", "c"]}
+                expectedAnswer="b"
+            ></MultipleChoiceQuestion>
+            <hr></hr>
+            <ChooseTeam></ChooseTeam>
+            <hr></hr>
+            <ColoredBox></ColoredBox>
+            <hr></hr>
+            <ShoveBox></ShoveBox>
+            <hr></hr>
+            <Counter></Counter>
+            <hr />
+            <RevealAnswer></RevealAnswer>
+            <hr />
+            <StartAttempt></StartAttempt>
+            <hr />
+            <TwoDice></TwoDice>
+            <hr />
+            <ChangeType></ChangeType>
+            <hr />
+            <CycleHoliday></CycleHoliday>
         </div>
     );
 }

src/bad-components/ChooseTeam.test.tsx

@@ -0,0 +1,81 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ChooseTeam } from "./ChooseTeam";
+
+describe("ChooseTeam Component tests", () => {
+    beforeEach(() => {
+        render(<ChooseTeam />);
+    });
+    test("(2 pts) The initial team is empty", () => {
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(0);
+    });
+    test("(2 pts) There are 7 buttons.", () => {
+        const adders = screen.queryAllByRole("button");
+        expect(adders).toHaveLength(7);
+    });
+    test("(2 pts) Clicking first team member works", async () => {
+        const first = screen.queryAllByRole("button")[0];
+        await act(async () => {
+            first.click();
+        });
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(first.textContent);
+    });
+    test("(2 pts) Clicking the third team member works", async () => {
+        const third = screen.queryAllByRole("button")[2];
+        await act(async () => {
+            third.click();
+        });
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(third.textContent);
+    });
+    test("(2 pts) Clicking three team members works", async () => {
+        const [, second, third, , fifth] = screen.queryAllByRole("button");
+        await act(async () => {
+            third.click();
+        });
+        await act(async () => {
+            second.click();
+        });
+        await act(async () => {
+            fifth.click();
+        });
+        const currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(3);
+        expect(currentTeam[0].textContent).toEqual(third.textContent);
+        expect(currentTeam[1].textContent).toEqual(second.textContent);
+        expect(currentTeam[2].textContent).toEqual(fifth.textContent);
+    });
+    test("(2 pts) Clearing the team works", async () => {
+        const [, second, third, fourth, fifth, , clear] =
+            screen.queryAllByRole("button");
+        await act(async () => {
+            third.click();
+        });
+        await act(async () => {
+            second.click();
+        });
+        await act(async () => {
+            fifth.click();
+        });
+        let currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(3);
+        expect(currentTeam[0].textContent).toEqual(third.textContent);
+        expect(currentTeam[1].textContent).toEqual(second.textContent);
+        expect(currentTeam[2].textContent).toEqual(fifth.textContent);
+        await act(async () => {
+            clear.click();
+        });
+        currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(0);
+        await act(async () => {
+            fourth.click();
+        });
+        currentTeam = screen.queryAllByRole("listitem");
+        expect(currentTeam).toHaveLength(1);
+        expect(currentTeam[0].textContent).toEqual(fourth.textContent);
+    });
+});

src/bad-components/ChooseTeam.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { Button, Row, Col } from "react-bootstrap";
+
+const PEOPLE = [
+    "Alan Turing",
+    "Grace Hopper",
+    "Ada Lovelace",
+    "Charles Babbage",
+    "Barbara Liskov",
+    "Margaret Hamilton",
+];
+
+export function ChooseTeam(): React.JSX.Element {
+    const [allOptions] = useState<string[]>(PEOPLE);
+    const [team, setTeam] = useState<string[]>([]);
+
+    function chooseMember(newMember: string) {
+        if (!team.includes(newMember)) {
+            setTeam([...team, newMember]);
+        }
+    }
+
+    function clearTeam() {
+        setTeam([]);
+    }
+
+    return (
+        <div>
+            <h3>Choose Team</h3>
+            <Row>
+                <Col>
+                    {allOptions.map((option: string) => (
+                        <div key={option} style={{ marginBottom: "4px" }}>
+                            Add{" "}
+                            <Button
+                                onClick={() => {
+                                    chooseMember(option);
+                                }}
+                                size="sm"
+                            >
+                                {option}
+                            </Button>
+                        </div>
+                    ))}
+                </Col>
+                <Col>
+                    <strong>Team:</strong>
+                    {team.map((member: string) => (
+                        <li key={member}>{member}</li>
+                    ))}
+                    <Button onClick={clearTeam}>Clear Team</Button>
+                </Col>
+            </Row>
+        </div>
+    );
+}

src/bad-components/ColoredBox.test.tsx

@@ -0,0 +1,37 @@
+import React, { act } from "react";
+import { render, screen } from "@testing-library/react";
+import { ColoredBox } from "./ColoredBox";
+
+describe("ColoredBox Component tests", () => {
+    beforeEach(() => {
+        render(<ColoredBox />);
+    });
+    test("(2 pts) The ColoredBox is initially red.", () => {
+        const box = screen.getByTestId("colored-box");
+        expect(box).toHaveStyle({ backgroundColor: "red" });
+    });
+    test("(2 pts) There is a button", () => {
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    test("(2 pts) Clicking the button advances the color.", async () => {
+        const nextColor = screen.getByRole("button");
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "blue",
+        });
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "green",
+        });
+        await act(async () => {
+            nextColor.click();
+        });
+        expect(screen.getByTestId("colored-box")).toHaveStyle({
+            backgroundColor: "red",
+        });
+    });
+});

src/bad-components/ColoredBox.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+
+export const COLORS = ["red", "blue", "green"];
+const DEFAULT_COLOR_INDEX = 0;
+
+function ChangeColor({
+    colorIndex,
+    setColorIndex,
+}: {
+    colorIndex: number;
+    setColorIndex: (n: number) => void;
+}): React.JSX.Element {
+    return (
+        <Button
+            onClick={() => {
+                setColorIndex((1 + colorIndex) % COLORS.length);
+            }}
+        >
+            Next Color
+        </Button>
+    );
+}
+
+function ColorPreview({
+    colorIndex,
+}: {
+    colorIndex: number;
+}): React.JSX.Element {
+    return (
+        <div
+            data-testid="colored-box"
+            style={{
+                width: "50px",
+                height: "50px",
+                backgroundColor: COLORS[colorIndex],
+                display: "inline-block",
+                verticalAlign: "bottom",
+                marginLeft: "5px",
+            }}
+        ></div>
+    );
+}
+
+export function ColoredBox(): React.JSX.Element {
+    const [colorIndex, setColorIndex] = useState<number>(DEFAULT_COLOR_INDEX);
+
+    return (
+        <div>
+            <h3>Colored Box</h3>
+            <span>The current color is: {COLORS[colorIndex]}</span>
+            <div>
+                <ChangeColor
+                    colorIndex={colorIndex}
+                    setColorIndex={setColorIndex}
+                ></ChangeColor>
+                <ColorPreview colorIndex={colorIndex}></ColorPreview>
+            </div>
+        </div>
+    );
+}