diff --git a/frontend/pages/welcome.js b/frontend/pages/welcome.js index ff4b8909..f5b8c643 100644 --- a/frontend/pages/welcome.js +++ b/frontend/pages/welcome.js @@ -70,7 +70,7 @@ const Welcome = () => { ui.setOnboardingStep(ui.onboardingStep + 1); scrollRef?.current?.scrollIntoView(); } else { - ui.setisOnboardingComplete(true); + ui.setOnboardingComplete(true); router.push("/stream"); } }; diff --git a/frontend/src/components/AppNavbar.js b/frontend/src/components/AppNavbar.js index ecb1291d..119ea7f3 100644 --- a/frontend/src/components/AppNavbar.js +++ b/frontend/src/components/AppNavbar.js @@ -115,12 +115,6 @@ const AppNavbar = () => { ))} {USER_NAV_PATHES.map((item, idx) => { - console.log( - "item.path:", - item.path, - "pathname:", - router.nextRouter.pathname - ); return ( { const router = useRouter(); @@ -53,14 +69,6 @@ const UIProvider = ({ children }) => { } }, [isAppView, user, isLoggingOut]); - useEffect(() => { - if (isInit && router.nextRouter.isReady) { - setAppReady(true); - } else { - setAppReady(false); - } - }, [isInit, router]); - useEffect(() => { if (user && user.username) { setLoggedIn(true); @@ -155,81 +163,109 @@ const UIProvider = ({ children }) => { // *********** Onboarding state ********************** - const onboardingSteps = [ - { - step: "welcome", - description: "Basics of how Moonstream works", - }, - { - step: "subscriptions", - description: "Learn how to subscribe to blockchain events", - }, - { - step: "stream", - description: "Learn how to use your Moonstream to analyze blah blah blah", - }, - ]; + const [onboardingState, setOnboardingState] = useState(false); + const [onboardingStep, setOnboardingStep] = useState(); + const [onboardingStateInit, setOnboardingStateInit] = useState(false); - const [onboardingState, setOnboardingState] = useStorage( - window.localStorage, - "onboardingState", - { - welcome: 0, - subscriptions: 0, - stream: 0, - } - ); - - const [onboardingStep, setOnboardingStep] = useState(() => { - const step = onboardingSteps.findIndex( - (event) => onboardingState[event.step] === 0 - ); - if (step === -1 && isOnboardingComplete) return onboardingSteps.length - 1; - else if (step === -1 && !isOnboardingComplete) return 0; - else return step; - }); - - const [isOnboardingComplete, setisOnboardingComplete] = useStorage( - window.localStorage, - "isOnboardingComplete", - isLoggedIn ? true : false + const setOnboardingComplete = useCallback( + (newState) => { + setOnboardingState({ ...onboardingState, is_complete: newState }); + }, + [onboardingState] ); useEffect(() => { - if (isLoggedIn && !isOnboardingComplete) { + //If onboarding state not exists - fetch it from backend + //If it exists but init is not set - set init true + //If it exists and is init -> post update to backend + if (!onboardingState && user) { + const currentOnboardingState = async () => + PreferencesService.getOnboardingState().then((response) => { + return response.data; + }); + + currentOnboardingState().then((response) => { + setOnboardingState(response); + }); + } else if (user && onboardingState && !onboardingStateInit) { + setOnboardingStateInit(true); + } else if (onboardingStateInit) { + PreferencesService.setOnboardingState(onboardingState); + } + // eslint-disable-next-line + }, [onboardingState, user]); + + useEffect(() => { + //This will set step after state is fetched from backend + if (!Number.isInteger(onboardingStep) && onboardingState) { + const step = onboardingSteps.findIndex( + (event) => onboardingState[event.step] === 0 + ); + if (step === -1 && onboardingState["is_complete"]) + setOnboardingStep(onboardingSteps.length - 1); + else if (step === -1 && !onboardingState["is_complete"]) + return setOnboardingStep(0); + else setOnboardingStep(step); + } + }, [onboardingState, onboardingStep]); + + useEffect(() => { + //redirect to welcome page if yet not completed onboarding + if ( + isLoggedIn && + isAppReady && + onboardingState && + !onboardingState?.is_complete + ) { router.replace("/welcome"); } // eslint-disable-next-line - }, [isLoggedIn, isOnboardingComplete]); + }, [isLoggedIn, onboardingState?.is_complete, isAppReady]); useEffect(() => { - if ( - onboardingSteps.findIndex( - (event) => onboardingState[event.step] === 0 - ) === -1 - ) { - setisOnboardingComplete(true); + //This will set up onboarding complete once user finishes each view at least once + if (onboardingState?.steps && user && isAppReady) { + if ( + onboardingSteps.findIndex( + (event) => onboardingState.steps[event.step] === 0 + ) === -1 + ) { + !onboardingState.is_complete && setOnboardingComplete(true); + } } - //eslint-disable-next-line - }, [onboardingState]); + }, [onboardingState, user, isAppReady, setOnboardingComplete]); useEffect(() => { - if (router.nextRouter.pathname === "/welcome") { - const newOnboardingState = { + //This will update onboardingState when step changes + if ( + router.nextRouter.pathname === "/welcome" && + isAppReady && + user && + Number.isInteger(onboardingStep) && + onboardingState + ) { + setOnboardingState({ ...onboardingState, - [`${onboardingSteps[onboardingStep].step}`]: - onboardingState[onboardingSteps[onboardingStep].step] + 1, - }; - - setOnboardingState(newOnboardingState); + steps: { + ...onboardingState.steps, + [`${onboardingSteps[onboardingStep].step}`]: + onboardingState.steps[onboardingSteps[onboardingStep].step] + 1, + }, + }); } // eslint-disable-next-line - }, [onboardingStep, router.nextRouter.pathname]); - - // const ONBOARDING_STEP_NUM = steps.length; + }, [onboardingStep, router.nextRouter.pathname, user, isAppReady]); // ******************************************************** + useEffect(() => { + if (isInit && router.nextRouter.isReady && onboardingState) { + setAppReady(true); + } else { + setAppReady(false); + } + }, [isInit, router, onboardingState]); + return ( { isEntryDetailView, onboardingStep, setOnboardingStep, - isOnboardingComplete, - setisOnboardingComplete, + setOnboardingComplete, onboardingSteps, setOnboardingState, }} diff --git a/frontend/src/core/services/preferences.service.js b/frontend/src/core/services/preferences.service.js index b81cba51..7a98fc9b 100644 --- a/frontend/src/core/services/preferences.service.js +++ b/frontend/src/core/services/preferences.service.js @@ -1,23 +1,18 @@ import { http } from "../utils"; -const API = process.env.NEXT_PUBLIC_SIMIOTICS_JOURNALS_URL; -const PREFERENCES_API = `${API}/preferences`; +const API_URL = process.env.NEXT_PUBLIC_MOONSTREAM_API_URL; +export const PREFERENCES_URL = `${API_URL}/users`; -export const getDefaultJournal = () => +export const getOnboardingState = () => http({ method: "GET", - url: `${PREFERENCES_API}/default_journal`, + url: `${PREFERENCES_URL}/onboarding`, }); -export const setDefaultJournal = (journalId) => - http({ +export const setOnboardingState = (data) => { + return http({ method: "POST", - url: `${PREFERENCES_API}/default_journal`, - data: { id: journalId }, - }); - -export const unsetDefaultJournal = () => - http({ - method: "DELETE", - url: `${PREFERENCES_API}/default_journal`, + url: `${PREFERENCES_URL}/onboarding`, + data, }); +};