diff --git a/cocode/src/reducers/ProjectReducer.js b/cocode/src/reducers/ProjectReducer.js
index dea3c481..a003b9bd 100644
--- a/cocode/src/reducers/ProjectReducer.js
+++ b/cocode/src/reducers/ProjectReducer.js
@@ -1,6 +1,7 @@
// 참고: https://github.com/dal-lab/frontend-tdd-examples/blob/master/6-todo-redux/src/reducers.js
import {
UPDATE_PROJECT_INFO,
+ UPDATE_FILES,
UPDATE_CODE,
UPDATE_CODE_FROM_FILE_ID,
FETCH_PROJECT,
@@ -94,6 +95,13 @@ function getDependencyList(files, root) {
}, {});
}
+const updateFiles = (state, { files }) => {
+ return {
+ ...state,
+ files
+ };
+};
+
// Update code
const updateCode = (state, { changedCode }) => {
return {
@@ -225,11 +233,15 @@ const deleteFile = (state, { deleteFileId }) => {
id => id !== deleteFileId
);
+ const updatedFiles = Object.entries(files).reduce((acc, [fileId, file]) => {
+ if (fileId === deleteFileId) return acc;
+ return { ...acc, [fileId]: file };
+ }, {});
+
return {
...state,
files: {
- ...state.files,
- [deleteFileId]: undefined,
+ ...updatedFiles,
[parentId]: {
...state.files[parentId],
child: updatedParentChilds
@@ -328,6 +340,7 @@ function ProjectReducer(state, { type, payload }) {
const reducers = {
[UPDATE_PROJECT_INFO]: updateProjectInfo,
[FETCH_PROJECT]: fetchProject,
+ [UPDATE_FILES]: updateFiles,
[UPDATE_CODE]: updateCode,
[UPDATE_CODE_FROM_FILE_ID]: updateCodeFromFileId,
[SELECT_FILE]: selectFile,
diff --git a/cocode/src/template/react.js b/cocode/src/template/react.js
index 3ffca09f..94b18437 100644
--- a/cocode/src/template/react.js
+++ b/cocode/src/template/react.js
@@ -1,71 +1,5 @@
const template = {
- css:
- '.App {\n' +
- ' font-family: sans-serif;\n' +
- ' text-align: center;\n' +
- '}\n',
- html:
- '\n' +
- '\n' +
- '\n' +
- '\n' +
- '\t\n' +
- '\t\n' +
- '\t\n' +
- '\t\n' +
- '\t\n' +
- '\t\n' +
- '\t\n' +
- '\tReact App\n' +
- '\n' +
- '\n' +
- '\n' +
- '\t\n' +
- '\t\n' +
- '\t\n' +
- '\n' +
- '\n' +
- '',
- js:
- 'import React from "react";\n' +
- 'import ReactDOM from "react-dom";\n' +
- '\n' +
- 'import "./styles.css";\n' +
- '\n' +
- 'function App() {\n' +
- ' return (\n' +
- ' \n' +
- '
Hello CodeSandbox
\n' +
- ' Start editing to see some magic happen!
\n' +
- ' \n' +
- ' );\n' +
- '}\n' +
- '\n' +
- 'const rootElement = document.getElementById("root");\n' +
- 'ReactDOM.render(, rootElement);\n',
- package:
+ 'package.json':
'{\n' +
' "name": "new",\n' +
' "version": "1.0.0",\n' +
@@ -75,58 +9,31 @@ const template = {
' "dependencies": {\n' +
' "react": "16.8.6",\n' +
' "react-dom": "16.8.6",\n' +
- ' "react-scripts": "3.0.1"\n' +
- ' },\n' +
- ' "devDependencies": {\n' +
- ' "typescript": "3.3.3"\n' +
- ' },\n' +
- ' "scripts": {\n' +
- ' "start": "react-scripts start",\n' +
- ' "build": "react-scripts build",\n' +
- ' "test": "react-scripts test --env=jsdom",\n' +
- ' "eject": "react-scripts eject"\n' +
- ' },\n' +
- ' "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]\n' +
+ ' "styled-components": "4.4.1"\n' +
+ ' }\n' +
'}\n',
- version1:
- 'import React, { useState } from "react";\n' +
+ 'index.js':
+ 'import React from "react";\n' +
'import ReactDOM from "react-dom";\n' +
+ 'import * as Styled from "./style"\n' +
'\n' +
'function App() {\n' +
- ' const [state, setState] = useState("Cocode");\n' +
- '\n' +
- ' return(\n' +
- ' <>\n' +
- ' Hi! {state}
\n' +
- ' \n' +
+ ' return (\n' +
+ ' \n' +
+ ' 🥥 Hello Cocode World 🥥
\n' +
+ ' \n' +
' )\n' +
'}\n' +
'\n' +
'ReactDOM.render(, document.getElementById("coconut-root"));\n',
- Apple:
- 'import React from "react";\n' +
- '\n' +
- 'function Apple() {\n' +
- ' return(\n' +
- ' <>\n' +
- ' Apple!
\n' +
- ' \n' +
- ' )\n' +
- '}\n' +
+ 'style.js':
+ 'import styled from "styled-components";\n' +
'\n' +
- 'export default Apple;\n',
- Banana:
- 'import React from "react";\n' +
- '\n' +
- 'function Banana() {\n' +
- ' return(\n' +
- ' <>\n' +
- ' Banana!
\n' +
- ' \n' +
- ' )\n' +
- '}\n' +
+ 'const App = styled.div`\n' +
+ ' text-align: center;\n' +
+ '`\n' +
'\n' +
- 'export default Banana;\n'
+ 'export { App };\n'
};
function getTemplate(file) {
@@ -153,46 +60,28 @@ const reactTemplate = () => ({
projectId: '5dd61901353f4858e1b5a9d0',
name: 'src',
type: 'directory',
- child: [
- '5dd553be4561ae2bae9cb45d',
- '5dd553be4561ae2bae9cb45e',
- '5dd553be4561ae2bae9cb461'
- ]
+ child: ['5dd553be4561ae2bae9cb45d', '5dd553be4561ae2bae9cb45e']
},
{
_id: '5dd553be4561ae2bae9cb45d',
name: 'index.js',
projectId: '5dd61901353f4858e1b5a9d0',
type: 'js',
- contents: getTemplate('version1')
+ contents: getTemplate('index.js')
},
{
_id: '5dd553be4561ae2bae9cb45e',
- name: 'Apple.js',
- projectId: '5dd61901353f4858e1b5a9d0',
- type: 'js',
- contents: getTemplate('Apple')
- },
- {
- _id: '5dd553be4561ae2bae9cb461',
- projectId: '5dd61901353f4858e1b5a9d0',
- name: 'Component',
- type: 'directory',
- child: ['5dd553be4561ae2bae9cb460']
- },
- {
- _id: '5dd553be4561ae2bae9cb460',
- name: 'Banana.js',
+ name: 'style.js',
projectId: '5dd61901353f4858e1b5a9d0',
type: 'js',
- contents: getTemplate('Banana')
+ contents: getTemplate('style.js')
},
{
_id: '5dd553be4561ae2bae9cb462',
name: 'package.json',
projectId: '5dd61901353f4858e1b5a9d0',
type: 'npm',
- contents: getTemplate('package')
+ contents: getTemplate('package.json')
}
]
});
diff --git a/cocode/src/utils/monacoWidget.js b/cocode/src/utils/monacoWidget.js
index 83bbe24a..8900e241 100644
--- a/cocode/src/utils/monacoWidget.js
+++ b/cocode/src/utils/monacoWidget.js
@@ -1,9 +1,10 @@
-class CursorWidget {
- constructor(editor, userName, position) {
+class LabelWidget {
+ constructor(editor, userName, position, color) {
this.editor = editor;
this.id = userName;
this.domNode = null;
this.position = position;
+ this.color = color;
}
getId() {
@@ -14,7 +15,10 @@ class CursorWidget {
if (!this.domNode) {
this.domNode = document.createElement('div');
this.domNode.innerHTML = this.id;
- this.domNode.style.background = 'grey';
+ this.domNode.style.fontSize = '0.5rem';
+ this.domNode.style.background = this.color;
+ this.domNode.style.color = 'white';
+ this.domNode.style.transform = 'translateX(3px)';
this.domNode.id = this.id;
}
return this.domNode;
@@ -43,4 +47,50 @@ class CursorWidget {
}
}
-export { CursorWidget };
+class CaratWidget {
+ constructor(editor, position, color) {
+ this.editor = editor;
+ this.domNode = null;
+ this.position = position;
+ this.color = color;
+ }
+
+ getId() {
+ return this.id;
+ }
+
+ getDomNode() {
+ if (!this.domNode) {
+ this.domNode = document.createElement('div');
+ this.domNode.style.background = this.color;
+ this.domNode.classList.add('blink');
+ this.domNode.style.width = '0.2rem';
+ this.domNode.style.height = '1.5rem';
+ }
+ return this.domNode;
+ }
+
+ getPosition() {
+ return {
+ position: this.position,
+ preference: [0]
+ };
+ }
+ updatePosition(position) {
+ this.position = position;
+ this.editor.layoutContentWidget(this);
+ }
+
+ showCursor(position) {
+ this.domNode.style.visibility = 'inherit';
+ this.position = position;
+ this.editor.layoutContentWidget(this);
+ }
+
+ hiddenCursor() {
+ this.domNode.style.visibility = 'hidden';
+ this.editor.layoutContentWidget(this);
+ }
+}
+
+export { LabelWidget, CaratWidget };
\ No newline at end of file