fix(Analytics): no tags tracking for upload & crawl (#1024)

* 🚚 create useCrawlApi to use in useCrawler hook * 🚑 fix tracking in Crawl * 🧑‍💻 add hot reloading within docker containers * 🚑 fix tracking for upload * 🚚 create useUploadApi for fileUpload request * 📈 add june tag for Language change * 🩹 revert dependencies
QuivrHQ · Aug 23, 2023 · 2b74ebc · 2b74ebc
1 parent 0ca25e2
commit 2b74ebc
Show file tree

Hide file tree

Showing 12 changed files with 192 additions and 97 deletions.
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -32,7 +32,7 @@ services:
       context: backend
       dockerfile: Dockerfile
     container_name: backend-core
-    command: uvicorn main:app --host 0.0.0.0 --port 5050
+    command: uvicorn main:app --reload --host 0.0.0.0 --port 5050
     restart: always
     volumes:
       - ./backend/:/code/
@@ -49,7 +49,7 @@ services:
       context: backend
       dockerfile: Dockerfile
     container_name: backend-chat
-    command: uvicorn chat_service:app --host 0.0.0.0 --port 5050
+    command: uvicorn --reload chat_service:app --host 0.0.0.0 --port 5050
     restart: always
     volumes:
       - ./backend/:/code/
@@ -66,7 +66,7 @@ services:
       context: backend
       dockerfile: Dockerfile
     container_name: backend-crawl
-    command: uvicorn crawl_service:app --host 0.0.0.0 --port 5050
+    command: uvicorn --reload crawl_service:app --host 0.0.0.0 --port 5050
     restart: always
     volumes:
       - ./backend/:/code/
@@ -83,7 +83,7 @@ services:
       context: backend
       dockerfile: Dockerfile
     container_name: backend-upload
-    command: uvicorn upload_service:app --host 0.0.0.0 --port 5050
+    command: uvicorn --reload upload_service:app --host 0.0.0.0 --port 5050
     restart: always
     volumes:
       - ./backend/:/code/

diff --git a/frontend/app/upload/components/Crawler/hooks/useCrawler.ts b/frontend/app/upload/components/Crawler/hooks/useCrawler.ts
@@ -1,41 +1,41 @@
-/* eslint-disable */
+import { UUID } from "crypto";
 import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { useCrawlApi } from "@/lib/api/crawl/useCrawlApi";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
-import { useAxios, useToast } from "@/lib/hooks";
+import { useToast } from "@/lib/hooks";
+import { redirectToLogin } from "@/lib/router/redirectToLogin";
 import { useEventTracking } from "@/services/analytics/useEventTracking";
 
-import { redirectToLogin } from "@/lib/router/redirectToLogin";
-import { UUID } from "crypto";
 import { isValidUrl } from "../helpers/isValidUrl";
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useCrawler = () => {
   const [isCrawling, setCrawling] = useState(false);
   const urlInputRef = useRef<HTMLInputElement | null>(null);
   const { session } = useSupabase();
   const { publish } = useToast();
-  const { axiosInstance } = useAxios();
   const { track } = useEventTracking();
 
+  const { crawlWebsiteUrl } = useCrawlApi();
   if (session === null) {
     redirectToLogin();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {t, i18n} = useTranslation(["translation","upload"]);
+  const { t } = useTranslation(["translation", "upload"]);
 
   const crawlWebsite = useCallback(
     async (brainId: UUID | undefined) => {
       // Validate URL
       const url = urlInputRef.current ? urlInputRef.current.value : null;
 
-      if (!url || !isValidUrl(url)) {
+      if (url === null || !isValidUrl(url)) {
         void track("URL_INVALID");
 
         publish({
           variant: "danger",
-          text: t("invalidUrl",{ns:"upload"})
+          text: t("invalidUrl", { ns: "upload" }),
         });
 
         return;
@@ -51,15 +51,16 @@ export const useCrawler = () => {
       };
 
       setCrawling(true);
+
       void track("URL_CRAWLED");
 
       try {
         console.log("Crawling website...", brainId);
         if (brainId !== undefined) {
-          const response = await axiosInstance.post(
-            `/crawl?brain_id=${brainId}`,
-            config
-          );
+          const response = await crawlWebsiteUrl({
+            brainId,
+            config,
+          });
 
           publish({
             variant: response.data.type,
@@ -69,19 +70,21 @@ export const useCrawler = () => {
       } catch (error: unknown) {
         publish({
           variant: "danger",
-          text: t("crawlFailed",{ message: JSON.stringify(error),ns:"upload"})
+          text: t("crawlFailed", {
+            message: JSON.stringify(error),
+            ns: "upload",
+          }),
         });
       } finally {
         setCrawling(false);
       }
     },
-    [session.access_token, publish]
+    [session.access_token]
   );
 
   return {
     isCrawling,
     urlInputRef,
-
     crawlWebsite,
   };
 };
diff --git a/frontend/app/upload/components/Crawler/index.tsx b/frontend/app/upload/components/Crawler/index.tsx
@@ -1,6 +1,4 @@
-/* eslint-disable */
 "use client";
-import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
 
 import Button from "@/lib/components/ui/Button";
@@ -14,44 +12,35 @@ export const Crawler = (): JSX.Element => {
   const { urlInputRef, isCrawling, crawlWebsite } = useCrawler();
   const { currentBrain } = useBrainContext();
 
-  const {t, i18n} = useTranslation(["translation","upload"]);
+  const { t } = useTranslation(["translation", "upload"]);
 
-  function Crawler() {
-    return (
-      <div className="w-full">
-        <div className="flex justify-center gap-5 px-6">
-          <div className="max-w-xl w-full">
-            <div className="flex-col justify-center gap-5">
-              <Card className="h-32 flex gap-5 justify-center items-center px-5">
-                <div className="text-center max-w-sm w-full flex flex-col gap-5 items-center">
-                  <Field
-                    name="crawlurl"
-                    ref={urlInputRef}
-                    type="text"
-                    placeholder={t("webSite",{ ns: "upload"})}
-                    className="w-full"
-                  />
-                </div>
-                <div className="flex flex-col items-center justify-center gap-5">
-                  <Button
-                    isLoading={isCrawling}
-                    onClick={() => void crawlWebsite(currentBrain?.id)}
-                  >
-                    {t("crawlButton")}
-                  </Button>
-                </div>
-              </Card>
-            </div>
+  return (
+    <div className="w-full">
+      <div className="flex justify-center gap-5 px-6">
+        <div className="max-w-xl w-full">
+          <div className="flex-col justify-center gap-5">
+            <Card className="h-32 flex gap-5 justify-center items-center px-5">
+              <div className="text-center max-w-sm w-full flex flex-col gap-5 items-center">
+                <Field
+                  name="crawlurl"
+                  ref={urlInputRef}
+                  type="text"
+                  placeholder={t("webSite", { ns: "upload" })}
+                  className="w-full"
+                />
+              </div>
+              <div className="flex flex-col items-center justify-center gap-5">
+                <Button
+                  isLoading={isCrawling}
+                  onClick={() => void crawlWebsite(currentBrain?.id)}
+                >
+                  {t("crawlButton")}
+                </Button>
+              </div>
+            </Card>
           </div>
         </div>
       </div>
-    );
-  }
-
-  return (
-    <Suspense fallback = {"Loading..."}>
-      <Crawler />
-    </Suspense>
-  )
-
+    </div>
+  );
 };
diff --git a/frontend/app/upload/components/FileUploader/hooks/useFileUploader.ts b/frontend/app/upload/components/FileUploader/hooks/useFileUploader.ts
@@ -1,51 +1,46 @@
-/* eslint-disable */
+/* eslint-disable max-lines */
+import axios from "axios";
+import { UUID } from "crypto";
 import { useCallback, useState } from "react";
 import { FileRejection, useDropzone } from "react-dropzone";
+import { useTranslation } from "react-i18next";
 
+import { useUploadApi } from "@/lib/api/upload/useUploadApi";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
-import { useAxios, useToast } from "@/lib/hooks";
+import { useToast } from "@/lib/hooks";
 import { redirectToLogin } from "@/lib/router/redirectToLogin";
 import { useEventTracking } from "@/services/analytics/useEventTracking";
-import axios from "axios";
-import { UUID } from "crypto";
-import { useTranslation } from "react-i18next";
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useFileUploader = () => {
   const { track } = useEventTracking();
   const [isPending, setIsPending] = useState(false);
   const { publish } = useToast();
   const [files, setFiles] = useState<File[]>([]);
   const { session } = useSupabase();
-
+  const { uploadFile } = useUploadApi();
   const { currentBrain } = useBrainContext();
-  const { axiosInstance } = useAxios();
 
   if (session === null) {
     redirectToLogin();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {t, i18n} = useTranslation(["upload"]);
+  const { t } = useTranslation(["upload"]);
 
   const upload = useCallback(
     async (file: File, brainId: UUID) => {
       const formData = new FormData();
       formData.append("uploadFile", file);
       try {
         void track("FILE_UPLOADED");
-        const response = await axiosInstance.post(
-          `/upload?brain_id=${brainId}`,
-          formData
-        );
-        track("FILE_UPLOADED");
+        const response = await uploadFile({ brainId, formData });
         publish({
           variant: response.data.type,
           text:
-            (response.data.type === "success"
-              ? t("success",{ ns: "upload" })
-              : t("error",{ message: response.data.message,  ns: "upload" })
-            ) 
+            response.data.type === "success"
+              ? t("success", { ns: "upload" })
+              : t("error", { message: response.data.message, ns: "upload" }),
         });
       } catch (e: unknown) {
         if (axios.isAxiosError(e) && e.response?.status === 403) {
@@ -62,17 +57,17 @@ export const useFileUploader = () => {
         } else {
           publish({
             variant: "danger",
-            text: t("error",{ message: e,  ns: "upload" })
+            text: t("error", { message: e, ns: "upload" }),
           });
         }
       }
     },
-    [session.access_token, publish]
+    [session.access_token]
   );
 
   const onDrop = (acceptedFiles: File[], fileRejections: FileRejection[]) => {
     if (fileRejections.length > 0) {
-      publish({ variant: "danger", text: t("maxSizeError",{ ns: "upload" }) });
+      publish({ variant: "danger", text: t("maxSizeError", { ns: "upload" }) });
 
       return;
     }
@@ -85,11 +80,12 @@ export const useFileUploader = () => {
       if (isAlreadyInFiles) {
         publish({
           variant: "warning",
-          text:  t("alreadyAdded",{ fileName: file.name,  ns: "upload" }),
+          text: t("alreadyAdded", { fileName: file.name, ns: "upload" }),
         });
         acceptedFiles.splice(i, 1);
       }
     }
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     setFiles((files) => [...files, ...acceptedFiles]);
   };
 
@@ -104,7 +100,7 @@ export const useFileUploader = () => {
     }
     setIsPending(true);
     if (currentBrain?.id !== undefined) {
-      await Promise.all(files.map((file) => upload(file, currentBrain?.id)));
+      await Promise.all(files.map((file) => upload(file, currentBrain.id)));
       setFiles([]);
     } else {
       publish({
@@ -128,7 +124,6 @@ export const useFileUploader = () => {
     isDragActive,
     open,
     uploadAllFiles,
-
     files,
     setFiles,
   };

diff --git a/frontend/app/upload/components/FileUploader/index.tsx b/frontend/app/upload/components/FileUploader/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable */
 "use client";
 import { AnimatePresence } from "framer-motion";
 import { useTranslation } from "react-i18next";
@@ -21,8 +20,7 @@ export const FileUploader = (): JSX.Element => {
     setFiles,
   } = useFileUploader();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {t, i18n} = useTranslation(["translation","upload"]);
+  const { t } = useTranslation(["translation", "upload"]);
 
   return (
     <section
@@ -35,13 +33,13 @@ export const FileUploader = (): JSX.Element => {
             <input {...getInputProps()} />
             <div className="text-center p-6 max-w-sm w-full flex flex-col gap-5 items-center">
               {isDragActive ? (
-                <p className="text-blue-600">{t("drop",{"ns":"upload"})}</p>
+                <p className="text-blue-600">{t("drop", { ns: "upload" })}</p>
               ) : (
                 <button
                   onClick={open}
                   className="opacity-50 h-full cursor-pointer hover:opacity-100 hover:underline transition-opacity"
                 >
-                  {t("dragAndDrop",{"ns":"upload"})}
+                  {t("dragAndDrop", { ns: "upload" })}
                 </button>
               )}
             </div>
@@ -73,6 +71,4 @@ export const FileUploader = (): JSX.Element => {
       </div>
     </section>
   );
-
-
 };
diff --git a/frontend/app/upload/page.tsx b/frontend/app/upload/page.tsx
@@ -57,8 +57,8 @@ const UploadPage = (): JSX.Element => {
     );
   }
 
-  const Upload = () => {
-    return (
+  return (
+    <Suspense fallback="Loading...">
       <main className="pt-10">
         <PageHeading
           title={t("title", { ns: "upload" })}
@@ -75,12 +75,6 @@ const UploadPage = (): JSX.Element => {
           </Link>
         </div>
       </main>
-    );
-  };
-
-  return (
-    <Suspense fallback="Loading...">
-      <Upload />
     </Suspense>
   );
 };