Files
Fulfillment-Frontend/src/pages/CardsPage/contexts/CardPageContext.tsx

71 lines
2.0 KiB
TypeScript

import React, { createContext, FC, useContext, useEffect, useState } from "react";
import { CardSchema, CardService } from "../../../client";
type CardPageContextState = {
selectedCard?: CardSchema;
setSelectedCard: (card: CardSchema | undefined) => void;
refetchCards: () => void;
refetchCard: () => void;
};
const CardPageContext = createContext<CardPageContextState | undefined>(
undefined,
);
type CardPageContextStateProps = {
refetchCards: () => void;
defaultCardId?: number;
}
const useCardPageContextState = (props: CardPageContextStateProps) => {
const { refetchCards, defaultCardId } = props;
const [selectedCard, setSelectedCard] = useState<CardSchema | undefined>(undefined);
const refetchCard = () => {
const cardId = selectedCard?.id ?? defaultCardId;
if (!cardId) return;
CardService.getCardById({ cardId }).then(card => {
setSelectedCard(card);
});
};
useEffect(() => {
refetchCard();
}, []);
return {
selectedCard,
setSelectedCard,
refetchCards,
refetchCard,
};
};
type CardPageContextProviderProps = {
children: React.ReactNode;
} & CardPageContextStateProps;
export const CardPageContextProvider: FC<CardPageContextProviderProps> = ({
children,
...props
}) => {
const state = useCardPageContextState(props);
return (
<CardPageContext.Provider value={state}>
{children}
</CardPageContext.Provider>
);
};
export const useCardPageContext = () => {
const context = useContext(CardPageContext);
if (!context) {
throw new Error(
"useCardPageContext must be used within a CardPageContextProvider",
);
}
return context;
};