feat: add flow events

#82

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();
     };
   }, []);
 

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 (
-    <FlowEventsContext.Provider value={{ events$: flowEvents, closeSession }}>
+    <FlowEventsContext.Provider value={flowEvents.current}>
       {children}
     </FlowEventsContext.Provider>
   );

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,
   };

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,
   };
 };

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,
   };
 };