Update Session08 Frontend.md

updated the first parts
2025-07-04 00:32:39 +03:30
parent 03bbe106b0
commit 8e95a03d76
1 changed files with 60 additions and 23 deletions
@@ -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
+```
+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
---
-### 🗂️ Additional Profile Tabs (initial setup)
+```
+const Profile = {
+  getProfile: () => request.get<ProfileDto>('/account/profile'),
+  editEmail: (data: EditEmailDto) => request.put<void>('/account/email', data),
+  editPassword: (data: EditPasswordDto) => request.put<void>('/account/password', data),
+  upsertAccountPerson: (data: PersonDto) => request.post<number>('/account/account-person', data),
+  upsertPerson: (data: PersonDto) => request.post<number>('/account/person', data),
+  upsertBankDetail: (data: UpsertBankAccountDetailDto) => request.post<void>('/account/bank-detail', data),
+  getMyPeople: () => request.get<PersonDto[]>('/account/my-people'),
+  getMyTravels: () => request.get<TicketOrderSummaryDto[]>('/account/my-travels'),
+  getMyTransactions: () => request.get<TransactionDto[]>('/account/my-transactions'), 
+  topUp: (data : topUpDto) => request.post<number>('/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`
-
---