frontend part

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");
     }
   };

frontend/src/components/AppNavbar.js

@@ -115,12 +115,6 @@ const AppNavbar = () => {
                   </RouteButton>
                 ))}
                 {USER_NAV_PATHES.map((item, idx) => {
-                  console.log(
-                    "item.path:",
-                    item.path,
-                    "pathname:",
-                    router.nextRouter.pathname
-                  );
                   return (
                     <RouteButton
                       key={`${idx}-${item.title}-navlink`}

frontend/src/core/providers/UIProvider/index.js

@@ -1,10 +1,26 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect, useCallback } from "react";
 import { useBreakpointValue } from "@chakra-ui/react";
 import { useStorage, useQuery, useRouter } from "../../hooks";
 import UIContext from "./context";
 import UserContext from "../UserProvider/context";
 import ModalContext from "../ModalProvider/context";
 import { v4 as uuid4 } from "uuid";
+import { PreferencesService } from "../../services";
+
+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 UIProvider = ({ children }) => {
   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 setOnboardingComplete = useCallback(
+    (newState) => {
+      setOnboardingState({ ...onboardingState, is_complete: newState });
+    },
+    [onboardingState]
   );
 
-  const [onboardingStep, setOnboardingStep] = useState(() => {
+  useEffect(() => {
+    //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 && 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
-  );
+      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(() => {
-    if (isLoggedIn && !isOnboardingComplete) {
+    //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(() => {
+    //This will set up onboarding complete once user finishes each view at least once
+    if (onboardingState?.steps && user && isAppReady) {
       if (
         onboardingSteps.findIndex(
-        (event) => onboardingState[event.step] === 0
+          (event) => onboardingState.steps[event.step] === 0
         ) === -1
       ) {
-      setisOnboardingComplete(true);
+        !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,
+        steps: {
+          ...onboardingState.steps,
           [`${onboardingSteps[onboardingStep].step}`]:
-          onboardingState[onboardingSteps[onboardingStep].step] + 1,
-      };
-
-      setOnboardingState(newOnboardingState);
+            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 (
     <UIContext.Provider
       value={{
@@ -259,8 +295,7 @@ const UIProvider = ({ children }) => {
         isEntryDetailView,
         onboardingStep,
         setOnboardingStep,
-        isOnboardingComplete,
-        setisOnboardingComplete,
+        setOnboardingComplete,
         onboardingSteps,
         setOnboardingState,
       }}

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