Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d508645

Browse files
features added
1 parent 37efc15 commit d508645

File tree

19 files changed

+134
-196
lines changed

19 files changed

+134
-196
lines changed

‎src/app/App.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,34 @@ import { useContext, useEffect, useState } from "react";
22
import HomePage from "../pages/home";
33
import PlaygroundPage from "../pages/playground";
44
import { AppContext } from "../components/context";
5+
import { SERVER_URL } from "../config";
6+
import Loader from "../components/loader";
57
import "./App.css";
68

79
const App: React.FC = () => {
810
const { username, setUsername } = useContext(AppContext);
911
const [loading, setLoading] = useState<boolean>(true);
1012

1113
useEffect(() => {
12-
// let data;
13-
fetch("http://localhost:4000", {
14+
fetch(SERVER_URL + "/api/login", {
1415
method: "GET",
1516
credentials: "include",
1617
})
1718
.then((response) => response.json())
1819
.then((json) => {
19-
// console.log("app>", json);
2020
// case 1 : cookie sent and got name
21-
if ("username" in json) {
22-
// console.log("Gotcha", json.username);
23-
setUsername(json.username);
24-
}
21+
setUsername(json.username);
2522
setLoading(false);
26-
// case 2 : new user, do nothing (automatically dircts to home page and post username)
23+
// case 2 : new user, do nothing, automatically directs to home page and post username
2724
})
2825
.catch((err) => {
26+
setLoading(false);
2927
alert("Error : " + err.message);
3028
});
31-
32-
return () => {
33-
// io.offAny();
34-
// io.disconnect();
35-
};
36-
// eslint-disable-next-line react-hooks/exhaustive-deps
37-
}, []);
29+
}, [setUsername]);
3830

3931
return (
40-
<>{loading ? "Loading" : username ? <PlaygroundPage /> : <HomePage />}</>
32+
<>{loading ? <Loader/> : username ? <PlaygroundPage /> : <HomePage />}</>
4133
);
4234
};
4335

‎src/components/context/Context.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ interface IAppContext {
2323
Socket<DefaultEventsMap, DefaultEventsMap> | undefined
2424
>;
2525
}
26-
// @ts-ignore
27-
export const AppContext = createContext<IAppContext>({});
26+
27+
export const AppContext = createContext<IAppContext>({}asIAppContext);
2828

2929
const Context: FC = ({ children }) => {
3030
const [username, setUsername] = useState<string>();
@@ -52,9 +52,3 @@ const Context: FC = ({ children }) => {
5252
};
5353

5454
export default Context;
55-
56-
// {
57-
// files: ["Untitled"],
58-
// tabs: ["Untitled"],
59-
// activeTab: "Untitled",
60-
// }

‎src/components/editorBar/EditorBar.module.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.editor__bar {
22
display: flex;
3-
/* background: #313131; */
43
background: #3a3a3a;
54
height: 40px;
65
font-weight: 600;
@@ -33,11 +32,8 @@
3332
color: #abb2bf;
3433
position: relative;
3534
margin-right: -10px;
36-
/* background: #8b8b8b; */
3735
}
38-
/* .closeIcon:hover {
39-
background: grey;
40-
} */
36+
4137
.closeIcon svg {
4238
pointer-events: none;
4339
}

‎src/components/editorBar/EditorBar.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
// @ts-nocheck
21
import { useContext } from "react";
32
import { GrFormClose } from "react-icons/gr";
43
import { AppContext } from "../context";
54
import styles from "./EditorBar.module.css";
65

76
const EditorBar = () => {
87
const { editorState, setEditorState } = useContext(AppContext);
9-
const handleCloseTab = (e: React.MouseEventHandler<HTMLDivElement>) => {
8+
const handleCloseTab = ()=>(e: React.MouseEvent<HTMLDivElement>) => {
109
e.stopPropagation();
11-
const filename = e.target.parentElement.innerText;
10+
const filename = (e.targetasHTMLDivElement).parentElement!.innerText;
1211
if (e.isTrusted) {
13-
const args = {};
12+
const args: any = {};
1413
args.tabs = [...editorState.tabs.filter((tab) => tab !== filename)];
1514
if (!editorState.activeTab) {
1615
args.activeTab = args.tabs[0] === undefined ? "" : args.tabs[0];
@@ -19,8 +18,8 @@ const EditorBar = () => {
1918
}
2019
};
2120

22-
const handleTabClick = (e: React.MouseEventHandler<HTMLDivElement>) => {
23-
const filename = e.target.innerText;
21+
const handleTabClick = ()=>(e: React.MouseEvent<HTMLDivElement>) => {
22+
const filename = (e.targetasHTMLDivElement).innerText;
2423
if (e.isTrusted) {
2524
setEditorState((prev) => ({ ...prev, activeTab: filename }));
2625
}

‎src/components/fileEditor/FileEditor.module.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
width: 100%;
1010
height: 100%;
1111
background: #1e1e1e;
12-
/* border: solid 5px #1e1e1e; */
1312
border-top: solid 10px #1e1e1e;
1413
overflow: hidden;
1514
}

‎src/components/fileEditor/FileEditor.tsx‎

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,37 @@
1-
// @ts-nocheck
21
import Editor from "@monaco-editor/react";
32
import styles from "./FileEditor.module.css";
4-
import { FC, useRef, useEffect,useContext } from "react";
3+
import { FC, useRef, useContext } from "react";
54
import EditorBar from "../editorBar";
65
import { AppContext } from "../context";
76

87
const FileEditor: FC = () => {
98
const { username, editorState, code, setCode, io } = useContext(AppContext);
10-
const editorRef = useRef(null);
9+
const editorRef = useRef();
1110

12-
function handleEditorChange(value, e) {
13-
// if (value === "") return;
14-
// console.log("muevent", e);
11+
function handleEditorChange(value: string | undefined, e: any) {
1512
if (editorState.activeTab) {
16-
// console.log("4", editorState.activeTab, "v>>", value);
17-
const args = {};
13+
const args: any = {};
1814
args[editorState.activeTab] = value;
1915
setCode((prev) => ({ ...prev, ...args }));
16+
// emit code to backend
2017
io.current?.emit("code_update", username, editorState.activeTab, value);
21-
console.log("emit editor change");
2218
}
2319
}
2420

25-
function handleEditorDidMount(editor, monaco) {
21+
function handleEditorDidMount(editor: any, monaco: any) {
2622
editorRef.current = editor;
2723
}
2824

29-
// function showValue() {
30-
// console.log(editorRef.current.value);
31-
// }
32-
33-
useEffect(() => {
34-
// console.log("editor state rerender");
35-
// console.log("state>", editorState);
36-
// editorRef.setValue(code[editorState.activeTab]);
37-
// eslint-disable-next-line react-hooks/exhaustive-deps
38-
}, [editorState]);
39-
40-
// function handleEditorWillMount(monaco) {
41-
// console.log("beforeMount: the monaco instance:", monaco);
42-
// }
43-
4425
return (
4526
<div className={styles.container}>
4627
<EditorBar />
4728
<div className={styles.editor__wrapper}>
4829
<Editor
4930
theme="vs-dark"
5031
height="100%"
51-
defaultLanguage="javascript"
52-
// defaultValue="type js..."
5332
value={code[editorState.activeTab]}
5433
onChange={handleEditorChange}
5534
onMount={handleEditorDidMount}
56-
// beforeMount={handleEditorWillMount}
57-
// onValidate={handleEditorValidation}
5835
/>
5936
</div>
6037
</div>

‎src/components/fileExplorer/FileExplorer.tsx‎

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,57 @@
1-
// @ts-nocheck
2-
import styles from "./FileExplorer.module.css";
3-
// import { IEditorState } from "../../utils/types";
1+
import { FC, useContext } from "react";
42
import { MdDeleteForever } from "react-icons/md";
53
import { AiOutlineFileAdd } from "react-icons/ai";
6-
import { FC, useContext } from "react";
74
import { AppContext } from "../context";
5+
import styles from "./FileExplorer.module.css";
86

97
const FileExplorer: FC = () => {
108
const { username, editorState, setEditorState, code, setCode, io } =
119
useContext(AppContext);
12-
// console.log("FE Page", { editorState, setEditorState, code, setCode });
13-
const handleActive = (e: React.MouseEventHandler<HTMLDivElement>) => {
14-
const filename = e.target.innerText;
10+
11+
const handleActive = (e: React.MouseEvent<HTMLDivElement>) => {
12+
const filename = (e.targetasHTMLDivElement).innerText;
1513
if (e.isTrusted) {
16-
const args = { activeTab: filename };
14+
const args: any = { activeTab: filename };
1715
if (!editorState.tabs.includes(filename)) {
1816
args.tabs = [...editorState.tabs, filename];
1917
}
2018
setEditorState((prev) => ({ ...prev, ...args }));
2119
}
2220
};
2321

24-
const handlDeleteFile = (e) => {
22+
const handlDeleteFile = (e: React.MouseEvent<HTMLDivElement>) => {
2523
e.stopPropagation();
26-
console.log("del file", e);
27-
const filename = e.target.parentElement.innerText;
24+
const filename = (e.target as HTMLDivElement).parentElement!.innerText;
2825
if (e.isTrusted && window.confirm(`Delete file ${filename}?`) === true) {
29-
const args = {};
26+
const args: any = {};
3027
args.tabs = [...editorState.tabs.filter((tab) => tab !== filename)];
3128
args.files = [...editorState.files.filter((file) => file !== filename)];
3229
args.activeTab = args.tabs[0] === undefined ? "" : args.tabs[0];
3330
const newCode = code;
3431
delete newCode[filename];
3532
console.log("nc>", newCode, filename);
3633
setCode({ ...newCode });
37-
// console.log(args.tabs, filename);
38-
// console.log({ ...editorState, ...args });
39-
4034
setEditorState((prev) => ({ ...prev, ...args }));
41-
42-
// emit code and editor state to backend
43-
io.current.emit("delete_file", username, filename);
35+
io.current?.emit("delete_file", username, filename);
4436
}
4537
};
4638

47-
const handleFileCreate = (e) => {
48-
console.log("create file");
39+
const handleFileCreate = (e: React.MouseEvent<HTMLDivElement>) => {
4940
if (e.isTrusted) {
5041
const filename = prompt("Enter filename");
51-
console.log("fn>>>", filename, typeof filename);
5242
if (!filename) return;
53-
const args = {};
43+
const args: any = {};
5444
args.tabs = [...editorState.tabs, filename];
5545
args.files = [...editorState.files, filename];
5646
args.activeTab = filename;
5747
const newCode = code;
5848
newCode[filename] = "";
59-
// console.log("nc>", newCode, filename);
6049
setCode({ ...newCode });
61-
// console.log(args.tabs, filename);
62-
// console.log({ ...editorState, ...args });
63-
6450
setEditorState((prev) => ({ ...prev, ...args }));
65-
66-
// emit code and editor state to backend
67-
io.current.emit("create_file", username, filename);
51+
io.current?.emit("create_file", username, filename);
6852
}
6953
};
54+
7055
return (
7156
<div className={styles.explorer__container}>
7257
<div className={styles.explorer__bar}>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.container {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100%;
6+
}
7+
8+
.spinner {
9+
width: 50px;
10+
height: 50px;
11+
border-radius: 50%;
12+
background: conic-gradient(#0000 10%, #25b09b);
13+
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
14+
mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
15+
animation: spin 1s infinite linear;
16+
}
17+
@keyframes spin {
18+
to {
19+
transform: rotate(1turn);
20+
}
21+
}

‎src/components/loader/Loader.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import styles from "./Loader.module.css";
2+
3+
const Loader: React.FC = () => {
4+
return (
5+
<div className={styles.container}>
6+
<div className={styles.spinner}></div>
7+
</div>
8+
);
9+
};
10+
11+
export default Loader;

‎src/components/loader/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Loader";

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /