added all sample explorations related to common states, hoc components

micro-frontends/sample/package.json

@@ -10,10 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "5.50.1",
+    "axios": "1.7.2",
     "i18next": "23.11.5",
-    "axios":"1.7.2",
     "i18next-http-backend": "2.5.2",
     "idb": "8.0.0",
+    "localforage": "^1.10.0",
     "react": "19.0.0-beta-26f2496093-20240514",
     "react-dom": "19.0.0-beta-26f2496093-20240514",
     "react-hook-form": "7.52.0",

micro-frontends/sample/src/App.jsx

@@ -15,37 +15,65 @@ import LanguageSwitcher from "./components/LanguageSelector";
 import MyComponent from "./components/SampleComponent";
 // import TestIdb from "./pages/TestIdb.jsx";
 // import { isOnline, onNetworkChange } from './networkStatus';
-
+import { useQuery } from "@tanstack/react-query";
 import { Suspense, lazy } from "react";
 import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
+import withAuth from "./hoc/withAuth";
 
 const routes = [
   {
     url: "complex-screen",
+    withAuth: true,
     component: lazy(() => import("./pages/test")),
   },
   {
     url: "tab-form",
+    withAuth: true,
     component: lazy(() => import("./pages/TabForm")),
   },
   {
     url: "TestIdb",
+    withAuth: true,
     component: lazy(() => import("./pages/testIdb")),
   },
   {
     url: "sample",
+    withAuth: true,
     component: lazy(() => import("./pages/Sample")),
   },
   {
     url: "stepper-form",
+    withAuth: false,
     component: lazy(() => import("./pages/StepperForm")),
   },
 ];
+const fetchTodo = async () => {
+  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
+  return response.json();
+};
+
+export const TodoComponent = () => {
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["todo"],
+    queryFn: fetchTodo,
+    refetchInterval: false,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchIntervalInBackground: false,
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return <div>{data.title}</div>;
+};
 
 function App() {
   return (
     <>
       <div>
+        <TodoComponent></TodoComponent>
         <Suspense
           fallback={
             <h1 className="text-2xl text-center font-bold mt-5">Loading...</h1>
@@ -72,7 +100,9 @@ function App() {
                 <Suspense fallback={<div>Loading...</div>}>
                   <Routes>
                     {routes?.map((route) => {
-                      const Component = route?.component;
+                      const Component = route?.withAuth
+                        ? withAuth(route?.component)
+                        : route?.component;
                       return (
                         <Route path={route?.url} element={<Component />} />
                       );

micro-frontends/sample/src/hoc/withAuth.jsx

@@ -0,0 +1,23 @@
+import React, { useLayoutEffect } from "react";
+import withNavigator from "./withNavigator";
+import { useAuthState } from "../state/useAuthState";
+
+const withAuth = (WrappedComponent) => {
+  const { data } = useAuthState();
+  return (props) => {
+    useLayoutEffect(() => {
+      if (data?.isSignedIn) {
+        console.log("user is signed in");
+      } else {
+        console.log("user is not signedin");
+      }
+      return () => {
+        console.log("Component unmounted");
+      };
+    }, []);
+    const WrappedComp = withNavigator(WrappedComponent);
+    return <WrappedComp {...props} />;
+  };
+};
+
+export default withAuth;

micro-frontends/sample/src/hoc/withNavigator.jsx

@@ -0,0 +1,28 @@
+import React, { useLayoutEffect } from "react";
+import { useNavigatorState } from "../state/useNavigatorState";
+
+const withNavigator = (WrappedComponent) => {
+  const { setData, data } = useNavigatorState();
+
+  return (props) => {
+    useLayoutEffect(() => {
+      data?.currentScreen != window.location.pathname &&
+        setData({
+          ...data,
+          currentScreen: window.location.pathname,
+          history: data?.history
+            ? [...data?.history, window.location.pathname]
+            : [window.location.pathname],
+          previousScreen: data?.currentScreen,
+        });
+
+      return () => {
+        console.log("Component unmounted withNavigator");
+      };
+    }, []);
+
+    return <WrappedComponent {...props} />;
+  };
+};
+
+export default withNavigator;

micro-frontends/sample/src/main.jsx

@@ -1,17 +1,23 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
-import { I18nextProvider } from 'react-i18next';
-import i18n from './configs/i18.js';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { I18nextProvider } from "react-i18next";
+import i18n from "./configs/i18.js";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { hydrateAllQueries, queryClient } from "./state/stateConfigs";
 
+const initializeApp = async () => {
+  await hydrateAllQueries();
+  ReactDOM.createRoot(document.getElementById("root")).render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <I18nextProvider i18n={i18n}>
+          <App />
+        </I18nextProvider>
+      </QueryClientProvider>
+    </React.StrictMode>
+  );
+};
 
-
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-   <I18nextProvider i18n={i18n}>
-    <App />
-  </I18nextProvider>
-  </React.StrictMode>,
-)
+initializeApp();