fix: load user callbacks while breathing

src/components/BreathPage/index.tsx

@@ -1,10 +1,10 @@
 import styles from "./styles.module.css";
 import BreathCircle from "../BreathCircle";
 import { useCallback, useEffect, useState } from "react";
-import { useApi, useApiCall } from "@/api";
+import { UserCallbacks, useApi, useApiCall } from "@/api";
 import { Asset } from "@/api/resources/Assets";
-import { useSelector } from "react-redux";
-import { selectors } from "@/store";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
 import {
   getCategoryIdByZodiacSign,
   getZodiacSignByDate,
@@ -22,6 +22,7 @@ function BreathPage(): JSX.Element {
   const [asset, setAsset] = useState<Asset>();
   const [isOpenModal, setIsOpenModal] = useState<boolean>(true);
   const api = useApi();
+  const dispatch = useDispatch();
 
   const assetsData = useCallback(async () => {
     const { asset_categories } = await api.getAssetCategories({ locale });
@@ -45,7 +46,44 @@ function BreathPage(): JSX.Element {
 
   const beginBreath = () => {
     setIsOpenModal(false);
-  }
+  };
+
+  const token =
+    "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIzNjEyLCJpYXQiOjE2OTM0MTg5MTAsImV4cCI6MTcwMjA1ODkxMCwianRpIjoiNzg5MjkwYWItODg0YS00MGUyLTkyNjEtOWI2OGEyNjkwNmE0IiwiZW1haWwiOiJvdGhlckBleGFtcGxlLmNvbSIsInN0YXRlIjoicHJvdmVuIiwibG9jIjoiZW4iLCJ0eiI6LTI4ODAwLCJ0eXBlIjoiZW1haWwiLCJpc3MiOiJjb20ubGlmZS5hdXJhIn0.J2ocWIv5jKzuKMcwMgWMiNMyGg5qLlMAeln-bQm_9lw";
+  const createCallback = useCallback(async () => {
+    const data: UserCallbacks.PayloadPost = {
+      data: {
+        user_callback: {
+          kind: "breathing_end",
+        },
+      },
+      token,
+    };
+    const createCallbackRequest = await api.createUserCallbacks(data);
+    dispatch(actions.userCallbacks.update(createCallbackRequest.user_callback));
+    if (!createCallbackRequest.user_callback.is_complete) {
+      const getUserCallbacksRequest = async () => {
+        const getCallback = await api.getUserCallbacks({
+          id: createCallbackRequest.user_callback.id,
+          token,
+        });
+        if (!getCallback.user_callback.is_complete) {
+          setTimeout(getUserCallbacksRequest, 3000);
+        }
+        dispatch(
+          actions.userCallbacks.update({
+            description: getCallback.user_callback.description || "Loading...",
+          })
+        );
+        return getCallback.user_callback;
+      };
+      return await getUserCallbacksRequest();
+    }
+
+    return createCallbackRequest.user_callback;
+  }, [api, dispatch]);
+
+  useApiCall<UserCallbacks.IUserCallbacks>(createCallback);
 
   return (
     <>

src/components/UserCallbacksPage/index.tsx

@@ -3,44 +3,14 @@ import styles from "./styles.module.css";
 import { useCallback, useState } from "react";
 import { UserCallbacks, useApi, useApiCall } from "@/api";
 import { IPrevStateChanges } from "@/api/resources/UserCallbacks";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
 
 function UserCallbacksPage(): JSX.Element {
-  const token =
-    "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIzNjEyLCJpYXQiOjE2OTM0MTg5MTAsImV4cCI6MTcwMjA1ODkxMCwianRpIjoiNzg5MjkwYWItODg0YS00MGUyLTkyNjEtOWI2OGEyNjkwNmE0IiwiZW1haWwiOiJvdGhlckBleGFtcGxlLmNvbSIsInN0YXRlIjoicHJvdmVuIiwibG9jIjoiZW4iLCJ0eiI6LTI4ODAwLCJ0eXBlIjoiZW1haWwiLCJpc3MiOiJjb20ubGlmZS5hdXJhIn0.J2ocWIv5jKzuKMcwMgWMiNMyGg5qLlMAeln-bQm_9lw";
   const api = useApi();
-  const [text, setText] = useState("Loading...");
-  const [statChanges, setStatChanges] = useState([] as IPrevStateChanges[]);
+  const statChanges = useSelector(selectors.selectUserCallbacksPrevStat);
+  const text = useSelector(selectors.selectUserCallbacksDescription);
 
-  const createCallback = useCallback(async () => {
-    const data: UserCallbacks.PayloadPost = {
-      data: {
-        user_callback: {
-          kind: "breathing_end",
-        },
-      },
-      token,
-    };
-    const createCallbackRequest = await api.createUserCallbacks(data);
-    setStatChanges(createCallbackRequest.user_callback.prev_stat_changes);
-    if (!createCallbackRequest.user_callback.is_complete) {
-      const getUserCallbacksRequest = async () => {
-        const getCallback = await api.getUserCallbacks({
-          id: createCallbackRequest.user_callback.id,
-          token,
-        });
-        if (!getCallback.user_callback.is_complete) {
-          setTimeout(getUserCallbacksRequest, 3000);
-        }
-        setText(getCallback.user_callback.description || "Loading...");
-        return getCallback.user_callback;
-      };
-      return await getUserCallbacksRequest();
-    }
-
-    return createCallbackRequest.user_callback;
-  }, [api]);
-
-  useApiCall<UserCallbacks.IUserCallbacks>(createCallback);
 
   return (
     <section className={`${styles.page} page`}>
@@ -51,7 +21,6 @@ function UserCallbacksPage(): JSX.Element {
             <p>Your results has changes...</p>
           </>
         </Title>
-        {/* <Title variant="h2">{t("you_and", { user: rightUser.name })}</Title> */}
       </div>
       <div className={styles["result-container"]}>
         <div className={styles["result-container__values"]}>

src/store/index.ts

@@ -7,13 +7,16 @@ import payment, { actions as paymentActions } from './payment'
 import subscriptionPlans, { actions as subscriptionPlasActions, selectPlanById } from './subscriptionPlan'
 import status, { actions as userStatusActions, selectStatus } from './status'
 import compatibility, { actions as compatibilityActions } from './compatibility'
+import userCallbacks, { actions as userCallbacksActions } from './userCallbacks'
 import { loadStore, backupStore } from './storageHelper'
 import { selectAuraCoordinates } from './aura'
 import { selectSelectedPrice } from './payment'
 import { selectRightUser, selectCategoryId } from './compatibility'
+import { selectUserCallbacksDescription, selectUserCallbacksPrevStat } from './userCallbacks'
+
 
 const preloadedState = loadStore()
-export const reducer = combineReducers({ token, user, form, status, subscriptionPlans, aura, payment, compatibility })
+export const reducer = combineReducers({ token, user, form, status, subscriptionPlans, aura, payment, compatibility, userCallbacks })
 export const actions = {
   token: tokenActions,
   user: userActions,
@@ -23,6 +26,7 @@ export const actions = {
   aura: auraActions,
   compatibility: compatibilityActions,
   payment: paymentActions,
+  userCallbacks: userCallbacksActions,
   reset: createAction('reset'),
 }
 export const selectors = {
@@ -34,6 +38,8 @@ export const selectors = {
   selectRightUser,
   selectCategoryId,
   selectSelectedPrice,
+  selectUserCallbacksDescription,
+  selectUserCallbacksPrevStat,
   ...formSelectors,
 }
 export type RootState = ReturnType<typeof reducer>

src/store/userCallbacks.ts

@@ -0,0 +1,36 @@
+import { IUserCallbacks } from "@/api/resources/UserCallbacks";
+import { createSlice, createSelector } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+
+const initialState: IUserCallbacks = {
+  id: "",
+  user_id: 0,
+  kind: "",
+  created_at: "",
+  updated_at: "",
+  prev_stat_changes: [],
+  description: "",
+  is_complete: false,
+};
+
+const userCallbacksSlice = createSlice({
+  name: "userCallbacks",
+  initialState,
+  reducers: {
+    update(state, action: PayloadAction<Partial<IUserCallbacks>>) {
+      return { ...state, ...action.payload };
+    },
+  },
+  extraReducers: (builder) => builder.addCase("reset", () => initialState),
+});
+
+export const { actions } = userCallbacksSlice;
+export const selectUserCallbacksDescription = createSelector(
+  (state: { userCallbacks: IUserCallbacks }) => state.userCallbacks.description,
+  (userCallbacks) => userCallbacks
+);
+export const selectUserCallbacksPrevStat = createSelector(
+  (state: { userCallbacks: IUserCallbacks }) => state.userCallbacks.prev_stat_changes,
+  (userCallbacks) => userCallbacks
+);
+export default userCallbacksSlice.reducer;