HyeonJun Jeon

[Fix] Day/week/month button

1 import { useContext } from "react"; 1 import { useContext } from "react";
2 +import { useNavigate } from "react-router-dom";
2 import { CalendarStateContext } from "../pages/Calendar"; 3 import { CalendarStateContext } from "../pages/Calendar";
3 import "../styles/Header.css"; 4 import "../styles/Header.css";
4 5
5 const Header = () => { 6 const Header = () => {
6 const [state, setState] = useContext(CalendarStateContext); 7 const [state, setState] = useContext(CalendarStateContext);
7 8
8 - const handleChangeState = (e) => { 9 + const navigate = useNavigate();
10 + const setScope = (e) => {
9 setState({ 11 setState({
10 ...state, 12 ...state,
11 [e.target.name]: e.target.value, 13 [e.target.name]: e.target.value,
12 }); 14 });
15 + navigate("/calendar/" + e.target.value);
13 }; 16 };
14 17
15 const gotoToday = () => { 18 const gotoToday = () => {
...@@ -78,7 +81,7 @@ const Header = () => { ...@@ -78,7 +81,7 @@ const Header = () => {
78 <div className="hrd"> 81 <div className="hrd">
79 <button 82 <button
80 disabled={state.scope === "day"} 83 disabled={state.scope === "day"}
81 - onClick={handleChangeState} 84 + onClick={setScope}
82 name="scope" 85 name="scope"
83 value="day" 86 value="day"
84 > 87 >
...@@ -86,7 +89,7 @@ const Header = () => { ...@@ -86,7 +89,7 @@ const Header = () => {
86 </button> 89 </button>
87 <button 90 <button
88 disabled={state.scope === "week"} 91 disabled={state.scope === "week"}
89 - onClick={handleChangeState} 92 + onClick={setScope}
90 name="scope" 93 name="scope"
91 value="week" 94 value="week"
92 > 95 >
...@@ -94,7 +97,7 @@ const Header = () => { ...@@ -94,7 +97,7 @@ const Header = () => {
94 </button> 97 </button>
95 <button 98 <button
96 disabled={state.scope === "month"} 99 disabled={state.scope === "month"}
97 - onClick={handleChangeState} 100 + onClick={setScope}
98 name="scope" 101 name="scope"
99 value="month" 102 value="month"
100 > 103 >
......