#8 Admin header/menu

.env

@@ -3,3 +3,15 @@ REACT_APP_AUTH_BASE_URL=http://localhost:3001
 REACT_APP_REDIRECT_BASE_URL=http://localhost:3001
 REACT_APP_RUUTER_V1_PRIVATE_API_URL=http://localhost:3001
 REACT_APP_RUUTER_V2_PRIVATE_API_URL=http://localhost:3001
+REACT_APP_RUUTER_API_URL=http://localhost:8080
+REACT_APP_BUEROKRATT_CHATBOT_URL=http://buerokratt-chat:8080
+REACT_APP_MENU_URL=https://admin.dev.buerokratt.ee
+REACT_APP_MENU_PATH=/chat/menu.json
+REACT_APP_CUSTOMER_SERVICE_LOGIN=http://localhost:3004/et/dev-auth
+REACT_APP_CONVERSATIONS_BASE_URL=http://localhost:8080/chat
+REACT_APP_TRAINING_BASE_URL=http://localhost:8080/training
+REACT_APP_ANALYTICS_BASE_URL=http://localhost:8080/analytics
+REACT_APP_SERVICES_BASE_URL=http://localhost:8080/services
+REACT_APP_SETTINGS_BASE_URL=http://localhost:8080/settings
+REACT_APP_MONITORING_BASE_URL=http://localhost:8080/monitoring
+REACT_APP_SERVICE_ID=conversations,settings,monitoring

i18n.ts

@@ -11,7 +11,7 @@ import commonET from './src/translations/et/common.json';
   .init({
     debug: import.meta.env.NODE_ENV === 'development',
     fallbackLng: 'et',
-    supportedLngs: ['et'],
+    supportedLngs: ['et','en'],
     resources: {
       en: {
         common: commonEN,

src/App.tsx

@@ -2,41 +2,33 @@ import { FC } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import Layout from './components/layout/layout.tsx';
 import WelcomePage from './pages/info/welcome';
-import useUserInfoStore from "./exportcomponents/src/header/store/store";
+import useStore from "./exportcomponents/src/header/store/store";
 import {useQuery} from "@tanstack/react-query";
 import {UserInfo} from "./exportcomponents/src/header/types/userInfo";
 import MainNavigationPage from "./pages/component/main-navigation";
 
 const App: FC = () => {
-    console.log(import.meta.env.REACT_APP_BASE_URL)
-    // fetching initial person information
-    const store = useUserInfoStore();
-    // const { data: userInfo } = useQuery<{
-    //     data: { custom_jwt_userinfo: UserInfo };
-    // }>({
-    //     queryKey: ['cs-custom-jwt-userinfo'],
-    //     onSuccess: (data: { data: { custom_jwt_userinfo: UserInfo } }) =>
-    //         store.setUserInfo(data.data.custom_jwt_userinfo),
-    // });
-    // const { data: userInfo } = useQuery<UserInfo>({
-    //     queryKey: ['mock-response', 'auth'],
-    //     onSuccess: (data) => store.setUserInfo(data),
-    // });
-
-    const { data: userInfo } = useQuery<UserInfo>({
-        queryKey: ['steps/tim/mock-response', 'auth'],
-        onSuccess: (data) => {
-            console.log(data.response.body.displayName)
-            store.setUserInfo(data.response.body)
+    useQuery<{
+        data: { custom_jwt_userinfo: UserInfo };
+    }>({
+        queryKey: ['mock-response'],
+        onSuccess: (data: { data: { custom_jwt_userinfo: UserInfo } }) => {
+            return useStore.getState().setUserInfo(data.data.custom_jwt_userinfo);
         },
     });
+
   return (
       <Routes>
         <Route element={<Layout />}>
           <Route index element={<Navigate to="/info/welcome" />} />
-          <Route path="/info/welcome" element={<WelcomePage />} />
-          <Route path="/**" element={<WelcomePage />} />
+          <Route path="/info/*" element={<WelcomePage />} />
+          <Route path="/training/*" element={<WelcomePage />} />
+          <Route path="/chat/*" element={<WelcomePage />} />
+          <Route path="/unanswered/*" element={<WelcomePage />} />
+          <Route path="/active/*" element={<WelcomePage />} />
+          <Route path="/analytics/*" element={<WelcomePage />} />
           <Route path="/component/mainnavigation" element={<MainNavigationPage />} />
+          <Route path="/*" element={<MainNavigationPage />} />
         </Route>
       </Routes>
   );

src/components/layout/layout.tsx

@@ -1,17 +1,18 @@
 import { FC, useState } from 'react';
 import { Outlet } from 'react-router-dom';
-// import MainNavigation from 'components/main-navigation/main-navigation.tsx'
 import './layout.scss';
 import { useQuery } from '@tanstack/react-query';
-import { Header, MainNavigation } from "../../exportcomponents/src/index";
+import {
+    Header,
+    MainNavigation
+} from '../../exportcomponents/src/index.ts';
 import useUserInfoStore from "../../exportcomponents/src/header/store/store";
 
 const Layout: FC = () => {
     const CACHE_NAME = 'mainmenu-cache';
     const [MainMenuItems, setMainMenuItems] = useState([])
-
     const  {data, isLoading, status}  = useQuery({
-        queryKey: [import.meta.env.REACT_APP_MENU_PATH,import.meta.env.REACT_APP_MENU_URL],
+        queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
         onSuccess: (res: any) => {
             try {
                 setMainMenuItems(res);
@@ -33,14 +34,16 @@ const Layout: FC = () => {
 
     return (
     <div className='layout'>
-      <div id='placeholder_for_main_navigation'><MainNavigation baseUrl={import.meta.env.REACT_APP_REDIRECT_BASE_URL} items={[]}/></div>
+      <div id='placeholder_for_main_navigation'>
+          <MainNavigation serviceId={import.meta.env.REACT_APP_SERVICE_ID.split(',')} items={MainMenuItems} />
+          {/*<MainNavigation items={items}/>*/}
+      </div>
       <div className='layout__wrapper'>
-        <div id='placeholder_for_header'> <Header
-            user={useUserInfoStore.getState()}
-            baseUrl={"http://localhost:4003"}
-            baseUrlV2={"http://localhost:5003"}
-            analyticsUrl={"http://localhost:6003"}
-        /></div>
+        <div id='placeholder_for_header'>
+            <Header
+            user={useUserInfoStore.getState().userInfo}
+            />
+        </div>
         <main className='layout__main'>
           <Outlet />
         </main>

src/components/main-navigation/main-navigation.tsx

@@ -89,7 +89,7 @@ const MainNavigation: FC<{items: MenuItem[]}> = ({items}) => {
           <>
             <button
               className={clsx('nav__toggle', { 'nav__toggle--icon': !!menuItem.id })}
-              aria-expanded={menuItem.path && checkMenuPath(location.pathname, menuItem.path) ? 'true' : 'false'}
+              aria-expanded={menuItem.path && checkMenuPath(menuItem) ? 'true' : 'false'}
               onClick={handleNavToggle}
             >
               {menuItem.id && (
@@ -110,11 +110,18 @@ const MainNavigation: FC<{items: MenuItem[]}> = ({items}) => {
     );
   };
 
-  const checkMenuPath = (location, path) => {
-    // return location.split('/')[1] === path.split('/')[1];
-    console.log('location ' + location)
-    console.log('path ' + path)
-    return location.includes(path);
+  const urlLocation = window.location.pathname;
+  // console.log(urlLocation);
+  const checkMenuPath = (menuItem) => {
+      const result = isSameRoot(menuItem) && location.pathname.includes(menuItem.path);
+      // if(!result) {
+      //   console.log(menuItem.path);
+      // }
+      return result;
+  }
+
+  const isSameRoot = (menuItem) => {
+    return location.pathname.split("/")[1] === menuItem.path.split("/")[1];
   }
 
   if (!menuItems) return null;

src/components/main-navigation/menu.json

@@ -19,7 +19,7 @@
           "et": "Aktiivsed",
           "en": "Active"
         },
-        "path": "/chat/active"
+        "path": "/active"
       },
       {
         "label": {
@@ -171,7 +171,7 @@
       "et": "Analüütika",
       "en": "Analytics"
     },
-    "path": "#",
+    "path": "/analytics",
     "children": [
       {
         "label": {

src/exportcomponents/CHANGELOG.md

@@ -1,6 +1,54 @@
 # Changelog
-
 All changes to this project will be documented in this file.
+## [0.0.28] - 16-11-2023
+
+- Re applied button styles fix from v0.22
+- Minor fix in logic for menu collapse
+
+## [0.0.27] - 10-11-2023
+
+- Added translation functionality to menu
+- Updated menu opening logic
+- Updated header to match code from chat bot
+- Removed old url links
+- Added appBase param
+
+## [0.0.26] - 24-10-2023
+
+-Updated usersettings
+
+## [0.0.25] - 24-10-2023
+
+-Menu items array fix
+
+## [0.0.23] - 24-10-2023
+
+- Fixed requests using mock data.
+
+## [0.0.22] - 24-10-2023
+
+- Fixed styling issues.
+- Fixed requests using mock data.
+
+## [0.0.21] - 18-09-2023
+
+- Changed service id from string to string[] (array)
+
+## [0.0.20] - 15-09-2023
+
+- Updated menu structure data. Changed main navigation component to use added variables. Changed finding current module logic.
+
+## [0.0.19] - 11-09-2023
+
+- Updated 'storeState' type for header. Removed double 'userInfo' interface declaration.
+
+## [0.0.18] - 11-09-2023
+
+- Updated navigation menu default data.
+
+## [0.0.17] - 06-09-2023
+
+- Updated navigation menu link generation.
 
 ## [0.0.16] - 01-09-2023
 

src/exportcomponents/README.md

@@ -37,17 +37,16 @@ To publish npm newely created package:
     * If you want to use local package, put created package to the root of react app and add depenency like "@exirain/header": "file:exirain-header-0.0.5.tgz" (use proper version)
 ### Using MainNavigation component
   * In Layout component you need to provide fetching and caching the `menu.json` file, code snippet would be:  
-```
-     const CACHE_NAME = 'mainmenu-cache';  
+    const CACHE_NAME = 'mainmenu-cache';  
      const [MainMenuItems, setMainMenuItems] = useState([])   
      const  {data, isLoading, status}  = useQuery({   
      queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],   
      onSuccess: (res: any) => {   
-        try {  
-         setMainMenuItems(res);  
-         localStorage.setItem(CACHE_NAME, JSON.stringify(res));  
-        } catch (e) {  
-            console.log(e);  
+     try {  
+        setMainMenuItems(res);  
+        localStorage.setItem(CACHE_NAME, JSON.stringify(res));  
+     } catch (e) {  
+        console.log(e);  
      }},  
      onError: (error: any) => {  
         setMainMenuItems(getCache());  
@@ -57,28 +56,20 @@ To publish npm newely created package:
         const cache = localStorage.getItem(CACHE_NAME) || '{}';  
         return JSON.parse(cache);  
      }
-```
-  * Then pass this MainMenu items to menu component `<MainNavigation baseUrl={baseUlr} items={MainMenuItems}/>`
+  * Then pass this MainMenu items to menu component `<MainNavigation items={MainMenuItems}/>`
     * If you want to use only local file provided by package then pass empty array instead `[]`
-    * baseUlr is url for menu navigation when switching to different modules.
 ### Using Header component
 * Example of using header component  
-```
   <Header  
     baseUrlV2={import.meta.env.REACT_APP_RUUTER_V2_PRIVATE_API_URL}  
     baseUrl={import.meta.env.REACT_APP_RUUTER_V1_PRIVATE_API_URL}  
     analticsUrl={import.meta.env.REACT_APP_RUUTER_V2_ANALYTICS_API_URL}  
-    user={useUserInfoStore.getState()}  
+  user={useUserInfoStore.getState()}  
   />
-```
 * Make sure all these variables are set in .env file or docker-compose file
-  * user is user information from JWT request
-  * all url are special urls delegated for api to be configurable according to application usage
 * Using user store is critical for header to function since it contains information about user that would be shown in Header
   * User store script in examples folder
-  * You must fetch initial data in App.tsx file and then delegate it to header for displaying(JWT request)
-  * Provide proper query client configs in main/index.tsx as done in other projects(https://github.com/buerokratt/Analytics-Module)
-  * For local development make sure to use mocks and env variable REACT_APP_LOCAL=true
+  * You must fetch initial data in App.tsx file and then delegate it to header for displaying
 
 ### Implemented examples:
 * https://github.com/buerokratt/Training-Module

src/exportcomponents/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exirain/header",
-  "version": "0.0.16",
+  "version": "0.0.28",
   "description": "Generic header that would be injected as dependency for all projects",
   "main": "index.js",
   "scripts": {},
@@ -36,6 +36,11 @@
     "zustand": "^4.4.0"
   },
   "dependencies": {
+    "@types/react": "^18.2.21",
     "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9"
   }
 }

src/exportcomponents/src/header/components/Button/Button.scss

@@ -2,7 +2,6 @@
 @import '../../styles/tools/color';
 @import '../../styles/settings/variables/other';
 @import '../../styles/settings/variables/typography';
-@import '../../styles/settings/variables/typography';
 
 .btn {
   $self: &;
@@ -11,8 +10,7 @@
   align-items: center;
   background: none;
   border: 0;
-  //color: get-color(black-coral-0);
-  color: var(--veera-color-sapphire-blue-10);;
+  color: get-color(black-coral-0);
   cursor: pointer;
   font: inherit;
   gap: get-spacing(rapla);