Remove monthSelected state variable

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

@@ -4,13 +4,13 @@ import { Moment } from "moment";
 import React, { ReactElement } from "react";
 
 import { MAX_DATE, MIN_DATE } from "../../../../constants";
-import { createDate, parseDate, toMonthYear } from "../../../../utils/dateFormat";
+import { createDate, toMonthYear } from "../../../../utils/dateFormat";
 import { translations } from "../../../../utils/i18n";
 import { iconProps } from "../../../../utils/icons";
 
 export interface StateProps {
 	allowFutureEntries: boolean;
-	monthSelected: Moment;
+	dateSelected: Moment;
 }
 
 export interface DispatchProps {
@@ -23,7 +23,7 @@ type Props = StateProps & DispatchProps;
 export default function CalendarNav(props: Props): ReactElement {
 	const {
 		allowFutureEntries,
-		monthSelected,
+		dateSelected,
 		setMonthSelectedNext,
 		setMonthSelectedPrevious,
 	} = props;
@@ -32,10 +32,10 @@ export default function CalendarNav(props: Props): ReactElement {
 
 	// 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 = parseDate(monthSelected);
-	const canClickPrev = month.isAfter(MIN_DATE, "month");
+	const canClickPrev = dateSelected.isAfter(MIN_DATE, "month");
 	const canClickNext =
-		month.isBefore(MAX_DATE, "month") && (allowFutureEntries || month.isBefore(today, "month"));
+		dateSelected.isBefore(MAX_DATE, "month") &&
+		(allowFutureEntries || dateSelected.isBefore(today, "month"));
 
 	return (
 		<div className="calendar-nav">
@@ -47,7 +47,7 @@ export default function CalendarNav(props: Props): ReactElement {
 			>
 				<PrevIcon {...iconProps} title={translations["previous-month"]} />
 			</button>
-			<h1 className="month-name">{toMonthYear(month)}</h1>
+			<h1 className="month-name">{toMonthYear(dateSelected)}</h1>
 			<button
 				type="button"
 				className="button button-invisible"

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

@@ -9,7 +9,7 @@ import CalendarNav, { DispatchProps, StateProps } from "./CalendarNav";
 
 const mapStateToProps = (state: RootState): StateProps => ({
 	allowFutureEntries: state.app.allowFutureEntries,
-	monthSelected: state.diary.monthSelected,
+	dateSelected: state.diary.dateSelected,
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatchT): DispatchProps => ({

src/renderer/components/elements/sidebar/calendar/Calendar.tsx

@@ -13,7 +13,6 @@ export interface StateProps {
 	dateSelected: Moment;
 	entries: Entries;
 	firstDayOfWeek: Weekday | null;
-	monthSelected: Moment;
 }
 
 export interface DispatchProps {
@@ -41,7 +40,7 @@ export default class Calendar extends PureComponent<Props, {}> {
 	}
 
 	render(): ReactNode {
-		const { allowFutureEntries, dateSelected, entries, firstDayOfWeek, monthSelected } = this.props;
+		const { allowFutureEntries, dateSelected, entries, firstDayOfWeek } = this.props;
 
 		const today = createDate();
 		const daysWithEntries = Object.keys(entries);
@@ -51,12 +50,14 @@ export default class Calendar extends PureComponent<Props, {}> {
 			return daysWithEntries.includes(indexDate);
 		};
 
+		const dateSelectedObj = dateSelected.toDate();
+		const todayObj = today.toDate();
+
 		return (
 			<DayPicker
-				selectedDays={dateSelected.toDate()}
-				disabledDays={allowFutureEntries ? null : { after: today.toDate() }}
-				month={monthSelected.toDate()}
-				toMonth={today.toDate()}
+				month={dateSelectedObj}
+				selectedDays={dateSelectedObj}
+				disabledDays={allowFutureEntries ? null : { after: todayObj }}
 				captionElement={(): null => null}
 				modifiers={{ hasEntry }}
 				firstDayOfWeek={firstDayOfWeek ?? undefined}

src/renderer/components/elements/sidebar/calendar/CalendarContainer.tsx

@@ -10,7 +10,6 @@ const mapStateToProps = (state: RootState): StateProps => ({
 	allowFutureEntries: state.app.allowFutureEntries,
 	dateSelected: state.diary.dateSelected,
 	firstDayOfWeek: state.app.firstDayOfWeek,
-	monthSelected: state.diary.monthSelected,
 	entries: state.file.entries,
 });
 

src/renderer/components/elements/sidebar/search-bar/SearchBar.tsx

@@ -10,7 +10,6 @@ import { iconProps } from "../../../../utils/icons";
 
 export interface StateProps {
 	dateSelected: Moment;
-	monthSelected: Moment;
 	searchKey: string;
 }
 
@@ -75,12 +74,11 @@ export default class SearchBar extends PureComponent<Props, State> {
 	}
 
 	render(): ReactNode {
-		const { dateSelected, monthSelected } = this.props;
+		const { dateSelected } = this.props;
 		const { newSearchKey } = this.state;
 
 		const today = createDate();
 		const isToday = parseDate(dateSelected).isSame(today, "day");
-		const isCurrentMonth = parseDate(monthSelected).isSame(today, "month");
 
 		return (
 			<div className="view-selector">
@@ -108,7 +106,7 @@ export default class SearchBar extends PureComponent<Props, State> {
 				<button
 					type="button"
 					className="button button-invisible button-today"
-					disabled={isToday && isCurrentMonth}
+					disabled={isToday}
 					onClick={this.onTodaySelection}
 				>
 					<TodayIcon {...iconProps} title={translations.today} />

src/renderer/components/elements/sidebar/search-bar/SearchBarContainer.tsx

@@ -8,7 +8,6 @@ import SearchBar, { DispatchProps, StateProps } from "./SearchBar";
 
 const mapStateToProps = (state: RootState): StateProps => ({
 	dateSelected: state.diary.dateSelected,
-	monthSelected: state.diary.monthSelected,
 	searchKey: state.diary.searchKey,
 });
 

src/renderer/store/diary/actionCreators.ts

@@ -81,20 +81,17 @@ export const setDaySelectedToday = (): ThunkActionT => (dispatch): void => {
 export const setMonthSelectedNext = (): ThunkActionT => (dispatch, getState): void => {
 	const { app, diary } = getState();
 	const { allowFutureEntries } = app;
-	const { monthSelected } = diary;
-	const nextMonth = parseDate(monthSelected)
-		.startOf("month")
-		.add(1, "months");
+	const { dateSelected } = diary;
 	const today = createDate();
-	if (allowFutureEntries || nextMonth.isSameOrBefore(today, "month")) {
-		dispatch(setDateSelected(nextMonth));
+	let newDateSelected = parseDate(dateSelected).add(1, "months");
+	if (!allowFutureEntries && newDateSelected.isAfter(today)) {
+		newDateSelected = today;
 	}
+	dispatch(setDateSelected(newDateSelected));
 };
 
 export const setMonthSelectedPrevious = (): ThunkActionT => (dispatch, getState): void => {
-	const { monthSelected } = getState().diary;
-	const previousMonth = parseDate(monthSelected)
-		.startOf("month")
-		.subtract(1, "months");
+	const { dateSelected } = getState().diary;
+	const previousMonth = parseDate(dateSelected).subtract(1, "months");
 	dispatch(setDateSelected(previousMonth));
 };

src/renderer/store/diary/reducer.ts

@@ -11,7 +11,6 @@ const today = createDate();
 
 const initialState: DiaryState = {
 	dateSelected: today,
-	monthSelected: today,
 	searchKey: "",
 	searchResults: [],
 };
@@ -22,7 +21,6 @@ function diaryReducer(state = initialState, action: DiaryAction): DiaryState {
 			return {
 				...state,
 				dateSelected: action.payload.dateSelected,
-				monthSelected: action.payload.dateSelected,
 			};
 		}
 		case SET_SEARCH_KEY: {

src/renderer/store/diary/types.ts

@@ -5,7 +5,6 @@ import { Action } from "redux";
 
 export interface DiaryState {
 	dateSelected: Moment;
-	monthSelected: Moment;
 	searchKey: string;
 	searchResults: string[];
 }