allow setting rating of gear

had to fix some weird webpack problem by setting the webpack version
had to config next a bit more because of that same webpack problem

components/runner/resources/GearPageTemplate/GearTable/GearTable.test.tsx

@@ -1,11 +1,16 @@
-import { render } from "@/test/testUtils"
-import { GearWeaponMelee } from "@/types/Resources"
+import { render, SliderHelper } from "@/test/testUtils"
+import { GearTyped, GearWeaponMelee } from "@/types/Resources"
 import {
   addMeleeTableConfig,
   removeMeleeTableConfig,
 } from "../../MeleeWeapons/meleeTableConfig"
-import { DispatchContext } from "../../util"
+import {
+  DispatchContext,
+  gearRatingTableConfigOption,
+  gearTableConfigOptions,
+} from "../../util"
 import { GearTable, Props } from "."
+import { otherElectronics } from "@/data/electronics"
 
 describe("<GearTable />", () => {
   describe("<WeaponTable/>", () => {
@@ -98,4 +103,49 @@ describe("<GearTable />", () => {
       })
     })
   })
+
+  describe("gear with rating", () => {
+    const headJammer = otherElectronics[2],
+      bugScanner = otherElectronics[0]
+    const setup = () => {
+      const dispatch = jest.fn()
+      const props: Props<GearTyped> = {
+        listOfGear: [headJammer, bugScanner],
+        cols: [
+          gearTableConfigOptions.buy,
+          gearRatingTableConfigOption.setRating,
+        ],
+      }
+      return {
+        ...render(
+          <DispatchContext.Provider value={dispatch}>
+            <GearTable<GearTyped> {...props} />
+          </DispatchContext.Provider>,
+        ),
+        dispatch,
+        props,
+      }
+    }
+    it("should display a slider for gear with rating and while buying", () => {
+      const { getByLabelText, queryByTestId, dispatch } = setup()
+
+      expect(getByLabelText("Add Headjammer")).toBeInTheDocument()
+      expect(queryByTestId("Headjammer-rating")).toBeInTheDocument()
+
+      SliderHelper.change(queryByTestId("Headjammer-rating"), 6, 1, 6)
+      getByLabelText("Add Headjammer").click()
+      expect(dispatch).toHaveBeenCalledWith({
+        type: undefined,
+        payload: { ...headJammer, currentRating: 6, cost: 900 },
+      })
+
+      expect(getByLabelText("Add Bug Scanner")).toBeInTheDocument()
+      expect(queryByTestId("Bug Scanner-rating")).not.toBeInTheDocument()
+      getByLabelText("Add Bug Scanner").click()
+      expect(dispatch).toHaveBeenCalledWith({
+        type: undefined,
+        payload: bugScanner,
+      })
+    })
+  })
 })

components/runner/resources/GearPageTemplate/GearTable/ResourceButtons/SettingRating/SettingRating.test.tsx

@@ -0,0 +1,25 @@
+import { otherElectronics } from "@/data/electronics"
+import { render, SliderHelper } from "@/test/testUtils"
+import { SettingRating } from "./index"
+
+describe("<SettingRating />", () => {
+  const setup = () => {
+    const headJammer = otherElectronics[2]
+    const dispatch = jest.fn()
+    return {
+      ...render(<SettingRating gear={headJammer} setRating={dispatch} />),
+      dispatch,
+    }
+  }
+  it("should call setRating after changing the slider", () => {
+    const { getByTestId, dispatch } = setup()
+
+    expect(getByTestId("Headjammer-rating").querySelector("input")).toHaveValue(
+      "1",
+    )
+
+    SliderHelper.change(getByTestId("Headjammer-rating"), 5, 1, 6)
+
+    expect(dispatch).toHaveBeenCalledWith(5)
+  })
+})

components/runner/resources/GearPageTemplate/GearTable/ResourceButtons/SettingRating/index.tsx

@@ -0,0 +1,27 @@
+import { GearTyped } from "@/types/Resources"
+import { Slider } from "@material-ui/core"
+import { FC } from "react"
+
+export interface Props {
+  setRating: (rating: number) => void
+  gear: GearTyped
+}
+
+export const SettingRating: FC<Props> = ({
+  setRating,
+  gear: { name, maxRating = 6, currentRating = 1 },
+}) => (
+  <Slider
+    data-testid={`${name}-rating`}
+    onChange={(event, value) => setRating(+value)}
+    defaultValue={1}
+    getAriaValueText={(value) => value.toString()}
+    aria-labelledby={`${name} rating slider`}
+    valueLabelDisplay="auto"
+    step={1}
+    marks
+    min={1}
+    max={maxRating}
+    value={currentRating}
+  />
+)

components/runner/resources/GearPageTemplate/GearTable/ResourceButtons/index.tsx

@@ -33,3 +33,5 @@ export const RemoveResourceButton: FC<RemoveGearButtonProps> = ({
     />
   )
 }
+
+export * from "./SettingRating"

components/runner/resources/GearPageTemplate/GearTable/Row/RatingRow.test.tsx

@@ -0,0 +1,56 @@
+import { otherElectronics } from "@/data/electronics"
+import { render, SliderHelper } from "@/test/testUtils"
+import {
+  DispatchContext,
+  gearRatingTableConfigOption,
+  gearTableConfigOptions,
+} from "../../../util"
+import { RatingRow } from "./index"
+
+describe("<RatingRow/>", () => {
+  const headJammer = otherElectronics[2]
+  const setup = () => {
+    const cols = [
+      gearTableConfigOptions.buy,
+      gearRatingTableConfigOption.setRating,
+    ]
+    const dispatch = jest.fn()
+
+    return {
+      ...render(
+        <DispatchContext.Provider value={dispatch}>
+          <table>
+            <tbody>
+              <RatingRow gear={headJammer} index={1} cols={cols} />
+            </tbody>
+          </table>
+        </DispatchContext.Provider>,
+      ),
+      dispatch,
+    }
+  }
+
+  it("set current rating to 1 if not set", () => {
+    const { getByLabelText, dispatch } = setup()
+
+    getByLabelText(`Add ${headJammer.name}`).click()
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: undefined,
+      payload: { ...headJammer, currentRating: 1 },
+    })
+  })
+
+  it("should update rating and purchase gear", () => {
+    const { getByLabelText, getByTestId, dispatch } = setup()
+
+    SliderHelper.change(getByTestId("Headjammer-rating"), 5, 1, 6)
+
+    getByLabelText(`Add ${headJammer.name}`).click()
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: undefined,
+      payload: { ...headJammer, currentRating: 5, cost: 750 },
+    })
+  })
+})

components/runner/resources/GearPageTemplate/GearTable/Row/index.tsx

@@ -0,0 +1,45 @@
+import { FC, useMemo, useState } from "react"
+import { Gear, GearTyped } from "@/types/Resources"
+import { TableCell, TableRow } from "@material-ui/core"
+import { Columns } from "../../../util"
+
+export interface Props {
+  cols: Columns<Gear>[]
+  gear: Gear
+  index: number
+}
+
+export const StandardDisplayRow: FC<Props> = ({ cols, gear, index }) => (
+  <TableRow>
+    {cols.map(({ display, label }) => (
+      <TableCell key={label}>{display(gear, index)}</TableCell>
+    ))}
+  </TableRow>
+)
+
+interface RatingRowProps extends Props {
+  cols: Columns<GearTyped>[]
+  gear: GearTyped
+}
+
+export const RatingRow: FC<RatingRowProps> = ({ cols, gear, index }) => {
+  const [currentRating, setRating] = useState(1)
+  const gearWithRating = useMemo(
+    () => ({
+      ...gear,
+      currentRating,
+      cost: gear.cost * currentRating,
+    }),
+    [currentRating],
+  )
+
+  return (
+    <TableRow>
+      {cols.map(({ display, label }) => (
+        <TableCell key={label}>
+          {display(gearWithRating, index, setRating)}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}

components/runner/resources/GearPageTemplate/GearTable/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "@material-ui/core"
 import { Gear } from "@/types/Resources"
 import { Columns } from "../../util"
+import { StandardDisplayRow, RatingRow } from "./Row"
 
 export interface Props<G> {
   listOfGear: G[]
@@ -30,13 +31,13 @@ export function GearTable<G extends Gear>({
           </TableRow>
         </TableHead>
         <TableBody>
-          {listOfGear.map((gear, index) => (
-            <TableRow key={gear.name}>
-              {cols.map(({ display, label }) => (
-                <TableCell key={label}>{display(gear, index)}</TableCell>
-              ))}
-            </TableRow>
-          ))}
+          {listOfGear.map((gear, index) => {
+            const Row =
+              "rating" in gear && cols[0].label === "Buy"
+                ? RatingRow
+                : StandardDisplayRow
+            return <Row key={gear.name} cols={cols} gear={gear} index={index} />
+          })}
         </TableBody>
       </Table>
     </TableContainer>

components/runner/resources/electronics/OtherElectronics/OtherElectronics.test.tsx

@@ -4,6 +4,8 @@ import {
   getByText as getTextInContainer,
   waitFor,
   render,
+  SliderHelper,
+  runnerFromDB,
 } from "@/test/testUtils"
 import OtherElectronics from "./"
 
@@ -44,4 +46,34 @@ describe("<OtherElectronics/>", () => {
     expect(getTextInContainer(jammerRow, "4L")).toBeInTheDocument()
     expect(getTextInContainer(jammerRow, "200¥")).toBeInTheDocument()
   })
+
+  it("should save rated gear", async () => {
+    const { getByTestId, getByLabelText, getByText } = setup()
+    await waitFor(() => expect(getByText("Buy")).toBeInTheDocument())
+
+    SliderHelper.change(getByTestId("White Noise Generator-rating"), 4, 1, 6)
+
+    getByLabelText("Add White Noise Generator").click()
+
+    await waitFor(() => {
+      expect(runnerFromDB(9).resources?.otherElectronics[0].name).toEqual(
+        "White Noise Generator",
+      )
+    })
+    expect(runnerFromDB(9).resources.otherElectronics[0].currentRating).toEqual(
+      4,
+    )
+    const purchasedRow = getByLabelText("Remove White Noise Generator").closest(
+      "tr",
+    )
+    expect(
+      getTextInContainer(purchasedRow, "White Noise Generator"),
+    ).toBeInTheDocument()
+    expect(
+      getTextInContainer(purchasedRow, "Communication"),
+    ).toBeInTheDocument()
+    expect(getTextInContainer(purchasedRow, "4")).toBeInTheDocument()
+    expect(getTextInContainer(purchasedRow, "3")).toBeInTheDocument()
+    expect(getTextInContainer(purchasedRow, "200¥")).toBeInTheDocument()
+  })
 })

components/runner/resources/util/Columns.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from "react"
 
 export interface Columns<G> {
-  display: (gear: G, index: number) => ReactNode
+  display: (
+    gear: G,
+    index?: number,
+    update?: (update: number) => void,
+  ) => ReactNode
   label: string
 }

components/runner/resources/util/configOptions.tsx

@@ -3,6 +3,7 @@ import { Gear, GearTyped, GearWeaponMelee } from "@/types/Resources"
 import {
   AddResourceButton,
   RemoveResourceButton,
+  SettingRating,
 } from "../GearPageTemplate/GearTable/ResourceButtons"
 
 export const gearTableConfigOptions: Record<string, Columns<Gear>> = {
@@ -36,7 +37,8 @@ export const gearRatingTableConfigOption: Record<string, Columns<GearTyped>> = {
     label: "Category",
   },
   setRating: {
-    display: (gear) => (gear.rating ? gear.currentRating ?? 1 : "N/A"),
+    display: (gear, index, setRating) =>
+      gear.rating ? <SettingRating gear={gear} setRating={setRating} /> : "N/A",
     label: "Rating",
   },
   displayRating: {

components/runner/resources/util/index.ts

@@ -1,9 +1,6 @@
 import { createContext } from "react"
-import {
-  DispatchAction,
-  RunnerReducer,
-} from "../../../../hooks/useRunnerAccess"
-import { Gear } from "../../../../types/Resources"
+import { DispatchAction, RunnerReducer } from "@/hooks/useRunnerAccess"
+import { Gear } from "@/types/Resources"
 
 export const updateGearList = (list: Gear[] = [], payload: Gear | number) => {
   if (typeof payload === "number") {

next.config.js

@@ -2,6 +2,8 @@ const withPWA = require("next-pwa")
 
 module.exports = withPWA({
   pwa: {
+    disable: process.env.NODE_ENV === "development",
     dest: "public",
   },
+  webpack5: true,
 })