You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.6 KiB
109 lines
3.6 KiB
/**
|
|
* テストページコンポーネント
|
|
* 白紙の状態で表示されるテスト用のページ
|
|
*/
|
|
import React, { useState, useEffect } from 'react';
|
|
import { stockApi } from '../services/api';
|
|
import { Stock } from '../types/types';
|
|
import {
|
|
Container,
|
|
Typography,
|
|
Button,
|
|
List,
|
|
ListItem,
|
|
} from '@mui/material';
|
|
import { TASK_ERRORS } from '../constants/errorMessages';
|
|
|
|
|
|
const StockPage: React.FC = () => {
|
|
|
|
const [stocks, setStocks] = useState<Stock[]>([]);
|
|
|
|
// コンポーネントマウント時にタスク一覧を取得
|
|
useEffect(() => {
|
|
fetchStocks();
|
|
}, []);
|
|
|
|
/**
|
|
* APIからタスク一覧を取得する関数
|
|
* 取得したタスクをstate(tasks)に設定
|
|
*/
|
|
const fetchStocks = async () => {
|
|
try {
|
|
const stocks = await stockApi.getStocks();
|
|
setStocks(stocks.stock_array);
|
|
} catch (error) {
|
|
console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container>
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
在庫一覧
|
|
</Typography>
|
|
|
|
{/* タスク編集ボタン */}
|
|
<Button color="success"
|
|
type="submit"
|
|
variant="contained"
|
|
sx={{ mt: 3, mb: 2, left: '80%' }}
|
|
>
|
|
編集
|
|
</Button>
|
|
|
|
{/* タスク削除ボタン */}
|
|
<Button color="error"
|
|
type="submit"
|
|
variant="contained"
|
|
sx={{ mt: 3, mb: 2, left: '82%' }}
|
|
>
|
|
削除
|
|
</Button>
|
|
|
|
<List>
|
|
{stocks.map((stock) => (
|
|
<ListItem key={stock.stock_id}>{stock.stuff_name}</ListItem>
|
|
))}
|
|
</List>
|
|
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
乳製品
|
|
</Typography>
|
|
{/* 在庫一覧表示エリア - 青い背景のコンテナ */}
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
|
|
</div>
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
肉・魚
|
|
</Typography>
|
|
{/* 在庫一覧表示エリア - 青い背景のコンテナ */}
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
|
|
</div>
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
野菜
|
|
</Typography>
|
|
{/* 在庫一覧表示エリア - 青い背景のコンテナ */}
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
|
|
</div>
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
調味料
|
|
</Typography>
|
|
{/* 在庫一覧表示エリア - 青い背景のコンテナ */}
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
|
|
</div>
|
|
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
その他
|
|
</Typography>
|
|
{/* 在庫一覧表示エリア - 青い背景のコンテナ */}
|
|
<div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
|
|
</div>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default StockPage; |