Merge pull request #155 from PrivaNoteTeam/markdown-parsing-and-note-synchronization

Markdown Parsing

Author: oliviergoulet5

client/package-lock.json

@@ -24,8 +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",
@@ -39,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",
@@ -54,20 +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

@@ -1,52 +1,45 @@
 import React from 'react';
+import { ipcRenderer } from 'electron';
+import { Route, useHistory } from 'react-router';
+import { CreateNotebookModal } from './CreateNotebookModal';
 import { LoginModal } from './modalManager/LoginModal';
 import { RegisterModal } from './modalManager/RegisterModal';
-import { CreateNotebookModal } from './CreateNotebookModal';
-import { ipcRenderer } from 'electron';
-import { useModalStore } from '../hooks';
+import { ResetPasswordModal } from './modalManager/ResetPasswordModal';
 import { VerificiationModal } from './modalManager/VerificationModal';
 import { TwoFactorAuthModal } from './modalManager/TwoFactorAuthModal';
 import { ForgotPasswordModal } from './modalManager/ForgotPasswordModal';
-import { ResetPasswordModal } from './modalManager/ResetPasswordModal';
 
 export function ModalManager() {
-	const [
-		{
-			loginModalVisible,
-			registerModalVisible,
-			createNotebookModalVisible,
-			verificationModalVisible,
-			twoFactorAuthModalVisible,
-			forgotPasswordModalVisible,
-			resetPasswordModalVisible
-		},
-		modalManagerDispatch
-	] = useModalStore();
-
+	let history = useHistory();
 	ipcRenderer.on('createNotebook', () => {
-		modalManagerDispatch({
-			type: 'createNotebookModal',
-			createNotebookModalVisible: true
-		});
+		history.push('/notebook/create');
 	});
 
-	let render: JSX.Element | null = null;
-
-	if (loginModalVisible) {
-		render = <LoginModal />;
-	} else if (registerModalVisible) {
-		render = <RegisterModal />;
-	} else if (createNotebookModalVisible) {
-		render = <CreateNotebookModal />;
-	} else if (verificationModalVisible) {
-		render = <VerificiationModal />;
-	} else if (twoFactorAuthModalVisible) {
-		render = <TwoFactorAuthModal />;
-	} else if (forgotPasswordModalVisible) {
-		render = <ForgotPasswordModal />;
-	} else if (resetPasswordModalVisible) {
-		render = <ResetPasswordModal />;
-	}
-
-	return render;
+	return (
+		<>
+			<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

@@ -1,19 +1,16 @@
 import React from 'react';
-import { usePageStore } from '@hooks';
 import { CloudProviderPage } from './pageManager/cloudProviderPage';
 import { SelectCloudProviderPage } from './pageManager/selectCloudProviderPage';
+import { Route } from 'react-router';
 
 export function PageManager() {
-	const [{ cloudProviderPageVisible, selectCloudProviderPageVisible }] =
-		usePageStore();
-
-	let render: JSX.Element | null = null;
-
-	if (cloudProviderPageVisible) {
-		render = <CloudProviderPage />;
-	} else if (selectCloudProviderPageVisible) {
-		render = <SelectCloudProviderPage />;
-	}
-
-	return render;
+	return (
+		<>
+			<Route path='/cloudprovider' children={<CloudProviderPage />} />
+			<Route
+				path='/cloudprovider/select'
+				children={<SelectCloudProviderPage />}
+			/>
+		</>
+	);
 }

client/src/app/components/ModalManager.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 />