Add min/max dates

src/renderer/components/elements/sidebar/calendar-nav/CalendarNav.tsx

@@ -1,8 +1,9 @@
 import PrevIcon from "feather-icons/dist/icons/chevron-left.svg";
 import NextIcon from "feather-icons/dist/icons/chevron-right.svg";
 import moment from "moment";
-import React, { FunctionComponent } from "react";
+import React, { ReactElement } from "react";
 
+import { MAX_DATE, MIN_DATE } from "../../../../constants";
 import { toMonthYear } from "../../../../utils/dateFormat";
 import { translations } from "../../../../utils/i18n";
 import { iconProps } from "../../../../utils/icons";
@@ -19,36 +20,42 @@ export interface DispatchProps {
 
 type Props = StateProps & DispatchProps;
 
-const CalendarNav: FunctionComponent<Props> = (props: Props): JSX.Element => {
+export default function CalendarNav(props: Props): ReactElement {
 	const {
 		allowFutureEntries,
 		monthSelected,
 		setMonthSelectedNext,
 		setMonthSelectedPrevious,
 	} = props;
 
-	const month = moment(monthSelected);
-
-	// If future entries are disallowed: Disable "next" button if current month is reached
 	const today = moment();
-	const disableNextButton = !allowFutureEntries && month.isSame(today, "month");
+
+	// Check if buttons for switching to previous/next month should be enabled. Determined based on
+	// the min/max dates and whether future diary entries are allowed
+	const month = moment(monthSelected);
+	const canClickPrev = month.isAfter(MIN_DATE, "month");
+	const canClickNext =
+		month.isBefore(MAX_DATE, "month") && (allowFutureEntries || month.isBefore(today, "month"));
 
 	return (
 		<div className="calendar-nav">
-			<button type="button" className="button button-invisible" onClick={setMonthSelectedPrevious}>
+			<button
+				type="button"
+				className="button button-invisible"
+				disabled={!canClickPrev}
+				onClick={setMonthSelectedPrevious}
+			>
 				<PrevIcon {...iconProps} title={translations["previous-month"]} />
 			</button>
 			<h1 className="month-name">{toMonthYear(month)}</h1>
 			<button
 				type="button"
 				className="button button-invisible"
-				disabled={disableNextButton}
+				disabled={!canClickNext}
 				onClick={setMonthSelectedNext}
 			>
 				<NextIcon {...iconProps} title={translations["next-month"]} />
 			</button>
 		</div>
 	);
-};
-
-export default CalendarNav;
+}

src/renderer/constants.ts

@@ -0,0 +1,4 @@
+// Dates
+
+export const MIN_DATE = new Date(1900, 0, 1);
+export const MAX_DATE = new Date(2099, 11, 31);

src/renderer/store/diary/actionCreators.ts

@@ -1,5 +1,6 @@
 import moment from "moment";
 
+import { MAX_DATE, MIN_DATE } from "../../constants";
 import { searchIndex } from "../../utils/searchIndex";
 import { ThunkActionT } from "../store";
 import {
@@ -14,10 +15,16 @@ import {
 // Action creators
 
 export function setDateSelected(dateSelected: Date): SetDateSelectedAction {
+	let dateValidated = dateSelected;
+	if (dateSelected < MIN_DATE) {
+		dateValidated = MIN_DATE;
+	} else if (dateSelected > MAX_DATE) {
+		dateValidated = MAX_DATE;
+	}
 	return {
 		type: SET_DATE_SELECTED,
 		payload: {
-			dateSelected,
+			dateSelected: dateValidated,
 		},
 	};
 }