Merge pull request #315 from connect-foundation/cocode

Cocode 1.3.1 hotfix!

Author: YukJiSoo

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

cocode/src/components/Common/UserProfile/avatar.jpeg

@@ -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>
 	);

cocode/src/components/Common/UserProfile/down.svg

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

cocode/src/components/Common/UserProfile/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}

cocode/src/components/Common/UserProfile/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
 };