Merge pull request #42 from dapetcu21/fixes-0.1.2

fixes-0.1.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/reusable-components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Component library for code4ro",
   "keywords": [
     "code4ro",

src/components/BarChart/BarChart.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType, ReactNode } from "react";
-import { themable, ThemableComponentProps } from "../../util/theme";
+import { themable, ThemableComponentProps } from "../../hooks/theme";
 
 type Props = {
   width: number;

src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, forwardRef } from "react";
-import { themable, ThemedComponent, ThemedComponentProps } from "../../util/theme";
+import { themable, ThemedComponent, ThemedComponentProps } from "../../hooks/theme";
 import cssClasses from "./Button.module.scss";
 
 export const Button = themable<ComponentProps<"button">>(

src/components/ColoredSquare/ColoredSquare.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import cssClasses from "./ColoredSquare.module.scss";
 
 type Props = {

src/components/ElectionMap/ElectionMap.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useMemo } from "react";
 import { ElectionScopeIncomplete } from "../../types/Election";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import cssClasses from "./ElectionMap.module.scss";
 import RomaniaMap from "../../assets/romania-map.svg";
 import WorldMap from "../../assets/world-map.svg";

src/components/ElectionObservationSection/ElectionObservationSection.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ReactNode } from "react";
 import { ElectionObservation } from "../../types/Election";
 import { formatGroupedNumber } from "../../util/format";
-import { ClassNames, themable, useTheme } from "../../util/theme";
+import { ClassNames, themable, useTheme } from "../../hooks/theme";
 import { DivBodyLarge, Heading2 } from "../Typography/Typography";
 import cssClasses from "./ElectionObservationSection.module.scss";
 import BallotDrop from "../../assets/ballot-drop.svg";

src/components/ElectionResultsProcess/ElectionResultsProcess.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ReactNode } from "react";
 import { ElectionResults } from "../../types/Election";
 import { formatGroupedNumber } from "../../util/format";
-import { ClassNames, themable } from "../../util/theme";
+import { ClassNames, themable } from "../../hooks/theme";
 import { DivBodyHuge, Heading2 } from "../Typography/Typography";
 import cssClasses from "./ElectionResultsProcess.module.scss";
 import BallotFillIn from "../../assets/ballot-fill-in.svg";

src/components/ElectionResultsSeats/ElectionResultsSeats.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useMemo, useState } from "react";
 import { ElectionResults } from "../../types/Election";
 import { electionCandidateColor, formatGroupedNumber } from "../../util/format";
-import { ClassNames, mergeClasses, themable } from "../../util/theme";
+import { ClassNames, mergeClasses, themable } from "../../hooks/theme";
 import { ColoredSquare } from "../ColoredSquare/ColoredSquare";
 import { DivBody, DivLabel } from "../Typography/Typography";
 import useDimensions from "react-use-dimensions";

src/components/ElectionResultsStackedBar/ElectionResultsStackedBar.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { ElectionResults } from "../../types/Election";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import { HorizontalStackedBar, HorizontalStackedBarItem } from "../HorizontalStackedBar/HorizontalStackedBar";
 import { PartyResultCard } from "../PartyResultCard/PartyResultCard";
 import { PartyResultInline } from "../PartyResultInline/PartyResultInline";

src/components/ElectionResultsSummarySection/ElectionResultsSummarySection.tsx

@@ -6,7 +6,7 @@ import {
   electionScopeIsComplete,
   electionTypeInvolvesDiaspora,
 } from "../../types/Election";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import useDimensions from "react-use-dimensions";
 import cssClasses from "./ElectionResultsSummarySection.module.scss";
 import { ElectionResultsStackedBar } from "../ElectionResultsStackedBar/ElectionResultsStackedBar";
@@ -17,7 +17,7 @@ import { ElectionScopeIncompleteWarning } from "../Warning/ElectionScopeIncomple
 import { ElectionResultsSummaryTable } from "../ElectionResultsSummaryTable/ElectionResultsSummaryTable";
 
 type Props = {
-  meta: ElectionBallotMeta;
+  meta?: ElectionBallotMeta;
   scope: ElectionScopeIncompleteResolved;
   results?: ElectionResults | null;
   separator?: ReactNode;
@@ -33,7 +33,7 @@ export const ElectionResultsSummarySection = themable<Props>(
   cssClasses,
   defaultConstants,
 )(({ classes, results, meta, scope, constants, separator }) => {
-  const involvesDiaspora = electionTypeInvolvesDiaspora(meta.type);
+  const involvesDiaspora = !!meta && electionTypeInvolvesDiaspora(meta.type);
 
   const [measureRef, { width }] = useDimensions();
 
@@ -74,7 +74,7 @@ export const ElectionResultsSummarySection = themable<Props>(
       {results && !mobileMap && separator}
       {!mobileMap && (
         <div className={classes.mapSummaryContainer}>
-          {!fullWidthMap && results && (
+          {!fullWidthMap && meta && results && (
             <ElectionResultsSummaryTable className={classes.mapSummaryTable} meta={meta} results={results} />
           )}
           {map}

src/components/ElectionResultsSummaryTable/ElectionResultsSummaryTable.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { electionHasSeats, ElectionBallotMeta, ElectionResults } from "../../types/Election";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import cssClasses from "./ElectionResultsSummaryTable.module.scss";
 import { DivBody, Heading3, makeTypographyComponent } from "../Typography/Typography";
 import { lightFormat, parseISO } from "date-fns";

src/components/ElectionResultsTableSection/ElectionResultsTableSection.tsx

@@ -3,7 +3,7 @@ import { ResultsTable } from "../ResultsTable/ResultsTable";
 import { Heading2 } from "../Typography/Typography";
 import { electionHasSeats, ElectionBallotMeta, ElectionResults, ElectionResultsCandidate } from "../../types/Election";
 import { formatGroupedNumber, formatPercentage, fractionOf } from "../../util/format";
-import { ClassNames, themable } from "../../util/theme";
+import { ClassNames, themable } from "../../hooks/theme";
 import cssClasses from "./ElectionResultsTableSection.module.scss";
 import { Button } from "../Button/Button";
 

src/components/ElectionScopePicker/ElectionScopePicker.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useMemo } from "react";
 import Select from "react-select";
 import { ElectionScope, ElectionScopeIncomplete } from "../../types/Election";
-import { APIRequestState, useApiResponse } from "../../util/api";
+import { APIRequestState } from "../../util/api";
 import { ElectionScopeAPI, OptionWithID } from "../../util/electionApi";
-import { themable, useTheme } from "../../util/theme";
+import { themable, useTheme } from "../../hooks/theme";
 import { Label } from "../Typography/Typography";
 import cssClasses from "./ElectionScopePicker.module.scss";
+import { useApiResponse } from "../../hooks/useApiResponse";
 
 type Props = {
   apiData: ElectionScopePickerAPIData;

src/components/ElectionTimeline/ElectionTimeline.tsx

@@ -1,7 +1,7 @@
 import { parseISO } from "date-fns";
 import React, { useEffect, useMemo, useState } from "react";
 import { ElectionBallotMeta } from "../../types/Election";
-import { mergeClasses, themable } from "../../util/theme";
+import { mergeClasses, themable } from "../../hooks/theme";
 import cssClasses from "./ElectionTimeline.module.scss";
 
 type Props = {

src/components/ElectionTurnoutBars/ElectionTurnoutBars.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { formatGroupedNumber, formatPercentage } from "../../util/format";
-import { themable, useTheme } from "../../util/theme";
+import { themable, useTheme } from "../../hooks/theme";
 import { PercentageBars } from "../PercentageBars/PercentageBars";
 import { PercentageBarsLegend } from "../PercentageBarsLegend/PercentageBarsLegend";
 

src/components/ElectionTurnoutBreakdownChart/ElectionTurnoutBreakdownChart.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ElectionScope, ElectionTurnoutBreakdown } from "../../types/Election";
 import { formatGroupedNumber, formatPercentage } from "../../util/format";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import { BarChart } from "../BarChart/BarChart";
 import { PercentageBarsLegend } from "../PercentageBarsLegend/PercentageBarsLegend";
 import cssClasses from "./ElectionTurnoutBreakdownChart.module.scss";

src/components/ElectionTurnoutSection/ElectionTurnoutSection.tsx

@@ -7,7 +7,7 @@ import {
   electionTypeInvolvesDiaspora,
 } from "../../types/Election";
 import { formatGroupedNumber, formatPercentage, getScopeName } from "../../util/format";
-import { mergeClasses, themable } from "../../util/theme";
+import { mergeClasses, themable } from "../../hooks/theme";
 import { ElectionMap } from "../ElectionMap/ElectionMap";
 import { ElectionTurnoutBars } from "../ElectionTurnoutBars/ElectionTurnoutBars";
 import { ElectionTurnoutBreakdownChart } from "../ElectionTurnoutBreakdownChart/ElectionTurnoutBreakdownChart";
@@ -18,7 +18,7 @@ import BallotCheckmark from "../../assets/ballot-checkmark.svg";
 import { ElectionScopeIncompleteWarning } from "../Warning/ElectionScopeIncompleteWarning";
 
 type Props = {
-  meta: ElectionBallotMeta;
+  meta?: ElectionBallotMeta;
   scope: ElectionScopeIncompleteResolved;
   turnout?: ElectionTurnout | null;
 };
@@ -34,7 +34,7 @@ export const ElectionTurnoutSection = themable<Props>(
   cssClasses,
   defaultConstants,
 )(({ meta, scope, turnout, classes, constants }) => {
-  const involvesDiaspora = electionTypeInvolvesDiaspora(meta.type);
+  const involvesDiaspora = !!meta && electionTypeInvolvesDiaspora(meta.type);
 
   const [measureRef, { width }] = useDimensions();
 

src/components/HereMap/HereMap.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import cssClasses from "./HereMap.module.scss";
 
 type OnFeatureSelect = (featureId: number) => unknown;

src/components/HorizontalStackedBar/HorizontalStackedBar.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import cssClasses from "./HorizontalStackedBar.module.scss";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import { DivBody } from "../Typography/Typography";
 
 export type HorizontalStackedBarItem = {

src/components/PartyResultCard/PartyResultCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import cssClasses from "./PartyResultCard.module.scss";
-import { mergeClasses, themable } from "../../util/theme";
+import { mergeClasses, themable } from "../../hooks/theme";
 import { formatPercentage } from "../../util/format";
 import { DivBodyMedium, DivHeading1 } from "../Typography/Typography";
 import { ColoredSquare } from "../ColoredSquare/ColoredSquare";

src/components/PartyResultInline/PartyResultInline.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { formatGroupedNumber, formatPercentage } from "../../util/format";
-import { themable } from "../../util/theme";
+import { themable } from "../../hooks/theme";
 import { ColoredSquare } from "../ColoredSquare/ColoredSquare";
 import { DivBody, Label } from "../Typography/Typography";
 import cssClasses from "./PartyResultInline.module.scss";

src/components/PercentageBars/PercentageBars.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import cssClasses from "./PercentageBars.module.scss";
-import { mergeClasses, themable } from "../../util/theme";
+import { mergeClasses, themable } from "../../hooks/theme";
 
 type Props = {
   total?: number; // Defaults to the max value in items

src/components/PercentageBarsLegend/PercentageBarsLegend.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import cssClasses from "./PercentageBarsLegend.module.scss";
-import { mergeClasses, themable } from "../../util/theme";
+import { mergeClasses, themable } from "../../hooks/theme";
 import { DivBody } from "../Typography/Typography";
 
 type Props = {

src/components/ResultsTable/ResultsTable.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, forwardRef } from "react";
-import { themable, ThemedComponent, ThemedComponentProps } from "../../util/theme";
+import { themable, ThemedComponent, ThemedComponentProps } from "../../hooks/theme";
 import cssClasses from "./ResultsTable.module.scss";
 
 export const ResultsTable = themable<ComponentProps<"table">>(

src/components/Typography/Typography.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, ComponentType, forwardRef } from "react";
-import { mergeClasses, PropsObject, themable, ThemableComponent, ThemedComponentProps } from "../../util/theme";
+import { mergeClasses, PropsObject, themable, ThemableComponent, ThemedComponentProps } from "../../hooks/theme";
 import cssClasses from "./Typography.module.scss";
 
 export function makeTypographyComponent<Props extends PropsObject>(

src/hooks/electionApiHooks.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { ElectionBallot, ElectionScope } from "../types/Election";
+import { APIRequestState } from "../util/api";
+import { ElectionAPI } from "../util/electionApi";
+import { useApiResponse } from "./useApiResponse";
+
+export const useBallotData = (
+  api: ElectionAPI,
+  ballotId: number | null,
+  scope: ElectionScope | null,
+  autoRefreshInterval: number = 60 * 1000,
+): APIRequestState<ElectionBallot> => {
+  const [timerToken, setTimerToken] = useState<boolean>(false);
+
+  const state = useApiResponse(() => (ballotId != null && scope ? api.getBallot(ballotId, scope) : null), [
+    scope,
+    ballotId,
+    timerToken,
+  ]);
+
+  // Changing the timerToken will re-trigger useApiResponse
+  useEffect(() => {
+    if (state.loading || !state.data?.meta.live) {
+      return undefined;
+    }
+
+    const timerId = setTimeout(() => {
+      setTimerToken((x) => !x);
+    }, autoRefreshInterval);
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, [state.data, state.loading, timerToken, autoRefreshInterval]);
+  return state;
+};

src/hooks/useApiResponse.ts

@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { APIInvocation, APIRequestState } from "../util/api";
+
+export type UseAPIResponseOptions<ResponseType> = {
+  invocation?: APIInvocation<ResponseType> | null;
+  discardPreviousData?: boolean; // Defaults to false
+  discardDataOnError?: boolean; // Defaults to false
+  abortPreviousRequest?: boolean; // Defaults to true
+};
+
+export function useApiResponse<ResponseType>(
+  makeInvocation: () => APIInvocation<ResponseType> | UseAPIResponseOptions<ResponseType> | undefined | void | null,
+  dependencies: unknown[],
+): APIRequestState<ResponseType> {
+  const [state, setState] = useState<APIRequestState<ResponseType>>({
+    data: null,
+    hasData: false,
+    loading: false,
+    error: null,
+  });
+
+  useEffect(() => {
+    const inv = makeInvocation();
+    const options: UseAPIResponseOptions<ResponseType> = (typeof inv === "function" ? { invocation: inv } : inv) || {};
+    const {
+      invocation,
+      discardPreviousData = false,
+      discardDataOnError = false,
+      abortPreviousRequest = true,
+    } = options;
+
+    if (!invocation && !discardPreviousData) return;
+
+    setState((prevState) => ({
+      data: discardPreviousData ? null : prevState.data,
+      hasData: discardPreviousData ? false : prevState.hasData,
+      loading: invocation != null,
+      error: invocation != null || discardPreviousData ? null : prevState.error,
+    }));
+
+    if (!invocation) return;
+
+    const abortController = new AbortController();
+
+    let mounted = true;
+    invocation(abortController.signal).then(
+      (data) => {
+        if (!mounted) return;
+        setState({
+          data,
+          hasData: true,
+          loading: false,
+          error: null,
+        });
+      },
+      (error) => {
+        if (!mounted) return;
+        setState((prevState) => ({
+          data: discardDataOnError ? null : prevState.data,
+          hasData: discardDataOnError ? false : prevState.hasData,
+          loading: false,
+          error,
+        }));
+      },
+    );
+
+    return () => {
+      mounted = false;
+      if (abortPreviousRequest) {
+        abortController.abort();
+      }
+    };
+  }, dependencies);
+
+  return state;
+}

src/index.ts

@@ -1,9 +1,14 @@
-export * from "./util/theme";
 export * from "./util/api";
 export * from "./util/electionApi";
+
 export * from "./constants/servers";
+
 export * from "./types/Election";
 
+export * from "./hooks/theme";
+export * from "./hooks/useApiResponse";
+export * from "./hooks/electionApiHooks";
+
 export * from "./components/Typography/Typography";
 export * from "./components/Button/Button";
 export * from "./components/ColoredSquare/ColoredSquare";

src/stories/APIIntegration.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 import React, { useMemo, useState } from "react";
-import { useApiResponse } from "../util/api";
+import { useApiResponse } from "../hooks/useApiResponse";
 import { ElectionAPI, makeElectionApi } from "../util/electionApi";
 import { mockElectionAPI } from "../util/mocks";
 import { ElectionObservationSection } from "../components/ElectionObservationSection/ElectionObservationSection";