feat(ops status): visible indicator

cedio · Oct 24, 2024 · dc6df4b · dc6df4b
1 parent 27b61ad
commit dc6df4b
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 28 deletions.
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
@@ -19,4 +19,13 @@
 
 .navbar a:hover {
   text-decoration: underline;
-}
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+}
+
+.status-indicator .icon {
+  margin-right: 0.5rem;
+}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -1,16 +1,21 @@
 import React from 'react';
-import { AppBar, Toolbar, Typography, Button, IconButton, Drawer, List, ListItem, ListItemText, useTheme, useMediaQuery, Select, MenuItem } from '@mui/material';
-import { Menu as MenuIcon } from '@mui/icons-material';
+import { AppBar, Toolbar, Typography, Button, IconButton, Drawer, List, ListItem, ListItemText, Select, MenuItem, useTheme, useMediaQuery } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
 import { Link } from 'react-router-dom';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { setSelectedCurrency } from '../redux/slices/currencySlice';
+import useOnlineStatus from '../hooks/useOnlineStatus';
+import CircleIcon from '@mui/icons-material/Circle'; // Icon for status indicator
+import { green, red } from '@mui/material/colors';
+import './Navbar.css'; // Ensure you have appropriate styles
 
 function Navbar() {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const dispatch = useDispatch();
   const { availableCurrencies, selectedCurrency } = useSelector((state) => state.currency);
+  const isOnline = useOnlineStatus(); // Get online status
 
   const handleDrawerToggle = () => {
     setDrawerOpen(!drawerOpen);
@@ -49,6 +54,12 @@ function Navbar() {
             ))}
           </Select>
         </ListItem>
+        <ListItem>
+          <Typography variant="body2" display="flex" alignItems="center">
+            <CircleIcon sx={{ color: isOnline ? green[500] : red[500], mr: 1 }} />
+            {isOnline ? 'Online' : 'Offline'}
+          </Typography>
+        </ListItem>
       </List>
     </div>
   );
@@ -72,19 +83,25 @@ function Navbar() {
               </Button>
             ))}
           {!isMobile && (
-            <Select
-              value={selectedCurrency}
-              onChange={handleCurrencyChange}
-              variant="outlined"
-              size="small"
-              style={{ marginLeft: '1rem', color: 'white', borderColor: 'white' }}
-            >
-              {availableCurrencies.map((currency) => (
-                <MenuItem key={currency} value={currency}>
-                  {currency}
-                </MenuItem>
-              ))}
-            </Select>
+            <>
+              <Select
+                value={selectedCurrency}
+                onChange={handleCurrencyChange}
+                variant="outlined"
+                size="small"
+                style={{ marginLeft: '1rem', color: 'white', borderColor: 'white' }}
+              >
+                {availableCurrencies.map((currency) => (
+                  <MenuItem key={currency} value={currency}>
+                    {currency}
+                  </MenuItem>
+                ))}
+              </Select>
+              <Typography variant="body2" display="flex" alignItems="center" sx={{ ml: 2 }}>
+                <CircleIcon sx={{ color: isOnline ? green[500] : red[500], mr: 0.5 }} />
+                {isOnline ? 'Online' : 'Offline'}
+              </Typography>
+            </>
           )}
         </Toolbar>
       </AppBar>

diff --git a/src/config/currencyConfig.js b/src/config/currencyConfig.js
@@ -0,0 +1,15 @@
+const currencyConfig = {
+  currencies: ['USD', 'EUR', 'GBP', 'JPY', 'HKD', 'CNY', 'TWD'],
+  currencyToCountry: {
+    USD: 'US', // United States
+    EUR: 'DE', // Germany (as a representative of the Eurozone)
+    GBP: 'GB', // United Kingdom
+    JPY: 'JP', // Japan
+    HKD: 'HK', // Hong Kong
+    CNY: 'CN', // China
+    TWD: 'TW', // Taiwan
+    // Add more currencies as needed
+  },
+};
+
+export default currencyConfig;
diff --git a/src/redux/slices/currencySlice.js b/src/redux/slices/currencySlice.js
@@ -1,5 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import currencyService from '../../services/currencyService';
+import currencyConfig from '../../config/currencyConfig'; // Import the config
 
 // Async thunk to fetch exchange rates
 export const fetchExchangeRates = createAsyncThunk(
@@ -13,7 +14,7 @@ export const fetchExchangeRates = createAsyncThunk(
 const currencySlice = createSlice({
   name: 'currency',
   initialState: {
-    availableCurrencies: ['USD', 'EUR', 'GBP', 'JPY', 'HKD', 'CNY', 'TWD'],
+    availableCurrencies: currencyConfig.currencies, // Use config
     selectedCurrency: 'USD',
     exchangeRates: { USD: 1 },
     lastUpdated: null, // Add lastUpdated field

diff --git a/src/utils/currencyToCountry.js b/src/utils/currencyToCountry.js
@@ -1,12 +1,5 @@
-const currencyToCountry = {
-  USD: 'US', // United States
-  EUR: 'DE', // Germany (as a representative of the Eurozone)
-  GBP: 'GB', // United Kingdom
-  JPY: 'JP', // Japan
-  HKD: 'HK', // Hong Kong
-  CNY: 'CN', // China
-  TWD: 'TW', // Taiwan
-  // Add more currencies as needed
-};
+import currencyConfig from '../config/currencyConfig';
+
+const { currencyToCountry } = currencyConfig;
 
 export default currencyToCountry;