From 03f6b7808b57656847a94f95a526a1aeb2b1b35c Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 12 Mar 2025 01:10:33 +0530 Subject: [PATCH 01/12] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..f1687085 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = () => { + const handleChange = (isChecked: boolean) => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From b779e089da27fe7eaf57faa18d797c43eb621a78 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Fri, 14 Mar 2025 04:08:35 +0530 Subject: [PATCH 02/12] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index f1687085..d3bd390b 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = (isChecked: boolean) => { + const handleChange = () => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 3af01b575f6ce6527abc9f1b17aa730331362740 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 12 Mar 2025 01:10:33 +0530 Subject: [PATCH 03/12] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..f1687085 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = () => { + const handleChange = (isChecked: boolean) => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From cd2523bbd75cbebf3f126a5d1274afd018c44e29 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Sun, 16 Mar 2025 18:08:53 +0530 Subject: [PATCH 04/12] update is checked Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index f1687085..d3bd390b 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = (isChecked: boolean) => { + const handleChange = () => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From c1394bf4acee54f9e37d3d80e2fec536e06b8fb8 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 19 Mar 2025 01:19:31 +0530 Subject: [PATCH 05/12] fix(button): share functionality fixing for collaborative editing - I297 Signed-off-by: Dharma Teja --- src/App.tsx | 209 +++++++++++++++++++----------------- src/components/Content.tsx | 15 ++- src/components/UseShare.tsx | 20 ++-- src/store/store.ts | 53 ++++----- 4 files changed, 154 insertions(+), 143 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d65e6f29..108f786c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; -import { App as AntdApp, Layout, Row, Col, Collapse } from "antd"; -import { Routes, Route, useSearchParams } from "react-router-dom"; +import { App as AntdApp, Layout, Row, Col, Collapse, Spin } from "antd"; +import { LoadingOutlined } from "@ant-design/icons"; +import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom"; import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; import tour from "./components/Tour"; @@ -18,10 +19,9 @@ import FloatingFAB from "./components/FabButton"; const { Content } = Layout; - const App = () => { + const navigate = useNavigate(); const init = useAppStore((state) => state.init); - const loadFromLink = useAppStore((state) => state.loadFromLink); const backgroundColor = useAppStore((state) => state.backgroundColor); const textColor = useAppStore((state) => state.textColor); const [activePanel, setActivePanel] = useState(); @@ -35,66 +35,64 @@ const App = () => { } }; - const onChange = (key: string | string[]) => { setActivePanel(key); }; useEffect(() => { const initializeApp = async () => { - try{ - await init(); - const compressedData = searchParams.get("data"); - if (compressedData) { - await loadFromLink(compressedData); + try { + setLoading(true); + await init(); + const compressedData = searchParams.get("data"); + if (compressedData && window.location.pathname !== "/") { + navigate("/", { replace: true }); + } + } catch (error) { + console.error("Initialization error:", error); + } finally { + setLoading(false); } - } catch(error){ - console.error(error); - } finally { - setLoading(false); - } - }; - void initializeApp(); + }; + initializeApp(); + }, [init, searchParams, navigate]); - // DarkMode Styles + useEffect(() => { const style = document.createElement("style"); style.innerHTML = ` - .ant-collapse-header { - color: ${textColor} !important; - } - .ant-collapse-content { - background-color: ${backgroundColor} !important; - } - .ant-collapse-content-active { - background-color: ${backgroundColor} !important; - } -`; + .ant-collapse-header { + color: ${textColor} !important; + } + .ant-collapse-content { + background-color: ${backgroundColor} !important; + } + .ant-collapse-content-active { + background-color: ${backgroundColor} !important; + } + `; document.head.appendChild(style); return () => { document.head.removeChild(style); }; - }, [init, loadFromLink, searchParams, textColor, backgroundColor]); + }, [backgroundColor, textColor]); useEffect(() => { const startTour = async () => { try { await tour.start(); + localStorage.setItem("hasVisited", "true"); } catch (error) { console.error("Tour failed to start:", error); } }; const showTour = searchParams.get("showTour") === "true"; - if (showTour || !localStorage.getItem("hasVisited")) { - void startTour(); - localStorage.setItem("hasVisited", "true"); + startTour(); } }, [searchParams]); - - const panels = [ { key: "templateMark", @@ -118,91 +116,102 @@ const App = () => { - - - - - - - - - - - - - + {loading ? ( +
+ {/* Assuming you have a Spinner component */} +
+ ) : ( + + - - - - + -
-
- + + + + + + +
+ + + + + + + + +
+ - - - } - /> - - }> - {/* ❕ learning-module routes */} - } /> - } - /> - } - /> - - } + } /> - - + }> + } /> + } /> + } /> + } /> + + + )}