Merge pull request #152 from PrivaNoteTeam/resize-panes

Resize Panes

Author: thejasonxie

client/package-lock.json

@@ -24,10 +24,12 @@
 		"@testing-library/react": "^12.1.2",
 		"@testing-library/react-hooks": "^7.0.2",
 		"@types/jest": "^27.0.2",
+		"@types/marked": "^3.0.2",
 		"@types/mock-fs": "^4.13.1",
-		"@types/react": "^17.0.24",
+		"@types/react": "^17.0.33",
 		"@types/react-router": "^5.1.17",
 		"@types/react-router-dom": "^5.3.2",
+		"@types/react-syntax-highlighter": "^13.5.2",
 		"autoprefixer": "^10.3.5",
 		"babel-jest": "^27.2.5",
 		"css-loader": "^6.3.0",
@@ -41,6 +43,7 @@
 		"mini-css-extract-plugin": "^2.3.0",
 		"mock-fs": "^5.1.1",
 		"module-alias": "^2.2.2",
+		"node-loader": "^2.0.0",
 		"postcss-cli": "^8.3.1",
 		"postcss-loader": "^6.1.1",
 		"prettier": "2.4.1",
@@ -56,22 +59,33 @@
 	},
 	"dependencies": {
 		"@hookform/resolvers": "^2.8.1",
+		"@monaco-editor/react": "^4.3.1",
 		"@svgr/webpack": "^5.5.0",
 		"@tailwindcss/aspect-ratio": "^0.3.0",
 		"@types/axios": "^0.14.0",
 		"@types/react-dom": "^17.0.9",
 		"axios": "^0.23.0",
 		"babel-core": "^6.26.3",
 		"babel-preset-react": "^6.24.1",
+		"chokidar": "^3.5.2",
 		"google-auth-library": "^7.10.1",
 		"googleapis": "^89.0.0",
+		"highlight.js": "^11.3.1",
+		"html-react-parser": "^1.4.0",
+		"markdown-to-jsx": "^7.1.3",
+		"marked": "^3.0.8",
+		"monaco-editor": "^0.29.1",
 		"mrm": "^3.0.9",
+		"node-watch": "^0.7.2",
 		"nodemailer": "^6.7.0",
 		"react": "^17.0.2",
+		"react-collapse-pane": "^2.0.1",
 		"react-dom": "^17.0.2",
+		"react-dropzone": "^11.4.2",
 		"react-hook-form": "^7.16.1",
 		"react-router": "^5.2.1",
 		"react-router-dom": "^5.3.0",
+		"react-syntax-highlighter": "^15.4.4",
 		"typesafe-actions": "^5.1.0",
 		"yup": "^0.32.9"
 	}

client/package.json

@@ -9,20 +9,22 @@ import { SideMenu } from '@components/SideMenu';
 import { getUser } from '@shared/Api/getUser';
 import { useIpcListeners } from './hooks/useIpcListeners';
 import { useGoogleDrive } from './hooks/useGoogleDrive';
+import { FileExplorer } from './components/FileExplorer';
+import { Placeholder } from './components/Placeholder';
+import { NotificationArea } from './components/NotificationArea';
+import { SplitPane } from 'react-collapse-pane';
 
 export const editorReducer = (state: EditorState, action: EditorAction) => {
 	switch (action.type) {
 		case 'primarySelect':
-			return { ...state, primarySelection: action.primarySelection };
+			return { ...state, primarySelection: action.primarySelection! };
 		case 'secondarySelect':
-			return { ...state, secondarySelection: action.secondarySelection };
-		case 'rename':
-			return { ...state, isRenaming: action.isRenaming };
+			return { ...state, secondarySelection: action.secondarySelection! };
 	}
 };
 
 export function App() {
-	const [{ currentNote, notebook }] = useStore();
+	const [{ currentFile, notebook }] = useStore();
 	const [, userDispatch] = useUserStore();
 
 	useIpcListeners();
@@ -32,17 +34,34 @@ export function App() {
 		getUser().then(({ user }) => {
 			if (user) userDispatch({ type: 'login', user });
 		});
-	}, [currentNote, notebook]);
+	}, [currentFile, notebook]);
 
 	return (
 		<>
-			<div className='bg-gray-800 w-screen h-screen flex'>
+			<div className='bg-gray-800 w-screen h-screen flex relative'>
 				<SideMenu />
-				<EditorProvider
-					initialState={{ isRenaming: false }}
-					reducer={editorReducer}
-				>
-					<EditorPanel />
+				<EditorProvider initialState={{}} reducer={editorReducer}>
+					{notebook ? (
+						<div className='relative flex-grow z-auto'>
+							<SplitPane
+								split='vertical'
+								initialSizes={[1, 5]}
+								resizerOptions={{
+									hoverCss: {
+										backgroundColor: 'rgb(59, 130, 246)'
+									}
+								}}
+							>
+								<FileExplorer />
+								<EditorPanel />
+							</SplitPane>
+						</div>
+					) : (
+						<div className='relative flex-grow flex flex-col'>
+							<NotificationArea />
+							<Placeholder text='Open a notebook to continue' />
+						</div>
+					)}
 				</EditorProvider>
 				<PageManager />
 				<ModalManager />

client/src/app/App.tsx

@@ -3,7 +3,15 @@ import { useEditorPanel } from './editorPanel/useEditorPanel';
 import { UIEditorPanel } from './editorPanel/UIEditorPanel';
 
 export function EditorPanel() {
-	const { fileExplorerVisible } = useEditorPanel();
+	const { text, setText, handlePreviewClose, livePreviewVisiable } =
+		useEditorPanel();
 
-	return <UIEditorPanel fileExplorerVisible={fileExplorerVisible} />;
+	return (
+		<UIEditorPanel
+			livePreviewVisiable={livePreviewVisiable}
+			text={text}
+			setText={setText}
+			handlePreviewClose={handlePreviewClose}
+		/>
+	);
 }

client/src/app/assets/icons/attachment.svg

@@ -1,20 +1,13 @@
 import React from 'react';
-import { FileSystemItem } from '@types';
 import { UIFileExplorer } from './fileExplorer/UIFileExplorer';
-
 import { useFileExplorer } from './fileExplorer/useFileExplorer';
 
-interface Props {
-	items: FileSystemItem[];
-}
-
-export function FileExplorer({ items }: Props) {
+export function FileExplorer() {
 	const {
+		items,
 		handleAddDirectoryClick,
 		handleAddFileClick,
-		handleOuterClick,
-		renameText,
-		setRenameText
+		handleOuterClick
 	} = useFileExplorer();
 
 	return (
@@ -23,8 +16,6 @@ export function FileExplorer({ items }: Props) {
 			handleAddDirectoryClick={handleAddDirectoryClick}
 			handleAddFileClick={handleAddFileClick}
 			handleOuterClick={handleOuterClick}
-			renameText={renameText}
-			setRenameText={setRenameText}
 		/>
 	);
 }

client/src/app/components/EditorPanel.tsx

@@ -17,13 +17,29 @@ export function ModalManager() {
 
 	return (
 		<>
-			<Route path='/notebook/create' component={CreateNotebookModal} />
-			<Route path='/login' component={LoginModal} />
-			<Route path='/register' component={RegisterModal} />
-			<Route path='/forgot-password' component={ForgotPasswordModal} />
-			<Route path='/reset-password' component={ResetPasswordModal} />
-			<Route path='/verification' component={VerificiationModal} />
-			<Route path='/2fa' component={TwoFactorAuthModal} />
+			<Route
+				path='/notebook/create'
+				children={<CreateNotebookModal />}
+				exact
+			/>
+			<Route path='/login' children={<LoginModal />} exact />
+			<Route path='/register' children={<RegisterModal />} exact />
+			<Route
+				path='/forgot-password'
+				children={<ForgotPasswordModal />}
+				exact
+			/>
+			<Route
+				path='/reset-password'
+				children={<ResetPasswordModal />}
+				exact
+			/>
+			<Route
+				path='/verification'
+				children={<VerificiationModal />}
+				exact
+			/>
+			<Route path='/2fa' children={<TwoFactorAuthModal />} exact />
 		</>
 	);
 }

…/components/editorPanel/FileExplorer.tsx …ient/src/app/components/FileExplorer.tsxclient/src/app/components/editorPanel/FileExplorer.tsx renamed to client/src/app/components/FileExplorer.tsx client/src/app/components/editorPanel/FileExplorer.tsx renamed to client/src/app/components/FileExplorer.tsx

@@ -7,7 +7,7 @@ import { useStore } from '@hooks';
 export function SideMenu() {
 	const [{ notebook }] = useStore();
 	return (
-		<div className='flex flex-col-reverse bg-gray-700 p-3'>
+		<div className='flex flex-col-reverse bg-gray-700 p-3 flex-0'>
 			<div className='space-y-reverse space-y-2 inline-flex flex-col-reverse cursor-pointer'>
 				{notebook && <SettingsButton />}
 				<UserButton />

client/src/app/components/ModalManager.tsx

@@ -65,7 +65,7 @@ export function useCreateNotebookModal() {
 
 			dispatch({
 				type: 'openNote',
-				currentNote: undefined
+				currentFile: undefined
 			});
 
 			dispatch({