From e027f273630b28cdc3c1077e39ae3b033c1f9db8 Mon Sep 17 00:00:00 2001 From: Basiltoast Date: Sun, 22 Dec 2019 16:50:29 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=20=EC=97=90?= =?UTF-8?q?=EB=94=94=ED=84=B0=20=EB=8F=99=EA=B8=B0=ED=99=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cocode/src/actions/Project.js | 6 ++++++ cocode/src/actions/types.js | 2 ++ cocode/src/containers/Live/Editor/index.js | 13 ++++++++----- cocode/src/pages/Live/index.js | 20 ++++++++++++++++---- cocode/src/reducers/ProjectReducer.js | 9 +++++++++ 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/cocode/src/actions/Project.js b/cocode/src/actions/Project.js index 0c84f278..bf32a06f 100644 --- a/cocode/src/actions/Project.js +++ b/cocode/src/actions/Project.js @@ -3,6 +3,7 @@ import { UPDATE_CODE, UPDATE_CODE_FROM_FILE_ID, FETCH_PROJECT, + UPDATE_FILES, SELECT_FILE, UPDATE_FILE_NAME, CREATE_FILE, @@ -21,6 +22,10 @@ function fetchProjectActionCreator(payload) { return { type: FETCH_PROJECT, payload }; } +function updateFilesActionCreator(payload) { + return { type: UPDATE_FILES, payload }; +} + function updateCodeActionCreator(payload) { return { type: UPDATE_CODE, payload }; } @@ -65,6 +70,7 @@ export { updateCodeActionCreator, updateCodeFromFileIdActionCreator, fetchProjectActionCreator, + updateFilesActionCreator, selectFileActionCreator, updateFileNameActionCreator, createFileActionCreator, diff --git a/cocode/src/actions/types.js b/cocode/src/actions/types.js index 6532f671..7f8aace7 100644 --- a/cocode/src/actions/types.js +++ b/cocode/src/actions/types.js @@ -9,6 +9,7 @@ const UPDATE_PROJECT_INFO = 'updateProjectInfo'; const UPDATE_CODE = 'updateCode'; const UPDATE_CODE_FROM_FILE_ID = 'updateCodeFromFileId'; const FETCH_PROJECT = 'fetchProject'; +const UPDATE_FILES = 'updateFiles'; const SELECT_FILE = 'selectFile'; const CREATE_FILE = 'createFile'; const UPDATE_FILE_NAME = 'updateFileName'; @@ -38,6 +39,7 @@ export { UPDATE_CODE, UPDATE_CODE_FROM_FILE_ID, FETCH_PROJECT, + UPDATE_FILES, SELECT_FILE, UPDATE_FILE_NAME, CREATE_FILE, diff --git a/cocode/src/containers/Live/Editor/index.js b/cocode/src/containers/Live/Editor/index.js index 71f68ff0..3ceb500b 100644 --- a/cocode/src/containers/Live/Editor/index.js +++ b/cocode/src/containers/Live/Editor/index.js @@ -29,11 +29,12 @@ const MAX_RANGE = { const userCursor = {}; -function Editor({ handleForkCoconut }) { +function Editor({ isConnected }) { const { user } = useContext(UserContext); const { projectId } = useParams(); const { project, dispatchProject } = useContext(ProjectContext); - const { socket } = useContext(LiveContext); + const liveContext = useContext(LiveContext); + const { socket } = liveContext; const [code, setCode] = useState(project.editingCode); const [isEditorMounted, setIsEditorMounted] = useState(false); const [_, setRequest] = useFetch({}); @@ -140,11 +141,12 @@ function Editor({ handleForkCoconut }) { //initialize if (!socket) return; if (!isEditorMounted) return; + if (!isConnected) return; isBusy.current = false; filesRef.current = JSON.parse(JSON.stringify(files)); socket.on('change', handleOnChangeCode); socket.on('moveCursor', handleMoveCursor); - }, [socket, isEditorMounted]); + }, [socket, isEditorMounted, isConnected]); const handleOnChangeCode = (socketId, fileId, op) => { if (socket.id === socketId) { @@ -161,8 +163,9 @@ function Editor({ handleForkCoconut }) { const str2 = originCode.slice(op.rangeOffset + op.rangeLength); const changedCode = `${str1}${op.text}${str2}`; filesRef.current[fileId].contents = changedCode; - const updateCodeFromFileIdAction = - updateCodeFromFileIdActionCreator({ fileId, changedCode }); + const updateCodeFromFileIdAction = updateCodeFromFileIdActionCreator( + { fileId, changedCode } + ); dispatchProject(updateCodeFromFileIdAction); return; } diff --git a/cocode/src/pages/Live/index.js b/cocode/src/pages/Live/index.js index f5d490da..ab055c51 100644 --- a/cocode/src/pages/Live/index.js +++ b/cocode/src/pages/Live/index.js @@ -20,7 +20,10 @@ import addToast from 'components/Common/Toast'; import { LiveContext, ProjectContext, UserContext } from 'contexts'; import { ProjectReducer } from 'reducers'; -import { fetchProjectActionCreator } from 'actions/Project'; +import { + fetchProjectActionCreator, + updateFilesActionCreator +} from 'actions/Project'; import { liveOnActionCreator, liveOffActionCreator, @@ -32,7 +35,10 @@ import { TAB_BAR_THEME } from 'constants/theme'; import { COCODE_SERVER } from 'config'; import useFetch from 'hooks/useFetch'; import { getProjectInfoAPICreator } from 'apis/Project'; -import { SHUT_DOWN_LIVE_SHARE, LOADING_LIVE } from 'constants/notificationMessage'; +import { + SHUT_DOWN_LIVE_SHARE, + LOADING_LIVE +} from 'constants/notificationMessage'; import { getCookie } from 'utils/controlCookie'; const DEFAULT_CLICKED_TAB_INDEX = 0; @@ -77,6 +83,12 @@ function Live() { }; const handleAlreadyExistRoom = ({ host, project, participants }) => { + const { files } = project; + const filesCopy = JSON.parse(JSON.stringify(files)); + const updateFilesAction = updateFilesActionCreator({ + files: filesCopy + }); + dispatchProject(updateFilesAction); dispatchLive( liveOnActionCreator({ socket, @@ -150,14 +162,14 @@ function Live() { setClickedTabIndex }} > -
+
{isFetched && ( - + diff --git a/cocode/src/reducers/ProjectReducer.js b/cocode/src/reducers/ProjectReducer.js index a3b24b38..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 { @@ -332,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,