Modularizing navigation bar

Issue-ID: AIMLFW-115

Change-Id: I8addf05d94e24a84511d5d53730c1e5bd9cf19d7
Signed-off-by: CodImJun <codimjun@gmail.com>

diff --git a/src/components/button/index.js b/src/components/button/index.js
new file mode 100644 (file)
index 0000000..3b4c014
--- /dev/null
+++ b/src/components/button/index.js
@@ -0,0 +1 @@
+export * from './theme-toggle-button';

diff --git a/src/components/button/theme-toggle-button.js b/src/components/button/theme-toggle-button.js
new file mode 100644 (file)
index 0000000..d1c65c4
--- /dev/null
+++ b/src/components/button/theme-toggle-button.js
@@ -0,0 +1,9 @@
+import { Button } from 'react-bootstrap';
+
+export const ThemeToggleButton = ({ theme, toggleTheme }) => {
+  return (
+    <Button onClick={toggleTheme} variant={theme === 'dark' ? 'dark' : 'primary'}>
+      {theme === 'dark' ? <i className='bi bi-sun-fill' /> : <i className='bi bi-moon-stars-fill' />}
+    </Button>
+  );
+};

diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js
index 5ad0d14..9921e3b 100644 (file)
--- a/src/components/home/HomePage.js
+++ b/src/components/home/HomePage.js
@@ -22,8 +22,8 @@ import StatusPageRows from './status/StatusPageRows';
 import UploadPipelineForm from './pipelines/UploadPipeline';
 import CreateFeatureGroup from './create/CreateFeatureGroup';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import NavbarComponent from './navbar/NavbarComponent';
 import ListFeatureGroup from './status/ListFeatureGroup';
+import { NavigationBar } from '../navigation';
 import { debug_var } from '../../states';
 
 var DEBUG = debug_var === 'true';
@@ -38,7 +38,7 @@ class HomePage extends React.Component {
     return (
       <>
         <Router>
-          <NavbarComponent />
+          <NavigationBar />
           <Routes>
             <Route path='/' exact component={Home} />
             <Route path='/TrainingJob/CreateTrainingJob' element={<CreateTrainingJob logger={logger} />} />

diff --git a/src/components/home/navbar/NavbarComponent.js b/src/components/home/navbar/NavbarComponent.js
deleted file mode 100644 (file)
index 264a1b4..0000000
--- a/src/components/home/navbar/NavbarComponent.js
+++ /dev/null
@@ -1,58 +0,0 @@
-// ==================================================================================
-
-//        Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved.
-
-//    Licensed under the Apache License, Version 2.0 (the "License");
-//    you may not use this file except in compliance with the License.
-//    You may obtain a copy of the License at
-
-//           http://www.apache.org/licenses/LICENSE-2.0
-
-//    Unless required by applicable law or agreed to in writing, software
-//    distributed under the License is distributed on an "AS IS" BASIS,
-//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//    See the License for the specific language governing permissions and
-//    limitations under the License.
-
-// ==================================================================================
-
-import React, { useState, useEffect } from 'react';
-import { Container, Nav, Navbar, NavDropdown, Button } from 'react-bootstrap';
-import 'bootstrap-icons/font/bootstrap-icons.css';
-import './NavbarComponent.css';
-
-function NavbarComponent() {
-  const [isDarkMode, setIsDarkMode] = useState(() => {
-    const savedTheme = localStorage.getItem('isDarkMode');
-    return savedTheme === 'true';
-  });
-
-  useEffect(() => {
-    document.body.setAttribute('data-bs-theme', isDarkMode ? 'dark' : 'light');
-    localStorage.setItem('isDarkMode', isDarkMode);
-  }, [isDarkMode]);
-
-  const toggleDarkMode = () => {
-    setIsDarkMode(!isDarkMode);
-  };
-
-  return (
-    <Navbar className='nav-bar custom-navbar' variant='dark'>
-      <Container>
-        <Navbar.Brand href='/'>AI/ML Management Dashboard</Navbar.Brand>
-        <Nav>
-          <NavDropdown title="Menu" className="nav-drop-down">
-            <NavDropdown.Item href="/TrainingJob/TrainingJobsStatus">Training Job</NavDropdown.Item>
-            <NavDropdown.Item href="/TrainingJob/Pipeline">Training Function</NavDropdown.Item>
-            <NavDropdown.Item href="/TrainingJob/ListFeatureGroups">Feature Group</NavDropdown.Item>
-          </NavDropdown>
-          <Button onClick={toggleDarkMode} variant={isDarkMode ? 'dark' : 'primary'}>
-            {isDarkMode ? <i className='bi bi-sun-fill'></i> : <i className='bi bi-moon-stars-fill'></i>}
-          </Button>
-        </Nav>
-      </Container>
-    </Navbar>
-  );
-}
-
-export default NavbarComponent;

diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644 (file)
index 0000000..267be40
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,3 @@
+export * from './button';
+export * from './home';
+export * from './navigation';

diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js
new file mode 100644 (file)
index 0000000..c9099a2
--- /dev/null
+++ b/src/components/navigation/index.js
@@ -0,0 +1 @@
+export * from './navigation-bar';

diff --git a/src/components/home/navbar/NavbarComponent.css b/src/components/navigation/navigation-bar.css
similarity index 100%
rename from src/components/home/navbar/NavbarComponent.css
rename to src/components/navigation/navigation-bar.css

diff --git a/src/components/navigation/navigation-bar.js b/src/components/navigation/navigation-bar.js
new file mode 100644 (file)
index 0000000..27058c4
--- /dev/null
+++ b/src/components/navigation/navigation-bar.js
@@ -0,0 +1,26 @@
+import { NavDropdown } from 'react-bootstrap';
+import { Container, Nav, Navbar } from 'react-bootstrap';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import './navigation-bar.css';
+import { useTheme } from '../../hooks';
+import { ThemeToggleButton } from '../button';
+
+export const NavigationBar = () => {
+  const [theme, toggleTheme] = useTheme();
+
+  return (
+    <Navbar className='nav-bar custom-navbar' variant='dark'>
+      <Container>
+        <Navbar.Brand href='/'>AI/ML Management Dashboard</Navbar.Brand>
+        <Nav>
+          <NavDropdown title='Training Jobs' className='nav-drop-down'>
+            <NavDropdown.Item href='/TrainingJob/TrainingJobsStatus'>Training Job</NavDropdown.Item>
+            <NavDropdown.Item href='/TrainingJob/Pipeline'>Training Function</NavDropdown.Item>
+            <NavDropdown.Item href='/TrainingJob/ListFeatureGroups'>Feature Group</NavDropdown.Item>
+          </NavDropdown>
+          <ThemeToggleButton theme={theme} toggleTheme={toggleTheme} />
+        </Nav>
+      </Container>
+    </Navbar>
+  );
+};

diff --git a/src/hooks/index.js b/src/hooks/index.js
new file mode 100644 (file)
index 0000000..7baad7d
--- /dev/null
+++ b/src/hooks/index.js
@@ -0,0 +1 @@
+export * from './useTheme';

diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
new file mode 100644 (file)
index 0000000..66752d9
--- /dev/null
+++ b/src/hooks/useTheme.js
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export const useTheme = () => {
+  const [theme, setTheme] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+    return savedTheme || 'light';
+  });
+
+  useEffect(() => {
+    document.body.setAttribute('data-bs-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
+
+  return [theme, toggleTheme];
+};