feat: Add an ability to delete personal account gf-146

apps/backend/src/db/migrations/20240904065949_add_deleted_at_to_users.ts

@@ -0,0 +1,21 @@
+import { type Knex } from "knex";
+
+const TABLE_NAME = "users";
+
+const ColumnName = {
+	DELETED_AT: "deleted_at",
+} as const;
+
+function up(knex: Knex): Promise<void> {
+	return knex.schema.alterTable(TABLE_NAME, (table) => {
+		table.dateTime(ColumnName.DELETED_AT).nullable();
+	});
+}
+
+function down(knex: Knex): Promise<void> {
+	return knex.schema.alterTable(TABLE_NAME, (table) => {
+		table.dropColumn(ColumnName.DELETED_AT);
+	});
+}
+
+export { down, up };

apps/backend/src/modules/users/user.controller.ts

@@ -65,6 +65,46 @@ class UserController extends BaseController {
 				body: userPatchValidationSchema,
 			},
 		});
+
+		this.addRoute({
+			handler: (options) =>
+				this.delete(
+					options as APIHandlerOptions<{
+						params: { id: string };
+					}>,
+				),
+			method: "DELETE",
+			path: UsersApiPath.$ID,
+		});
+	}
+
+	/**
+	 * @swagger
+	 * /users/{id}:
+	 *    delete:
+	 *      tags:
+	 *        - Users
+	 *      description: Deletes a user
+	 *      parameters:
+	 *        - in: path
+	 *          name: id
+	 *          description: ID of the user to delete
+	 *          required: true
+	 *          schema:
+	 *            type: string
+	 *      responses:
+	 *        204:
+	 *          description: User deleted successfully
+	 */
+	private async delete(
+		options: APIHandlerOptions<{
+			params: { id: string };
+		}>,
+	): Promise<APIHandlerResponse> {
+		return {
+			payload: await this.userService.delete(Number(options.params.id)),
+			status: HTTPCode.OK,
+		};
 	}
 
 	/**

apps/backend/src/modules/users/user.entity.ts

@@ -5,6 +5,8 @@ import { type UserAuthResponseDto } from "./libs/types/types.js";
 class UserEntity implements Entity {
 	private createdAt: null | string;
 
+	private deletedAt: null | string;
+
 	private email: string;
 
 	private id: null | number;
@@ -17,13 +19,15 @@ class UserEntity implements Entity {
 
 	private constructor({
 		createdAt,
+		deletedAt,
 		email,
 		id,
 		name,
 		passwordHash,
 		passwordSalt,
 	}: {
 		createdAt: null | string;
+		deletedAt: null | string;
 		email: string;
 		id: null | number;
 		name: string;
@@ -36,17 +40,20 @@ class UserEntity implements Entity {
 		this.passwordHash = passwordHash;
 		this.passwordSalt = passwordSalt;
 		this.createdAt = createdAt;
+		this.deletedAt = deletedAt;
 	}
 
 	public static initialize({
 		createdAt,
+		deletedAt,
 		email,
 		id,
 		name,
 		passwordHash,
 		passwordSalt,
 	}: {
 		createdAt: string;
+		deletedAt: null | string;
 		email: string;
 		id: number;
 		name: string;
@@ -55,6 +62,7 @@ class UserEntity implements Entity {
 	}): UserEntity {
 		return new UserEntity({
 			createdAt,
+			deletedAt,
 			email,
 			id,
 			name,
@@ -76,6 +84,7 @@ class UserEntity implements Entity {
 	}): UserEntity {
 		return new UserEntity({
 			createdAt: null,
+			deletedAt: null,
 			email,
 			id: null,
 			name,

apps/backend/src/modules/users/user.model.ts

@@ -4,6 +4,8 @@ import {
 } from "~/libs/modules/database/database.js";
 
 class UserModel extends AbstractModel {
+	public deletedAt!: null | string;
+
 	public email!: string;
 
 	public name!: string;

apps/backend/src/modules/users/user.repository.ts

@@ -31,14 +31,22 @@ class UserRepository implements Repository {
 		return UserEntity.initialize(user);
 	}
 
-	public delete(): ReturnType<Repository["delete"]> {
-		return Promise.resolve(true);
+	public async delete(id: number): Promise<boolean> {
+		const deletedRowsCount = await this.userModel
+			.query()
+			.patch({ deletedAt: new Date().toISOString() })
+			.where({ id })
+			.whereNull("deletedAt")
+			.execute();
+
+		return Boolean(deletedRowsCount);
 	}
 
 	public async find(id: number): Promise<null | UserEntity> {
 		const user = await this.userModel
 			.query()
 			.findById(id)
+			.whereNull("deletedAt")
 			.returning("*")
 			.execute();
 
@@ -51,6 +59,7 @@ class UserRepository implements Repository {
 	}: PaginationQueryParameters): Promise<PaginationResponseDto<UserEntity>> {
 		const { results, total } = await this.userModel
 			.query()
+			.whereNull("deletedAt")
 			.page(page, pageSize);
 
 		return {
@@ -59,8 +68,17 @@ class UserRepository implements Repository {
 		};
 	}
 
-	public async findByEmail(email: string): Promise<null | UserEntity> {
-		const user = await this.userModel.query().findOne({ email });
+	public async findByEmail(
+		email: string,
+		hasDeleted = false,
+	): Promise<null | UserEntity> {
+		const query = this.userModel.query().findOne({ email });
+
+		if (!hasDeleted) {
+			query.whereNull("deletedAt");
+		}
+
+		const user = await query.execute();
 
 		return user ? UserEntity.initialize(user) : null;
 	}

apps/backend/src/modules/users/user.service.ts

@@ -31,7 +31,7 @@ class UserService implements Service {
 		payload: UserSignUpRequestDto,
 	): Promise<UserAuthResponseDto> {
 		const { email, name, password } = payload;
-		const existingUser = await this.userRepository.findByEmail(email);
+		const existingUser = await this.userRepository.findByEmail(email, true);
 
 		if (existingUser) {
 			throw new UserError({
@@ -55,8 +55,17 @@ class UserService implements Service {
 		return item.toObject();
 	}
 
-	public delete(): ReturnType<Service["delete"]> {
-		return Promise.resolve(true);
+	public async delete(id: number): Promise<boolean> {
+		const isDeleted = await this.userRepository.delete(id);
+
+		if (!isDeleted) {
+			throw new UserError({
+				message: ExceptionMessage.USER_NOT_FOUND,
+				status: HTTPCode.NOT_FOUND,
+			});
+		}
+
+		return isDeleted;
 	}
 
 	public async find(id: number): Promise<UserAuthResponseDto> {
@@ -91,7 +100,7 @@ class UserService implements Service {
 
 		if (!item) {
 			throw new UserError({
-				message: ExceptionMessage.USER_NOT_FOUND,
+				message: ExceptionMessage.INVALID_CREDENTIALS,
 				status: HTTPCode.NOT_FOUND,
 			});
 		}

apps/frontend/src/libs/components/confirmation-modal/styles.module.css

@@ -1,5 +1,4 @@
 .confirmation-text {
-	padding: 24px 0;
 	margin: 0;
 	font-size: 16px;
 	font-weight: 400;

apps/frontend/src/libs/components/header/header.tsx

@@ -21,7 +21,7 @@ const Header = (): JSX.Element => {
 
 	return (
 		<header className={styles["header"]}>
-			<NavLink className={styles["logo-link"] ?? ""} to={AppRoute.ROOT}>
+			<NavLink className={styles["logo-link"] as string} to={AppRoute.ROOT}>
 				<div className={styles["logo-container"]}>
 					<img alt="GitFit logo" className={styles["logo-img"]} src={logoSrc} />
 					<span className={styles["logo-text"]}>Logo</span>

apps/frontend/src/libs/components/header/libs/components/user-popover/user-popover.tsx

@@ -37,7 +37,10 @@ const UserPopover = ({
 						<p className={styles["user-email"]}>{email}</p>
 					</div>
 					<div className={styles["buttons"]}>
-						<NavLink className={styles["button"] ?? ""} to={AppRoute.PROFILE}>
+						<NavLink
+							className={styles["button"] as string}
+							to={AppRoute.PROFILE}
+						>
 							Profile
 						</NavLink>
 						<button className={styles["button"]} onClick={handleLogout}>

apps/frontend/src/libs/components/link/link.tsx

@@ -11,7 +11,7 @@ type Properties = {
 };
 
 const Link = ({ children, to }: Properties): JSX.Element => (
-	<NavLink className={styles["link"] ?? ""} to={to}>
+	<NavLink className={styles["link"] as string} to={to}>
 		{children}
 	</NavLink>
 );

apps/frontend/src/libs/components/modal/modal.tsx

@@ -34,13 +34,13 @@ const Modal = ({
 				ref={dialogReference}
 			>
 				<div className={styles["modal-content"]}>
-					<div className={styles["modal-header-title"]}>
-						<h3>{title}</h3>
-						<div className={styles["modal-close"]}>
-							<IconButton iconName="cross" label="Close" onClick={onClose} />
-						</div>
+					<div className={styles["modal-close"]}>
+						<IconButton iconName="cross" label="Close" onClick={onClose} />
+					</div>
+					<div className={styles["modal-body"]}>
+						<h3 className={styles["modal-header-title"]}>{title}</h3>
+						{children}
 					</div>
-					<div className={styles["modal-body"]}>{children}</div>
 				</div>
 			</dialog>
 		</>

apps/frontend/src/libs/components/modal/styles.module.css

@@ -26,25 +26,17 @@
 	transform: translate(-50%, -50%);
 }
 
-.modal-header {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-	width: 100%;
-}
-
 .modal-header-title {
-	font-family: Inter, sans-serif;
+	margin: 0;
 	font-size: 20px;
 	font-weight: 600;
-	line-height: 1.3;
 	color: var(--color-text-primary);
 }
 
 .modal-body {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
+	gap: 24px;
 	width: 100%;
 	font-family: Inter, sans-serif;
 	font-size: 16px;

apps/frontend/src/libs/components/toast-container/toast-container.tsx

@@ -7,7 +7,7 @@ const ToastContainer = (): JSX.Element => {
 	return (
 		<LibraryToastContainer
 			autoClose={5000}
-			className={styles["toast-container"] ?? ""}
+			className={styles["toast-container"] as string}
 			closeOnClick
 			draggable
 			hideProgressBar={false}

apps/frontend/src/libs/enums/notification-message.enum.ts

@@ -1,8 +1,9 @@
 const NotificationMessage = {
-	PROJECT_CREATE_SUCCESS: "Project was successfully created.",
+	PROFILE_UPDATE_SUCCESS: "Successfully updated profile information.",
+	PROJECT_CREATE_SUCCESS: "Project was successfully created",
 	PROJECT_DELETE_SUCCESS: "Project was successfully deleted.",
 	PROJECT_UPDATE_SUCCESS: "Project was successfully updated.",
-	SUCCESS_PROFILE_UPDATE: "Your profile has been successfully updated.",
+	USER_DELETE_SUCCESS: "User deleted successfully.",
 } as const;
 
 export { NotificationMessage };

apps/frontend/src/libs/hooks/hooks.ts

@@ -10,4 +10,9 @@ export {
 	useController as useFormController,
 	useWatch as useFormWatch,
 } from "react-hook-form";
-export { useLocation, useParams, useSearchParams } from "react-router-dom";
+export {
+	useLocation,
+	useNavigate,
+	useParams,
+	useSearchParams,
+} from "react-router-dom";

apps/frontend/src/libs/modules/api/base-http-api.ts

@@ -75,7 +75,7 @@ class BaseHTTPApi implements HTTPApi {
 		if (hasAuth) {
 			const token = await this.storage.get<string>(StorageKey.TOKEN);
 
-			headers.append(HTTPHeader.AUTHORIZATION, `Bearer ${token ?? ""}`);
+			headers.append(HTTPHeader.AUTHORIZATION, `Bearer ${token as string}`);
 		}
 
 		return headers;

apps/frontend/src/modules/users/slices/actions.ts

@@ -14,6 +14,18 @@ import {
 
 import { name as sliceName } from "./users.slice.js";
 
+const deleteById = createAsyncThunk<number, number, AsyncThunkConfig>(
+	`${sliceName}/delete`,
+	async (userId, { extra }) => {
+		const { toastNotifier, userApi } = extra;
+
+		await userApi.delete(userId);
+		toastNotifier.showSuccess(NotificationMessage.USER_DELETE_SUCCESS);
+
+		return userId;
+	},
+);
+
 const loadAll = createAsyncThunk<
 	UserGetAllResponseDto,
 	PaginationQueryParameters,
@@ -34,9 +46,9 @@ const updateProfile = createAsyncThunk<
 	const user = await userApi.patch(id, payload);
 	void dispatch(authActions.getAuthenticatedUser());
 
-	toastNotifier.showSuccess(NotificationMessage.SUCCESS_PROFILE_UPDATE);
+	toastNotifier.showSuccess(NotificationMessage.PROFILE_UPDATE_SUCCESS);
 
 	return user;
 });
 
-export { loadAll, updateProfile };
+export { deleteById, loadAll, updateProfile };