refactor: preparing inheritance, polymorphism and encapsulation

Took 1 hour 4 minutes

website/src/components/userDropdown/userDropdown.tsx

@@ -5,11 +5,14 @@ import styles from './userDropdown.module.scss'
 import { setUser } from '@/utils/slices/userSlice'
 import { useAppDispatch, useAppSelector } from '@/utils/store'
 import wretch from 'wretch'
+import { User } from '@/models/User.ts'
 
 export default function UserDropdown() {
 	const navigate = useNavigate()
 	const dispatch = useAppDispatch()
-	const user = useAppSelector(state => state.user.data)
+	const userData = useAppSelector(state => state.user.data)
+	let user
+	if (userData) user = new User(userData)
 	const [isOpen, setIsOpen] = useState<boolean>(false)
 	const select = useRef<HTMLButtonElement | null>(null)
 	const { pathname: url } = useLocation()
@@ -18,14 +21,14 @@ export default function UserDropdown() {
 	const dropdownHandlerClick = useCallback(
 		async (event: any) => {
 			if (event.target.value === 'logout') {
-				await wretch('/api/oauth/logout').get().res();
-				dispatch(setUser(null));
-				navigate('/');
+				await wretch('/api/oauth/logout').get().res()
+				dispatch(setUser(null))
+				navigate('/')
 			} else {
-				navigate(event.target.value);
+				navigate(event.target.value)
 			}
 		},
-		[dispatch, navigate]
+		[dispatch, navigate],
 	)
 
 	const memoizedOnClick = useCallback(dropdownHandlerClick, [dropdownHandlerClick])
@@ -77,7 +80,7 @@ export default function UserDropdown() {
 				showOnDesktop: true,
 			},
 		],
-		[]
+		[],
 	)
 
 	return (
@@ -88,8 +91,8 @@ export default function UserDropdown() {
 					onClick={() => setIsOpen(isOpen => !isOpen)}
 					ref={select}
 				>
-					<img src={user?.profile_picture_url} className={styles.selectImage} alt={''} />
-					<span className="sr-only">Profile</span>
+					<img src={user!.getProfilePictureUrl()} className={styles.selectImage} alt={''} />
+					<span className='sr-only'>Profile</span>
 				</button>
 
 				<div className={isOpen ? styles.selectOptionsActive : styles.selectOptions}>

website/src/models/Meeting.ts

@@ -0,0 +1,21 @@
+export class Meeting {
+	startTime: Date
+	endTime: Date
+
+	constructor(startTime: Date, endTime: Date) {
+		this.startTime = startTime
+		this.endTime = endTime
+	}
+
+	getStartTime(): Date {
+		return this.startTime
+	}
+
+	getEndTime(): Date {
+		return this.endTime
+	}
+
+	getDuration(): number {
+		return (this.endTime.getTime() - this.startTime.getTime()) / 1000
+	}
+}

website/src/models/Member.ts

@@ -0,0 +1,39 @@
+export class Member {
+	readonly id: string
+	name: string
+	username: string
+	email: string
+	profile_picture_url: string
+
+	constructor(id: string, name: string, username: string, email: string, profile_picture_url: string) {
+		this.id = id
+		this.name = name
+		this.username = username
+		this.email = email
+		this.profile_picture_url = profile_picture_url
+	}
+
+	getId() {
+		return this.id
+	}
+
+	getName() {
+		return this.name
+	}
+
+	getUsername() {
+		return this.username
+	}
+
+	getEmail() {
+		return this.email
+	}
+
+	getProfilePictureUrl() {
+		return this.profile_picture_url
+	}
+
+	getInfo() {
+		return `Member: ${this.name}, ${this.email}`;
+	}
+}

website/src/models/Trainer.ts

@@ -0,0 +1,7 @@
+import { Member } from '@/models/Member'
+
+export class Trainer extends Member {
+	constructor(data: Trainer | any) {
+		super(data.id, data.name, data.username, data.email, data.profile_picture_url)
+	}
+}

website/src/models/TrainingMeeting.ts

@@ -0,0 +1,20 @@
+import { Meeting } from '@/models/Meeting'
+
+export class TrainingMeeting extends Meeting {
+	userID: string
+	trainerID: string
+
+	constructor(startTime: Date, endTime: Date, userID: string, trainerID: string) {
+		super(startTime, endTime)
+		this.userID = userID
+		this.trainerID = trainerID
+	}
+
+	getUserID(): string {
+		return this.userID
+	}
+
+	getTrainerID(): string {
+		return this.trainerID
+	}
+}

website/src/models/User.ts

@@ -0,0 +1,54 @@
+import { Member } from '@/models/Member'
+
+export class User extends Member {
+	private selected_trainer_id: string
+	private subscription_expiration_date: string
+	private meetings: {
+		id: string;
+		userId: string;
+		trainerID: string;
+		startTime: Date;
+		endTime: Date;
+	}[]
+
+	constructor(data: User | any) {
+		super(data.id, data.name, data.email, data.email, data.profile_picture_url)
+		this.selected_trainer_id = data.selected_trainer_id
+		this.subscription_expiration_date = data.subscription_expiration_date
+		this.meetings = data.meetings
+	}
+
+	getSelectedTrainerId() {
+		return this.selected_trainer_id
+	}
+
+	setSelectTrainerId(trainerId: string) {
+		this.selected_trainer_id = trainerId
+	}
+
+	getSubscriptionExpirationDate() {
+		return this.subscription_expiration_date
+	}
+
+	setSubscriptionExpirationDate(date: string) {
+		this.subscription_expiration_date = date
+	}
+
+	getMeetings() {
+		return this.meetings
+	}
+
+	setMeetings(meetings: {
+		id: string;
+		userId: string;
+		trainerID: string;
+		startTime: Date;
+		endTime: Date;
+	}[]) {
+		this.meetings = meetings
+	}
+
+	getInfo() {
+		return `User: ${this.name}, ${this.email}, Trainer ID: ${this.selected_trainer_id}`;
+	}
+}

website/src/pages/app/settings.tsx

@@ -10,6 +10,7 @@ import { SEO } from '@/components/seo.tsx'
 import { useAppDispatch, useAppSelector } from '@/utils/store.ts'
 import { useNavigate } from 'react-router-dom'
 import { setUser } from '@/utils/slices/userSlice.ts'
+import { User } from '@/models/User.ts'
 
 const metaData = {
 	title: 'Settings',
@@ -18,7 +19,9 @@ const metaData = {
 
 export default function Settings() {
 	const dispatch = useAppDispatch()
-	const user = useAppSelector(state => state.user.data)
+	const userData = useAppSelector(state => state.user.data)
+	let user
+	if (userData) user = new User(userData)
 	const [isOpenConfirmDeleteAccountAlertDialog, setIsOpenConfirmDeleteAccountAlertDialog] = useState(false)
 	const navigate = useNavigate()
 	const handleOpen = useCallback(() => setIsOpenConfirmDeleteAccountAlertDialog(true), []);
@@ -54,11 +57,11 @@ export default function Settings() {
 									<>
 										<label>
 											Name
-											<p>{user.name ? `${user.name} (${user.username})` : user.username}</p>
+											<p>{user.getName() ? `${user.getName()} (${user.getUsername()})` : user.getUsername()}</p>
 										</label>
 										<label>
 											Email address
-											<p>{user.email || <a href='https://github.com/settings/profile' target={'_blank'}>Not selected public email</a>}</p>
+											<p>{user.getEmail() || <a href='https://github.com/settings/profile' target={'_blank'}>Not selected public email</a>}</p>
 										</label>
 									</>
 								) : null}