image fixes (#193)

* image fixes * update frontend * format * 2048 -> 1536
kscalelabs · Jul 27, 2024 · f68de6d · f68de6d
1 parent c78bfc1
commit f68de6d
Show file tree

Hide file tree

Showing 13 changed files with 290 additions and 198 deletions.
diff --git a/frontend/src/components/files/UploadImage.tsx b/frontend/src/components/files/UploadImage.tsx
@@ -9,6 +9,9 @@ import { FileWithPath, useDropzone } from "react-dropzone";
 import ReactCrop, { type Crop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
 
+const MAX_FILE_SIZE = 25 * 1536 * 1536;
+const MAX_FILE_MB = MAX_FILE_SIZE / 1024 / 1024;
+
 interface ImageUploadProps {
   onUploadSuccess: (url: string) => void;
 }
@@ -23,7 +26,6 @@ const ImageUploadComponent: React.FC<ImageUploadProps> = ({
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
   const { theme } = useTheme();
-  const MAX_FILE_SIZE = 25 * 1024 * 1024;
   const validFileTypes = ["image/png", "image/jpeg", "image/jpg"];
   const [showModal, setShowModal] = useState(false);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -44,9 +46,7 @@ const ImageUploadComponent: React.FC<ImageUploadProps> = ({
 
     // Validate file size
     if (file.size > MAX_FILE_SIZE) {
-      setFileError(
-        `File size should not exceed ${MAX_FILE_SIZE / 1024 / 1024} MB`,
-      );
+      setFileError(`File size should not exceed ${MAX_FILE_MB} MB`);
       setSelectedFile(null);
       return;
     }
@@ -201,6 +201,7 @@ const ImageUploadComponent: React.FC<ImageUploadProps> = ({
             <>
               <ReactCrop
                 crop={crop}
+                aspect={1}
                 onChange={(c) => {
                   console.log(c);
                   setCrop(c);

diff --git a/frontend/src/hooks/api.tsx b/frontend/src/hooks/api.tsx
@@ -14,6 +14,13 @@ export interface Listing {
   description?: string;
 }
 
+export interface NewListing {
+  name: string;
+  description?: string;
+  artifact_ids: string[];
+  child_ids: string[];
+}
+
 interface GithubAuthResponse {
   api_key: string;
 }
@@ -73,13 +80,13 @@ export class api {
 
   public async logout(): Promise<void> {
     return this.callWrapper(async () => {
-      await this.api.delete<boolean>("/users/logout/");
+      await this.api.delete<boolean>("/users/logout");
     });
   }
 
   public async me(): Promise<MeResponse> {
     return this.callWrapper(async () => {
-      const res = await this.api.get<MeResponse>("/users/me/");
+      const res = await this.api.get<MeResponse>("/users/me");
       return res.data;
     });
   }
@@ -96,7 +103,7 @@ export class api {
     searchQuery?: string,
   ): Promise<[Listing[], boolean]> {
     return this.callWrapper(async () => {
-      const response = await this.api.get("/listings/", {
+      const response = await this.api.get("/listings/search", {
         params: { page, ...(searchQuery ? { search_query: searchQuery } : {}) },
       });
       return response.data;
@@ -107,7 +114,7 @@ export class api {
     return this.callWrapper(async () => {
       const params = new URLSearchParams();
       userIds.forEach((id) => params.append("ids", id));
-      const response = await this.api.get("/users/batch/", {
+      const response = await this.api.get("/users/batch", {
         params,
       });
       const map = new Map();
@@ -120,7 +127,7 @@ export class api {
 
   public async getMyListings(page: number): Promise<[Listing[], boolean]> {
     return this.callWrapper(async () => {
-      const response = await this.api.get("/listings/me/", {
+      const response = await this.api.get("/listings/me", {
         params: { page },
       });
       return response.data;
@@ -141,21 +148,21 @@ export class api {
     });
   }
 
-  public async addListing(listing: Listing): Promise<void> {
+  public async addListing(listing: NewListing): Promise<void> {
     return this.callWrapper(async () => {
-      await this.api.post("/listings/add/", listing);
+      await this.api.post("/listings/add", listing);
     });
   }
 
   public async deleteListing(id: string | undefined): Promise<void> {
     return this.callWrapper(async () => {
-      await this.api.delete(`/listings/delete/${id}/`);
+      await this.api.delete(`/listings/delete/${id}`);
     });
   }
 
   public async editListing(listing: Listing): Promise<void> {
     return this.callWrapper(async () => {
-      await this.api.post(`/listings/edit/${listing.id}/`, listing);
+      await this.api.post(`/listings/edit/${listing.id}`, listing);
     });
   }