From 6154abd4d38d64f65e48d8cc0cb90b7148358ff7 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Tue, 12 Sep 2023 04:18:27 +0400 Subject: [PATCH] fix: load user callbacks while breathing --- src/components/BreathPage/index.tsx | 46 ++++++++++++++++++++-- src/components/UserCallbacksPage/index.tsx | 39 ++---------------- src/store/index.ts | 8 +++- src/store/userCallbacks.ts | 36 +++++++++++++++++ 4 files changed, 89 insertions(+), 40 deletions(-) create mode 100644 src/store/userCallbacks.ts diff --git a/src/components/BreathPage/index.tsx b/src/components/BreathPage/index.tsx index b79177b..0e19267 100644 --- a/src/components/BreathPage/index.tsx +++ b/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(); const [isOpenModal, setIsOpenModal] = useState(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(createCallback); return ( <> diff --git a/src/components/UserCallbacksPage/index.tsx b/src/components/UserCallbacksPage/index.tsx index e1bff46..03364a1 100644 --- a/src/components/UserCallbacksPage/index.tsx +++ b/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(createCallback); return (
@@ -51,7 +21,6 @@ function UserCallbacksPage(): JSX.Element {

Your results has changes...

- {/* {t("you_and", { user: rightUser.name })} */}
diff --git a/src/store/index.ts b/src/store/index.ts index f9f4187..9985028 100644 --- a/src/store/index.ts +++ b/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 diff --git a/src/store/userCallbacks.ts b/src/store/userCallbacks.ts new file mode 100644 index 0000000..12e14c5 --- /dev/null +++ b/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>) { + 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;