fix(UI): glitches in ui fixed (#32)

* fix(UI): glitches in ui fixed * fix[API_KEY]: error checking invalid api keys on save * refactor[UI]: error handling in UI fixed * fix[file_upload]: refactor error handling state * fix[UI]: small refactory for condition
sinaptik-ai · Oct 23, 2024 · 274d310 · 274d310
1 parent a94157c
commit 274d310
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 10 deletions.
diff --git a/backend/app/api/v1/user.py b/backend/app/api/v1/user.py
@@ -30,11 +30,19 @@ def request_user_api_key(api_key_request: APIKeyRequest, db: Session = Depends(g
 def save_user_api_key(
     api_key_request: UpdateAPIKeyRequest, db: Session = Depends(get_db)
 ):
+
     users = user_repository.get_users(db, n=1)
 
     if not users:
         raise HTTPException(status_code=404, detail="No User Exists!")
 
+    try:
+        requests.get_user_usage_data(api_key_request.api_key)
+    except Exception:
+        raise HTTPException(
+            status_code=400, detail="Invalid API Key"
+        )
+
     user_repository.update_user_api_key(db, users[0].id, api_key_request.api_key)
 
     return {

diff --git a/frontend/src/app/(app)/projects/[projectId]/page.tsx b/frontend/src/app/(app)/projects/[projectId]/page.tsx
@@ -105,6 +105,8 @@ export default function Project() {
     hasNextPage,
     isFetchingNextPage,
     isLoading: isAssetsLoading,
+    isFetching: isAssetsFetching,
+    refetch: refetchAssets,
   } = useInfiniteQuery({
     queryKey: ["projectAssets", id],
     queryFn: ({ pageParam = 1 }) => GetProjectAssets(id, pageParam, pageSize),
@@ -200,11 +202,11 @@ export default function Project() {
 
   const handleFileUpload = async (fileList: FileList | null) => {
     if (fileList) {
+      setUploadingFile(true);
       const files = Array.from(fileList);
       setUploadingFiles((prev) => [...prev, ...files]);
 
       try {
-        setUploadingFile(true);
         for (const file of files) {
           const response = await AddProjectAsset(id, file);
 
@@ -216,11 +218,12 @@ export default function Project() {
         setUploadingFile(false);
         setUploadingFiles([]);
         setUploadedFiles([]);
-        queryClient.invalidateQueries({ queryKey: ["projectAssets"] });
+        refetchAssets();
       } catch (error) {
         console.error("Error uploading files:", error);
         setUploadingFiles([]);
         setUploadedFiles([]);
+        setUploadingFile(false);
       }
     }
   };
@@ -300,6 +303,12 @@ export default function Project() {
     }
   }, [inView, fetchNextPage, hasNextPage]);
 
+  const shouldShowDragAndDrop =
+    !uploadingFile &&
+    !isAssetsLoading &&
+    !isAssetsFetching &&
+    (!assets || assets.length === 0);
+
   return (
     <>
       <Head>
@@ -370,7 +379,7 @@ export default function Project() {
 
           {activeTab === "assets" && (
             <>
-              {!uploadingFile && assets && assets?.length === 0 ? (
+              {shouldShowDragAndDrop ? (
                 <DragAndDrop
                   onFileSelect={handleFileUpload}
                   accept={[".pdf", "application/pdf"]}

diff --git a/frontend/src/app/(app)/projects/[projectId]/processes/[processId]/page.tsx b/frontend/src/app/(app)/projects/[projectId]/processes/[processId]/page.tsx
@@ -4,7 +4,11 @@ import Head from "next/head";
 import { useParams } from "next/navigation";
 import Breadcrumb from "@/components/ui/Breadcrumb";
 import { Download } from "lucide-react";
-import { ProcessDetailsResponse, ProcessStatus } from "@/interfaces/processes";
+import {
+  ProcessData,
+  ProcessDetailsResponse,
+  ProcessStatus,
+} from "@/interfaces/processes";
 import { Column, Table } from "@/components/ui/Table";
 import Label from "@/components/ui/Label";
 import DateLabel from "@/components/ui/Date";
@@ -18,6 +22,8 @@ import { truncateTextFromCenter } from "@/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import PageLoader from "@/components/ui/PageLoader";
 import { Card } from "@/components/ui/Card";
+import File from "@/components/FileIconCard";
+import { useRouter } from "next/navigation";
 
 const statusLabel = (process: ProcessDetailsResponse) => {
   switch (process.status) {
@@ -68,6 +74,7 @@ const columns: Column<ProcessDetailsResponse>[] = [
 
 export default function Process() {
   const params = useParams();
+  const router = useRouter();
   const processId = (params?.processId as string) || "";
   const projectId = (params?.projectId as string) || "";
   const {
@@ -97,6 +104,10 @@ export default function Process() {
   const project = processResponse?.data?.data?.[0]?.process?.project;
   const process = processResponse?.data?.data?.[0]?.process;
 
+  const handleFileClick = (process: ProcessData) => {
+    router.push(`/projects/${projectId}/processes/${process.id}/csv`);
+  };
+
   useEffect(() => {
     if (isError) {
       setErrorMessage("Something went wrong fetching process");
@@ -134,6 +145,15 @@ export default function Process() {
         </div>
       )}
 
+      <div className="pb-4">
+        <File
+          key={process?.id}
+          name={`${process?.name}.csv`}
+          type="spreadsheet"
+          onClick={() => handleFileClick(process)}
+        />
+      </div>
+
       {isLoading ? (
         <PageLoader />
       ) : errorMessage ? (

diff --git a/frontend/src/app/(app)/projects/page.tsx b/frontend/src/app/(app)/projects/page.tsx
@@ -63,7 +63,19 @@ export default function Projects() {
 
   const { data: response, isLoading } = useQuery({
     queryKey: ["projects", page, pageSize],
-    queryFn: () => GetProjects(page, pageSize),
+    queryFn: async () => {
+      try {
+        const resp = await GetProjects(page, pageSize);
+        if (resp?.data?.data.length === 0) {
+          newProject();
+        }
+        return resp;
+      } catch (error) {
+        console.error("Failed to fetch projects:", error);
+        toast.error("Failed to fetch projects. Please try again.");
+        throw error;
+      }
+    },
   });
 
   const projects: ProjectData[] = response?.data?.data || [];
@@ -78,10 +90,6 @@ export default function Projects() {
     router.push("/projects/new");
   };
 
-  if (!isLoading && projects?.length === 0) {
-    newProject();
-  }
-
   const breadcrumbItems = [{ label: "Projects", href: "/" }];
 
   const viewOptions = [

diff --git a/frontend/src/app/api-key-setup/page.tsx b/frontend/src/app/api-key-setup/page.tsx
@@ -36,7 +36,7 @@ const ApiKeySetup: React.FC = () => {
       router.push("/"); // Redirect to the main app
     } catch (error) {
       console.error("Error saving API key:", error);
-      toast.error("Failed to save API key. Please try again.");
+      toast.error("Invalid API Key. Please try again.");
     }
   };