ever-co · evereq · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024 · Jan 11, 2024
diff --git a/apps/web/app/[locale]/layout.tsx b/apps/web/app/[locale]/layout.tsx
@@ -50,7 +50,7 @@ const LocaleLayout = ({ children, params: { locale }, pageProps }: Props) => {
 	const messages = require(`../../messages/${locale}.json`);
 	console.log({ pageProps });
 	return (
-		<html className="h-full" lang={locale}>
+		<html lang={locale}>
 			{/* <head>
 				<link rel="preconnect" href="https://fonts.googleapis.com" />
 				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />

diff --git a/apps/web/app/api/image-assets/upload/[folder]/route.ts b/apps/web/app/api/image-assets/upload/[folder]/route.ts
@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import { authenticatedGuard } from '@app/services/server/guards/authenticated-guard-app';
+import { createImageAssetsRequest } from '@app/services/server/requests/image-assets';
+import { INextParams } from '@app/interfaces';
+
+export async function POST(req: Request, { params }: INextParams) {
+	const res = new NextResponse();
+
+	const { $res, user, access_token, tenantId } = await authenticatedGuard(req, res);
+
+	if (!user) return NextResponse.json({}, { status: 401 });
+
+	const folderParam = params.folder as string;
+
+	const form = await req.formData();
+
+	const response = await createImageAssetsRequest(
+		{
+			tenantId: tenantId,
+			bearer_token: access_token,
+			folder: folderParam,
+			contentType: req.headers.get('Content-Type') as string
+		},
+		form
+	);
+
+	return $res(response.data);
+}
diff --git a/apps/web/app/api/user/[id]/route.ts b/apps/web/app/api/user/[id]/route.ts
@@ -4,7 +4,7 @@ import { getTaskCreator, updateUserAvatarRequest } from '@app/services/server/re
 import { deleteUserRequest } from '@app/services/server/requests/user';
 import { NextResponse } from 'next/server';
 
-export async function GET(req: Request,  { params }: { params: { id: string } }) {
+export async function GET(req: Request, { params }: { params: { id: string } }) {
 	const res = new NextResponse();
 
 	const { $res, user, access_token } = await authenticatedGuard(req, res);
@@ -19,7 +19,7 @@ export async function GET(req: Request,  { params }: { params: { id: string } })
 	);
 }
 
-export async function POST(req: Request) {
+export async function PUT(req: Request) {
 	const res = new NextResponse();
 
 	const { $res, user, access_token, tenantId } = await authenticatedGuard(req, res);

diff --git a/apps/web/app/helpers/cookies/index.ts b/apps/web/app/helpers/cookies/index.ts
@@ -181,7 +181,7 @@ export function setActiveProjectIdCookie(teamIds: string, ctx?: NextCtx) {
 }
 
 // Organization Id
-export function getOrganizationIdCookie(ctx: NextCtx) {
+export function getOrganizationIdCookie(ctx?: NextCtx) {
 	return getCookie(ORGANIZATION_ID_COOKIE_NAME, { ...ctx }) as string;
 }
 
@@ -190,7 +190,7 @@ export function setOrganizationIdCookie(orgId: string, ctx?: NextCtx) {
 }
 
 // Tenant Id
-export function getTenantIdCookie(ctx: NextCtx) {
+export function getTenantIdCookie(ctx?: NextCtx) {
 	return getCookie(TENANT_ID_COOKIE_NAME, { ...ctx }) as string;
 }
 
@@ -214,9 +214,9 @@ export function setActiveUserIdCookie(userId: string, ctx?: NextCtx) {
 }
 
 export function getNoTeamPopupShowCookie(ctx?: NextCtx) {
-	return getCookie(NO_TEAM_POPUP_SHOW_COOKIE_NAME, {
+	return !!getCookie(NO_TEAM_POPUP_SHOW_COOKIE_NAME, {
 		...(ctx || {})
-	}) as boolean;
+	});
 }
 export function setNoTeamPopupShowCookie(show: boolean, ctx?: NextCtx) {
 	return setCookie(NO_TEAM_POPUP_SHOW_COOKIE_NAME, show, { ...(ctx || {}) });

diff --git a/apps/web/app/hooks/features/useImageAssets.ts b/apps/web/app/hooks/features/useImageAssets.ts
@@ -2,8 +2,8 @@
 
 import { getAccessTokenCookie } from '@app/helpers';
 import { useCallback, useState } from 'react';
-import axios, { AxiosResponse } from 'axios';
-import { GAUZY_API_BASE_SERVER_URL } from '@app/constants';
+import { post } from '@app/services/client/axios';
+import { IImageAssets } from '@app/interfaces';
 
 export function useImageAssets() {
 	const [loading, setLoading] = useState(false);
@@ -17,19 +17,13 @@ export function useImageAssets() {
 			formData.append('organizationId', organizationId);
 			setLoading(true);
 
-			return axios
-				.post(GAUZY_API_BASE_SERVER_URL.value + `/api/image-assets/upload/${folder}`, formData, {
-					headers: {
-						'tenant-id': tenantId,
-						authorization: `Bearer ${bearer_token}`
-					}
-				})
-				.then(async (res: AxiosResponse) => {
-					return res.data;
-				})
-				.catch((e) => {
-					console.log(e);
-				})
+			return post<IImageAssets>(`/image-assets/upload/${folder}`, formData, {
+				headers: {
+					'tenant-id': tenantId,
+					Authorization: `Bearer ${bearer_token}`
+				}
+			})
+				.then((res) => res.data)
 				.finally(() => {
 					setLoading(false);
 				});

diff --git a/apps/web/app/interfaces/IDataResponse.ts b/apps/web/app/interfaces/IDataResponse.ts
@@ -34,3 +34,5 @@ export interface ISuccessResponse {
 	status: number;
 	message: string;
 }
+
+export type INextParams = { params: Record<string, string | null> };
diff --git a/apps/web/app/services/client/api/integrations/github.ts b/apps/web/app/services/client/api/integrations/github.ts
@@ -1,9 +1,9 @@
 import { CreateResponse, IGithubMetadata, IGithubRepositories } from '@app/interfaces';
-import api from '../../axios';
+import api, { post } from '../../axios';
 
 // TODO
 export function installGitHubIntegrationAPI(body: any) {
-	return api.post<any>('/integration/github/install', body);
+	return post<any>('/integration/github/install', body);
 }
 
 // TODO

diff --git a/apps/web/app/services/client/api/invite.ts b/apps/web/app/services/client/api/invite.ts
@@ -39,7 +39,7 @@ export async function inviteByEmailsAPI(data: IIInviteRequest, tenantId: string)
 	};
 
 	// for not direct call we need to adjust data to include name and email only
-	const fetchData = await post(endpoint, dataToInviteUser, true, { tenantId });
+	const fetchData = await post<any>(endpoint, dataToInviteUser, { tenantId });
 
 	return GAUZY_API_BASE_SERVER_URL.value ? fetchData.data : fetchData;
 }

diff --git a/apps/web/app/services/client/axios.ts b/apps/web/app/services/client/axios.ts
@@ -1,7 +1,12 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import { API_BASE_URL, DEFAULT_APP_PATH, GAUZY_API_BASE_SERVER_URL } from '@app/constants';
-import { getAccessTokenCookie, getActiveTeamIdCookie } from '@app/helpers/cookies';
-import axios, { AxiosResponse } from 'axios';
+import {
+	getAccessTokenCookie,
+	getActiveTeamIdCookie,
+	getOrganizationIdCookie,
+	getTenantIdCookie
+} from '@app/helpers/cookies';
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
 const api = axios.create({
 	baseURL: API_BASE_URL,
@@ -92,25 +97,41 @@ function get(
 		: api.get(endpoint);
 }
 
-function post(
-	endpoint: string,
-	data: any,
-	isDirect: boolean,
-	extras?: {
-		tenantId: string;
-	}
+function post<T>(
+	url: string,
+	data?: Record<string, any> | FormData,
+	config?: AxiosRequestConfig<any> & { tenantId?: string; directAPI?: boolean }
 ) {
+	const bearer_token = getAccessTokenCookie();
+	const tenantId = getTenantIdCookie();
+	const organizationId = getOrganizationIdCookie();
+
+	const { directAPI = true } = config || {};
+
 	let baseURL: string | undefined = GAUZY_API_BASE_SERVER_URL.value;
 	baseURL = baseURL ? `${baseURL}/api` : undefined;
 
-	return isDirect && baseURL
-		? apiDirect.post(endpoint, data, {
+	if (baseURL && directAPI && data && !(data instanceof FormData)) {
+		if (!data.tenantId) {
+			data.tenantId = tenantId;
+		}
+
+		if (!data.organizationId) {
+			data.organizationId = organizationId;
+		}
+	}
+
+	return baseURL && directAPI
+		? apiDirect.post<T>(url, data, {
 				baseURL,
+				...config,
 				headers: {
-					...(extras?.tenantId ? { 'tenant-id': extras?.tenantId } : {})
+					Authorization: `Bearer ${bearer_token}`,
+					...(config?.tenantId ? { 'tenant-id': config?.tenantId } : { 'tenant-id': tenantId }),
+					...config?.headers
 				}
 		  })
-		: api.post(endpoint, data);
+		: api.post<T>(url, data);
 }
 
 export { get, post };

diff --git a/apps/web/app/services/server/requests/image-assets.ts b/apps/web/app/services/server/requests/image-assets.ts
@@ -0,0 +1,24 @@
+import { IImageAssets } from '@app/interfaces';
+import { serverFetch } from '../fetch';
+
+type Params = {
+	tenantId: string;
+	bearer_token: string;
+	folder: string;
+	contentType: string;
+};
+
+export function createImageAssetsRequest(params: Params, body: FormData) {
+	return serverFetch<IImageAssets>({
+		path: '/image-assets/upload/' + params.folder,
+		method: 'POST',
+		body,
+		bearer_token: params.bearer_token,
+		init: {
+			headers: {
+				'tenant-id': params.tenantId,
+				'Content-Type': params.contentType
+			}
+		}
+	});
+}
diff --git a/apps/web/lib/settings/profile-avatar.tsx b/apps/web/lib/settings/profile-avatar.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import { imgTitle } from '@app/helpers';
 import { useAuthenticateUser, useImageAssets, useSettings } from '@app/hooks';
-import { IImageAssets } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { Avatar, Button } from 'lib/components';
 import Image from 'next/image';
@@ -34,8 +33,8 @@ export const ProfileAvatar = () => {
 					user.tenantId as string,
 					user?.employee?.organizationId
 				)
-					.then((d: IImageAssets) => {
-						updateAvatar({ imageId: d.id, id: user.id });
+					.then((image) => {
+						updateAvatar({ imageId: image.id, id: user.id });
 					})
 					.finally(() => {
 						setAvatarBtn(false);

diff --git a/apps/web/lib/settings/team-avatar.tsx b/apps/web/lib/settings/team-avatar.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import { imgTitle } from '@app/helpers';
 import { useAuthenticateUser, useImageAssets, useOrganizationTeams } from '@app/hooks';
-import { IImageAssets } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { Avatar, Button } from 'lib/components';
 import { useTheme } from 'next-themes';
@@ -38,11 +37,11 @@ export const TeamAvatar = ({ disabled, bgColor }: { disabled: boolean; bgColor?:
 					user.tenantId as string,
 					user.employee.organizationId
 				)
-					.then((d: IImageAssets) => {
+					.then((image) => {
 						updateOrganizationTeam(activeTeam, {
 							...activeTeam,
-							imageId: d.id,
-							image: d
+							imageId: image.id,
+							image: image
 						});
 					})
 					.finally(() => {

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -27,7 +27,8 @@
 			'cdn-icons-png.flaticon.com', // Remove this domain once the Backend Icons list is added
 			'api.gauzy.co',
 			'apistage.gauzy.co',
-			'gauzy.s3.wasabisys.com'
+			'gauzy.s3.wasabisys.com',
+			'gauzystage.s3.wasabisys.com'
 		]
 	}, // Optional build-time configuration options
 	sentry: {

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -49,7 +49,7 @@
 		"clsx": "^2.0.0",
 		"cmdk": "^0.2.0",
 		"cookie": "^0.5.0",
-		"cookies-next": "^2.1.1",
+		"cookies-next": "^4.1.0",
 		"date-fns": "^2.30.0",
 		"domhandler": "^5.0.3",
 		"embla-carousel-react": "^8.0.0-rc11",

diff --git a/yarn.lock b/yarn.lock
@@ -9874,10 +9874,10 @@ cookie@^0.4.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
-cookies-next@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/cookies-next/-/cookies-next-2.1.2.tgz#78fe2f3e7b68eb0e1c6682c9e1f4e94ce4d09904"
-  integrity sha512-czxcfqVaQlo0Q/3xMgp/2jpspsuLJrIm6D37wlmibP3DAcYT315c8UxQmDMohhAT/GRWpaHzpDEFANBjzTFQGg==
+cookies-next@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cookies-next/-/cookies-next-4.1.0.tgz#1ecf2e4a65abe2ad3ffb3f4ad3d303ae008303c3"
+  integrity sha512-BREVc4TJT4NwXfyKjdjnYFXM6iRns+MYpCd34ClXuYqeisXnkPkbq7Ok9xaqi9mHmV6H2rwPE+p3EpMz4pF/kQ==
   dependencies:
     "@types/cookie" "^0.4.1"
     "@types/node" "^16.10.2"