Merge pull request #315 from connect-foundation/cocode

Cocode 1.3.1 hotfix!
connect-foundation · Dec 26, 2019 · 9e4bf4b · 9e4bf4b
2 parents b35b0d1 + 171c695
commit 9e4bf4b
Show file tree

Hide file tree

Showing 23 changed files with 278 additions and 212 deletions.
diff --git 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
@@ -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/components/Common/GlobalStyle/index.js b/cocode/src/components/Common/GlobalStyle/index.js
@@ -81,6 +81,14 @@ const GlobalStyle = createGlobalStyle`
 	div, span{
 		user-select: none;
 	}
+	
+	.blink{
+  		animation: blink 1s step-start 0s infinite;
+	}
+	
+	@keyframes blink {
+  		50% { opacity: 0.0; }
+	}
 `;
 
 export default GlobalStyle;
diff --git a/cocode/src/components/Common/UserProfile/avatar.jpeg b/cocode/src/components/Common/UserProfile/avatar.jpeg
diff --git a/cocode/src/components/Common/UserProfile/down.svg b/cocode/src/components/Common/UserProfile/down.svg
diff --git a/cocode/src/components/Common/UserProfile/index.js b/cocode/src/components/Common/UserProfile/index.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import * as Styled from './style';
+
 import DropDownMenu from 'components/Common/DropDownMenu';
+import down from './down.svg';
 
 function UserProfile({ username, avatar, menuItems }) {
 	return (
 		<Styled.UserProfile>
 			<Styled.UserName>{username}</Styled.UserName>
+			<Styled.UserAvatar src={avatar} alt="프로필" />
 			<DropDownMenu menuItems={menuItems}>
-				<Styled.UserAvatar src={avatar} alt="프로필" />
+				<Styled.DownArrow src={down} />
 			</DropDownMenu>
 		</Styled.UserProfile>
 	);

diff --git a/cocode/src/components/Common/UserProfile/style.js b/cocode/src/components/Common/UserProfile/style.js
@@ -20,8 +20,21 @@ const UserAvatar = styled.img`
         width: 3rem;
         height: 3rem;
         border-radius: 0.5rem;
-        cursor: pointer;
     }
 `;
 
-export { UserProfile, UserName, UserAvatar };
+const DownArrow = styled.img`
+	& {
+		width: 1rem;
+		height: 1rem;
+		margin: auto 0 auto 1rem;
+		cursor: pointer;
+		filter: invert(0.3);
+	}
+	
+	&:hover {
+		filter: invert(0);
+	}
+`;
+
+export { UserProfile, UserName, UserAvatar, DownArrow };
diff --git a/cocode/src/components/Project/BrowserV2/index.js b/cocode/src/components/Project/BrowserV2/index.js
@@ -8,6 +8,7 @@ import React, {
 import { useParams } from 'react-router-dom';
 import * as Styled from './style';
 
+import open from './open.svg';
 import search from './search.svg';
 import addToast from 'components/Common/Toast';
 
@@ -30,6 +31,7 @@ import { KEY_CODE_ENTER } from 'constants/keyCode';
 const MIN_WAIT_TIME = 1500;
 const UPDATE_PROJECT = 'updateProject';
 const PROTOCOLS = ['http://', 'https://'];
+const NEW_COCONUT = `${COCONUT_SERVER}/new`;
 
 function BrowserV2({ ...props }) {
 	const { projectId } = useParams();
@@ -137,6 +139,13 @@ function BrowserV2({ ...props }) {
 		iframeReference.current.contentWindow.postMessage(data, '*');
 	}, [project]);
 
+	const handleClickOpenTab = () => {
+		const coconutUrl = addressReference.current.value;
+		if (NEW_COCONUT === coconutUrl)
+			return addToast.error(NOTIFICATION.NEED_TO_SAVE);
+		window.open(coconutUrl, '_blank');
+	};
+
 	useEffect(handleChangeCurrentURL, [projectId]);
 	useEffect(handleUpdateDependency, [dependencyInstalling]);
 	useEffect(handleUpdateFile, [files]);
@@ -154,6 +163,12 @@ function BrowserV2({ ...props }) {
 					defaultValue={addressInputURL}
 					onKeyUp={handleAddressInputKeyDown}
 				/>
+				<Styled.OpenIcon
+					src={open}
+					alt="Open New Tab"
+					title="Open New Tab"
+					onClick={handleClickOpenTab}
+				/>
 			</Styled.AddressContainer>
 			<Styled.BrowserV2
 				ref={iframeReference}

diff --git a/cocode/src/components/Project/BrowserV2/open.svg b/cocode/src/components/Project/BrowserV2/open.svg
diff --git a/cocode/src/components/Project/BrowserV2/style.js b/cocode/src/components/Project/BrowserV2/style.js
@@ -15,31 +15,6 @@ const BrowserV2 = styled.iframe`
 	}
 `;
 
-const LoadingOverlay = styled.section`
-	& {
-		position: fixed;
-		top: 12vh;
-		left: 0;
-		z-index: 100;
-
-		height: 100vh;
-		width: 100vw;
-
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-
-		background-color: ${BROWSER_THEME.loadingOverlayBGColor};
-
-		p {
-			margin-top: 2rem;
-			font-size: 3rem;
-			font-weight: lighter;
-		}
-	}
-`;
-
 const AddressContainer = styled.div`
 	& {
 		display: flex;
@@ -70,11 +45,20 @@ const SearchIcon = styled.img`
 	}
 `;
 
+const OpenIcon = styled.img`
+	& {
+		height: 100%;
+		padding: 0.4rem 0;
+		background: ${BROWSER_THEME.addressInputBGColor};
+		cursor: pointer;
+	}
+`;
+
 export {
 	Frame,
 	BrowserV2,
-	LoadingOverlay,
 	AddressContainer,
 	AddressInput,
-	SearchIcon
+	SearchIcon,
+	OpenIcon
 };
diff --git a/cocode/src/components/Project/DependencySearchItem/style.js b/cocode/src/components/Project/DependencySearchItem/style.js
@@ -16,8 +16,9 @@ const Item = styled.li`
 const Description = styled.div`
     & {
         display: flex;
-        margin-top: 0.3rem;
+        justify-content: flex-end;
         align-items: center;
+        margin-top: 0.5rem;
     }
 `;
 

diff --git a/cocode/src/components/Project/File/index.js b/cocode/src/components/Project/File/index.js
@@ -101,7 +101,12 @@ function File({
 
 		if (isNotChangeableFileName({ files, parentId, changedName })) {
 			currentTarget.textContent = fileName;
-			addToast.error(NOTIFICATION.FILE_IS_DUPLICATED);
+			addToast.error(NOTIFICATION.FILE_NAME_IS_INCORRECT);
+			return;
+		}
+
+		if (projectId === 'new') {
+			successHandler[UPDATE_FILE_NAME]();
 			return;
 		}
 
@@ -123,6 +128,11 @@ function File({
 		const acceptDeleteThisFile = confirm(NOTIFICATION.CONFIRM_DELETE_FILE);
 		if (!acceptDeleteThisFile) return;
 
+		if (projectId === 'new') {
+			successHandler[DELETE_FILE](_id);
+			return;
+		}
+
 		const deleteFileId = _id;
 		const deleteFileAPI = deleteFileAPICreator(projectId, deleteFileId, {
 			parentId

diff --git a/cocode/src/components/Project/NewFile/index.js b/cocode/src/components/Project/NewFile/index.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useState, useEffect, useContext, useRef } from 'react';
 import { useParams } from 'react-router-dom';
+import ObjectID from 'bson-objectid';
 import * as Styled from './style';
 
 import addToast from 'components/Common/Toast';
@@ -30,17 +31,38 @@ function NewFile({ depth, type, parentId, handleEndCreateFile }) {
 	const fileNameInputReference = useRef(null);
 	const [{ data, error }, setRequest] = useFetch({});
 
-	const isDuplicatedFileName = fileName => {
-		return files[parentId].child
-			.map(id => files[id].name)
-			.some(name => name === fileName);
+	const isIncorrectFileName = fileName => {
+		return (
+			fileName.trim() === '' ||
+			files[parentId].child
+				.map(id => files[id].name)
+				.some(name => name === fileName)
+		);
+	};
+
+	const updateFileState = newFileId => {
+		const createFileAction = createFileActionCreator({
+			newFileId,
+			name: fileName,
+			parentId,
+			type
+		});
+		dispatchProject(createFileAction);
+		changeDivEditable(fileNameInputReference.current, false);
 	};
 
 	const requestCreateFile = e => {
 		const name = e.currentTarget.textContent;
-		if (isDuplicatedFileName(name)) {
+		if (isIncorrectFileName(name)) {
 			e.preventDefault();
-			addToast.error(NOTIFICATION.FILE_IS_DUPLICATED);
+			addToast.error(NOTIFICATION.FILE_NAME_IS_INCORRECT);
+			return;
+		}
+
+		if (projectId === 'new') {
+			const newFileId = ObjectID().str;
+			updateFileState(newFileId);
+
 			return;
 		}
 
@@ -69,14 +91,7 @@ function NewFile({ depth, type, parentId, handleEndCreateFile }) {
 		if (!data) return;
 
 		const { newFileId } = data;
-		const createFileAction = createFileActionCreator({
-			newFileId,
-			name: fileName,
-			parentId,
-			type
-		});
-		dispatchProject(createFileAction);
-		changeDivEditable(fileNameInputReference.current, false);
+		updateFileState(newFileId);
 	};
 
 	const handleErrorResponse = () => {

diff --git a/cocode/src/components/Project/PlusImage/style.js b/cocode/src/components/Project/PlusImage/style.js
@@ -5,7 +5,6 @@ const Image = styled.svg`
 	& {
         width: ${DEPENDENCY_TAB_THEME.dependencyTabIconSize};
         height: ${DEPENDENCY_TAB_THEME.dependencyTabIconSize};
-        margin-left: auto;
         margin-right: 0.5rem;
         fill: ${DEPENDENCY_TAB_THEME.dependencyTabIconColor}
 	}

diff --git a/cocode/src/constants/cursorColors.js b/cocode/src/constants/cursorColors.js
@@ -0,0 +1,15 @@
+const colors = [
+	'#CC000080',
+	'#FF650F80',
+	'#FFBA0280',
+	'#458d5380',
+	'#006b0480',
+	'#2E588D80',
+	'#52338D80',
+	'#74155180',
+	'#13133C80',
+	'#220D3880',
+	'#00000080'
+];
+
+export { colors };
diff --git a/cocode/src/constants/notificationMessage.js b/cocode/src/constants/notificationMessage.js
@@ -8,6 +8,7 @@ const FAIL_TO_UPDATE_PROJECT_CARD = 'Fail to request. sorry, try again please';
 const FILE_IS_NOT_MOVABLE = 'This file is not movable';
 const FILE_IS_NOT_EDITABLE = 'This file is not editable';
 const FILE_IS_DUPLICATED = 'This file name is duplicated';
+const FILE_NAME_IS_INCORRECT = 'This file name is incorrect';
 const FILE_IS_NOT_REMOVABLE = 'This file is not removable';
 
 const CONFIRM_DELETE_FILE = 'Are you delete this file?';
@@ -21,6 +22,7 @@ const SUCCESS_FORK = 'Forked Coconut, Success!';
 const CONFLICT_FORK = 'Already forked! Enjoy Coconut!';
 
 const SHUT_DOWN_LIVE_SHARE = 'The live share has been shut down';
+const NEED_TO_SAVE = 'Please change your code and save';
 
 export {
 	FAIL_INSTALL_DEPENDENCY,
@@ -32,6 +34,7 @@ export {
 	FILE_IS_NOT_MOVABLE,
 	FILE_IS_NOT_EDITABLE,
 	FILE_IS_DUPLICATED,
+	FILE_NAME_IS_INCORRECT,
 	FILE_IS_NOT_REMOVABLE,
 	CONFIRM_DELETE_FILE,
 	CONFIRM_DELETE_COCONUT,
@@ -41,4 +44,5 @@ export {
 	SUCCESS_FORK,
 	CONFLICT_FORK,
 	SHUT_DOWN_LIVE_SHARE,
+	NEED_TO_SAVE
 };