refactor: web app types

.vscode/settings.json

@@ -98,7 +98,11 @@
 		"**/node_modules": true,
 		"**/.turbo": true,
 		"**/.next": true,
-		"**/.prettierignore": true
+		"**/.prettierignore": true,
+		"**/.mocharc.json": true,
+		"**/build": true,
+		"apps/web/configs": true,
+		"apps/server/configs": true
 	},
 	"jest.autoRun": "off",
 	"jest.coverageFormatter": "GutterFormatter",

apps/server/src/classes/SocketEventBuilder.ts

@@ -1,11 +1,11 @@
 import { errorStore } from "@repo/error-store";
-import { SocketEvent } from "@repo/hl-types";
+import { SocketRoute } from "@repo/hl-types";
 import { EventName } from "@repo/type-store";
 
 import { RouteBuilder } from "~/classes/RouteBuilder";
 
 export class SocketEventBuilder<T extends EventName> extends RouteBuilder {
-	protected route: SocketEvent<T>;
+	protected route: SocketRoute<T>;
 
 	constructor() {
 		super();

apps/server/testSrc/__tests__/e2e/middleware/checkEventAvailability.spec.ts

@@ -1,5 +1,5 @@
 import { ErrorReason, errorStore } from "@repo/error-store";
-import { SocketEvent } from "@repo/hl-types";
+import { SocketRoute } from "@repo/hl-types";
 import chai from "chai";
 
 import { sessionManager } from "~/classes/SessionManager";
@@ -10,7 +10,7 @@ import { eventsWithoutDisconnect, unknownEvent } from "@/socket/events";
 import { ClientSocket } from "@/types";
 import { utils } from "@/utils";
 
-const createRequester = (socket: ClientSocket, event: SocketEvent<any>) =>
+const createRequester = (socket: ClientSocket, event: SocketRoute<any>) =>
 	requesterMaker(socket, event);
 
 await utils.asyncDescribe(

apps/server/testSrc/classes/Requester.ts

@@ -1,5 +1,5 @@
 import { ErrorReason, NativeError, errorStore } from "@repo/error-store";
-import { SocketEvent, SocketResponse } from "@repo/hl-types";
+import { SocketResponse, SocketRoute } from "@repo/hl-types";
 import { EventName, IOCollection } from "@repo/type-store";
 import chai from "chai";
 import { Socket as Client } from "socket.io-client";
@@ -10,13 +10,13 @@ import { FIELD_TYPE } from "@/variables";
 
 export class Requester<T extends EventName> {
 	private error?: NativeError;
-	private event: SocketEvent<T>;
+	private event: SocketRoute<T>;
 	private options: RequesterOptions = {};
 	private requestData: IOCollection[T]["input"];
 	private response: SocketResponse<T>;
 	private socket: Client;
 
-	constructor(socket: Client, event: SocketEvent<T>) {
+	constructor(socket: Client, event: SocketRoute<T>) {
 		this.setSocket(socket);
 		this.setEvent(event);
 	}
@@ -153,5 +153,5 @@ export class Requester<T extends EventName> {
 
 export const requesterMaker = <T extends EventName>(
 	socket: Client,
-	event: SocketEvent<T>
+	event: SocketRoute<T>
 ) => new Requester(socket, event);

apps/server/testSrc/utils/requesterCollection.ts

@@ -1,4 +1,4 @@
-import { SocketEvent } from "@repo/hl-types";
+import { SocketRoute } from "@repo/hl-types";
 import { Cellphone, EventName, FullName } from "@repo/type-store";
 import { Socket } from "socket.io-client";
 
@@ -11,7 +11,7 @@ import { RequesterMaker } from "@/types";
 export const requesterMakerHelper = <T extends EventName>(eventName: T) => {
 	const event = events.find(
 		(i) => i.name === eventName
-	) as unknown as SocketEvent<T>;
+	) as unknown as SocketRoute<T>;
 
 	return (socket: Socket) => {
 		return requesterMaker(socket, event);

apps/web/src/classes/StuffStore.ts

@@ -1,6 +1,6 @@
 import { stuff } from "~/data/stuff";
-import { Stuff } from "~/types";
 
+//TODO: move to pkg
 class StuffStore {
 	errors = stuff.errors;
 	events = stuff.events;
@@ -16,19 +16,19 @@ class StuffStore {
 		};
 	}
 
-	updateModels(models: Stuff["models"]) {
+	updateModels(models: typeof stuff.models) {
 		this.models = models;
 		return this;
 	}
-	updateErrors(errors: Stuff["errors"]) {
+	updateErrors(errors: typeof stuff.errors) {
 		this.errors = errors;
 		return this;
 	}
-	updateEvents(events: Stuff["events"]) {
+	updateEvents(events: typeof stuff.events) {
 		this.events = events;
 		return this;
 	}
-	updateValidationModels(validationModels: Stuff["validationModels"]) {
+	updateValidationModels(validationModels: typeof stuff.validationModels) {
 		this.validationModels = validationModels;
 		return this;
 	}

apps/web/src/classes/websocket/EventHandler.ts

@@ -20,7 +20,7 @@ interface Options {
 type FoundInput<T extends EventName> = IOCollection[T]["input"];
 type FoundOutput<T extends EventName> = IOCollection[T]["output"];
 
-//TODO: Merge this
+//TODO: Merge with Requester
 export class EventHandler<T extends EventName> {
 	private defaultOptions: Options = {
 		timeout: appConfigs.getConfigs().api.defaultTimeout,

apps/web/src/components/Common/Input/Select/CountrySelector/index.tsx

@@ -3,12 +3,12 @@ import Autocomplete from "@mui/material/Autocomplete";
 import type { CountryItem, VoidWithArg } from "@repo/type-store";
 import { countries } from "@repo/vars";
 
-import { SelectedCountry } from "~/types";
+import { GlobalStore } from "~/store";
 
 import Option from "./Option";
 import SelectorInput from "./SelectorInput";
 
-export type SelectCountryOnChange = VoidWithArg<SelectedCountry>;
+export type SelectCountryOnChange = VoidWithArg<GlobalStore.SelectedCountry>;
 
 interface Props {
 	countryCode: string;

apps/web/src/components/Other/ServerStatus.tsx → apps/web/src/components/Other/ServerAvailabilityStatus.tsx

@@ -1,13 +1,13 @@
-import { Status } from "~/types";
+import { ServerAvailabilityStatus as ServerAvailabilityStatusType } from "~/types";
 
 import { Box } from "..";
 import ServerStatusIndicator from "./ServerStatusIndicator";
 
 interface Props {
-	status: Status;
+	status: ServerAvailabilityStatusType;
 }
 
-const ServerStatus: React.FC<Props> = ({ status }) => {
+const ServerAvailabilityStatus: React.FC<Props> = ({ status }) => {
 	return (
 		<Box.Flex
 			bgcolor={(theme) => theme.palette.background.paper}
@@ -25,4 +25,4 @@ const ServerStatus: React.FC<Props> = ({ status }) => {
 	);
 };
 
-export default ServerStatus;
+export default ServerAvailabilityStatus;

apps/web/src/components/Other/ServerStatusIndicator.tsx

@@ -1,11 +1,11 @@
 import CircleIcon from "@mui/icons-material/Circle";
 
-import { Status, StatusColors } from "~/types";
+import { ServerAvailabilityStatus, StatusColors } from "~/types";
 
 import { Box } from "..";
 
 interface Props {
-	status: Status;
+	status: ServerAvailabilityStatus;
 }
 
 export const statusColors: StatusColors = {

apps/web/src/components/Other/index.ts

@@ -1,11 +1,11 @@
 import AuthFooter from "./AuthFooter";
 import Copyright from "./Copyright";
-import ServerStatus from "./ServerStatus";
+import ServerAvailabilityStatus from "./ServerAvailabilityStatus";
 import ServerStatusIndicator from "./ServerStatusIndicator";
 
 export const Other = {
 	AuthFooter,
 	Copyright,
-	ServerStatus,
+	ServerAvailabilityStatus,
 	ServerStatusIndicator,
 };

apps/web/src/containers/Messenger/LeftSide/ChatList.tsx

@@ -1,14 +1,13 @@
 import type { PrivateChatItem, UserId } from "@repo/type-store";
 
-import { useMessageStore, useUserStore } from "~/store";
-import { SelectedChatInfo } from "~/types";
+import { MessageStore, useMessageStore, useUserStore } from "~/store";
 
 import ChatListItem from "./ChatListItem";
 import { HandleChatListItemClick } from "./types";
 
 interface Props {
 	onChatListItemClick: HandleChatListItemClick;
-	selectedUserToChat: SelectedChatInfo;
+	selectedUserToChat: MessageStore.SelectedChatInfo;
 }
 
 const ChatList: React.FC<Props> = ({

apps/web/src/containers/Messenger/Portal/Dialog/Contacts/Content/ListItem.tsx

@@ -3,14 +3,14 @@ import { VoidNoArgsFn } from "@repo/type-store";
 
 import { Box, Typography } from "~/components";
 import { useGetAvatar } from "~/hooks";
-import { OnContextMenu } from "~/types";
+import { GlobalStore } from "~/store";
 
 interface Props {
 	fullName: string;
 	//REFACTOR: To template string
 	lastSeen: string;
 	onContactClick: VoidNoArgsFn;
-	onContextMenu: OnContextMenu;
+	onContextMenu: GlobalStore.OnContextMenu;
 	userId: UserId;
 }
 

apps/web/src/containers/Messenger/Portal/Dialog/Contacts/Content/index.tsx

@@ -1,13 +1,13 @@
 import { UserItem, Users, VoidWithArg } from "@repo/type-store";
 
-import { ExtendedOnContextMenu } from "~/types";
+import { GlobalStore } from "~/store";
 
 import ListItem from "./ListItem";
 
 interface Props {
 	contacts: Users;
 	onContactItemClicked: VoidWithArg<UserItem>;
-	onContextMenu: ExtendedOnContextMenu<UserItem>;
+	onContextMenu: GlobalStore.ExtendedOnContextMenu<UserItem>;
 }
 
 const Content: React.FC<Props> = ({

apps/web/src/containers/Messenger/Portal/Dialog/Contacts/index.tsx

@@ -2,8 +2,12 @@ import { UserItem } from "@repo/type-store";
 
 import { Template } from "~/components";
 import { useContextMenu, useDialogState } from "~/hooks";
-import { useGlobalStore, useMessageStore, useUserStore } from "~/store";
-import { ContextMenuList, DialogName, ExtendedOnContextMenu } from "~/types";
+import {
+	GlobalStore,
+	useGlobalStore,
+	useMessageStore,
+	useUserStore,
+} from "~/store";
 
 import Actions from "./Actions";
 import Content from "./Content";
@@ -17,7 +21,7 @@ const Contacts = () => {
 
 	const createContextMenuList = ({
 		isBlocked,
-	}: Partial<UserItem> = {}): ContextMenuList => [
+	}: Partial<UserItem> = {}): GlobalStore.ContextMenuList => [
 		{
 			text: "Edit",
 			handler: onContextMenuHandler("editContactWithCellphone"),
@@ -32,7 +36,7 @@ const Contacts = () => {
 		},
 	];
 
-	const onContextMenuHandler = (dn: DialogName) => () => {
+	const onContextMenuHandler = (dn: GlobalStore.DialogName) => () => {
 		globalStore.closeContextMenu();
 		globalStore.openDialog(dn);
 	};
@@ -51,7 +55,10 @@ const Contacts = () => {
 		});
 	};
 
-	const handleContextMenu: ExtendedOnContextMenu<UserItem> = (event, u) => {
+	const handleContextMenu: GlobalStore.ExtendedOnContextMenu<UserItem> = (
+		event,
+		u
+	) => {
 		userStore.updateSelectedUserIdForActions(u.userId);
 		onContextMenu(event, createContextMenuList(u));
 	};

apps/web/src/containers/Messenger/Portal/Dialog/EditProfile/Content/index.tsx

@@ -2,7 +2,7 @@ import { userUtils } from "@repo/classes";
 import type { AvatarSrc, VoidNoArgsFn } from "@repo/type-store";
 
 import { Box } from "~/components";
-import { Profile } from "~/types";
+import { SettingsStore } from "~/store";
 
 import { EditProfileListItemOnClick } from "../types";
 import Header from "./Header";
@@ -12,7 +12,7 @@ interface Props {
 	avatarSrc: AvatarSrc;
 	onAvatarClick: VoidNoArgsFn;
 	onClick: EditProfileListItemOnClick;
-	profile: Profile;
+	profile: SettingsStore.Profile;
 }
 
 const Content: React.FC<Props> = ({

apps/web/src/containers/Messenger/Portal/Dialog/EditProfile/types.ts

@@ -1,9 +1,10 @@
 import { ElementLabel, VoidWithArg } from "@repo/type-store";
 
-import { DialogName, IconType } from "~/types";
+import { GlobalStore } from "~/store";
+import { IconType } from "~/types";
 
 export interface EditProfileListItem {
-	name: DialogName;
+	name: GlobalStore.DialogName;
 	label: ElementLabel;
 	disabled: boolean;
 	value: string;

apps/web/src/containers/Messenger/Portal/Dialog/PrivacyAndSecurity/Content/List.tsx

@@ -1,13 +1,13 @@
 import { VoidWithArg } from "@repo/type-store";
 
 import { Box } from "~/components";
-import { DialogName } from "~/types";
+import { GlobalStore } from "~/store";
 
 import ListItem from "./ListItem";
 import { privacyAndSecurityList } from "./data";
 
 interface Props {
-	onItemClick: VoidWithArg<DialogName>;
+	onItemClick: VoidWithArg<GlobalStore.DialogName>;
 }
 
 const List: React.FC<Props> = ({ onItemClick }) => (

apps/web/src/containers/Messenger/Portal/Dialog/PrivacyAndSecurity/Content/ListItem.tsx

@@ -1,13 +1,13 @@
 import { VoidWithArg } from "@repo/type-store";
 
 import { Box } from "~/components";
-import { DialogName } from "~/types";
+import { GlobalStore } from "~/store";
 
 import { PrivacyAndSecurityListItem } from "../type";
 
 interface Props {
 	item: PrivacyAndSecurityListItem;
-	onItemClick: VoidWithArg<DialogName>;
+	onItemClick: VoidWithArg<GlobalStore.DialogName>;
 }
 
 const ListItem: React.FC<Props> = ({ item, onItemClick }) => (

apps/web/src/containers/Messenger/Portal/Dialog/PrivacyAndSecurity/Content/index.tsx

@@ -1,11 +1,11 @@
 import { VoidWithArg } from "@repo/type-store";
 
-import { DialogName } from "~/types";
+import { GlobalStore } from "~/store";
 
 import List from "./List";
 
 interface Props {
-	onItemClick: VoidWithArg<DialogName>;
+	onItemClick: VoidWithArg<GlobalStore.DialogName>;
 }
 
 const Content: React.FC<Props> = ({ onItemClick }) => (

apps/web/src/containers/Messenger/Portal/Dialog/PrivacyAndSecurity/index.tsx

@@ -1,7 +1,6 @@
 import { Template } from "~/components";
 import { useDialogState } from "~/hooks";
-import { useGlobalStore } from "~/store";
-import { DialogName } from "~/types";
+import { GlobalStore, useGlobalStore } from "~/store";
 
 import Actions from "./Actions";
 import Content from "./Content";
@@ -10,7 +9,7 @@ const PrivacyAndSecurity = () => {
 	const globalStore = useGlobalStore();
 	const dialogState = useDialogState("privacyAndSecurity");
 
-	const handleItemClick = (d: DialogName) => {
+	const handleItemClick = (d: GlobalStore.DialogName) => {
 		globalStore.openDialog(d);
 	};
 

apps/web/src/containers/Messenger/Portal/Dialog/PrivacyAndSecurity/type.ts

@@ -1,9 +1,9 @@
 import { SvgIconComponent } from "@mui/icons-material";
 
-import { DialogName } from "~/types";
+import { GlobalStore } from "~/store";
 
 export interface PrivacyAndSecurityListItem {
 	displayName: "Blocked users" | "Sessions";
 	Icon: SvgIconComponent;
-	name: DialogName;
+	name: GlobalStore.DialogName;
 }