Merge pull request #350 from MicroPad/next-dev

v3.29.1
MicroPad · Jun 5, 2021 · bf60fa8 · bf60fa8
2 parents 77b1a7b + e08595e
commit bf60fa8
Show file tree

Hide file tree

Showing 38 changed files with 786 additions and 975 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -38,6 +38,7 @@ jobs:
 
       # run tests!
       - run: cd app && yarn typecheck
+      - run: cd app && yarn lint
       - run: cd app && yarn test
 
   build:

diff --git a/app/package.json b/app/package.json
@@ -1,13 +1,14 @@
 {
   "name": "micropad",
-  "version": "3.29.0",
+  "version": "3.29.1",
   "private": true,
   "scripts": {
     "preinstall": "python3 ../libs/build-libs.py; ./get_precache_files.py > src/extraPrecacheFiles.ts",
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "echo \"Tests are coming soon, hopefully.\"",
     "typecheck": "yarn tsc --noEmit --p ./tsconfig.json",
+    "lint": "yarn eslint src/",
     "eject": "react-scripts eject"
   },
   "dependencies": {
@@ -17,7 +18,7 @@
     "date-fns": "^2.21.3",
     "deep-equal": "^2.0.5",
     "deep-freeze": "0.0.1",
-    "fend-wasm": "^0.1.14",
+    "fend-wasm": "^0.1.15",
     "jquery": "^3.5.1",
     "json-stringify-safe": "^5.0.1",
     "jszip": "^3.1.5",
@@ -30,7 +31,7 @@
     "pdfobject": "^2.1.1",
     "querystring": "^0.2.0",
     "raw-loader": "^0.5.1",
-    "re-resizable": "^4.4.8",
+    "re-resizable": "^6.9.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-draggable": "^4.3.1",
@@ -39,7 +40,7 @@
     "react-redux": "^7.1.0",
     "react-scripts": "^4.0.3",
     "react-treeview": "^0.4.7",
-    "redux": "^3.7.2",
+    "redux": "^4.1.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-observable": "^0.19.0",
     "redux-typescript-actions": "^1.3.0",
@@ -48,7 +49,7 @@
     "save-as": "^0.1.8",
     "semver": "^7.3.4",
     "showdown": "^1.8.6",
-    "typescript": "~4.2.4",
+    "typescript": "~4.3.2",
     "upad-parse": "^7.2.0",
     "vex-dialog": "^1.1.0",
     "vex-js": "^4.1.0"
@@ -61,7 +62,12 @@
           "**/*.ts?(x)"
         ],
         "rules": {
-          "@typescript-eslint/no-use-before-define": "off"
+          "@typescript-eslint/no-use-before-define": "off",
+          "eqeqeq": ["error", "smart"],
+          "no-multi-spaces": "error",
+          "array-bracket-spacing": ["error", "never"],
+          "object-curly-spacing": ["error", "always"],
+          "key-spacing": "error"
         }
       }
     ]
@@ -95,6 +101,7 @@
     "react-app-rewired": "^2.1.6",
     "react-codemod": "^5.4.3",
     "wasm-loader": "^1.3.0",
-    "workerize-loader": "^1.1.0"
+    "workerize-loader": "^1.1.0",
+    "eslint": "^7.27.0"
   }
 }
diff --git a/app/src/app/actions.ts b/app/src/app/actions.ts
@@ -1,4 +1,4 @@
-import actionCreatorFactory from 'redux-typescript-actions';
+import actionCreatorFactory, { ActionCreator, AsyncActionCreators } from 'redux-typescript-actions';
 import { IRenameNotepadObjectAction } from './types/NotepadTypes';
 import {
 	AddCryptoPasskeyAction,
@@ -25,6 +25,18 @@ import { HashTagSearchResults } from './reducers/SearchReducer';
 import { ThemeName } from './types/Themes';
 import { DueItem } from './services/DueDates';
 
+export type MicroPadAction = ActionTypes[keyof ActionTypes];
+export type ActionNames = keyof ActionFactories;
+
+type ActionFactories = typeof actions;
+type ActionTypes = {
+	[ActionName in ActionNames]: ActionFactories[ActionName] extends ActionCreator<any>
+		? ReturnType<ActionFactories[ActionName]>
+		: ActionFactories[ActionName] extends AsyncActionCreators<any, any, any>
+			? (ReturnType<ActionFactories[ActionName]['started']> | ReturnType<ActionFactories[ActionName]['done']> | ReturnType<ActionFactories[ActionName]['failed']>)
+			: never;
+};
+
 const actionCreator = actionCreatorFactory();
 
 export const actions = {

diff --git a/app/src/app/components/header/HeaderComponent.tsx b/app/src/app/components/header/HeaderComponent.tsx
@@ -41,7 +41,7 @@ export default class HeaderComponent extends React.Component<IHeaderComponentPro
 		if (isSyncing) saveText = 'Syncing...';
 
 		return (
-			<header style={{position: 'fixed', zIndex: 1000}}>
+			<header style={{ position: 'fixed', zIndex: 1000 }}>
 				<Navbar className="menu-items" brand={<AppNameComponent />} href="#!" style={navStyle} right={true}>
 					<li style={{ marginRight: '10px', color: theme.explorerContent }}>{saveText}</li>
 					<ThemeDropdownComponent />

diff --git a/app/src/app/components/header/NotepadBreadcrumbsComponent/NotepadBreadcrumbsComponent.tsx b/app/src/app/components/header/NotepadBreadcrumbsComponent/NotepadBreadcrumbsComponent.tsx
@@ -23,7 +23,7 @@ export default class NotepadBreadcrumbsComponent extends React.Component<INotepa
 	private readonly timeStyle: CSSProperties = {
 		paddingLeft: '20px',
 		fontFamily: 'Roboto',
-		fontWeight:  200 as 200
+		fontWeight: 200 as 200
 	};
 
 	render() {

diff --git a/app/src/app/components/header/NotepadDropdownComponent.tsx b/app/src/app/components/header/NotepadDropdownComponent.tsx
@@ -53,13 +53,13 @@ export default class NotepadDropdownComponent extends React.Component<INotepadDr
 						header="Export All Notepads"
 						trigger={<NavItem id="export-all-notepads-trigger" href="#!"><Icon left={true}>file_download</Icon> Export All</NavItem>}>
 						<Row>
-							<Col s={12} m={6} style={{cursor: 'pointer'}} onClick={exportAll}>
+							<Col s={12} m={6} style={{ cursor: 'pointer' }} onClick={exportAll}>
 								<img src={NpxIcon} style={iconStyles} title="Export notepads as a zip archive of NPX files" alt="" />
-								<p style={{textAlign: 'center'}}>Export notepads as a zip archive of NPX files</p>
+								<p style={{ textAlign: 'center' }}>Export notepads as a zip archive of NPX files</p>
 							</Col>
-							<Col s={12} m={6} style={{cursor: 'pointer'}} onClick={exportToMarkdown}>
+							<Col s={12} m={6} style={{ cursor: 'pointer' }} onClick={exportToMarkdown}>
 								<img src={MarkdownIcon} style={iconStyles} title="Export notepads as a zip archive of markdown files" alt="" />
-								<p style={{textAlign: 'center'}}>Export notepads as a zip archive of markdown files</p>
+								<p style={{ textAlign: 'center' }}>Export notepads as a zip archive of markdown files</p>
 							</Col>
 							{this.props.isExporting && <ProgressBar className="amber" />}
 						</Row>
@@ -76,7 +76,7 @@ export default class NotepadDropdownComponent extends React.Component<INotepadDr
 
 					<NavItem divider={true} />
 					{syncState.isLoading && <NavItem href="#!">Loading...</NavItem>}
-					{!!syncState.sharedNotepadList &&  Object.keys(syncState.sharedNotepadList).map(title =>
+					{!!syncState.sharedNotepadList && Object.keys(syncState.sharedNotepadList).map(title =>
 						<NavItem key={generateGuid()} href="#!" onClick={() => {
 							downloadNotepad!(syncState.sharedNotepadList![title].notepad);
 						}}>

diff --git a/app/src/app/components/note-viewer/SourcesComponent.tsx b/app/src/app/components/note-viewer/SourcesComponent.tsx
@@ -19,7 +19,7 @@ export default class SourcesComponent extends React.Component<ISourcesComponent>
 		bibliography.forEach(source => sources.push(
 			<div key={`${note.title}-source-${source.id}`}>
 				<a href={source.content} rel="noopener noreferrer" target="_blank">Open URL</a><br />
-				<Autocomplete type="url" value={source.content} label="URL" onChange={(e, v) => this.onSourceEdit(source.id, v)}  data={{}} />
+				<Autocomplete type="url" value={source.content} label="URL" onChange={(e, v) => this.onSourceEdit(source.id, v)} data={{}} />
 			</div>
 		));
 

diff --git a/app/src/app/components/note-viewer/elements/FileElementComponent.tsx b/app/src/app/components/note-viewer/elements/FileElementComponent.tsx
@@ -17,7 +17,7 @@ export default class FileElementComponent extends React.Component<IFileElementCo
 		const isEditing = elementEditing === element.args.id;
 
 		return (
-			<div style={{padding: '5px', width: 'max-content'}} onClick={this.openEditor}>
+			<div style={{ padding: '5px', width: 'max-content' }} onClick={this.openEditor}>
 				<em style={{ color: theme.text }}>
 					{!isEditing && element.args.filename}
 					{(isEditing || !element.args.filename) && `Upload a file...`}

diff --git a/app/src/app/components/note-viewer/elements/ImageElementComponent.tsx b/app/src/app/components/note-viewer/elements/ImageElementComponent.tsx
@@ -3,7 +3,7 @@ import { SyntheticEvent } from 'react';
 import { INoteElementComponentProps } from './NoteElementComponent';
 import { dataURItoBlob } from '../../../util';
 import { Col, Input, Row } from 'react-materialize';
-import Resizable from 're-resizable';
+import { Resizable } from 're-resizable';
 import { Dialog } from '../../../services/dialogs';
 import { NoteElement } from 'upad-parse/dist/Note';
 
@@ -15,7 +15,7 @@ export default class ImageElementComponent extends React.Component<INoteElementC
 		const isEditing = elementEditing === element.args.id;
 
 		return (
-			<div style={{overflow: 'hidden', height: (isEditing) ? element.args.height! : 'auto', width: (isEditing) ? element.args.width : 'auto', minHeight: '130px'}} onClick={this.openEditor}>
+			<div style={{ overflow: 'hidden', height: (isEditing) ? element.args.height! : 'auto', width: (isEditing) ? element.args.width : 'auto', minHeight: '130px' }} onClick={this.openEditor}>
 				{
 					!isEditing &&
 					<Resizable
@@ -28,12 +28,12 @@ export default class ImageElementComponent extends React.Component<INoteElementC
 							this.onSizeEdit('width', ref.style.width!);
 							this.onSizeEdit('height', ref.style.height!);
 						}}>
-						<img style={{height: (element.args.height !== 'auto') ? '100%' : undefined, width: (element.args.width !== 'auto') ? '100%' : undefined }} src={noteAssets[element.args.ext!]} alt="" />
+						<img style={{ height: (element.args.height !== 'auto') ? '100%' : undefined, width: (element.args.width !== 'auto') ? '100%' : undefined }} src={noteAssets[element.args.ext!]} alt="" />
 					</Resizable>
 				}
 				{
 					isEditing &&
-					<div style={{height: '100%'}}>
+					<div style={{ height: '100%' }}>
 						<em style={{ color: theme.text }}>Upload a new image...</em><br />
 						<input type="file" onChange={this.fileSelected} style={{ padding: '5px', color: theme.text }} />
 

diff --git a/app/src/app/components/note-viewer/elements/NoteElementComponent.tsx b/app/src/app/components/note-viewer/elements/NoteElementComponent.tsx
@@ -46,7 +46,8 @@ export default class NoteElementComponent extends React.Component<INoteElementCo
 		const backgroundColour = theme.background === '#000' ? ThemeValues.Midnight.background : theme.background;
 		const elementStyles = {
 			width: (element.type !== 'image' && element.type !== 'markdown') ? element.args.width : 'auto',
-			backgroundColor: (isEditing) ? backgroundColour : undefined
+			backgroundColor: (isEditing) ? backgroundColour : undefined,
+			overflow: 'hidden'
 		};
 
 		let elementComponent: JSX.Element | undefined = undefined;
@@ -165,11 +166,11 @@ export default class NoteElementComponent extends React.Component<INoteElementCo
 								<EditDueDateComponent element={element} theme={theme} updateElement={updateElement!} />
 
 								<Row style={{ paddingLeft: '5px', paddingTop: '10px' }}>
-									<Button className="red" waves="light" onClick={this.delete} style={{marginRight: '5px'}}><Icon left={true}>delete_forever</Icon> Delete</Button>
+									<Button className="red" waves="light" onClick={this.delete} style={{ marginRight: '5px' }}><Icon left={true}>delete_forever</Icon> Delete</Button>
 								</Row>
 
 								<Row style={{ paddingLeft: '5px' }}>
-									<Button className="btn-flat" waves="light" onClick={() => edit('')} style={{marginRight: '5px', float: 'right'}}>Close editor (autosaved)</Button>
+									<Button className="btn-flat" waves="light" onClick={() => edit('')} style={{ marginRight: '5px', float: 'right' }}>Close editor (autosaved)</Button>
 								</Row>
 							</div>
 						}

diff --git a/app/src/app/components/note-viewer/elements/PdfElementComponent.tsx b/app/src/app/components/note-viewer/elements/PdfElementComponent.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { SyntheticEvent } from 'react';
 import { INoteElementComponentProps } from './NoteElementComponent';
-import { Row, Col, Input } from 'react-materialize';
-import Resizable from 're-resizable';
+import { Col, Input, Row } from 'react-materialize';
+import { Resizable } from 're-resizable';
 import { dataURItoBlob } from '../../../util';
 import { Dialog } from '../../../services/dialogs';
 import * as PDFObject from 'pdfobject';
@@ -20,7 +20,7 @@ export default class PdfElementComponent extends React.Component<INoteElementCom
 		this.isEditing = elementEditing === element.args.id;
 
 		// The PDF.js viewer must have a fixed height so disallow auto and set to the minimum (500px)
-		const elementHeight = element.args.height === 'auto' ? '500px' : element.args.height;
+		const elementHeight = element.args.height === 'auto' ? '500px' : (element.args.height ?? '500px');
 
 		return (
 			<div style={{

diff --git a/app/src/app/components/note-viewer/elements/RecordingElementComponent.tsx b/app/src/app/components/note-viewer/elements/RecordingElementComponent.tsx
@@ -29,10 +29,10 @@ export default class RecordingElementComponent extends React.Component<IFileElem
 		const { element, noteAssets, downloadAsset, elementEditing } = this.props;
 		const isEditing = elementEditing === element.args.id;
 
-		if (isEditing && !this.canRecord) return <div style={{padding: '5px', width: '400px'}}><p>Recording is not supported</p></div>;
+		if (isEditing && !this.canRecord) return <div style={{ padding: '5px', width: '400px' }}><p>Recording is not supported</p></div>;
 
 		return (
-			<div style={{padding: '5px', width: (!isEditing) ? 'max-content' : '400px'}}>
+			<div style={{ padding: '5px', width: (!isEditing) ? 'max-content' : '400px' }}>
 				{
 					isEditing &&
 					<div ref={e => this.buttonContainer = e!} className="recording-inactive">
@@ -57,7 +57,7 @@ export default class RecordingElementComponent extends React.Component<IFileElem
 	}
 
 	componentDidMount() {
-		const { updateElement, element, edit} = this.props;
+		const { updateElement, element, edit } = this.props;
 
 		this.recorder.onstart = () => {
 			this.buttonContainer.classList.remove('recording-inactive');

diff --git a/app/src/app/components/note-viewer/elements/drawing/DrawingElementComponent.tsx b/app/src/app/components/note-viewer/elements/drawing/DrawingElementComponent.tsx
@@ -2,7 +2,7 @@ import { INoteElementComponentProps } from '../NoteElementComponent';
 import * as React from 'react';
 import { dataURItoBlob } from '../../../../util';
 import { trim } from './trim-canvas';
-import Resizable from 're-resizable';
+import { Resizable } from 're-resizable';
 import { Input, Row } from 'react-materialize';
 import stringify from 'json-stringify-safe';
 import * as FullScreenService from '../../../../services/FullscreenService';
@@ -52,7 +52,7 @@ export default class DrawingElementComponent extends React.Component<IDrawingEle
 			return (
 				<div>
 					<Resizable
-						style={{padding: '5px', overflow: 'hidden'}}
+						style={{ padding: '5px', overflow: 'hidden' }}
 						minWidth={410}
 						minHeight={130}
 						lockAspectRatio={true}
@@ -82,10 +82,10 @@ export default class DrawingElementComponent extends React.Component<IDrawingEle
 							ref={e => this.canvasElement = e!}
 							width="500"
 							height="450"
-							style={{border: 'solid black 1px', touchAction: 'none'}} />
+							style={{ border: 'solid black 1px', touchAction: 'none' }} />
 					</Resizable>
 
-					<Row style={{padding: '5px'}}>
+					<Row style={{ padding: '5px' }}>
 						<Input label="Erase Mode" type="checkbox" className="filled-in" onChange={(e, v) => this.isErasing = v} />
 						<Input label={<a target="_blank" rel="noopener noreferrer nofollow" href="https://pride.codes">Rainbow Mode</a>} type="checkbox" className="filled-in" onChange={(e, v) => this.isRainbow = v} />
 					</Row>
@@ -103,7 +103,7 @@ export default class DrawingElementComponent extends React.Component<IDrawingEle
 				minHeight: '130px',
 				backgroundColor: !isEditing ? theme.drawingBackground : undefined
 			}} onClick={this.openEditor}>
-				<img ref={elm => this.imageElement = elm!} style={{height: 'auto', width: 'auto', minWidth: '0px', minHeight: '0px'}} src={noteAssets[element.args.ext!]} alt="" />
+				<img ref={elm => this.imageElement = elm!} style={{ height: 'auto', width: 'auto', minWidth: '0px', minHeight: '0px' }} src={noteAssets[element.args.ext!]} alt="" />
 			</div>
 		);
 	}

diff --git a/app/src/app/components/note-viewer/elements/markdown/MarkdownElementComponent.tsx b/app/src/app/components/note-viewer/elements/markdown/MarkdownElementComponent.tsx
@@ -9,7 +9,7 @@ import { debounce } from '../../../../util';
 import Grid from '@material-ui/core/Grid';
 import { Input } from 'react-materialize';
 import MarkdownHelpComponent from './MarkdownHelpComponent';
-import Resizable from 're-resizable';
+import { Resizable } from 're-resizable';
 import { NoteElement } from 'upad-parse/dist/Note';
 import { ITheme } from '../../../../types/Themes';
 import { colourTransformer, fendTransformer } from './MarkdownTransformers';
@@ -80,7 +80,7 @@ export default class MarkdownElementComponent extends React.Component<IMarkdownE
 
 		return (
 			<Resizable
-				style={{overflow: 'hidden'}}
+				style={{ overflow: 'hidden' }}
 				size={{ width, height }}
 				minWidth={minWidth}
 				enable={{

diff --git a/app/src/app/components/note-viewer/elements/markdown/MarkdownTransformers.ts b/app/src/app/components/note-viewer/elements/markdown/MarkdownTransformers.ts
@@ -10,7 +10,7 @@ export const fendTransformer: MarkdownTransformer = {
 			// e.g. [[1+1]] -> 2
 			text.replace(/\[\[([^]+?)\]\]/gi, (match, content) => {
 				let result = evaluateFendWithTimeout(content, 500);
-				if (result === "Error: Interrupted") {
+				if (result === "Error: interrupted") {
 					result = "Error: Calculation timed out";
 				}
 				if (result.startsWith("Error:")) {