Add "Go to date" dialog

Closes samuelmeuli#57

src/main/i18n/translations/de.ts

@@ -31,6 +31,7 @@ const translationsDe: Partial<Translations> = {
 	// Menu (app-specific)
 	"export": "Exportieren",
 	"export-to-format": "Als {format} exportieren",
+	"go-to-date": "Zu Datum gehen",
 	"import": "Importieren",
 	"import-from-format": "Von {format} importieren",
 	"license": "Lizenz",
@@ -70,6 +71,7 @@ const translationsDe: Partial<Translations> = {
 	"allow-future-entries": "Einträge in der Zukunft erlauben",
 	"diary-entries": "Tagebucheinträge",
 	"no": "Nein",
+	"ok": "OK",
 	"reset-diary": "Tagebuch zurücksetzen",
 	"reset-diary-confirm": "Ja, ich bin mir sicher",
 	"reset-diary-msg": "Bist du sicher, dass du dein Tagebuch zurücksetzen möchtest? Diese Aktion wird all deine Einträge unwiderruflich löschen.",

src/main/i18n/translations/en.ts

@@ -31,6 +31,7 @@ const translationsEn: Translations = {
 	// Menu (app-specific)
 	"export": "Export",
 	"export-to-format": "Export to {format}",
+	"go-to-date": "Go to Date",
 	"import": "Import",
 	"import-from-format": "Import from {format}",
 	"license": "License",
@@ -70,6 +71,7 @@ const translationsEn: Translations = {
 	"allow-future-entries": "Allow entries in the future",
 	"diary-entries": "Diary entries",
 	"no": "No",
+	"ok": "OK",
 	"reset-diary": "Reset diary",
 	"reset-diary-confirm": "Yes, I am sure",
 	"reset-diary-msg": "Are you sure you want to reset your diary? This will delete all of your content. The data cannot be restored.",

src/main/ipcMain/senders.ts

@@ -62,10 +62,6 @@ export const lock = (): void => {
 
 // Overlays
 
-export const showPrefOverlay = (): void => {
-	getWindow().webContents.send("showPrefOverlay");
-};
-
-export const showStatsOverlay = (): void => {
-	getWindow().webContents.send("showStatsOverlay");
+export const openOverlay = (overlayType: OverlayType): void => {
+	getWindow().webContents.send("openOverlay", overlayType);
 };

src/main/menu/menu.ts

@@ -8,6 +8,7 @@ const DISABLED_MENU_ITEMS = [
 	"exportMd",
 	"exportPdf",
 	"exportTxtDayOne",
+	"goToDate",
 	"importJsonDayOne",
 	"importJsonJrnl",
 	"importJsonMiniDiary",

src/main/menu/menus/file.ts

@@ -11,7 +11,7 @@ import {
 	importJsonMiniDiary,
 	importTxtDayOne,
 	lock,
-	showStatsOverlay,
+	openOverlay,
 } from "../../ipcMain/senders";
 
 export default function getFileMenu(): MenuItemConstructorOptions {
@@ -99,7 +99,7 @@ export default function getFileMenu(): MenuItemConstructorOptions {
 				label: translate("statistics"),
 				id: "statistics",
 				click(): void {
-					showStatsOverlay();
+					openOverlay("statistics");
 				},
 			},
 		],

src/main/menu/menus/view.ts

@@ -6,12 +6,21 @@ import {
 	setDaySelectedPrevious,
 	setMonthSelectedNext,
 	setMonthSelectedPrevious,
+	openOverlay,
 } from "../../ipcMain/senders";
 
 export default function getViewMenu(): MenuItemConstructorOptions {
 	return {
 		label: translate("view"),
 		submenu: [
+			{
+				label: `${translate("go-to-date")}…`,
+				id: "goToDate",
+				click(): void {
+					openOverlay("go-to-date");
+				},
+			},
+			{ type: "separator" },
 			{
 				label: translate("previous-day"),
 				id: "previousDay",

src/main/menu/preferencesItem.ts

@@ -1,15 +1,15 @@
 import { MenuItemConstructorOptions } from "electron";
 
 import { translate } from "../i18n/i18n";
-import { showPrefOverlay } from "../ipcMain/senders";
+import { openOverlay } from "../ipcMain/senders";
 
 export default function getPreferencesItem(): MenuItemConstructorOptions {
 	return {
 		label: `${translate("preferences")}…`,
 		id: "preferences",
 		accelerator: "CmdOrCtrl+,",
 		click(): void {
-			showPrefOverlay();
+			openOverlay("preferences");
 		},
 	};
 }

src/renderer/components/App.tsx

@@ -4,6 +4,7 @@ import React, { Component, ReactNode } from "react";
 
 import { toggleWindowSize } from "../electron/window";
 import { translations } from "../utils/i18n";
+import GoToDateOverlayContainer from "./overlays/go-to-date-overlay/GoToDateOverlayContainer";
 import ImportOverlayContainer from "./overlays/import-overlay/ImportOverlayContainer";
 import PrefOverlayContainer from "./overlays/pref-overlay/PrefOverlayContainer";
 import StatsOverlayContainer from "./overlays/stats-overlay/StatsOverlayContainer";
@@ -38,6 +39,8 @@ export default class App extends Component<Props, State> {
 		switch (overlay) {
 			case "none":
 				return null;
+			case "go-to-date":
+				return <GoToDateOverlayContainer />;
 			case "import":
 				return <ImportOverlayContainer />;
 			case "preferences":

src/renderer/components/overlays/go-to-date-overlay/GoToDateOverlay.tsx

@@ -0,0 +1,69 @@
+import logger from "electron-log";
+import React, { ChangeEvent, FormEvent, ReactElement, useState } from "react";
+
+import { momentIndex, toIndexDate } from "../../../utils/dateFormat";
+import { translations } from "../../../utils/i18n";
+import OverlayContainer from "../overlay-hoc/OverlayContainer";
+
+export interface StateProps {
+	allowFutureEntries: boolean;
+	dateSelected: Date;
+}
+
+export interface DispatchProps {
+	closeOverlay: () => void;
+	setDateSelected: (date: Date) => void;
+}
+
+type Props = StateProps & DispatchProps;
+
+/**
+ * Dialog for quickly jumping to a certain date.
+ */
+export default function GoToDateOverlay(props: Props): ReactElement {
+	const { allowFutureEntries, closeOverlay, dateSelected, setDateSelected } = props;
+
+	const todayFormatted = toIndexDate(new Date());
+	const dateSelectedFormatted = toIndexDate(dateSelected);
+
+	// `date` can become `undefined` when the user's date input is incomplete (e.g. year not filled in
+	// yet
+	const [date, setDate] = useState<string | undefined>(dateSelectedFormatted);
+
+	const onChange = (event: ChangeEvent<HTMLInputElement>): void => setDate(event.target.value);
+
+	const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
+		event.preventDefault();
+		if (!date) {
+			logger.error("Cannot go to date: Date is not defined");
+		} else {
+			setDateSelected(momentIndex(date).toDate());
+			closeOverlay();
+		}
+	};
+
+	const canSubmit =
+		date && // `date` must be defined (i.e. user must have provided a valid date input)
+		date !== dateSelectedFormatted && // Selected date cannot be the currently selected one
+		(allowFutureEntries || date <= todayFormatted); // Disallow future dates if option is set
+
+	return (
+		<OverlayContainer className="go-to-date-overlay">
+			<form onSubmit={onSubmit}>
+				<h1>{translations["go-to-date"]}</h1>
+				<label htmlFor="input-go-to-date">
+					Date:
+					<input
+						type="date"
+						id="input-go-to-date"
+						defaultValue={dateSelectedFormatted}
+						onChange={onChange}
+					/>
+				</label>
+				<button type="submit" className="button button-main" disabled={!canSubmit}>
+					{translations.ok}
+				</button>
+			</form>
+		</OverlayContainer>
+	);
+}

src/renderer/components/overlays/go-to-date-overlay/GoToDateOverlayContainer.tsx

@@ -0,0 +1,20 @@
+import { connect } from "react-redux";
+
+import { closeOverlay } from "../../../store/app/actionCreators";
+import { SetOverlayAction } from "../../../store/app/types";
+import { setDateSelected } from "../../../store/diary/actionCreators";
+import { SetDateSelectedAction } from "../../../store/diary/types";
+import { RootState, ThunkDispatchT } from "../../../store/store";
+import GoToDateOverlay, { DispatchProps, StateProps } from "./GoToDateOverlay";
+
+const mapStateToProps = (state: RootState): StateProps => ({
+	allowFutureEntries: state.app.allowFutureEntries,
+	dateSelected: state.diary.dateSelected,
+});
+
+const mapDispatchToProps = (dispatch: ThunkDispatchT): DispatchProps => ({
+	closeOverlay: (): SetOverlayAction => dispatch(closeOverlay()),
+	setDateSelected: (date: Date): SetDateSelectedAction => dispatch(setDateSelected(date)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(GoToDateOverlay);

src/renderer/electron/ipcRenderer/listeners.ts

@@ -88,12 +88,8 @@ function initIpcListeners(): void {
 
 	// Overlays
 
-	ipcRenderer.on("showPrefOverlay", (): void => {
-		dispatchThunk(openOverlay("preferences"));
-	});
-
-	ipcRenderer.on("showStatsOverlay", (): void => {
-		dispatchThunk(openOverlay("statistics"));
+	ipcRenderer.on("openOverlay", (_, overlayType: OverlayType): void => {
+		dispatchThunk(openOverlay(overlayType));
 	});
 
 	// Screen lock

src/renderer/types.ts

@@ -23,7 +23,7 @@ interface Metadata {
 
 // Overlay
 
-type OverlayType = "none" | "import" | "preferences" | "statistics";
+type OverlayType = "none" | "go-to-date" | "import" | "preferences" | "statistics";
 
 // Theme
 

src/shared/types.ts

@@ -29,6 +29,7 @@ export interface Translations {
 	// Menu (app-specific)
 	"export": string,
 	"export-to-format": string,
+	"go-to-date": string,
 	"import": string,
 	"import-from-format": string,
 	"license": string,
@@ -68,6 +69,7 @@ export interface Translations {
 	"allow-future-entries": string,
 	"diary-entries": string,
 	"no": string,
+	"ok": string,
 	"reset-diary": string,
 	"reset-diary-confirm": string,
 	"reset-diary-msg": string,