@visns-studio/visns-components 3.2.6 → 3.2.8

package/components/crm/generic/GenericAuth.jsx

@@ -13,12 +13,12 @@ import 'react-tooltip/dist/react-tooltip.css';
 import 'react-toastify/dist/ReactToastify.css';
 
 import CustomFetch from '../Fetch';
+import GenericMain from './GenericMain';
 import Login from '../auth/Login';
 import Reset from '../auth/Reset';
 import Verify from '../auth/Verify';
 
-import Main from '../../../../../../resources/js/main';
-import logo from '../../../../../../resources/images/logo.svg';
+// import Main from '../../../../../../resources/js/main';
 
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     return loading ? null : !user.id ? (
@@ -28,7 +28,7 @@ const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     );
 };
 
-const Auth = () => {
+const GenericAuth = ({ logo, navigation, routeConfig }) => {
     const navigate = useNavigate();
     const location = useLocation();
     const [userProfile, setUserProfile] = useState({});
@@ -65,6 +65,7 @@ const Auth = () => {
                     path="login"
                     element={
                         <LoginComponent
+                            logo={logo}
                             setIsAuthenticated={setIsAuthenticated}
                             setUserProfile={setUserProfile}
                         />
@@ -74,6 +75,7 @@ const Auth = () => {
                     path="reset"
                     element={
                         <ResetComponent
+                            logo={logo}
                             setIsAuthenticated={setIsAuthenticated}
                         />
                     }
@@ -82,6 +84,7 @@ const Auth = () => {
                     path="verify/:code"
                     element={
                         <VerifyComponent
+                            logo={logo}
                             setIsAuthenticated={setIsAuthenticated}
                         />
                     }
@@ -97,11 +100,13 @@ const Auth = () => {
                     <Route
                         path="/*"
                         element={
-                            <MainComponent
-                                checkAuthStatus={updateAuthStatus}
+                            <GenericMain
+                                logo={logo}
+                                navigation={navigation}
+                                routeConfig={routeConfig}
                                 setUserProfile={setUserProfile}
-                                userProfile={userProfile}
                                 setSystemAuth={setIsAuthenticated}
+                                userProfile={userProfile}
                             />
                         }
                     />
@@ -112,39 +117,28 @@ const Auth = () => {
                 position="bottom-center"
                 style={{ width: '600px' }}
             />
+            <Tooltip id="system-tooltip" />
         </>
     );
 };
 
-const LoginComponent = React.memo(({ setIsAuthenticated, setUserProfile }) => (
-    <Login
-        logo={logo}
-        providers={['azure']}
-        setSystemAuth={setIsAuthenticated}
-        setUserProfile={setUserProfile}
-    />
-));
+const LoginComponent = React.memo(
+    ({ logo, setIsAuthenticated, setUserProfile }) => (
+        <Login
+            logo={logo}
+            providers={['azure']}
+            setSystemAuth={setIsAuthenticated}
+            setUserProfile={setUserProfile}
+        />
+    )
+);
 
-const ResetComponent = React.memo(({ setIsAuthenticated }) => (
+const ResetComponent = React.memo(({ logo, setIsAuthenticated }) => (
     <Reset logo={logo} setSystemAuth={setIsAuthenticated} />
 ));
 
-const VerifyComponent = React.memo(({ setIsAuthenticated }) => (
+const VerifyComponent = React.memo(({ logo, setIsAuthenticated }) => (
     <Verify logo={logo} setSystemAuth={setIsAuthenticated} />
 ));
 
-const MainComponent = React.memo(
-    ({ checkAuthStatus, setUserProfile, userProfile, setSystemAuth }) => (
-        <>
-            <Main
-                checkAuthStatus={checkAuthStatus}
-                setSystemAuth={setSystemAuth}
-                userProfile={userProfile}
-                setUserProfile={setUserProfile}
-            />
-            <Tooltip id="system-tooltip" />
-        </>
-    )
-);
-
-export default Auth;
+export default GenericAuth;

package/components/crm/generic/GenericMain.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { Call, Loader, Navigation } from '@visns-studio/visns-components';
+
+const GenericMain = ({
+    logo,
+    navigation,
+    routeConfig,
+    setSystemAuth,
+    setUserProfile,
+    userProfile,
+}) => {
+    const [incomingCallData, setIncomingCallData] = useState({});
+
+    // Recursive function to render routes
+    const renderRoutes = (routes) => {
+        return routes.map((route, index) => {
+            let element;
+
+            if (route.element) {
+                element = React.cloneElement(route.element, {
+                    userProfile: userProfile,
+                    setUserProfile: setUserProfile,
+                });
+            }
+
+            if (route.children && route.children.length > 0) {
+                // If the route has children, render them recursively
+                return (
+                    <Route key={index} path={route.path}>
+                        {renderRoutes(route.children)}
+                    </Route>
+                );
+            } else {
+                return (
+                    <Route key={index} path={route.path} element={element} />
+                );
+            }
+        });
+    };
+
+    return (
+        <div>
+            <header className="header">
+                <Navigation
+                    logo={logo}
+                    navConfig={navigation}
+                    setSystemAuth={setSystemAuth}
+                    userProfile={userProfile}
+                />
+            </header>
+            <main className="content">
+                <div className="content-main" id="app">
+                    <div className="padding">
+                        <Routes>{renderRoutes(routeConfig)}</Routes>
+                    </div>
+                    <Call incomingCallData={incomingCallData} />
+                    <Loader />
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default GenericMain;

package/index.js

@@ -37,6 +37,7 @@ import CmsSort from './components/cms/generic/CmsSort';
 import GenericAuth from './components/crm/generic/GenericAuth';
 import GenericDetail from './components/crm/generic/GenericDetail';
 import GenericIndex from './components/crm/generic/GenericIndex';
+import GenericMain from './components/crm/generic/GenericMain';
 import GenericSort from './components/crm/generic/GenericSort';
 import NotificationList from './components/crm/generic/NotificationList';
 
@@ -58,6 +59,7 @@ export {
     GenericAuth,
     GenericDetail,
     GenericIndex,
+    GenericMain,
     GenericSort,
     Loader,
     Login,

package/package.json

@@ -49,7 +49,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "3.2.6",
+    "version": "3.2.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {