Skip to content

Commit 3e9e825

Browse files
teja-polateja-pola
authored
fix(button): share functionality fixing for collaborative editing - I297 (#298)
* fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * update is checked Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): share functionality fixing for collaborative editing - I297 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): share functionality fixing for collaborative editing - I297 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): share functionality fixing for collaborative editing - I297 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * update is checked Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): share functionality fixing for collaborative editing - I297 Signed-off-by: Dharma Teja <dteja2468@gmail.com> --------- Signed-off-by: Dharma Teja <dteja2468@gmail.com>
1 parent 0ba6343 commit 3e9e825

File tree

10 files changed

+423
-233
lines changed

10 files changed

+423
-233
lines changed

‎package-lock.json‎

Lines changed: 248 additions & 47 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,10 @@
6060
"@rollup/plugin-node-resolve": "^15.1.0",
6161
"@testing-library/jest-dom": "^6.4.5",
6262
"@testing-library/react": "^15.0.7",
63+
"@types/lz-string": "^1.3.34",
6364
"@types/react": "^18.2.15",
6465
"@types/react-dom": "^18.2.7",
66+
"@types/testing-library__jest-dom": "^5.14.9",
6567
"@typescript-eslint/eslint-plugin": "^5.62.0",
6668
"@typescript-eslint/parser": "^5.62.0",
6769
"@vitejs/plugin-react": "^4.0.3",

‎src/App.tsx‎

Lines changed: 112 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect, useState } from "react";
2-
import { App as AntdApp, Layout, Row, Col, Collapse } from "antd";
3-
import { Routes, Route, useSearchParams } from "react-router-dom";
2+
import { App as AntdApp, Layout, Row, Col, Collapse, Spin } from "antd";
3+
import { LoadingOutlined } from "@ant-design/icons";
4+
import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom";
45
import Navbar from "./components/Navbar";
56
import Footer from "./components/Footer";
67
import tour from "./components/Tour";
@@ -18,8 +19,8 @@ import FloatingFAB from "./components/FabButton";
1819

1920
const { Content } = Layout;
2021

21-
2222
const App = () => {
23+
const navigate = useNavigate();
2324
const init = useAppStore((state) => state.init);
2425
const loadFromLink = useAppStore((state) => state.loadFromLink);
2526
const backgroundColor = useAppStore((state) => state.backgroundColor);
@@ -35,66 +36,68 @@ const App = () => {
3536
}
3637
};
3738

38-
3939
const onChange = (key: string | string[]) => {
4040
setActivePanel(key);
4141
};
4242

4343
useEffect(() => {
4444
const initializeApp = async () => {
45-
try{
46-
await init();
47-
const compressedData = searchParams.get("data");
48-
if (compressedData) {
49-
await loadFromLink(compressedData);
45+
try {
46+
setLoading(true);
47+
const compressedData = searchParams.get("data");
48+
if (compressedData) {
49+
await loadFromLink(compressedData);
50+
if (window.location.pathname !== "/") {
51+
navigate("/", { replace: true });
52+
}
53+
} else {
54+
await init();
55+
}
56+
} catch (error) {
57+
console.error("Initialization error:", error);
58+
} finally {
59+
setLoading(false);
5060
}
51-
} catch(error){
52-
console.error(error);
53-
} finally {
54-
setLoading(false);
55-
}
56-
};
57-
void initializeApp();
61+
};
62+
initializeApp();
63+
}, [init, loadFromLink, searchParams, navigate]);
5864

59-
// DarkMode Styles
65+
useEffect(() => {
6066
const style = document.createElement("style");
6167
style.innerHTML = `
62-
.ant-collapse-header {
63-
color: ${textColor} !important;
64-
}
65-
.ant-collapse-content {
66-
background-color: ${backgroundColor} !important;
67-
}
68-
.ant-collapse-content-active {
69-
background-color: ${backgroundColor} !important;
70-
}
71-
`;
68+
.ant-collapse-header {
69+
color: ${textColor} !important;
70+
}
71+
.ant-collapse-content {
72+
background-color: ${backgroundColor} !important;
73+
}
74+
.ant-collapse-content-active {
75+
background-color: ${backgroundColor} !important;
76+
}
77+
`;
7278
document.head.appendChild(style);
7379

7480
return () => {
7581
document.head.removeChild(style);
7682
};
77-
}, [init, loadFromLink, searchParams, textColor, backgroundColor]);
83+
}, [backgroundColor, textColor]);
7884

7985
useEffect(() => {
8086
const startTour = async () => {
8187
try {
8288
await tour.start();
89+
localStorage.setItem("hasVisited", "true");
8390
} catch (error) {
8491
console.error("Tour failed to start:", error);
8592
}
8693
};
8794

8895
const showTour = searchParams.get("showTour") === "true";
89-
9096
if (showTour || !localStorage.getItem("hasVisited")) {
91-
void startTour();
92-
localStorage.setItem("hasVisited", "true");
97+
startTour();
9398
}
9499
}, [searchParams]);
95100

96-
97-
98101
const panels = [
99102
{
100103
key: "templateMark",
@@ -118,91 +121,101 @@ const App = () => {
118121
<Layout style={{ minHeight: "100vh" }}>
119122
<Navbar scrollToFooter={scrollToFooter} />
120123
<Content>
121-
<Routes>
122-
<Route
123-
path="/"
124-
element={
125-
<div
126-
style={{
127-
padding: 24,
128-
paddingBottom: 150,
129-
minHeight: 360,
130-
background: backgroundColor,
131-
}}
132-
>
133-
<Row>
134-
<Col xs={24} sm={8}>
135-
<Row
136-
style={{
137-
marginLeft: "25px",
138-
display: "flex",
139-
flexDirection: "row",
140-
gap: "10px",
141-
}}
142-
>
143-
<SampleDropdown setLoading={setLoading} />
144-
<UseShare />
145-
</Row>
146-
</Col>
147-
<Col span={18}>
148-
<Errors />
149-
</Col>
150-
</Row>
124+
{loading ? (
125+
<div
126+
style={{
127+
flex: 1,
128+
display: "flex",
129+
justifyContent: "center",
130+
alignItems: "center",
131+
minHeight: "calc(100vh - 64px - 70px)", // Adjust for Navbar and Footer height
132+
}}
133+
>
134+
<Spinner />
135+
</div>
136+
) : (
137+
<Routes>
138+
<Route
139+
path="/"
140+
element={
151141
<div
152142
style={{
153143
padding: 24,
144+
paddingBottom: 150,
154145
minHeight: 360,
155146
background: backgroundColor,
156147
}}
157148
>
158-
<Row gutter={24}>
159-
<Col xs={24} sm={16} style={{ paddingBottom: "20px" }}>
160-
<Collapse
161-
defaultActiveKey={activePanel}
162-
onChange={onChange}
163-
items={panels}
164-
/>
165-
</Col>
149+
<Row>
166150
<Col xs={24} sm={8}>
167-
<div
151+
<Row
168152
style={{
169-
marginBottom: "10px",
153+
marginLeft: "25px",
154+
display: "flex",
155+
flexDirection: "row",
156+
gap: "10px",
170157
}}
171158
>
172-
</div>
173-
<AgreementHtml loading={loading} isModal={false} />
159+
<SampleDropdown setLoading={setLoading} />
160+
<UseShare />
161+
</Row>
162+
</Col>
163+
<Col span={18}>
164+
<Errors />
174165
</Col>
175166
</Row>
167+
<div
168+
style={{
169+
padding: 24,
170+
minHeight: 360,
171+
background: backgroundColor,
172+
}}
173+
>
174+
<Row gutter={24}>
175+
<Col xs={24} sm={16} style={{ paddingBottom: "20px" }}>
176+
<Collapse
177+
defaultActiveKey={activePanel}
178+
onChange={onChange}
179+
items={panels}
180+
/>
181+
</Col>
182+
<Col xs={24} sm={8}>
183+
<AgreementHtml loading={loading} isModal={false} />
184+
</Col>
185+
</Row>
186+
</div>
187+
<FloatingFAB />
176188
</div>
177-
<FloatingFAB />
178-
</div>
179-
}
180-
/>
181-
182-
<Route path="/learn" element={<LearnNow />}>
183-
{/* ❕ learning-module routes */}
184-
<Route path="intro" element={<LearnContent file="intro.md" />} />
185-
<Route
186-
path="module1"
187-
element={<LearnContent file="module1.md" />}
188-
/>
189-
<Route
190-
path="module2"
191-
element={<LearnContent file="module2.md" />}
192-
/>
193-
194-
<Route
195-
path="module3"
196-
element={<LearnContent file="module3.md" />}
189+
}
197190
/>
198-
</Route>
199-
</Routes>
191+
<Route path="/learn" element={<LearnNow />}>
192+
<Route path="intro" element={<LearnContent file="intro.md" />} />
193+
<Route path="module1" element={<LearnContent file="module1.md" />} />
194+
<Route path="module2" element={<LearnContent file="module2.md" />} />
195+
<Route path="module3" element={<LearnContent file="module3.md" />} />
196+
</Route>
197+
</Routes>
198+
)}
200199
</Content>
201200
<Footer />
202-
203201
</Layout>
204202
</AntdApp>
205203
);
206204
};
207205

208-
export default App;
206+
const Spinner = () => (
207+
<div
208+
style={{
209+
flex: 1,
210+
display: "flex",
211+
justifyContent: "center",
212+
alignItems: "center",
213+
}}
214+
>
215+
<Spin
216+
indicator={<LoadingOutlined style={{ fontSize: 42, color: "#19c6c7" }} spin />}
217+
/>
218+
</div>
219+
);
220+
221+
export default App;

‎src/components/Content.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ import { Spin } from "antd";
1717
import fetchContent from "../utils/fetchContent";
1818
import { steps } from "../constants/learningSteps/steps";
1919
import { LearnContentProps } from "../types/components/Content.types";
20-
21-
// markdown syntax highlighting theme
2220
import "highlight.js/styles/github.css";
2321

2422
const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
@@ -28,20 +26,21 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
2826
const navigate = useNavigate();
2927

3028
useEffect(() => {
31-
const loadContent = async (): Promise<void> => {
29+
const loadContent = async () => {
3230
try {
3331
setLoading(true);
34-
const content = await fetchContent(file);
35-
setContent(content);
32+
const contentData = await fetchContent(file);
33+
setContent(contentData);
3634
setError(null);
37-
} catch (err: unknown) {
35+
} catch (err) {
3836
setError("Failed to load content");
37+
console.error(err);
3938
} finally {
4039
setLoading(false);
4140
}
4241
};
4342

44-
void loadContent();
43+
loadContent();
4544
}, [file]);
4645

4746
const currentIndex = steps.findIndex((step) =>
@@ -117,4 +116,4 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
117116
);
118117
};
119118

120-
export default LearnContent;
119+
export default LearnContent;

‎src/components/UseShare.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@ const UseShare = () => {
99
);
1010
const [copied, setCopied] = useState(false);
1111

12-
const handleCopy = () => {
13-
const link = generateShareableLink();
14-
void navigator.clipboard.writeText(link).then(() => {
12+
const handleCopy = async () => {
13+
try {
14+
const link = generateShareableLink();
15+
await navigator.clipboard.writeText(link);
1516
setCopied(true);
16-
void message.success("Link copied to clipboard!");
17-
setTimeout(() => {
18-
setCopied(false);
19-
}, 3000);
20-
});
17+
message.success("Link copied to clipboard!");
18+
setTimeout(() => setCopied(false), 3000);
19+
} catch (error) {
20+
message.error("Failed to copy link");
21+
console.error("Clipboard error:", error);
22+
}
2123
};
2224

2325
return (
@@ -29,4 +31,4 @@ const UseShare = () => {
2931
);
3032
};
3133

32-
export default UseShare;
34+
export default UseShare;

‎src/components/useUndoRedo.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
12
import { useState,useEffect } from 'react';
3+
24
function useUndoRedo<T>(initialValue: T, onChange?: (value: T) => void) {
35
const [past, setPast] = useState<T[]>([]);
46
const [present, setPresent] = useState<T>(initialValue);
@@ -14,7 +16,7 @@ function useUndoRedo<T>(initialValue: T, onChange?: (value: T) => void) {
1416
setPast((prevPast) => [...prevPast, present]);
1517
setPresent(newValue);
1618
setFuture([]);
17-
if (onChange) onChange(newValue); // Ensure preview updates
19+
if (onChange) onChange(newValue); // Sync with store
1820
};
1921

2022
const undo = () => {
@@ -38,4 +40,4 @@ function useUndoRedo<T>(initialValue: T, onChange?: (value: T) => void) {
3840
return { value: present, setValue, undo, redo };
3941
}
4042

41-
export default useUndoRedo;
43+
export default useUndoRedo;

0 commit comments

Comments
 (0)