Serhii 10 22 (#66)

* fix:10.21

* chroe:lint

* fix:clean_up_apis

frontend/src/api/api.ts

@@ -1,5 +1,5 @@
 import { AxiosInstance } from "axios";
-import { Collection, ImageType } from "types/model";
+import { ImageType } from "types/model";
 
 export interface CollectionCreateFragment {
   title: string;
@@ -24,7 +24,7 @@ export class Api {
   }
   public async handleUpload(formData: FormData): Promise<ImageType | null> {
     try {
-      const response = await this.api.post("/upload/", formData, {
+      const response = await this.api.post("image/upload/", formData, {
         headers: {
           "Content-Type": "multipart/form-data",
         },
@@ -35,68 +35,15 @@ export class Api {
       return null;
     }
   }
-  public async createCollection(
-    data: CollectionCreateFragment,
-  ): Promise<Collection | null> {
-    const response = await this.api.post("/create_collection", data);
-    return response.data;
-  }
-  public async getCollection(id: string): Promise<Collection | null> {
-    const response = await this.api.get(`/get_collection?id=${id}`);
-    return response.data;
-  }
-  public async editCollection(data: Collection): Promise<null> {
-    await this.api.post(`/edit_collection`, data);
-    return null;
-  }
-  public async getAllCollections(): Promise<Array<Collection> | []> {
-    const response = await this.api.get(`/get_collections`);
-    return response.data;
-  }
-  public async deleteCollection(collection_id: string): Promise<null> {
-    await this.api.get(`/delete_collection?id=${collection_id}`);
-    return null;
-  }
-  public async deleteImage(image_id: string): Promise<null> {
-    await this.api.get(`/delete_image?id=${image_id}`);
-    return null;
-  }
+
   public async uploadImage(
     file: File,
     collection_id: string,
   ): Promise<ImageType> {
-    const response = await this.api.post("/upload", {
+    const response = await this.api.post("image/upload", {
       file,
       id: collection_id,
     });
     return response.data;
   }
-  public async getImages(collection_id: string): Promise<Array<ImageType>> {
-    const response = await this.api.get(
-      `/get_images?collection_id=${collection_id}`,
-    );
-    return response.data;
-  }
-  public async translateImages(
-    images: Array<string>,
-  ): Promise<Array<ImageType>> {
-    const response = await this.api.post("/translate", images, {
-      timeout: 300000,
-    });
-    return response.data;
-  }
-
-  public async createSubscription(
-    payment_method_id: string,
-    email: string,
-    name: string,
-  ): Promise<SubscriptionResponse> {
-    // Send payment method to the backend for subscription creation
-    const { data } = await this.api.post("/create_subscription", {
-      payment_method_id,
-      email,
-      name,
-    });
-    return data;
-  }
 }

frontend/src/components/Logo.tsx

@@ -1,9 +1,6 @@
-import smallLogo from "images/small-logo.png";
-
 const Logo = () => {
   return (
     <div className="flex items-center space-x-2 select-none">
-      <img src={smallLogo} alt="K Scale Logo" className="h-6 invert" />
       <span className="text-lg font-bold text-gray-1 font-orbitron tracking-wider">
         Linguaphoto
       </span>

frontend/src/components/collection/Edit.tsx

@@ -42,7 +42,7 @@ const CollectionEdit: React.FC<CollectionEditProps> = ({
       setFeaturedImage(collection.featured_image);
       setReorderImageIds([...collection.images]);
       const asyncfunction = async () => {
-        const { data: images, error } = await client.GET("/get_images", {
+        const { data: images, error } = await client.GET("/image/get_all", {
           params: { query: { collection_id: collection.id } },
         });
         if (error) addAlert(error.detail?.toString(), "error");
@@ -85,7 +85,7 @@ const CollectionEdit: React.FC<CollectionEditProps> = ({
           const asyncfunction = async () => {
             startLoading();
             collection.images = reorderImageIds;
-            const { error } = await client.POST("/edit_collection", {
+            const { error } = await client.POST("/collection/edit", {
               body: { ...collection, featured_image, title, description },
             });
             if (error) addAlert(error.detail?.toString(), "error");
@@ -108,7 +108,7 @@ const CollectionEdit: React.FC<CollectionEditProps> = ({
         break;
       case "publish":
         if (collection) {
-          const { error } = await client.POST("/publish_collection", {
+          const { error } = await client.POST("/collection/set_publish", {
             body: { id: collection.id, flag: !collection.publish_flag },
           });
           if (error) addAlert(error.detail?.toString(), "error");
@@ -163,14 +163,14 @@ const CollectionEdit: React.FC<CollectionEditProps> = ({
         "The image is being tranlated. Please wait a moment.",
         "primary",
       );
-      await client.POST("/translate", { body: { image_id } });
+      await client.POST("/image/translate", { body: { image_id } });
       stopLoading();
     }
   };
   const onDeleteImage = async () => {
     if (deleteImageId && collection) {
       startLoading();
-      const { error } = await client.GET("/delete_image", {
+      const { error } = await client.GET("/image/delete", {
         params: { query: { id: deleteImageId } },
       });
       if (error) addAlert(error.detail?.toString(), "error");

frontend/src/components/collection/New.tsx

@@ -16,11 +16,11 @@ const CollectionNew: React.FC = () => {
     e.preventDefault();
     startLoading();
     const { data: collection, error } = await client.POST(
-      "/create_collection",
+      "/collection/create",
       { body: { title, description } },
     );
     if (error) addAlert(error.detail?.toString(), "error");
-    else if (collection != null) {
+    else if (collection) {
       navigate(`/collection/${collection.id}?Action=edit`);
       addAlert("New collection has been created successfully!", "success");
     } else addAlert("The process has gone wrong!", "error");

frontend/src/components/collection/View.tsx

@@ -14,6 +14,7 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
   const [currentTranscriptionIndex, setCurrentTranscriptionIndex] = useState(0);
   const [currentImage, setCurrentImage] = useState<ImageType | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isImageLoading, setIsImageLoading] = useState<boolean>(true); // New state, default to true
   const { client } = useAuth();
   const { addAlert } = useAlertQueue();
   const [images, setImages] = useState<Array<ImageType> | undefined>([]);
@@ -36,16 +37,20 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
   // Preload images one by one
   const preloadImage = (src: string) => {
     return new Promise<void>((resolve) => {
+      setIsImageLoading(true); // Start loading indicator
       const img = new Image();
       img.src = src;
-      img.onload = () => resolve();
+      img.onload = () => {
+        setIsImageLoading(false); // Stop loading indicator
+        resolve();
+      };
     });
   };
 
   useEffect(() => {
     if (collection) {
       const fetchImages = async () => {
-        const { data: images, error } = await client.GET("/get_images", {
+        const { data: images, error } = await client.GET("/image/get_all", {
           params: { query: { collection_id: collection.id } },
         });
         if (error) addAlert(error.detail?.toString(), "error");
@@ -58,31 +63,49 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
 
   useEffect(() => {
     const loadImagesSequentially = async () => {
-      if (translatedImages.length > 0) {
-        for (const image of translatedImages) {
-          if (image) await preloadImage(image.image_url);
+      if (translatedImages.length > 0 && translatedImages[0]?.image_url) {
+        // Set current image index to 0, so the first image loads first
+        setCurrentImage(translatedImages[0]);
+        await preloadImage(translatedImages[0].image_url);
+
+        // Preload rest of the images isn the background
+        for (let i = 1; i < translatedImages.length; i++) {
+          const image = translatedImages[i];
+          if (image?.image_url) {
+            preloadImage(image.image_url);
+          }
         }
-        setCurrentImage(translatedImages[currentImageIndex]);
       }
     };
 
     loadImagesSequentially();
-  }, [translatedImages, currentImageIndex]);
+  }, [translatedImages]);
 
-  // Navigate between images
-  const handleNext = () => {
+  // Handle Next Image
+  const handleNext = async () => {
     if (currentImageIndex < translatedImages.length - 1) {
-      setCurrentImageIndex(currentImageIndex + 1);
       setCurrentTranscriptionIndex(0);
-      window.scrollTo(0, 0);
+      const nextImage = translatedImages[currentImageIndex + 1];
+      if (nextImage?.image_url) {
+        setCurrentImage(nextImage);
+        await preloadImage(nextImage.image_url);
+        window.scrollTo(0, 0);
+      }
+      setCurrentImageIndex(currentImageIndex + 1);
     }
   };
 
-  const handlePrev = () => {
+  // Handle Previous Image
+  const handlePrev = async () => {
     if (currentImageIndex > 0) {
-      setCurrentImageIndex(currentImageIndex - 1);
       setCurrentTranscriptionIndex(0);
-      window.scrollTo(0, 0);
+      const prevImage = translatedImages[currentImageIndex - 1];
+      if (prevImage?.image_url) {
+        setCurrentImage(prevImage);
+        await preloadImage(prevImage.image_url);
+        window.scrollTo(0, 0);
+      }
+      setCurrentImageIndex(currentImageIndex - 1);
     }
   };
 
@@ -134,14 +157,10 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
   const FantasyLoading = () => {
     return (
       <div className="relative min-h-screen overflow-hidden">
-        {/* Loader Wrapper */}
         <div className="fixed inset-0 z-50 flex justify-center items-center bg-gray-12 transition-opacity duration-1000 opacity-100">
           <div className="relative w-36 h-36">
-            {/* Outer Spinner */}
             <div className="absolute inset-0 border-4 border-transparent border-t-teal-500 rounded-full animate-spin"></div>
-            {/* Middle Spinner */}
             <div className="absolute inset-1 border-4 border-transparent border-t-red-500 rounded-full animate-spin-reverse"></div>
-            {/* Inner Spinner */}
             <div className="absolute inset-4 border-4 border-transparent border-t-yellow-500 rounded-full animate-spin"></div>
           </div>
         </div>
@@ -157,13 +176,14 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
         currentImage && (
           <div className="flex flex-col align-items-center w-full">
             <div className="w-full absolute left-0">
+              {isImageLoading && <FantasyLoading />} {/* Show image loading */}
               <img
                 draggable="false"
                 src={currentImage.image_url}
                 alt="Collection Image"
                 className="w-full select-none"
                 style={
-                  currentImage.transcriptions.length != 0
+                  currentImage.transcriptions.length !== 0
                     ? { marginBottom: "230px" }
                     : {}
                 }
@@ -173,24 +193,22 @@ const CollectionView: React.FC<CollectionViewProps> = ({ collection }) => {
             <div className="fixed bottom-0 left-0 w-full px-4 py-1 text-center bg-gray-1/30 backdrop-blur-lg">
               <Container>
                 <div className="rounded-md bg-gray-12 p-2">
-                  {currentImage.transcriptions.length != 0 ? (
+                  {currentImage.transcriptions.length !== 0 ? (
                     <>
                       <p className="mt-2 px-12">
                         {currentImage.transcriptions.map(
-                          (transcription, index) => {
-                            return (
-                              <span
-                                key={index}
-                                className={
-                                  index === currentTranscriptionIndex
-                                    ? ""
-                                    : "text-gray-400"
-                                }
-                              >
-                                {transcription.text}
-                              </span>
-                            );
-                          },
+                          (transcription, index) => (
+                            <span
+                              key={index}
+                              className={
+                                index === currentTranscriptionIndex
+                                  ? ""
+                                  : "text-gray-400"
+                              }
+                            >
+                              {transcription.text}
+                            </span>
+                          ),
                         )}
                       </p>
                       <p className="mt-2">

frontend/src/contexts/AuthContext.tsx

@@ -75,7 +75,7 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
   useEffect(() => {
     if (apiKeyId) {
       const fetch_data = async () => {
-        const { data, error } = await client.GET("/me");
+        const { data, error } = await client.GET("/user/me");
         if (error) {
           signout();
         } else {