削除ボタンで食材を削除してもキャンセルボタンで前のダイアログに戻ると削除前の食材がリストに表示されるように変更

feature-frontend-dishedit
masato.fujita 4 months ago
parent dc6ab8662f
commit 8a28c0ca40
  1. 26
      frontend/src/pages/DishList.tsx

@ -33,6 +33,7 @@ import {
import { ToBuy, Stuff } from '../types/types'; import { ToBuy, Stuff } from '../types/types';
import { GENERAL_ERRORS } from '../constants/errorMessages'; import { GENERAL_ERRORS } from '../constants/errorMessages';
import CategoryDropDown from "../components/CategoryDropDown"; import CategoryDropDown from "../components/CategoryDropDown";
import { Console } from 'console';
const DishList: React.FC = () => { const DishList: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -83,6 +84,8 @@ const DishList: React.FC = () => {
const [allDish, setAllDish] = useState<Dish[]>(); const [allDish, setAllDish] = useState<Dish[]>();
// 食材リスト // 食材リスト
const [stuff, setStuff] = useState<Stuff[]>([]); const [stuff, setStuff] = useState<Stuff[]>([]);
// 画面表示用の食材情報配列
const [tempStuff, setTempStuff] = useState<Stuff[]>([]);
// 料理名 // 料理名
const [selectedDishName, setSelectedDishName] = useState(''); const [selectedDishName, setSelectedDishName] = useState('');
// 料理情報 // 料理情報
@ -90,8 +93,6 @@ const DishList: React.FC = () => {
recipeName: '', recipeName: '',
summary: '', summary: '',
stuffs: []}); stuffs: []});
// 画面表示用の食材情報配列
const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish);
// エラーメッセージの状態管理 // エラーメッセージの状態管理
const [error, setError] = useState(false); const [error, setError] = useState(false);
// 選択した料理の情報を表示するダイアログの表示状態 // 選択した料理の情報を表示するダイアログの表示状態
@ -115,7 +116,7 @@ const DishList: React.FC = () => {
const changeDialog = () => { const changeDialog = () => {
setOpenDialog(false); setOpenDialog(false);
setOpenChangeDialog(true); setOpenChangeDialog(true);
setTestDishArray(testdish); setTempStuff(stuff);
}; };
const cancelChange = () => { const cancelChange = () => {
@ -156,9 +157,12 @@ const DishList: React.FC = () => {
*/ */
const handleDeleteStuffTemp = async (stuff_id: number) => { const handleDeleteStuffTemp = async (stuff_id: number) => {
try { try {
let stuffCopy = [...stuff]; // 配列をコピー let tempStuffCopy = [...tempStuff]; // 配列をコピー
stuffCopy.splice(stuff_id, 1); console.log(stuff_id);
setStuff(stuff); console.log(tempStuffCopy);
tempStuffCopy = tempStuff.filter(stuff => stuff.stuffId !== stuff_id);
console.log(tempStuffCopy);
setTempStuff(tempStuffCopy);
// fetchTasks(); // 削除後のタスク一覧を再取得 // fetchTasks(); // 削除後のタスク一覧を再取得
} catch (error) { } catch (error) {
// console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error); // console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error);
@ -306,7 +310,7 @@ const DishList: React.FC = () => {
<FormGroup> <FormGroup>
{/* <List> */} {/* <List> */}
{/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */}
{stuff.map((stuff, stuffId) => ( {tempStuff.map((tempStuff, stuffId) => (
<ListItem <ListItem
key={stuffId} key={stuffId}
sx={{ sx={{
@ -323,14 +327,14 @@ const DishList: React.FC = () => {
/> */} /> */}
{/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
<ListItemText <ListItemText
primary={stuff.stuffName} primary={tempStuff.stuffName}
// secondary={task.description} // secondary={task.description}
sx={{width: '80%'}} sx={{width: '80%'}}
/> />
{/* 食材の個数を表示 */} {/* 食材の個数を表示 */}
<ListItemText <ListItemText
primary={<Typography style={{textAlign:"center"}}><br /> primary={<Typography style={{textAlign:"center"}}><br />
{stuff.amount} {tempStuff.amount}
</Typography> </Typography>
} }
// secondary={task.description} // secondary={task.description}
@ -342,7 +346,7 @@ const DishList: React.FC = () => {
<IconButton <IconButton
edge="end" edge="end"
aria-label="個数を編集" aria-label="個数を編集"
onClick={() => changeSelectedItemAmount(stuff, stuff.stuffName, stuff.amount)} onClick={() => changeSelectedItemAmount(tempStuff, tempStuff.stuffName, tempStuff.amount)}
> >
<ShoppingBasketIcon /> <ShoppingBasketIcon />
</IconButton> </IconButton>
@ -365,7 +369,7 @@ const DishList: React.FC = () => {
<IconButton <IconButton
edge="end" edge="end"
aria-label="delete" aria-label="delete"
onClick={() => handleDeleteStuffTemp(stuffId)} onClick={() => handleDeleteStuffTemp(tempStuff.stuffId)}
> >
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>

Loading…
Cancel
Save