diff --git a/ProjectOrientedSessions/Session08/Session08 Frontend.md b/ProjectOrientedSessions/Session08/Session08 Frontend.md index 001b37e..5e4505d 100644 --- a/ProjectOrientedSessions/Session08/Session08 Frontend.md +++ b/ProjectOrientedSessions/Session08/Session08 Frontend.md @@ -1,17 +1,56 @@ -## ✅ Frontend Profile Page Implementation Checklist +# ✅ Frontend Profile Page Implementation Checklist -### ⚙️ Tooling & Fixes +## ⚙️ Tooling & Fixes - [ ] Install and configure `react-hook-form` ---- -### 🔐 Account & Authentication -- [ ] Use Axios request interceptor to: - - [ ] Attach token to requests - - [ ] Handle logout logic ---- -### API -- [ ] Provide a method for each new endpoint implemented in backend ---- -### 🗂️ Additional Profile Tabs (initial setup) +``` +npm install react-hook-form +``` + +## 🔐 Account & Authentication +- [ ] Use Axios request interceptor to attach token to requests and handle logout logic +``` +// add a request interceptor to include JWT token if available +agent.interceptors.request.use((config) => { + const token = useAuthStore.getState().token; + if (token) { + config.headers = config.headers || {}; + config.headers["Authorization"] = `Bearer ${token}`; + } + return config; +}); + +// add a response interceptor to handle 401 Unauthorized +agent.interceptors.response.use( + (res) => res, + (error) => { + if (error.response?.status === 401) { + useAuthStore.getState().logout(); + window.location.href = "/login"; // redirect to login + } + return Promise.reject(error); + } +); +``` + +## API +- [ ] Provide a method for each new endpoint implemented in backend +``` +const Profile = { + getProfile: () => request.get('/account/profile'), + editEmail: (data: EditEmailDto) => request.put('/account/email', data), + editPassword: (data: EditPasswordDto) => request.put('/account/password', data), + upsertAccountPerson: (data: PersonDto) => request.post('/account/account-person', data), + upsertPerson: (data: PersonDto) => request.post('/account/person', data), + upsertBankDetail: (data: UpsertBankAccountDetailDto) => request.post('/account/bank-detail', data), + getMyPeople: () => request.get('/account/my-people'), + getMyTravels: () => request.get('/account/my-travels'), + getMyTransactions: () => request.get('/account/my-transactions'), + topUp: (data : topUpDto) => request.post('/account/top-up', data) +}; + +``` + +## 🗂️ Additional Profile Tabs (initial setup) - [ ] Add empty pages/tabs for: - [ ] `ProfileSummary` @@ -25,28 +64,26 @@ - [ ] Define and adjust routes for profile and its tabs - [ ] Implement route-based tab handling inside `ProfilePage` ---- -### Profile Summary -#### 📦 DTOs / Models +## Profile Summary +### 📦 DTOs / Models - Add models for: - [ ] `EditEmailDto` - [ ] `EditPasswordDto` - [ ] `PersonDto` - [ ] `ProfileDto` - [ ] `UpsertBankAccountDetailDto` + - [ ] Implement the process of showing and editing the data ---- -### 🧍 List of Travelers + +## 🧍 List of Travelers - [ ] Implement `ListOfTravelers` page for showing, editing, and adding new people ---- -### 💳 Transactions Module + +## 💳 Transactions Module - [ ] Add `TransactionDto` model - [ ] Implement `MyTransactions` page ---- -### 🚆 Travel Module + +## 🚆 Travel Module - [ ] Add `TicketOrderSummaryDto`, `TravelerTicketDto` models - [ ] Implement `MyTravels` page - [ ] Implement `TravelOrderDetailsPage` - ----