diff --git a/src/app/_store/models.ts b/src/app/_store/models.ts index cecfe0ae..46a0e496 100644 --- a/src/app/_store/models.ts +++ b/src/app/_store/models.ts @@ -1,16 +1,19 @@ import { Models } from "@rematch/core"; import { auth } from "@/modules/auth/state"; +import { donationModel } from "@/modules/donation/models"; import { navModel, profilesModel } from "@/modules/profile/models"; export interface RootModel extends Models { auth: typeof auth; + donation: typeof donationModel; profiles: typeof profilesModel; nav: typeof navModel; } export const models: RootModel = { auth, + donation: donationModel, profiles: profilesModel, nav: navModel, }; diff --git a/src/common/api/potlock/hooks.ts b/src/common/api/potlock/hooks.ts index 36470fef..79b31cde 100644 --- a/src/common/api/potlock/hooks.ts +++ b/src/common/api/potlock/hooks.ts @@ -3,12 +3,19 @@ import { REQUEST_CONFIG } from "@/common/constants"; import { swrHooks } from "./generated"; import { ByAccountId, ByPotId } from "./types"; +export const useAccounts = () => swrHooks.useV1AccountsRetrieve(REQUEST_CONFIG); + export const useAccount = ({ accountId }: ByAccountId) => swrHooks.useV1AccountsRetrieve2(accountId, REQUEST_CONFIG); -export const useAccounts = () => swrHooks.useV1AccountsRetrieve(REQUEST_CONFIG); +export const useAccountActivePots = ({ accountId }: ByAccountId) => + swrHooks.useV1AccountsActivePotsRetrieve( + accountId, + { status: "live" }, + REQUEST_CONFIG, + ); + +export const usePots = () => swrHooks.useV1PotsRetrieve(REQUEST_CONFIG); export const usePot = ({ potId }: ByPotId) => swrHooks.useV1PotsRetrieve2(potId, REQUEST_CONFIG); - -export const usePots = () => swrHooks.useV1PotsRetrieve(REQUEST_CONFIG); diff --git a/src/common/ui/components/radio-group.tsx b/src/common/ui/components/radio-group.tsx index d096eac3..5b44c96c 100644 --- a/src/common/ui/components/radio-group.tsx +++ b/src/common/ui/components/radio-group.tsx @@ -79,7 +79,13 @@ export const RadioGroupItem = forwardRef< {label} {hint && ( - + {hint} )} diff --git a/src/modules/donation/components/modal.tsx b/src/modules/donation/components/DonationModal.tsx similarity index 86% rename from src/modules/donation/components/modal.tsx rename to src/modules/donation/components/DonationModal.tsx index c8374251..597d1586 100644 --- a/src/modules/donation/components/modal.tsx +++ b/src/modules/donation/components/DonationModal.tsx @@ -5,8 +5,8 @@ import { create, useModal } from "@ebay/nice-modal-react"; import { AccountId, PotId } from "@/common/api/potlock"; import { Dialog, DialogContent } from "@/common/ui/components"; -import { DonationToAccount } from "./to-account"; -import { DonationToPot } from "./to-pot"; +import { DonationToPot } from "./DonationToPot"; +import { DonationToProject } from "./DonationToProject"; export type DonationModalProps = { accountId: AccountId } | { potId: PotId }; @@ -22,7 +22,7 @@ export const DonationModal = create((props: DonationModalProps) => { {"accountId" in props && ( - + )} {"potId" in props && ( diff --git a/src/modules/donation/components/to-pot.tsx b/src/modules/donation/components/DonationToPot.tsx similarity index 100% rename from src/modules/donation/components/to-pot.tsx rename to src/modules/donation/components/DonationToPot.tsx diff --git a/src/modules/donation/components/to-account.tsx b/src/modules/donation/components/DonationToProject.tsx similarity index 69% rename from src/modules/donation/components/to-account.tsx rename to src/modules/donation/components/DonationToProject.tsx index 1ca648cd..37b39a64 100644 --- a/src/modules/donation/components/to-account.tsx +++ b/src/modules/donation/components/DonationToProject.tsx @@ -1,5 +1,6 @@ -import { useCallback, useMemo, useState } from "react"; +import { useMemo } from "react"; +import { dispatch, useTypedSelector } from "@/app/_store"; import { ByAccountId, potlock } from "@/common/api/potlock"; import { Button, @@ -19,48 +20,32 @@ import { TextField, } from "@/common/ui/components"; -import { useAccountDonationForm } from "../hooks/account-donation"; +import { useProjectDonationForm } from "../hooks/project-donation"; -export type DonationToAccountStep = - | "start" - | "allocation" - | "confirmation" - | "done"; - -export type DonationToAccountProps = ByAccountId & { +export type DonationToProjectProps = ByAccountId & { closeDialog: VoidFunction; }; -export const DonationToAccount: React.FC = ({ +export const DonationToProject: React.FC = ({ accountId, closeDialog: _, }) => { - const { isLoading, data: account, error } = potlock.useAccount({ accountId }); - const form = useAccountDonationForm({ accountId }); - - const [currentStepIndex, setCurrentStepIndex] = - useState("start"); - - const handleNextStep = useCallback( - (step: DonationToAccountStep) => () => { - switch (step) { - case "start": - return setCurrentStepIndex("allocation"); - case "allocation": - return setCurrentStepIndex("confirmation"); - case "confirmation": - return setCurrentStepIndex("done"); - case "done": - return void null; - } - }, - - [], - ); + const { currentStep } = useTypedSelector(({ donation }) => donation); + + const { + isLoading: isAccountLoading, + data: account, + error: accountError, + } = potlock.useAccount({ accountId }); + + const { data: activePots } = potlock.useAccountActivePots({ accountId }); + const hasMatchingPots = (activePots?.length ?? 0) > 0; + + const { onSubmit, ...form } = useProjectDonationForm({}); const currentScreen = useMemo(() => { - switch (currentStepIndex) { - case "start": + switch (currentStep) { + case "allocation": return ( <>
@@ -79,9 +64,9 @@ export const DonationToAccount: React.FC = ({
@@ -125,8 +110,6 @@ export const DonationToAccount: React.FC = ({ /> ); - case "allocation": - return <>; case "confirmation": return <>; case "done": @@ -134,9 +117,9 @@ export const DonationToAccount: React.FC = ({ default: return "Error: Unable to proceed with the next step"; } - }, [currentStepIndex]); + }, [currentStep, hasMatchingPots]); - return isLoading ? ( + return isAccountLoading ? ( = ({ ) : ( <> - {error && error.message} + {accountError && accountError.message} {account !== undefined && ( <> @@ -164,20 +147,17 @@ export const DonationToAccount: React.FC = ({ - diff --git a/src/modules/donation/hooks/account-donation.ts b/src/modules/donation/hooks/account-donation.ts deleted file mode 100644 index 01dbc19a..00000000 --- a/src/modules/donation/hooks/account-donation.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { zodResolver } from "@hookform/resolvers/zod"; -import { useForm } from "react-hook-form"; - -import { ByAccountId, donationSchema } from "@/common/api/potlock"; - -export interface AccountDonation extends ByAccountId {} - -export const useAccountDonationForm = (_: AccountDonation) => { - const { ...form } = useForm({ - resolver: zodResolver(donationSchema), - }); - - return { ...form }; -}; diff --git a/src/modules/donation/hooks/project-donation.ts b/src/modules/donation/hooks/project-donation.ts new file mode 100644 index 00000000..34a409b5 --- /dev/null +++ b/src/modules/donation/hooks/project-donation.ts @@ -0,0 +1,25 @@ +import { useCallback } from "react"; + +import { zodResolver } from "@hookform/resolvers/zod"; +import { SubmitHandler, useForm } from "react-hook-form"; +import { infer as FromSchema } from "zod"; + +import { donationSchema } from "@/common/api/potlock"; + +export const projectDonationSchema = donationSchema; + +export type ProjectDonationInputs = FromSchema; + +export type ProjectDonationFormParameters = {}; + +export const useProjectDonationForm = (_: ProjectDonationFormParameters) => { + const { handleSubmit, ...form } = useForm({ + resolver: zodResolver(donationSchema), + }); + + const onSubmit: SubmitHandler = useCallback((data) => { + console.log(data); + }, []); + + return { onSubmit: handleSubmit(onSubmit), ...form }; +}; diff --git a/src/modules/donation/index.ts b/src/modules/donation/index.ts index c5d7ca78..7c156099 100644 --- a/src/modules/donation/index.ts +++ b/src/modules/donation/index.ts @@ -1 +1 @@ -export { useDonationModal } from "./components/modal"; +export { useDonationModal } from "./components/DonationModal"; diff --git a/src/modules/donation/models.ts b/src/modules/donation/models.ts index e69de29b..f0c53b4d 100644 --- a/src/modules/donation/models.ts +++ b/src/modules/donation/models.ts @@ -0,0 +1,39 @@ +import { createModel } from "@rematch/core"; + +import { RootModel } from "@/app/_store/models"; + +export type DonationStep = "allocation" | "confirmation" | "done"; + +export type DonationState = { + currentStep: DonationStep; +}; + +const setStep = (state: DonationState, step: DonationStep) => ({ + ...state, + currentStep: step, +}); + +export const donationModel = createModel()({ + state: { + currentStep: "allocation", + } as DonationState, + + reducers: { + handleNextStep(state) { + switch (state.currentStep) { + case "allocation": + return setStep(state, "confirmation"); + + case "confirmation": + return setStep(state, "done"); + } + }, + + handlePrevStep(state) { + switch (state.currentStep) { + case "confirmation": + return setStep(state, "allocation"); + } + }, + }, +});