more work on attachments

* fix frontend env usage

apps/client/src/components/ui/user-avatar.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Avatar } from "@mantine/core";
+import { getAvatarUrl } from "@/lib/config.ts";
 
 interface UserAvatarProps {
   avatarUrl: string;
@@ -13,6 +14,8 @@ interface UserAvatarProps {
 
 export const UserAvatar = React.forwardRef<HTMLInputElement, UserAvatarProps>(
   ({ avatarUrl, name, ...props }: UserAvatarProps, ref) => {
+    const avatar = getAvatarUrl(avatarUrl);
+
     const getInitials = (name: string) => {
       const names = name?.split(" ");
       return names
@@ -21,8 +24,8 @@ export const UserAvatar = React.forwardRef<HTMLInputElement, UserAvatarProps>(
         .join("");
     };
 
-    return avatarUrl ? (
-      <Avatar ref={ref} src={avatarUrl} alt={name} radius="xl" {...props} />
+    return avatar ? (
+      <Avatar ref={ref} src={avatar} alt={name} radius="xl" {...props} />
     ) : (
       <Avatar ref={ref} {...props}>
         {getInitials(name)}

apps/client/src/features/editor/hooks/use-collaboration-url.ts

@@ -1,24 +1,7 @@
+import { getCollaborationUrl } from "@/lib/config.ts";
+
 const useCollaborationURL = (): string => {
-  const PATH = "/collab";
-
-  // TODO: revisit
-  /*
-  if (import.meta.env.VITE_COLLABORATION_URL) {
-    return import.meta.env.VITE_COLLABORATION_URL + PATH;
-  }
-
-  const API_URL = import.meta.env.VITE_BACKEND_API_URL;
-  if (!API_URL) {
-    throw new Error("Backend API URL is not defined");
-  }
-  */
-
-  const API_URL = import.meta.env.DEV
-    ? "http://localhost:3000"
-    : window.location.protocol + "//" + window.location.host;
-
-  const wsProtocol = API_URL.startsWith("https") ? "wss" : "ws";
-  return `${wsProtocol}://${API_URL.split("://")[1]}${PATH}`;
+  return getCollaborationUrl();
 };
 
 export default useCollaborationURL;

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -165,10 +165,10 @@ export default function SpaceTree({ spaceId }: SpaceTreeProps) {
   }, [isDataLoaded.current, currentPage?.id]);
 
   useEffect(() => {
-    if (currentPage) {
-      setTimeout(() => {
-        treeApiRef.current?.select(currentPage.id, { align: "auto" });
-      }, 100);
+    if (currentPage?.id) {
+      treeApiRef.current?.select(currentPage.id, { align: "auto" });
+    } else {
+      treeApiRef.current?.deselectAll();
     }
   }, [currentPage?.id]);
 
@@ -179,12 +179,6 @@ export default function SpaceTree({ spaceId }: SpaceTreeProps) {
     }
   }, [treeApiRef.current]);
 
-  useEffect(() => {
-    if (location.pathname === APP_ROUTE.HOME && treeApiRef.current) {
-      treeApiRef.current.deselectAll();
-    }
-  }, [location.pathname]);
-
   return (
     <div ref={mergedRef} className={classes.treeContainer}>
       {rootElement.current && (

apps/client/src/features/user/components/account-avatar.tsx

@@ -3,7 +3,7 @@ import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { useState } from "react";
 import { useAtom } from "jotai";
 import { UserAvatar } from "@/components/ui/user-avatar.tsx";
-import { FileButton, Button, Text, Popover, Tooltip } from "@mantine/core";
+import { FileButton, Tooltip } from "@mantine/core";
 import { uploadAvatar } from "@/features/user/services/user-service.ts";
 
 const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop("user"));
@@ -29,8 +29,7 @@ export default function AccountAvatar() {
 
     try {
       setIsLoading(true);
-      const upload = await uploadAvatar(selectedFile);
-      console.log(upload);
+      await uploadAvatar(selectedFile);
     } catch (err) {
       console.log(err);
     } finally {

apps/client/src/features/user/services/user-service.ts

@@ -13,8 +13,10 @@ export async function updateUser(data: Partial<IUser>): Promise<IUser> {
 
 export async function uploadAvatar(file: File) {
   const formData = new FormData();
-  formData.append("avatar", file);
-  const req = await api.post("/attachments/upload/avatar", formData, {
+  formData.append("type", "avatar");
+  formData.append("image", file);
+
+  const req = await api.post("/attachments/upload-image", formData, {
     headers: {
       "Content-Type": "multipart/form-data",
     },

apps/client/src/features/workspace/services/workspace-service.ts

@@ -77,3 +77,16 @@ export async function getInvitationById(data: {
   const req = await api.post("/workspace/invites/info", data);
   return req.data;
 }
+
+export async function uploadLogo(file: File) {
+  const formData = new FormData();
+  formData.append("type", "workspace-logo");
+  formData.append("image", file);
+
+  const req = await api.post("/attachments/upload-image", formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return req.data;
+}

apps/client/src/lib/config.ts

@@ -0,0 +1,36 @@
+declare global {
+  interface Window {
+    CONFIG?: Record<string, string>;
+  }
+}
+
+export function getAppUrl(): string {
+  let appUrl = window.CONFIG?.APP_URL || process.env.APP_URL;
+
+  if (!appUrl) {
+    appUrl = import.meta.env.DEV
+      ? "http://localhost:3000"
+      : window.location.protocol + "//" + window.location.host;
+  }
+
+  return appUrl;
+}
+
+export function getBackendUrl(): string {
+  return getAppUrl() + "/api";
+}
+
+export function getCollaborationUrl(): string {
+  const COLLAB_PATH = "/collab";
+
+  const wsProtocol = getAppUrl().startsWith("https") ? "wss" : "ws";
+  return `${wsProtocol}://${getAppUrl().split("://")[1]}${COLLAB_PATH}`;
+}
+
+export function getAvatarUrl(avatarUrl: string) {
+  if (avatarUrl.startsWith("http")) {
+    return avatarUrl;
+  }
+
+  return getBackendUrl() + "/attachments/img/avatar/" + avatarUrl;
+}

apps/client/vite.config.ts

@@ -1,12 +1,23 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import * as path from "path";
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': '/src'
-    }
-  }
-})
+export const envPath = path.resolve(process.cwd(), "..", "..");
+
+export default defineConfig(({ mode }) => {
+  const { APP_URL } = loadEnv(mode, envPath, "");
+
+  return {
+    define: {
+      "process.env": {
+        APP_URL,
+      },
+    },
+    plugins: [react()],
+    resolve: {
+      alias: {
+        "@": "/src",
+      },
+    },
+  };
+});