refactor(client): Adds type fixes

Code4PuertoRico · Dec 10, 2023 · 9b244f5 · 9b244f5
1 parent 72dc8f6
commit 9b244f5
Show file tree

Hide file tree

Showing 11 changed files with 238 additions and 166 deletions.
diff --git a/src/components/inscribete/FindVoterCenter/FindYourCenter.tsx b/src/components/inscribete/FindVoterCenter/FindYourCenter.tsx
@@ -5,15 +5,15 @@ import { useTranslation } from "react-i18next"
 
 import Button from "../../button"
 import Typography from "../../typography"
-import { findYourCenterMachine } from "./findYourCenterMachine"
+import { FindYourCenterMachine } from "./findYourCenterMachine"
 import Link from "../../link"
 
 const EMBED_LINK_BASE =
   "https://maps.google.com/maps?t=&z=13&ie=UTF8&iwloc=&output=embed&q="
 
 export const FindYourCenter = () => {
   const { t } = useTranslation()
-  const [current, send] = useMachine(findYourCenterMachine)
+  const [current, send] = useMachine(FindYourCenterMachine)
 
   const inputRef = useRef<HTMLInputElement>(null)
 

diff --git a/src/components/inscribete/FindVoterCenter/findYourCenterMachine.tsx b/src/components/inscribete/FindVoterCenter/findYourCenterMachine.tsx
@@ -9,7 +9,7 @@ const getVoterDetails = (voterId?: string) => {
   return VoterInformationResource.getVoterInfo(voterId)
 }
 
-export const findYourCenterMachine = createMachine<
+export const FindYourCenterMachine = createMachine<
   FindYourCenterContext,
   FindYourCenterEvent
 >(

diff --git a/src/components/inscribete/SpecialVoters/SpecialVoterCards.tsx b/src/components/inscribete/SpecialVoters/SpecialVoterCards.tsx
@@ -10,6 +10,15 @@ import SpecialVoterCard from "./SpecialVoterCard"
 import SpecialVoterReasons from "./SpecialVoterReasons"
 import { useTranslation } from "react-i18next"
 
+interface SpecialVotersContext {
+  previous: string
+}
+
+type SpecialVotersEvent =
+  | { type: "ABSENTEE_VOTER_TOGGLED" }
+  | { type: "EARLY_VOTER_TOGGLED" }
+  | { type: "CLOSED" }
+
 const config = {
   id: "special-voters",
   initial: "idle",
@@ -40,7 +49,7 @@ const config = {
 }
 
 const actions = {
-  handlePrevUpdate: assign({
+  handlePrevUpdate: assign<SpecialVotersContext, SpecialVotersEvent>({
     previous: (context) => {
       if (context.previous === "idle") {
         return "reasons"
@@ -51,7 +60,10 @@ const actions = {
   }),
 }
 
-const SpecialVoterMachine = createMachine(config, {
+const SpecialVoterMachine = createMachine<
+  SpecialVotersContext,
+  SpecialVotersEvent
+>(config, {
   actions,
 })
 

diff --git a/src/components/switch.tsx b/src/components/switch.tsx
@@ -1,26 +1,25 @@
 import { ReactComponentElement } from "react"
-
 import { State } from "xstate"
 
 import Case from "./case"
 import Default from "./default"
 
-type Props = {
+interface Props {
   children: Array<ReactComponentElement<any, { value?: string }>>
   className?: string
-  state: State<any>
+  state: State<any, any, any, any, any>
 }
 
 export default function Switch({ children, state }: Props) {
-  const match = children.find(child => {
+  const match = children.find((child) => {
     return (
       state.matches(child.props.value) &&
       child.type.componentName === Case.componentName
     )
   })
 
   if (!match) {
-    const defaultCase = children.find(child => {
+    const defaultCase = children.find((child) => {
       return child.type.componentName === Default.componentName
     })
 

diff --git a/src/packages/generate-ballot/components/ballot.tsx b/src/packages/generate-ballot/components/ballot.tsx
@@ -41,7 +41,7 @@ type BallotProps = {
   type: BallotType
   structure: BallotStructure
   votes: Vote[]
-  toggleVote: (
+  toggleVote?: (
     candidate: ElectiveField,
     { row, column }: VotesCoordinates
   ) => void
@@ -52,8 +52,8 @@ export default function BaseBallot(props: BallotProps) {
     props.type === BallotType.state
       ? "bg-ballots-governmental"
       : props.type === BallotType.municipality
-      ? "bg-ballots-municipal"
-      : "bg-ballots-legislative"
+        ? "bg-ballots-municipal"
+        : "bg-ballots-legislative"
   const { highlightedColumn } = useColumnHighlight()
   const isLegislativeBallot = props.type === BallotType.legislative
   const ballotWidth =
@@ -72,129 +72,133 @@ export default function BaseBallot(props: BallotProps) {
                 rowIndex !== 0 ? ballotBg : ""
               }`}
             >
-              {row.map(
-                (col: Party | Rule | Candidate | Header, colIndex: number) => {
-                  const vote = props.votes.find(vote => {
-                    return (
-                      vote.position.row === rowIndex &&
-                      vote.position.column === colIndex
-                    )
-                  })
-                  const hasVote = !!vote
-                  const isExplicitVote = hasVote
-                    ? (vote as Vote).wasSelectedExplictly()
-                    : false
-                  const isImplicitVote = hasVote
-                    ? (vote as Vote).wasSelectedImplicitly()
-                    : false
-                  const isHighlighted = colIndex === highlightedColumn
-                  const voteType = isExplicitVote
-                    ? "explicit-vote"
-                    : isImplicitVote
+              {row.map((col, colIndex) => {
+                const vote = props.votes.find((vote) => {
+                  return (
+                    vote.position.row === rowIndex &&
+                    vote.position.column === colIndex
+                  )
+                })
+                const hasVote = !!vote
+                const isExplicitVote = hasVote
+                  ? (vote as Vote).wasSelectedExplictly()
+                  : false
+                const isImplicitVote = hasVote
+                  ? (vote as Vote).wasSelectedImplicitly()
+                  : false
+                const isHighlighted = colIndex === highlightedColumn
+                const voteType = isExplicitVote
+                  ? "explicit-vote"
+                  : isImplicitVote
                     ? "implicit-vote"
                     : "no-vote"
-                  const voteOpacity = isExplicitVote
-                    ? "opacity-100"
-                    : isImplicitVote
+                const voteOpacity = isExplicitVote
+                  ? "opacity-100"
+                  : isImplicitVote
                     ? "opacity-25"
                     : ""
 
-                  if (col instanceof Party) {
-                    return (
-                      <Ballot.PoliticalParty
-                        key={col.id}
-                        voteType={voteType}
-                        logo={col.insignia}
-                        ocrResult={col.name}
-                        hasVote={hasVote}
-                        voteOpacity={voteOpacity}
-                        position={colIndex}
-                        isHighlighted={isHighlighted}
-                        toggleVote={() =>
-                          props.toggleVote(col, {
-                            row: rowIndex,
-                            column: colIndex,
-                          })
-                        }
-                      />
-                    )
-                  }
+                if (col instanceof Party) {
+                  return (
+                    <Ballot.PoliticalParty
+                      key={col.id}
+                      voteType={voteType}
+                      logo={col.insignia}
+                      ocrResult={col.name}
+                      hasVote={hasVote}
+                      voteOpacity={voteOpacity}
+                      position={colIndex}
+                      isHighlighted={isHighlighted}
+                      toggleVote={() => {
+                        if (props.toggleVote == null) return
 
-                  if (col instanceof WriteInRules) {
-                    return (
-                      <Ballot.WriteInRules
-                        key={col.id}
-                        esTitle={col.esTitle}
-                        esRules={col.esRules}
-                        enTitle={col.enTitle}
-                        enRules={col.enRules}
-                      />
-                    )
-                  }
+                        props.toggleVote(col, {
+                          row: rowIndex,
+                          column: colIndex,
+                        })
+                      }}
+                    />
+                  )
+                }
 
-                  if (col instanceof Rule) {
-                    return <Ballot.Rule key={col.id} ocrResult={col.rule} />
-                  }
+                if (col instanceof WriteInRules) {
+                  return (
+                    <Ballot.WriteInRules
+                      key={col.id}
+                      esTitle={col.esTitle}
+                      esRules={col.esRules}
+                      enTitle={col.enTitle}
+                      enRules={col.enRules}
+                    />
+                  )
+                }
 
-                  if (col instanceof Candidate) {
-                    return (
-                      <Ballot.Candidate
-                        key={col.id}
-                        img={col.img}
-                        name={col.name}
-                        hasVote={hasVote}
-                        voteType={voteType}
-                        voteOpacity={voteOpacity}
-                        accumulationNumber={col.accumulationNumber}
-                        isHighlighted={isHighlighted}
-                        isPartyHighlighted={
-                          isLegislativeBallot
-                            ? col.receivesImpicitVote && isHighlighted
-                            : isHighlighted
-                        }
-                        toggleVote={() =>
-                          props.toggleVote(col, {
-                            row: rowIndex,
-                            column: colIndex,
-                          })
-                        }
-                      />
-                    )
-                  }
+                if (col instanceof Rule) {
+                  return <Ballot.Rule key={col.id} ocrResult={col.rule} />
+                }
 
-                  if (col instanceof WriteInCandidate) {
-                    return (
-                      <Ballot.WriteIn
-                        key={col.id}
-                        accumulationNumber={col.accumulationNumber}
-                        hasVote={hasVote}
-                        voteOpacity={voteOpacity}
-                        voteType={voteType}
-                        toggleVote={() =>
-                          props.toggleVote(col, {
-                            row: rowIndex,
-                            column: colIndex,
-                          })
-                        }
-                        initialTextValue={col.name || vote?.candidate?.name}
-                        updateName={(name: string) => col.setName(name)}
-                      />
-                    )
-                  }
+                if (col instanceof Candidate) {
+                  return (
+                    <Ballot.Candidate
+                      key={col.id}
+                      img={col.img}
+                      name={col.name}
+                      hasVote={hasVote}
+                      voteType={voteType}
+                      voteOpacity={voteOpacity}
+                      accumulationNumber={col.accumulationNumber}
+                      isHighlighted={isHighlighted}
+                      isPartyHighlighted={
+                        isLegislativeBallot
+                          ? col.receivesImpicitVote && isHighlighted
+                          : isHighlighted
+                      }
+                      toggleVote={() => {
+                        if (props.toggleVote == null) return
 
-                  if (col instanceof EmptyCandidacy) {
-                    return <Ballot.EmptyCandidacy key={col.id} />
-                  }
+                        props.toggleVote(col, {
+                          row: rowIndex,
+                          column: colIndex,
+                        })
+                      }}
+                    />
+                  )
+                }
 
+                if (col instanceof WriteInCandidate) {
                   return (
-                    <Ballot.SectionHeader
+                    <Ballot.WriteIn
                       key={col.id}
-                      ocrResult={col.info}
-                      slug={col.slug}
+                      accumulationNumber={col.accumulationNumber}
+                      hasVote={hasVote}
+                      voteOpacity={voteOpacity}
+                      voteType={voteType}
+                      toggleVote={() => {
+                        if (props.toggleVote == null) return
+
+                        props.toggleVote(col, {
+                          row: rowIndex,
+                          column: colIndex,
+                        })
+                      }}
+                      initialTextValue={col.name || vote?.candidate?.name}
+                      updateName={(name: string) => col.setName(name)}
                     />
                   )
                 }
-              )}
+
+                if (col instanceof EmptyCandidacy) {
+                  return <Ballot.EmptyCandidacy key={col.id} />
+                }
+
+                return (
+                  <Ballot.SectionHeader
+                    key={col.id}
+                    ocrResult={col.info}
+                    slug={col.slug}
+                  />
+                )
+              })}
             </div>
           )
         }