Making the sync component buttons be actual buttons instead of links (#…

…391)
MicroPad · Jan 24, 2022 · f52c37b · f52c37b
1 parent 6f9befc
commit f52c37b
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 57 deletions.
diff --git a/..._/core-flows-spec-ts-core-flows-create-a-notebook-using-the-dropdown-1-snap.png b/..._/core-flows-spec-ts-core-flows-create-a-notebook-using-the-dropdown-1-snap.png
diff --git a/app/src/app/DynamicAppCss.ts b/app/src/app/DynamicAppCss.ts
@@ -48,6 +48,11 @@ export function createDynamicCss(store: Store<IStoreState, MicroPadAction>): voi
 				color: ${theme.accentContent};
 			}
 			
+			.danger.btn:hover, .danger.btn-flat:hover, .danger.btn-large:hover, .danger.btn-small:hover {
+				background-color: #F44336;
+				color: #fff;
+			}
+			
 			.modal {
 				background-color: ${theme.background};
 				color: ${theme.text};

diff --git a/app/src/app/components/explorer/NotepadExplorerComponent.tsx b/app/src/app/components/explorer/NotepadExplorerComponent.tsx
@@ -6,7 +6,7 @@ import ExplorerOptionsComponent from './explorer-options/ExplorerOptionsContaine
 import { NewNotepadObjectAction } from '../../types/ActionTypes';
 import HelpMessageComponent from '../help-message/HelpMessageContainer';
 import { Dialog } from '../../services/dialogs';
-import SyncOptionsComponent from '../../containers/SyncOptionsContainer';
+import SyncOptionsComponent from '../sync/sync-options/SyncOptionsContainer';
 import { Note, Parent, Section } from 'upad-parse/dist';
 import { NEW_SECTION_HELP, OPEN_NOTE_HELP, OPEN_NOTEPAD_HELP } from '../../types';
 import DueDateListComponent from './due-date-list/DueDateListContainer';

diff --git a/app/src/app/components/note-viewer/elements/markdown/MarkdownElementComponent.tsx b/app/src/app/components/note-viewer/elements/markdown/MarkdownElementComponent.tsx
@@ -18,7 +18,7 @@ import { colourTransformer, fendTransformer } from './MarkdownTransformers';
 import NoteElementModalComponent from '../../../note-element-modal/NoteElementModalComponent';
 import { BehaviorSubject } from 'rxjs';
 import { ConnectedProps } from 'react-redux';
-import { markdownElementContainer } from './MarkdownElementContainer';
+import { markdownElementConnector } from './MarkdownElementContainer';
 import { NotificationService } from '../../../../services/NotificationService';
 import Button2 from '../../../Button';
 
@@ -39,7 +39,7 @@ export interface IShowdownOpts extends ConverterOptions {
 	emoji: boolean;
 }
 
-type Props = ConnectedProps<typeof markdownElementContainer> & IMarkdownElementComponentProps;
+type Props = ConnectedProps<typeof markdownElementConnector> & IMarkdownElementComponentProps;
 
 const converter = configureShowdown();
 

diff --git a/app/src/app/components/note-viewer/elements/markdown/MarkdownElementContainer.ts b/app/src/app/components/note-viewer/elements/markdown/MarkdownElementContainer.ts
@@ -9,7 +9,7 @@ export const MD_END_ATTR = 'data-md-end';
 const VALID_MD_TASK_LIST = /^[\t ]*(\d+\.|[-+*])[\t ]+(\[[xX ]?\])/gm;
 const CHECKED = /^[\t ]*(\d+\.|[-+*])[\t ]+\[[xX]\]/;
 
-export const markdownElementContainer = connect(
+export const markdownElementConnector = connect(
 	(state: IStoreState) => ({
 		shouldSpellCheck: state.editor.shouldSpellCheck,
 		shouldWordWrap: state.editor.shouldWordWrap
@@ -56,5 +56,5 @@ export const markdownElementContainer = connect(
 	})
 );
 
-export default markdownElementContainer(MarkdownElementComponent);
+export default markdownElementConnector(MarkdownElementComponent);
 
diff --git a/.../components/sync/SyncOptionsComponent.tsx → ...ync/sync-options/SyncOptionsComponent.tsx b/.../components/sync/SyncOptionsComponent.tsx → ...ync/sync-options/SyncOptionsComponent.tsx
@@ -1,41 +1,41 @@
 import React from 'react';
-import { MICROPAD_URL, SYNC_NAME } from '../../types';
-import { ISyncedNotepad, SyncUser } from '../../types/SyncTypes';
-import * as DifferenceEngine from '../../services/DifferenceEngine';
-import { Dialog } from '../../services/dialogs';
-import LoginComponent from '../../containers/LoginContainer';
-import { FlatNotepad } from 'upad-parse/dist';
-import { ISyncState } from '../../reducers/SyncReducer';
+import { MICROPAD_URL, SYNC_NAME } from '../../../types';
+import * as DifferenceEngine from '../../../services/DifferenceEngine';
+import { Dialog } from '../../../services/dialogs';
+import LoginComponent from '../../../containers/LoginContainer';
+import { syncOptionsConnector } from './SyncOptionsContainer';
+import { ConnectedProps } from 'react-redux';
+import Button2 from '../../Button';
 
-export interface ISyncOptionsComponentProps {
-	syncState: ISyncState;
-	syncId?: string;
-	notepad?: FlatNotepad;
-	sync?: (syncId: string, notepad: ISyncedNotepad) => void;
-	deleteNotepad?: (syncId: string) => void;
-	addNotepad?: (user: SyncUser, title: string) => void;
-}
-
-export default class SyncOptionsComponent extends React.Component<ISyncOptionsComponentProps> {
+export default class SyncOptionsComponent extends React.Component<ConnectedProps<typeof syncOptionsConnector>> {
 	render() {
 		const { syncState, syncId, notepad, addNotepad } = this.props;
 		if (!notepad || (!syncState.sharedNotepadList && syncState.user)) return null;
 
 		if (!syncState.user) {
 			return (
 				<LoginComponent trigger={
-					<strong><a href="#!" style={{
-						textDecoration: 'underline',
-						whiteSpace: 'normal'
-					}}>Connect to {SYNC_NAME} to have this notebook on all of your devices</a></strong>
+					<Button2 className="accent-btn" waves="light" style={{
+						paddingLeft: '16px',
+						paddingRight: '16px',
+						height: 'auto'
+					}}>
+						Connect to <span style={{ textTransform: 'initial'}}>{SYNC_NAME}</span>
+					</Button2>
 				} />
 			);
 		}
 
 		return (
 			<React.Fragment>
 				<strong>{SYNC_NAME} Options for <em>{notepad.title}</em></strong>
-				{!syncId && <span><a href="#!" onClick={() => addNotepad!(syncState.user!, notepad.title)} style={{ textDecoration: 'underline' }}><br /> Start syncing this notepad</a></span>}
+				{!syncId && <span><Button2 className="accent-btn" waves="light" style={{
+					paddingLeft: '16px',
+					paddingRight: '16px',
+					height: 'auto'
+				}} disabled={syncState.isLoading} onClick={() => addNotepad(syncState.user, notepad.title)}>
+					Start syncing this notepad
+				</Button2></span>}
 
 				{
 					!!syncId &&
@@ -50,12 +50,18 @@ export default class SyncOptionsComponent extends React.Component<ISyncOptionsCo
 									</li>
 
 									<li>
-										<a
-											href="#!"
-											style={{ textDecorationColor: '#F44336' }}
+										<Button2
+											className="danger"
+											flat
+											waves="light"
+											style={{
+												paddingLeft: '16px',
+												paddingRight: '16px',
+												height: 'auto'
+											}}
 											onClick={() => setTimeout(() => this.stopSyncing(), 0)}>
 											Stop syncing this notepad
-										</a>
+										</Button2>
 									</li>
 
 									<li style={{ paddingTop: '1em' }}>
@@ -75,15 +81,15 @@ export default class SyncOptionsComponent extends React.Component<ISyncOptionsCo
 
 	private manualSync = async () => {
 		const { syncId, notepad, sync } = this.props;
-		if (!syncId || !notepad || !sync) return;
+		if (!syncId || !notepad) return;
 
 		const syncedNotepad = await DifferenceEngine.SyncService.notepadToSyncedNotepad(notepad.toNotepad());
 		sync(syncId, syncedNotepad);
 	}
 
 	private stopSyncing = async () => {
 		const { syncId, notepad, deleteNotepad } = this.props;
-		if (!syncId || !notepad || !deleteNotepad) return;
+		if (!syncId || !notepad) return;
 
 		if (!await Dialog.confirm(`Are you sure you want to remove ${notepad.title} from ${SYNC_NAME}?`)) return;
 		deleteNotepad(syncId);

diff --git a/app/src/app/components/sync/sync-options/SyncOptionsContainer.ts b/app/src/app/components/sync/sync-options/SyncOptionsContainer.ts
@@ -0,0 +1,25 @@
+import { IStoreState } from '../../../types';
+import { default as SyncOptionsComponent } from './SyncOptionsComponent';
+import { Action, Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import { actions } from '../../../actions';
+
+export const syncOptionsConnector = connect(mapStateToProps, mapDispatchToProps);
+
+function mapStateToProps({ notepads, sync }: IStoreState) {
+	return {
+		syncState: sync,
+		syncId: notepads?.notepad?.activeSyncId,
+		notepad: notepads?.notepad?.item
+	};
+}
+
+function mapDispatchToProps(dispatch: Dispatch<Action>) {
+	return {
+		sync: (syncId, notepad) => dispatch(actions.sync({ syncId, notepad })),
+		deleteNotepad: syncId => dispatch(actions.deleteFromSync.started(syncId)),
+		addNotepad: (user, title) => dispatch(actions.addToSync.started({ user, notepadTitle: title }))
+	};
+}
+
+export default syncOptionsConnector(SyncOptionsComponent);
diff --git a/app/src/app/containers/SyncOptionsContainer.ts b/app/src/app/containers/SyncOptionsContainer.ts
diff --git a/app/src/app/reducers/SyncReducer.ts b/app/src/app/reducers/SyncReducer.ts
@@ -22,6 +22,7 @@ export class SyncReducer extends AbstractReducer<ISyncState> {
 			|| isType(action, actions.syncDownload.started)
 			|| isType(action, actions.syncUpload.started)
 			|| isType(action, actions.deleteFromSync.started)
+			|| isType(action, actions.addToSync.started)
 		) {
 			return {
 				...state,
@@ -34,6 +35,7 @@ export class SyncReducer extends AbstractReducer<ISyncState> {
 			|| isType(action, actions.deleteFromSync.failed)
 			|| isType(action, actions.syncProError)
 			|| isType(action, actions.parseNpx.failed)
+			|| isType(action, actions.addToSync.failed)
 		) {
 			return {
 				...state,
@@ -42,6 +44,7 @@ export class SyncReducer extends AbstractReducer<ISyncState> {
 		} else if (
 			isType(action, actions.syncDownload.done)
 			|| isType(action, actions.syncUpload.done)
+			|| isType(action, actions.addToSync.done)
 		) {
 			return {
 				...state,