thjs-63: * fix client app crashing

Author: v0ldemar01

client/.env.example

@@ -6,5 +6,5 @@ VITE_API_SERVER=http://localhost:3001
 VITE_SOCKET_SERVER=ws://localhost:3001
 VITE_API_PATH=/api
 VITE_SOCKET_PATH=/socket.io
-VITE_PORT=3000
-VITE_HOST=localhost
+VITE_APP_PORT=3000
+VITE_APP_HOST=localhost

client/src/packages/http/http-api.ts

@@ -30,7 +30,7 @@ class Http implements HttpApi {
       contentType = ContentType.JSON,
       query
     } = options;
-    const headers = await this.#getHeaders({
+    const headers = this.#getHeaders({
       hasAuth,
       contentType
     });
@@ -40,31 +40,31 @@ class Http implements HttpApi {
       headers,
       body: payload
     })
-      .then(void this.#checkStatus)
-      .then<T>(void this.#parseJSON)
-      .catch(void this.#throwError);
+      .then(this.#checkStatus)
+      .then<T>(this.#parseJSON)
+      .catch(this.#throwError);
   }
 
-  async #getHeaders({
+  #getHeaders({
     hasAuth,
     contentType
-  }: Pick<HttpOptions, 'hasAuth' | 'contentType'>): Promise<Headers> {
+  }: Pick<HttpOptions, 'hasAuth' | 'contentType'>): Headers {
     const headers = new Headers();
 
     if (contentType) {
       headers.append(HttpHeader.CONTENT_TYPE, contentType);
     }
 
     if (hasAuth) {
-      const token = await this.#storageApi.get(StorageKey.TOKEN);
+      const token = this.#storageApi.get(StorageKey.TOKEN);
 
       headers.append(HttpHeader.AUTHORIZATION, `Bearer ${token}`);
     }
 
     return headers;
   }
 
-  async #checkStatus(response: Response): Promise<Response> {
+  #checkStatus = async (response: Response): Promise<Response> => {
     if (!response.ok) {
       const parsedException = (await response.json().catch(() => ({
         message: response.statusText
@@ -77,26 +77,26 @@ class Http implements HttpApi {
     }
 
     return response;
-  }
+  };
 
-  #getUrl<T extends Record<string, unknown>>(
+  #getUrl = <T extends Record<string, unknown>>(
     url: string,
     query: T | undefined
-  ): string {
+  ): string => {
     if (query) {
       return `${url}?${getStringifiedQuery(query)}`;
     }
 
     return url;
-  }
+  };
 
-  #parseJSON<T>(response: Response): Promise<T> {
+  #parseJSON = <T>(response: Response): Promise<T> => {
     return response.json() as Promise<T>;
-  }
+  };
 
-  #throwError(error: Error): never {
+  #throwError = (error: Error): never => {
     throw error;
-  }
+  };
 }
 
 export { Http };

client/src/packages/storage/libs/types/storage-api.type.ts

@@ -2,11 +2,11 @@ import { type StorageKey } from '~/libs/enums/enums.js';
 import { type ValueOf } from '~/libs/types/types.js';
 
 type StorageApi = {
-  set(key: ValueOf<typeof StorageKey>, value: string): Promise<void>;
-  get<R = string>(key: ValueOf<typeof StorageKey>): Promise<R | null>;
-  drop(key: ValueOf<typeof StorageKey>): Promise<void>;
-  has(key: ValueOf<typeof StorageKey>): Promise<boolean>;
-  clear(): Promise<void>;
+  set(key: ValueOf<typeof StorageKey>, value: string): void;
+  get<R = string>(key: ValueOf<typeof StorageKey>): R | null;
+  drop(key: ValueOf<typeof StorageKey>): void;
+  has(key: ValueOf<typeof StorageKey>): boolean;
+  clear(): void;
 };
 
 export { type StorageApi };

client/src/packages/storage/storage-api.ts

@@ -14,24 +14,20 @@ class Storage implements StorageApi {
     this.#storage = storage;
   }
 
-  public set(key: ValueOf<typeof StorageKey>, value: string): Promise<void> {
+  public set(key: ValueOf<typeof StorageKey>, value: string): void {
     this.#storage.setItem(key as string, value);
-
-    return Promise.resolve();
   }
 
-  public get<R = string>(key: ValueOf<typeof StorageKey>): Promise<R | null> {
-    return Promise.resolve(this.#storage.getItem(key as string) as R);
+  public get<R = string>(key: ValueOf<typeof StorageKey>): R | null {
+    return this.#storage.getItem(key as string) as R;
   }
 
-  public drop(key: ValueOf<typeof StorageKey>): Promise<void> {
+  public drop(key: ValueOf<typeof StorageKey>): void {
     this.#storage.removeItem(key as string);
-
-    return Promise.resolve();
   }
 
-  public async has(key: ValueOf<typeof StorageKey>): Promise<boolean> {
-    const value = await this.get(key);
+  public has(key: ValueOf<typeof StorageKey>): boolean {
+    const value = this.get(key);
 
     return Boolean(value);
   }

client/src/slices/profile/actions.ts

@@ -21,7 +21,7 @@ const login = createAsyncThunk<
 >(ActionType.LOG_IN, async (request, { extra: { authApi, storageApi } }) => {
   const { user, token } = await authApi.login(request);
 
-  void storageApi.set(StorageKey.TOKEN, token);
+  storageApi.set(StorageKey.TOKEN, token);
 
   return user;
 });
@@ -33,15 +33,15 @@ const register = createAsyncThunk<
 >(ActionType.REGISTER, async (request, { extra: { authApi, storageApi } }) => {
   const { user, token } = await authApi.registration(request);
 
-  void storageApi.set(StorageKey.TOKEN, token);
+  storageApi.set(StorageKey.TOKEN, token);
 
   return user;
 });
 
 const logout = createAsyncThunk<null, undefined, AsyncThunkConfig>(
   ActionType.LOG_OUT,
   (_request, { extra: { storageApi } }) => {
-    void storageApi.drop(StorageKey.TOKEN);
+    storageApi.drop(StorageKey.TOKEN);
 
     return null;
   }

client/vite.config.ts

@@ -9,8 +9,8 @@ const viteReactPlugin = reactPlugin as unknown as (
 const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
   // import.meta.env doesn't exist at this moment
   const {
-    VITE_PORT,
-    VITE_HOST,
+    VITE_APP_PORT,
+    VITE_APP_HOST,
     VITE_API_PATH,
     VITE_API_SERVER,
     VITE_SOCKET_SERVER,
@@ -22,8 +22,8 @@ const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
       outDir: 'build'
     },
     server: {
-      host: VITE_HOST as string,
-      port: Number(VITE_PORT),
+      host: VITE_APP_HOST as string,
+      port: Number(VITE_APP_PORT),
       proxy: {
         [VITE_API_PATH as string]: VITE_API_SERVER as string,
         [VITE_SOCKET_PATH as string]: {

server/src/libs/packages/http/http.service.ts

@@ -21,7 +21,7 @@ class Http implements HttpService {
     url: string,
     options?: HttpLoadOptions<T>
   ): Promise<K> | never {
-    const { method = HttpMethod.GET, data, headers } = options ?? {};
+    const { data, headers, method = HttpMethod.GET } = options ?? {};
 
     return this.#instance
       .request<T, K>({
@@ -30,20 +30,20 @@ class Http implements HttpService {
         headers: headers as NonNullable<typeof headers>,
         data
       })
-      .then(void this.#getData)
-      .catch(void this.#catchError);
+      .then(this.#getData)
+      .catch(this.#catchError);
   }
 
-  #getData<T>(response: AxiosResponse<T>): AxiosResponse<T>['data'] {
-    return response.data;
-  }
+  #getData = <T>(response: T): AxiosResponse<T>['data'] => {
+    return (response as AxiosResponse<T>).data;
+  };
 
-  #catchError<T = unknown>(error: AxiosError): never {
+  #catchError = <T = unknown>(error: AxiosError): never => {
     const { response } = error;
     const { data } = response as AxiosResponse<T>;
 
     throw new Error((data as Error).toString());
-  }
+  };
 }
 
 export { Http };