refactor(client): More fixes

src/components/arrows.tsx

@@ -1,9 +1,9 @@
-import { animated } from "react-spring"
+import { SpringValue, animated } from "react-spring"
 
 type Props = {
   className: string
   style: {
-    transform: string
+    transform: SpringValue<string> | string
   }
 }
 

src/components/inscribete/SpecialVoters/SpecialVoterCards.tsx

@@ -69,7 +69,7 @@ const SpecialVoterMachine = createMachine<
 
 export default function SpecialVoterCards() {
   const { t } = useTranslation()
-  const ref = useRef<HTMLDivElement>()
+  const ref = useRef<HTMLDivElement>(null!)
   const [state, send] = useMachine(SpecialVoterMachine)
 
   useEffect(() => {

src/components/inscribete/SpecialVoters/SpecialVoterReasons.tsx

@@ -23,7 +23,7 @@ export function Reason({ summary, details }: ReasonProps) {
   const [ref, bounds] = useMeasure({ polyfill: ResizeObserver })
   const props = useSpring({
     height: isOpen ? bounds.height || "auto" : 0,
-    visibility: isOpen ? "visible" : "hidden",
+    visibility: isOpen ? ("visible" as const) : ("hidden" as const),
     opacity: isOpen ? 1 : 0,
     transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
   })

src/components/inscribete/SpecialVoters/TabContent.tsx

@@ -44,9 +44,11 @@ export default function TabContent(voter: Props) {
           />
         ))}
       </ul>
-      <Typography tag="p" variant="p" className="mt-4">
-        {t(voter.exceptions)}
-      </Typography>
+      {voter.exceptions && (
+        <Typography tag="p" variant="p" className="mt-4">
+          {t(voter.exceptions)}
+        </Typography>
+      )}
       {voter.documents.length > 1 ? (
         <Dropdown
           selectedOption={voter.title}

src/components/inscribete/SpecialVoters/Tabs.tsx

@@ -73,7 +73,7 @@ export default function Tabs() {
         deadline={t(voter.deadline)}
         documents={voter.documents}
         reasons={voter.reasons}
-        exceptions={t(voter.exceptions)}
+        exceptions={t(voter.exceptions ?? "")}
       />
     </Card>
   )

src/components/inscribete/VoterCard.tsx

@@ -19,7 +19,7 @@ export function VoterCard(voter: Voter) {
   const [ref, bounds] = useMeasure({ polyfill: ResizeObserver })
   const props = useSpring({
     height: isOpen ? bounds.height || "auto" : 0,
-    visibility: isOpen ? "visible" : "hidden",
+    visibility: isOpen ? ("visible" as const) : ("hidden" as const),
     opacity: isOpen ? 1 : 0,
     transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
   })

src/components/inscribete/VoterCenters/CenterInfo.tsx

@@ -60,7 +60,7 @@ const TownInfo = ({ town }: CenterInfoProps) => {
       <div className="mt-8">
         <Link
           className="w-full text-center"
-          to={town.googleMapsLink}
+          to={town.googleMapsLink ?? ""}
           target="_blank"
           variant="primary"
         >

src/components/section.tsx

@@ -21,7 +21,7 @@ function Section(props: SectionProps) {
   const [ref, bounds] = useMeasure({ polyfill: ResizeObserver })
   const springProps = useSpring({
     height: isOpen ? bounds.height || "auto" : 0,
-    visibility: isOpen ? "visible" : "hidden",
+    visibility: isOpen ? ("visible" as const) : ("hidden" as const),
     opacity: isOpen ? 1 : 0,
     transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
   })

src/packages/practica/machines/practice.ts

@@ -3,12 +3,9 @@ import { createMachine, assign } from "xstate"
 import { BallotService } from "../services/ballot-service"
 
 import { MAX_PRECINT_LENGTH } from "../services/constants"
-import {
-  BallotConfigs,
-  BallotsResponse,
-  PracticeContext,
-} from "../services/types"
+import { BallotsResponse, PracticeContext } from "../services/types"
 import { BallotType } from "../../../ballot-validator/types"
+import { BallotConfigs } from "../services/ballot-configs"
 
 type ControlEvent =
   | { type: "start"; userInput: string }

src/packages/practica/resource.ts

@@ -26,7 +26,7 @@ export const BallotResource = {
     ballotPath: string
     votes: string
   }) {
-    return api.post("/createBallotTask", ballot)
+    return api.post<{ uuid: string }>("/createBallotTask", ballot)
   },
 
   getBallotPdf(params: string) {

src/packages/practica/services/ballot-configs/index.ts

@@ -367,3 +367,9 @@ export type BallotConfigs =
   | StateBallotConfig
   | MunicipalBallotConfig
   | LegislativeBallotConfig
+
+export type BallotConfigByType = {
+  estatal: StateBallotConfig
+  municipal: MunicipalBallotConfig
+  legislativa: LegislativeBallotConfig
+}

src/packages/practica/services/ballot-service.ts

@@ -8,13 +8,14 @@ import {
 } from "../strategies"
 import { BallotResource } from "../resource"
 import {
+  BallotConfigByType,
   BallotConfigs,
   LegislativeBallotConfig,
   MunicipalBallotConfig,
   StateBallotConfig,
 } from "./ballot-configs"
 import { ElectiveField } from "./ballot-configs/base"
-import { OcrResult, PracticeContext } from "./types"
+import { Ballots, OcrResult, PracticeContext } from "./types"
 import { getExplicitlySelectedVotes, Vote } from "./vote-service"
 import BallotFinder, { FindByType } from "./ballot-finder-service"
 
@@ -40,7 +41,7 @@ function findPartyVotes(votes: Vote[]) {
   return votes.filter((vote) => vote.position.row === PARTY_ROW)
 }
 
-function getBallot(ballots, ballotType: BallotType): BallotConfigs {
+function getBallot(ballots: Ballots, ballotType: BallotType): BallotConfigs {
   if (ballotType === BallotType.state) {
     return ballots.estatal
   } else if (ballotType === BallotType.municipality) {
@@ -50,6 +51,27 @@ function getBallot(ballots, ballotType: BallotType): BallotConfigs {
   return ballots.legislativa
 }
 
+const fetchBallotConfig = async (
+  type: keyof BallotConfigByType,
+  path: string
+) => {
+  const ballotJson: OcrResult[][] = await BallotResource.getBallot(path)
+
+  if (type === "estatal") {
+    return {
+      [type]: new StateBallotConfig(ballotJson, path),
+    }
+  } else if (type === "municipal") {
+    return {
+      [type]: new MunicipalBallotConfig(ballotJson, path),
+    }
+  }
+
+  return {
+    [type]: new LegislativeBallotConfig(ballotJson, path),
+  }
+}
+
 const BallotService = {
   async fetchBallots(
     _: PracticeContext,
@@ -58,52 +80,18 @@ const BallotService = {
     const ballotPaths = await BallotFinder(userInput, findBy)
 
     // Prefetch ballot data
-    const ballotRequests: Promise<{
-      estatal: StateBallotConfig
-      municipal: MunicipalBallotConfig
-      legislativa: LegislativeBallotConfig
-    }> = Object.entries(ballotPaths).map(async ([key, value]) => {
-      try {
-        const ballotJson: OcrResult[][] = await BallotResource.getBallot(value)
-
-        if (key === "estatal") {
-          return {
-            [key]: new StateBallotConfig(ballotJson, ballotPaths.estatal),
-          }
-        } else if (key === "municipal") {
-          return {
-            [key]: new MunicipalBallotConfig(ballotJson, ballotPaths.municipal),
-          }
-        }
-
-        return {
-          [key]: new LegislativeBallotConfig(
-            ballotJson,
-            ballotPaths.legislativa
-          ),
-        }
-      } catch (err) {
-        console.log(err)
-      }
-    })
-
+    const ballotRequests: Promise<Partial<BallotConfigByType>>[] = [
+      fetchBallotConfig("estatal", ballotPaths.estatal),
+      fetchBallotConfig("municipal", ballotPaths.municipal),
+      fetchBallotConfig("legislativa", ballotPaths.legislativa),
+    ]
     const allBallotsJson = await Promise.all(ballotRequests)
-    const initialValue: {
-      estatal?: StateBallotConfig
-      municipal?: MunicipalBallotConfig
-      legislativa?: LegislativeBallotConfig
-    } = {
-      estatal: undefined,
-      municipal: undefined,
-      legislativa: undefined,
-    }
-
     const ballots = allBallotsJson.reduce((prev, curr) => {
       return {
         ...prev,
         ...curr,
       }
-    }, initialValue)
+    }, {} as BallotConfigByType)
 
     return {
       ballots,
@@ -115,7 +103,7 @@ const BallotService = {
     context: PracticeContext,
     { candidate, position, ballotType }: VoteEvent
   ) {
-    const ballots = context.ballots
+    const ballots = context.ballots as Ballots
     const prevVotes = context.votes
     const existingVoteAtPosition = prevVotes.find(
       (vote) =>

src/packages/practica/services/functions/getBallotDetails.ts

@@ -1,5 +1,5 @@
 import { s3Client } from "../base"
-import { BallotResponse } from "../types"
+import { BallotDetails } from "../types"
 
 export default (path: string) =>
-  s3Client.get<BallotResponse>(`${path}/data.json`)
+  s3Client.get<BallotDetails>(`${path}/data.json`)

src/packages/practica/services/types.ts

@@ -28,7 +28,7 @@ export type VoterDetailsResponse = {
   }
 }
 
-export type BallotResponse = { ocrResult: string; logoImg?: string }[][]
+export type BallotDetails = { ocrResult: string; logoImg?: string }[][]
 
 export type OcrResult = {
   ocrResult: string
@@ -78,8 +78,8 @@ export type VoterInfo = {
   unidad: string
 }
 
-export type BallotsResponse = {
+export interface BallotsResponse {
   estatal: string
   municipal: string
-  legislative: string
+  legislativa: string
 }

src/services/api.ts

@@ -67,8 +67,8 @@ class ApiService {
     return res
   }
 
-  async post(endpoint: string, params: any, options?: RequestOptions) {
-    const res = await this.adapter.post(endpoint, params, options)
+  async post<T>(endpoint: string, params: any, options?: RequestOptions) {
+    const res = await this.adapter.post<T>(endpoint, params, options)
 
     return res
   }