From d0632e0dffcbabb6bfa1e8dedee0e449354a6f2b Mon Sep 17 00:00:00 2001 From: "Masaharu.Kato" Date: Thu, 5 Jun 2025 13:52:19 +0900 Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E5=BA=AB=E7=AE=A1=E7=90=86API?= =?UTF-8?q?=EF=BC=88=E4=BB=AE=EF=BC=89=E3=81=AE=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 11 ---- frontend/src/pages/StockList.tsx | 75 ---------------------- frontend/src/pages/StockPage.tsx | 107 +++++++++++++++++++++++++++++-- frontend/src/services/api.ts | 54 +++++++++++++++- frontend/src/types/types.ts | 16 +++++ 5 files changed, 167 insertions(+), 96 deletions(-) delete mode 100644 frontend/src/pages/StockList.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7395453..82bce23 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -10,7 +10,6 @@ import LoginPage from './pages/LoginPage'; import RegisterPage from './pages/RegisterPage'; import TaskListPage from './pages/TaskListPage'; import StockPage from './pages/StockPage'; -import StockList from './pages/StockList'; import './App.css'; /** @@ -95,16 +94,6 @@ const App: React.FC = () => { } /> - {/* 在庫リストへのルートを追加 */} - - - - } - /> - }> {/* ルートパスへのアクセスはタスク一覧にリダイレクト */} diff --git a/frontend/src/pages/StockList.tsx b/frontend/src/pages/StockList.tsx deleted file mode 100644 index b269649..0000000 --- a/frontend/src/pages/StockList.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/** - * テストページコンポーネント - * 白紙の状態で表示されるテスト用のページ - */ -import React from 'react'; -import { - Container, - Typography, - Button -} from '@mui/material'; - -const StockPage: React.FC = () => { - return ( - - - 在庫一覧 - - - {/* タスク編集ボタン */} - - - {/* タスク削除ボタン */} - - - - 乳製品 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - - 肉・魚 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - - 野菜 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - - 調味料 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - - その他 - - {/* 在庫一覧表示エリア - 青い背景のコンテナ */} -
-
- - ); -}; - -export default StockPage; \ No newline at end of file diff --git a/frontend/src/pages/StockPage.tsx b/frontend/src/pages/StockPage.tsx index 8de8bd9..2b51066 100644 --- a/frontend/src/pages/StockPage.tsx +++ b/frontend/src/pages/StockPage.tsx @@ -2,15 +2,108 @@ * テストページコンポーネント * 白紙の状態で表示されるテスト用のページ */ -import React from 'react'; -import { Box } from '@mui/material'; +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 = () => { - return ( - - {/* 白紙のページ - 何も表示しない */} - - ); + + const [stocks, setStocks] = useState([]); + + // コンポーネントマウント時にタスク一覧を取得 + 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 ( + + + 在庫一覧 + + + {/* タスク編集ボタン */} + + + {/* タスク削除ボタン */} + + + + {stocks.map((stock) => ( + {stock.stuff_name} + ))} + + + + + 乳製品 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 肉・魚 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 野菜 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + 調味料 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + + その他 + + {/* 在庫一覧表示エリア - 青い背景のコンテナ */} +
+
+ + ); }; export default StockPage; \ No newline at end of file diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts index 4919343..d7b6753 100644 --- a/frontend/src/services/api.ts +++ b/frontend/src/services/api.ts @@ -3,7 +3,7 @@ * バックエンドAPIとの通信を担当するモジュール * 認証、タスク管理などの機能を提供 */ -import { LoginCredentials, RegisterCredentials, AuthResponse, Task, ToBuy } from '../types/types'; +import { LoginCredentials, RegisterCredentials, AuthResponse, Task, ToBuy, Stock } from '../types/types'; import { AUTH_ERRORS, TASK_ERRORS } from '../constants/errorMessages'; // APIのベースURL - 環境変数から取得するか、デフォルト値を使用 @@ -89,8 +89,8 @@ export const authApi = { */ export const toBuyApi = { /** - * 全タスクを取得 - * @returns タスク一覧 + * 全買うものリストを取得 + * @returns 買うものリスト一覧 */ getToBuys: async (): Promise<{ "tobuy_array": ToBuy[] }> => { // const response = await fetch(`${API_BASE_URL}/api/tobuy/get`, { @@ -172,6 +172,54 @@ export const toBuyApi = { } +export const stockApi = { + /** + * 全在庫リストを取得 + * @returns 買在庫リスト一覧 + */ + getStocks: async (): Promise<{ "stock_array": Stock[] }> => { + // const response = await fetch(`${API_BASE_URL}/api/tobuy/get`, { + // headers: getHeaders(), // 認証トークンを含むヘッダー + // }); + + // if (!response.ok) { + // throw new Error(TASK_ERRORS.FETCH_FAILED); + // } + + // return response.json(); + + return { + "stock_array": [ + { + "stock_id": 1, + "stuff_id": 10, + "stuff_name": "豚肉", + "amount": 100, + "price": 200, + "buy_date": "2025-05-18T09:00:00.000Z", + "last_update": "2025-05-18T09:00:00.000Z", + "exp_date": "2025-05-19T10:15:00.000Z", + "category": "肉" + }, + { + "stock_id": 2, + "stuff_id": 1, + "stuff_name": "トマト", + "amount": 10, + "price": 200, + "buy_date": "2025-05-18T09:00:00.000Z", + "last_update": "2025-05-18T09:00:00.000Z", + "exp_date": "2025-05-19T10:15:00.000Z", + "category": "野菜" + } + ] + } + + + }, +} + + /** * (サンプル，実際には不要) * タスク管理関連のAPI機能を提供するオブジェクト diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts index 2304c92..898afd0 100644 --- a/frontend/src/types/types.ts +++ b/frontend/src/types/types.ts @@ -24,6 +24,22 @@ export interface ToBuy { shop?: string, } +/** + * タスク情報を表す型定義 + * タスクの基本情報と状態を管理 + */ +export interface Stock { + stock_id: number, + stuff_id: number, + stuff_name: string, + amount: number, + price: number, + buy_date: string, + last_update: string, + exp_date: string, + category: string, +} + /** * ユーザー情報を表す型定義 * ユーザーの基本情報を管理