Skip to content

Commit c0a5984

Browse files
committed
Add react-router for routing and refactor MainPage to handle shared IDs
- Introduced `react-router` version 7.6.2 in `package.json`. - Wrapped the application in `HashRouter` for routing in `index.jsx`. - Updated `MainPage` to utilize `useParams` for fetching shared IDs and handle imports using `importHandler`. - Cleaned up `NavBar` by removing unused imports and components.
1 parent f206712 commit c0a5984

File tree

6 files changed

+108
-88
lines changed

6 files changed

+108
-88
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"react-monaco-editor": "^0.58.0",
2121
"react-redux": "^7.2.2",
2222
"react-resize-detector": "^8.0.4",
23+
"react-router": "^7.6.2",
2324
"react-select": "^3.1.0",
2425
"react-split-pane": "^0.1.92",
2526
"redux": "^5.0.1",

pnpm-lock.yaml

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

src/components/NavBar.jsx

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,9 @@ import { Heading, HeadingLevel } from "baseui/heading";
1414
import { useSnackbar, PLACEMENT, DURATION } from "baseui/snackbar";
1515
import { StatefulPopover, TRIGGER_TYPE } from "baseui/popover";
1616

17-
// Custom Components
18-
// import Share from "./Share";
19-
// import ImportSharedCode from "./ImportSharedCode";
20-
// import InfoModel from "./Info";
21-
// import Settings from "./Settings";
22-
2317
import Logo from "../assets/logo.png";
2418
const Settings = lazy(() => import("./Settings"));
2519
const Share = lazy(() => import("./Share"));
26-
const ImportSharedCode = lazy(() => import("./ImportSharedCode"));
2720
const InfoModel = lazy(() => import("./Info"));
2821

2922
// Redux
@@ -228,16 +221,6 @@ const NavBar = ({
228221
clearOnEscape
229222
/>
230223
</StyledNavigationItem> */}
231-
<StyledNavigationItem>
232-
<Button
233-
size={SIZE.compact}
234-
startEnhancer={() => <i className="fas fa-network-wired"></i>}
235-
onClick={() => setShowImportCodeModel(true)}
236-
shape={SHAPE.pill}
237-
>
238-
Import shared code
239-
</Button>
240-
</StyledNavigationItem>
241224
<StyledNavigationItem>
242225
<Button
243226
startEnhancer={() => <i className="fas fa-share-alt"></i>}
@@ -277,12 +260,6 @@ const NavBar = ({
277260
<Suspense fallback={<div>Loading...</div>}>
278261
<Share show={showShareModel} setShow={setShowShareModel} />
279262
</Suspense>
280-
<Suspense fallback={<div>Loading...</div>}>
281-
<ImportSharedCode
282-
show={showImportCodeModel}
283-
setShow={setShowImportCodeModel}
284-
/>
285-
</Suspense>
286263
<Suspense fallback={<div>Loading...</div>}>
287264
<InfoModel isOpen={showInfoModel} setIsOpen={setShowInfoModel} />
288265
</Suspense>

src/controllers/importHandler.jsx

Lines changed: 17 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,29 @@ import { BASE_URL } from "../constants";
33

44
const URL = `${BASE_URL}/share/import`;
55

6-
const importHandler = (
6+
const importHandler = async (
77
id,
8-
isLoading,
98
setCode,
109
setInput,
1110
setLanguage,
12-
setShow,
13-
enqueue
11+
setShow
1412
) => {
15-
if (id.length !== 24) {
16-
isLoading(false);
17-
enqueue({
18-
message: "ID is not valid",
19-
startEnhancer: () => (
20-
<i className="fas fa-exclamation-triangle"></i>
21-
),
22-
});
23-
return;
13+
console.log({ id });
14+
try {
15+
const response = await Axios.post(URL, { id });
16+
console.log(response);
17+
18+
if (response.data.success) {
19+
console.log(response.data.data);
20+
const { code, input, language } = response.data.data;
21+
return {code, language, input};
22+
} else {
23+
throw new Error("Unable to import code");
24+
}
25+
} catch (e) {
26+
console.error(e)
27+
return null;
2428
}
25-
console.log({
26-
id: id,
27-
isLoading: isLoading,
28-
setCode: setCode,
29-
setInput: setInput,
30-
setLanguage: setLanguage,
31-
setShow: setShow,
32-
});
33-
Axios.post(URL, {
34-
id: id,
35-
})
36-
.then((response) => {
37-
isLoading(false);
38-
console.log(response);
39-
if (response.data.success) {
40-
console.log(response.data.data);
41-
const { code, input, language } = response.data.data;
42-
setCode(code);
43-
setInput(input);
44-
setLanguage(language);
45-
isLoading(false);
46-
setShow(false);
47-
} else {
48-
enqueue({
49-
message: "Something went wrong",
50-
startEnhancer: () => (
51-
<i className="fas fa-exclamation-triangle"></i>
52-
),
53-
});
54-
}
55-
})
56-
.catch((error) => {
57-
isLoading(false);
58-
console.log(error);
59-
enqueue({
60-
message: "Something went wrong",
61-
startEnhancer: () => (
62-
<i className="fas fa-exclamation-triangle"></i>
63-
),
64-
});
65-
return "";
66-
});
6729
};
6830

6931
export default importHandler;

src/index.jsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import ReactDOM from "react-dom";
33
import "./index.css";
44
import * as serviceWorker from "./serviceWorker";
5+
import { HashRouter, Routes, Route } from "react-router";
56

67
// BaseWeb imports
78
import { Client as Styletron } from "styletron-engine-atomic";
@@ -20,13 +21,18 @@ import App from "./App.jsx";
2021

2122
// ReactDOM Render
2223
ReactDOM.render(
23-
<Provider store={store}>
24-
<StyletronProvider value={engine}>
25-
<PersistGate loading={null} persistor={persistor}>
26-
<App />
27-
</PersistGate>
28-
</StyletronProvider>
29-
</Provider>,
24+
<HashRouter>
25+
<Provider store={store}>
26+
<StyletronProvider value={engine}>
27+
<PersistGate loading={null} persistor={persistor}>
28+
<Routes>
29+
<Route index element={<App />} />
30+
<Route path=":sharedId" element={<App />} />
31+
</Routes>
32+
</PersistGate>
33+
</StyletronProvider>
34+
</Provider>
35+
</HashRouter>,
3036
document.getElementById("root")
3137
);
3238

src/pages/MainPage.jsx

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,53 @@
1-
import { lazy, Suspense } from "react";
1+
import { lazy, Suspense, useEffect } from "react";
22
import NavBar from "../components/NavBar";
3+
import { useParams } from "react-router";
34
const Editor = lazy(() => import("../components/Editor"));
45

56
import { Textarea } from "baseui/textarea";
67

78
import { connect } from "react-redux";
89

9-
import { setInput } from "../app/master/master-actions";
10+
import {
11+
setInput,
12+
setCode,
13+
setLanguage,
14+
setOutput,
15+
} from "../app/master/master-actions";
16+
import importHandler from "../controllers/importHandler";
17+
18+
const MainPage = ({
19+
input,
20+
setInput,
21+
output,
22+
setCode,
23+
setLanguage,
24+
setOutput,
25+
}) => {
26+
const { sharedId } = useParams();
27+
28+
useEffect(() => {
29+
(async function () {
30+
if (sharedId) {
31+
try {
32+
const response = await importHandler(
33+
sharedId,
34+
setCode,
35+
setLanguage,
36+
setInput,
37+
setOutput
38+
);
39+
if (response) {
40+
setCode(response.code);
41+
setLanguage(response.language);
42+
setInput(response.input);
43+
}
44+
} catch (e) {
45+
console.error(e);
46+
}
47+
}
48+
})();
49+
}, [sharedId]);
1050

11-
const MainPage = ({ input, setInput, output }) => {
1251
return (
1352
<>
1453
<NavBar toggleTheme={(val) => console.log(val)} />
@@ -67,6 +106,9 @@ const MainPage = ({ input, setInput, output }) => {
67106

68107
const mapDispatchToProps = (dispatch) => ({
69108
setInput: (input) => dispatch(setInput(input)),
109+
setCode: (code) => dispatch(setCode(code)),
110+
setLanguage: (language) => dispatch(setLanguage(language)),
111+
setOutput: (output) => dispatch(setOutput(output)),
70112
});
71113

72114
const mapStateToProps = (state) => ({

0 commit comments

Comments
 (0)