From 140f68453b4a635008d3d099d4b2262a07a491e2 Mon Sep 17 00:00:00 2001 From: pociej Date: Wed, 19 Jun 2024 17:09:03 +0200 Subject: [PATCH] feat: add flow events #82 --- frontend/src/components/homePage/action.tsx | 33 ++++++++++++++----- .../providers/flowEventsProvider.tsx | 31 ++++++++++++----- .../src/components/providers/userProvider.tsx | 4 ++- .../src/hooks/yagna/useReleaseAgreement.ts | 10 ++++-- .../src/hooks/yagna/useReleaseAllocation.ts | 8 ++++- 5 files changed, 64 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/homePage/action.tsx b/frontend/src/components/homePage/action.tsx index 17b1ff6..6977915 100644 --- a/frontend/src/components/homePage/action.tsx +++ b/frontend/src/components/homePage/action.tsx @@ -12,28 +12,32 @@ import { useDepositReleasedEvents } from "hooks/events/useDepositReleasedEvents" import { useYagnaEvents } from "hooks/events/useYagnaEvents"; import { Event } from "types/events"; import { useDepositPaymentEvents } from "hooks/events/usePaymentEvents"; +import { useFlowEvents } from "components/providers/flowEventsProvider"; export const Action = () => { const currentAgreement = useCurrentAgreement(); const { user } = useUser(); + //TODO : this logic should be move outside of this component + // probably we should extend user state provider to handle this + const [state, setState] = useState< - UserState | "HAS_FILE_SCANNED" | "AGREEMENT_RELEASED" | "DEPOSIT_RELEASED" + | UserState + | "HAS_FILE_SCANNED" + | "AGREEMENT_RELEASED" + | "DEPOSIT_RELEASED" + | "WAITING_FOR_PROVIDER_PAYMENT" + | "WAITING_FOR_FEE_PAYMENT" >(user.state); useEffect(() => { - if ( - !["HAS_FILE_SCANNED", "AGREEMENT_RELEASED", "DEPOSIT_RELEASED"].includes( - state - ) - ) { - setState(user.state); - } + setState(user.state); }, [user.state]); const { events$: scanResults$ } = useScanResults(); const { events$: depositResults$ } = useDepositPaymentEvents(); const { events$: yagnaEvents$ } = useYagnaEvents(); + const { events$: flowEvents$ } = useFlowEvents(); useEffect(() => { const subscription = scanResults$.subscribe((event) => { console.log(event); @@ -49,7 +53,7 @@ export const Action = () => { const subscription2 = depositResults$.subscribe((event) => { console.log(event); if (event.kind === Event.DEPOSIT_FEE_PAYMENT) { - // setState("DEPOSIT_RELEASED"); + setState("DEPOSIT_RELEASED"); } }); @@ -59,10 +63,21 @@ export const Action = () => { } }); + const subscription4 = flowEvents$.subscribe((event) => { + if (event === "releaseAllocation") { + setState("WAITING_FOR_FEE_PAYMENT"); + } + + if (event === "releaseAgreement") { + setState("WAITING_FOR_PROVIDER_PAYMENT"); + } + }); + return () => { subscription.unsubscribe(); subscription2.unsubscribe(); subscription3.unsubscribe(); + subscription4.unsubscribe(); }; }, []); diff --git a/frontend/src/components/providers/flowEventsProvider.tsx b/frontend/src/components/providers/flowEventsProvider.tsx index f8efe23..ed6f830 100644 --- a/frontend/src/components/providers/flowEventsProvider.tsx +++ b/frontend/src/components/providers/flowEventsProvider.tsx @@ -1,23 +1,36 @@ import { F } from "ramda"; -import { PropsWithChildren, createContext, useContext } from "react"; +import { PropsWithChildren, createContext, useContext, useRef } from "react"; import { Subject } from "rxjs"; const FlowEventsContext = createContext({ events$: new Subject(), - closeSession: () => { - console.log("close"); + closeSession() { + this.events$.next("close"); + }, + releaseAgreement() { + this.events$.next("releaseAgreement"); + }, + releaseAllocation() { + this.events$.next("releaseAllocation"); }, }); export const FlowEventsProvider = ({ children }: PropsWithChildren) => { - const flowEvents = new Subject(); - const closeSession = () => { - console.log("close"); - flowEvents.complete(); - }; + const flowEvents = useRef({ + events$: new Subject(), + closeSession() { + this.events$.next("close"); + }, + releaseAgreement() { + this.events$.next("releaseAgreement"); + }, + releaseAllocation() { + this.events$.next("releaseAllocation"); + }, + }); return ( - + {children} ); diff --git a/frontend/src/components/providers/userProvider.tsx b/frontend/src/components/providers/userProvider.tsx index 791cd24..a2327ce 100644 --- a/frontend/src/components/providers/userProvider.tsx +++ b/frontend/src/components/providers/userProvider.tsx @@ -163,11 +163,13 @@ const userActionReducer = ( .with(UserAction.HAS_AGREEMENT, () => UserState.HAS_AGREEMENT) .otherwise(() => user.state); + console.log("state", state); + console.log("kind of action", kind); const newUser = { ...user, ...payload, state: - UserStateOrderValue[state] > UserStateOrderValue[user.state] + UserStateOrderValue[state] >= UserStateOrderValue[user.state] ? state : user.state, }; diff --git a/frontend/src/hooks/yagna/useReleaseAgreement.ts b/frontend/src/hooks/yagna/useReleaseAgreement.ts index 718f3af..d577854 100644 --- a/frontend/src/hooks/yagna/useReleaseAgreement.ts +++ b/frontend/src/hooks/yagna/useReleaseAgreement.ts @@ -2,9 +2,11 @@ import axios from "axios"; import useSWRMutation from "swr/mutation"; import { useActionDebounce } from "hooks/useActionDbounce"; +import { useFlowEvents } from "components/providers/flowEventsProvider"; export const useReleaseAgreement = () => { - const { trigger, isMutating } = useSWRMutation( + const { releaseAgreement } = useFlowEvents(); + const { trigger, isMutating, data } = useSWRMutation( `${import.meta.env.VITE_BACKEND_HTTP_URL}/release-agreement`, function (url, { arg }: { arg: string }) { return axios.post(url, { @@ -15,7 +17,11 @@ export const useReleaseAgreement = () => { const isReleasing = useActionDebounce(isMutating, 1000); return { - releaseAgreement: trigger, + releaseAgreement: (arg?: any) => { + trigger(arg).then(() => { + releaseAgreement(); + }); + }, isReleasing, }; }; diff --git a/frontend/src/hooks/yagna/useReleaseAllocation.ts b/frontend/src/hooks/yagna/useReleaseAllocation.ts index 9f893e2..e7193da 100644 --- a/frontend/src/hooks/yagna/useReleaseAllocation.ts +++ b/frontend/src/hooks/yagna/useReleaseAllocation.ts @@ -2,8 +2,10 @@ import axios from "axios"; import useSWRMutation from "swr/mutation"; import { useActionDebounce } from "hooks/useActionDbounce"; +import { useFlowEvents } from "components/providers/flowEventsProvider"; export const useReleaseAllocation = () => { + const { releaseAllocation } = useFlowEvents(); const { trigger, isMutating } = useSWRMutation( `${import.meta.env.VITE_BACKEND_HTTP_URL}/me`, function () { @@ -14,7 +16,11 @@ export const useReleaseAllocation = () => { ); const isReleasing = useActionDebounce(isMutating, 1000); return { - releaseAllocation: trigger, + releaseAllocation: (arg?: any) => { + trigger(arg).then(() => { + releaseAllocation(); + }); + }, isReleasing, }; };