Merge pull request #317 from connect-foundation/cocode_live-editor-ho…

…tfix

feat: 라이브 에디터 동기화 기능 추가

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,

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,

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;
 		}

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
 			}}
 		>
-			<Header name={project.name}/>
+			<Header name={project.name} />
 			{isFetched && (
 				<Styled.Main>
 					<TabBar theme={TAB_BAR_THEME} />
 					<SplitPaneContainer split="vertical" defaultSize="20vw">
 						<TabContainer />
 						<SplitPaneContainer split="vertical" defaultSize="40vw">
-							<Editor />
+							<Editor isConnected={isConnected} />
 							<BrowserV2 />
 						</SplitPaneContainer>
 					</SplitPaneContainer>

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,