The toolbars contains inputs for adding a new memory and changing the current day. Changing which day's memories are shown seems like the easier task, so you start there. The month-day picker needs to track a month and a day. That means you need state for storing these values. Where do you put this state? Is it global or local? If another component doesn't read or set these values, then you use local state. You go with local state seeded by the current month and day:
import {useState} from 'react';
export function Toolbar() {
const today = new Date();
const [month, setMonth] = useState(today.getMonth() + 1);
const [day, setDay] = useState(today.getDate());
// ...
}
As you have done in the past, you use this state to populate the input elements' value
attributes and the call the setters on change events:
export function Toolbar() {
// ...
return (
<div className="toolbar">
{/* ... */}
<div className="month-day-picker">
<select
value={month}
onChange={event => setMonth(parseInt(event.target.value))}
>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<input
type="number"
min="1"
max="31"
value={day}
onChange={event => setDay(parseInt(event.target.value))}
/>
{/* ... */}
</div>
</div>
);
When the user pressers the Remember button, you want to fetch the selected day's memories. You already have a thunk that does this fetching, so you dispatch it:
// ...
import {useDispatch} from 'react-redux';
import {fetchDay} from './actions';
export function Toolbar() {
// ...
const dispatch = useDispatch();
return (
<div className="toolbar">
{/* ... */}
<div className="month-day-picker">
{/* ... */}
<button
onClick={() => dispatch(fetchDay(month, day))}
>Remember</button>
</div>
</div>
);
}
Try changing the date to a different day, preferably one that has memories. Do they load when you click the button?