From f916a5a4ad1a8d1b4560ace623fe04bedce781af Mon Sep 17 00:00:00 2001 From: biratdatta Date: Sat, 16 Mar 2024 22:12:37 +0530 Subject: [PATCH 1/5] fix vercel issues --- src/molecules/sidebar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/molecules/sidebar/index.tsx b/src/molecules/sidebar/index.tsx index 9abecb98..ea7a0136 100644 --- a/src/molecules/sidebar/index.tsx +++ b/src/molecules/sidebar/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import { useState } from "react"; import Box from "@mui/material/Box"; import Drawer from "@mui/material/Drawer"; import List from "@mui/material/List"; From 1a6008a763a9a49b7c725a5b8a684c64def84545 Mon Sep 17 00:00:00 2001 From: biratdatta Date: Sun, 17 Mar 2024 16:24:26 +0530 Subject: [PATCH 2/5] introduced config.json to dynamically update the required features from the config.json file --- src/molecules/sidebar/config.json | 38 +++++ src/molecules/sidebar/index.tsx | 238 +++++++++++++++--------------- 2 files changed, 155 insertions(+), 121 deletions(-) create mode 100644 src/molecules/sidebar/config.json diff --git a/src/molecules/sidebar/config.json b/src/molecules/sidebar/config.json new file mode 100644 index 00000000..86eaf703 --- /dev/null +++ b/src/molecules/sidebar/config.json @@ -0,0 +1,38 @@ +{ + "component": { + "sidebar": { + "showLangSwitcher": true, + "languages": [ + { + "code": "en", + "label": "ENG" + }, + { + "code": "or", + "label": "ଓଡ଼ିଆ" + } + ], + "showProfileIcon": true, + "profileText": "Welcome, User", + "links": [ + { + "label": "FAQ Page", + "icon": "HelpIcon", + "route": "" + }, + { + "label": "Chat Page", + "icon": "HistoryIcon", + "route": "" + }, + { + "label": "Feedback", + "icon": "FeedbackIcon", + "route": "" + } + ], + "showLogoutButton": true, + "logoutButtonLabel": "Logout" + } + } +} diff --git a/src/molecules/sidebar/index.tsx b/src/molecules/sidebar/index.tsx index ea7a0136..0da58f78 100644 --- a/src/molecules/sidebar/index.tsx +++ b/src/molecules/sidebar/index.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import Box from "@mui/material/Box"; import Drawer from "@mui/material/Drawer"; import List from "@mui/material/List"; @@ -7,148 +7,144 @@ import ListItem from "@mui/material/ListItem"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; - +import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import AccountCircleIcon from "@mui/icons-material/AccountCircle"; import HistoryIcon from "@mui/icons-material/History"; import HelpIcon from "@mui/icons-material/Help"; import FeedbackIcon from "@mui/icons-material/Feedback"; import LogoutIcon from "@mui/icons-material/Logout"; - -import ChevronRightIcon from "@mui/icons-material/ChevronRight"; - export const Sidebar = ({ isOpen, onToggle }: { isOpen: boolean, onToggle: () => void }) => { - const [isEnglish, setIsEnglish] = useState(true); + const [config, setConfig] = useState<{ + showLangSwitcher: boolean; + languages: { code: string; label: string; }[]; + showProfileIcon: boolean; + profileText: string; + links: { label: string; icon: string; route: string; }[]; + showLogoutButton: boolean; + logoutButtonLabel: string; + } | null>(null); + const [activeLanguage, setActiveLanguage] = useState("en"); + + useEffect(() => { + import("./config.json") + .then((data) => { + setConfig(data.component.sidebar); + }); + }, []); - const toggleLanguage = () => { - setIsEnglish((prevState) => !prevState); + const handleLanguageClick = (langCode: string) => { + setActiveLanguage(langCode); + onToggle(); }; - const handleItemClick = () => { - onToggle(); + onToggle(); }; return (
- - - - - - - -
- - + {config && ( + + {config.showLangSwitcher && ( + + + + + +
+ {config.languages.map((lang, index) => ( + + ))} +
+ + + )} + + {config.showProfileIcon && ( + + + + + + + + + )} + + {config.links.map((link, index) => ( +
+ + + + {getIconComponent(link.icon)} + + + + + +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ))} + + {config.showLogoutButton && ( + + + + + + + + + + )} + + )}
); }; +const getIconComponent = (iconName: string) => { + switch (iconName) { + case "HistoryIcon": + return ; + case "HelpIcon": + return ; + case "FeedbackIcon": + return ; + default: + return null; + } +}; + export default Sidebar; From 241f749fb47f17d10315e8ae1410b96c8012e399 Mon Sep 17 00:00:00 2001 From: biratdatta Date: Sun, 17 Mar 2024 23:46:51 +0530 Subject: [PATCH 3/5] fixed issues with build --- src/App.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index ef544dcf..67dd8ad4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,5 +34,4 @@ function App() { ); } - export default App; From 0eaecf1e42255e6b14137b470203c823ac019987 Mon Sep 17 00:00:00 2001 From: biratdatta Date: Sun, 17 Mar 2024 23:48:32 +0530 Subject: [PATCH 4/5] fixed build issues --- src/molecules/index.json | 6 +----- src/molecules/theme-provider/theme-context.ts | 11 +++-------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/src/molecules/index.json b/src/molecules/index.json index 7d790ce2..d683b9cc 100644 --- a/src/molecules/index.json +++ b/src/molecules/index.json @@ -10,10 +10,6 @@ "OTPInput", "Navbar" - "pages":["login-mobile-aadhar-page", "otp-page","history-page","coming-soon-page","downtime-page","faq-page"], - "molecules": [ - "otp-input", - "theme-provider" - + ] } \ No newline at end of file diff --git a/src/molecules/theme-provider/theme-context.ts b/src/molecules/theme-provider/theme-context.ts index e4bc1435..71490906 100644 --- a/src/molecules/theme-provider/theme-context.ts +++ b/src/molecules/theme-provider/theme-context.ts @@ -2,8 +2,8 @@ import { createContext } from "react"; import { Theme } from "@mui/material/styles"; -import { Theme, createTheme } from "@mui/material/styles"; - dev import { Color } from "../../components/theme-picker"; + + import { Color } from "../../components/theme-picker"; interface ThemeContextType { theme: Theme; @@ -15,12 +15,7 @@ export const ThemeContext = createContext( undefined -{ - - theme: createTheme(), // Replace with your default theme creation function - modifyTheme: () => {}, // Empty function for now - modifyPaletes: () => {} // Empty function for now - } + ); From 004e2ed057dcc0445ff750cb7604a341263a3585 Mon Sep 17 00:00:00 2001 From: biratdatta Date: Mon, 18 Mar 2024 11:41:36 +0530 Subject: [PATCH 5/5] fixed sidebar build issues --- src/molecules/sidebar/index.tsx | 148 +------------------------------- 1 file changed, 4 insertions(+), 144 deletions(-) diff --git a/src/molecules/sidebar/index.tsx b/src/molecules/sidebar/index.tsx index 0a59706e..18fa2dae 100644 --- a/src/molecules/sidebar/index.tsx +++ b/src/molecules/sidebar/index.tsx @@ -1,8 +1,4 @@ - -import { useState, useEffect } from "react"; - - - +import { useState, useEffect } from "react"; import Box from "@mui/material/Box"; import Drawer from "@mui/material/Drawer"; import List from "@mui/material/List"; @@ -11,18 +7,14 @@ import ListItem from "@mui/material/ListItem"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; - import ChevronRightIcon from "@mui/icons-material/ChevronRight"; - - - import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import AccountCircleIcon from "@mui/icons-material/AccountCircle"; import HistoryIcon from "@mui/icons-material/History"; import HelpIcon from "@mui/icons-material/Help"; import FeedbackIcon from "@mui/icons-material/Feedback"; import LogoutIcon from "@mui/icons-material/Logout"; - + export const Sidebar = ({ isOpen, onToggle }: { isOpen: boolean, onToggle: () => void }) => { const [config, setConfig] = useState<{ showLangSwitcher: boolean; @@ -33,8 +25,7 @@ export const Sidebar = ({ isOpen, onToggle }: { isOpen: boolean, onToggle: () => showLogoutButton: boolean; logoutButtonLabel: string; } | null>(null); - const [activeLanguage, setActiveLanguage] = useState("en"); - + const [activeLanguage, setActiveLanguage] = useState("en"); useEffect(() => { import("./config.json") .then((data) => { @@ -49,28 +40,12 @@ export const Sidebar = ({ isOpen, onToggle }: { isOpen: boolean, onToggle: () => const handleItemClick = () => { onToggle(); - - -import ChevronRightIcon from "@mui/icons-material/ChevronRight"; - -export const Sidebar = ({ isOpen, onToggle }: { isOpen: boolean, onToggle: () => void }) => { - const [isEnglish, setIsEnglish] = useState(true); - - const toggleLanguage = () => { - setIsEnglish((prevState) => !prevState); - }; - - - const handleItemClick = () => { - onToggle(); - }; return (
- {config && ( {config.showLangSwitcher && ( @@ -153,126 +128,12 @@ export const Sidebar = ({ isOpen, onToggle }: { isOpen: boolean, onToggle: () => )} )} - - - - - - - - -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
); }; - + const getIconComponent = (iconName: string) => { switch (iconName) { case "HistoryIcon": @@ -286,5 +147,4 @@ const getIconComponent = (iconName: string) => { } }; - export default Sidebar;