diff --git a/ProjectOrientedSessions/Session08/Session08 Frontend.md b/ProjectOrientedSessions/Session08/Session08 Frontend.md index a715707..e88ff71 100644 --- a/ProjectOrientedSessions/Session08/Session08 Frontend.md +++ b/ProjectOrientedSessions/Session08/Session08 Frontend.md @@ -54,31 +54,139 @@ const Profile = { - [ ] Add empty pages/tabs for: - [ ] `ProfileSummary` - - [ ] `MyTravels` - - [ ] `ListOfTravelers` - - [ ] Favorites - - [ ] Support + - [ ] - [ ] `MyTravels` - [ ] `MyTransactions` -- [ ] Implement `ProfilePage` component + +- [ ] Implement `ProfilePage` using the components created. This is an example of how it can be done: +```ts +import InfoAccount from "./InfoAccount"; +import InfoPeople from "./InfoPeople"; +import InfoTransactions from "./InfoTransactions"; +import InfoTravels from "./InfoTravels"; +import { useState } from "react"; + +const tabs = [ + { label: "Account", component: }, + { label: "Transactions", component: }, + { label: "Travels", component: }, + { label: "People", component: } +]; + +const Profile = () => { + const [selected, setSelected] = useState(0); + return ( +
+
+ +
{tabs[selected].component}
+
+
+ ); +}; + +export default Profile; + +``` + - [ ] Create prototype of `ProfilePage` and integrate with navbar. (Create a button or link to access `ProfilePage`, only when user is logged in) + - [ ] Define and adjust routes for profile and its tabs -- [ ] Implement route-based tab handling inside `ProfilePage` +```ts +const AppRoutes = () => { + return ( + + } /> + } /> + } /> + } /> + } /> + + ); +}; + +export default AppRoutes; + +``` + +- [ ] Implement tab handling inside `ProfilePage`. You can also do it **route-based**. ## Profile Summary ### 📦 DTOs / Models - Add models for: - [ ] `EditEmailDto` + ```ts + export interface EditEmailDto { + newEmail: string; + } + ``` - [ ] `EditPasswordDto` + ```ts + export interface EditPasswordDto { + oldPassword: string; + newPassword: string; + confirmNewPassword: string; + } + ``` - [ ] `PersonDto` + ```ts + export interface PersonDto { + id?: number; + creatorAccountId?: number; + firstName: string; + lastName: string; + idNumber: string; + genderId: number; + phoneNumber: string; + birthDate: string; + } + ``` - [ ] `ProfileDto` + ```ts + export interface ProfileDto { + accountPhoneNumber: string; + email: string; + balance: number; + + firstName: string; + lastName: string; + idNumber: string; + personPhoneNumber: string; + birthDate: Date | string | null; + + iban: string; + bankAccountNumber: string; + cardNumber: string; + } + ``` - [ ] `UpsertBankAccountDetailDto` + ```ts + export interface UpsertBankAccountDto { + iban?: string; + bankAccountNumber?: string; + cardNumber?: string; + } + ``` - - [ ] Implement the process of showing and editing the data + - [ ] Implement the process of showing and editing the data. To do so, you can use modal components and set their functionality in the pages. ## 🧍 List of Travelers - [ ] Implement `ListOfTravelers` page for showing, editing, and adding new people - ## 💳 Transactions Module - [ ] Add `TransactionDto` model - [ ] Implement `MyTransactions` page