Fix/poplayout warning (#194)

* fix(auth): use redirect instead of router

* fix(auth): use router for after render redirects

* fix(anims): forward ref in file component

* fix(anims): forward ref in document item

* fix(CI)

frontend/app/explore/DocumentItem/index.tsx

@@ -3,7 +3,14 @@ import Spinner from "@/app/components/ui/Spinner";
 import { useSupabase } from "@/app/supabase-provider";
 import { useToast } from "@/lib/hooks/useToast";
 import axios from "axios";
-import { Dispatch, SetStateAction, Suspense, useState } from "react";
+import {
+  Dispatch,
+  RefObject,
+  SetStateAction,
+  Suspense,
+  forwardRef,
+  useState,
+} from "react";
 import Button from "../../components/ui/Button";
 import { AnimatedCard } from "../../components/ui/Card";
 import Modal from "../../components/ui/Modal";
@@ -15,7 +22,8 @@ interface DocumentProps {
   setDocuments: Dispatch<SetStateAction<Document[]>>;
 }
 
-const DocumentItem = ({ document, setDocuments }: DocumentProps) => {
+const DocumentItem = forwardRef(
+  ({ document, setDocuments }: DocumentProps, forwardedRef) => {
     const [isDeleting, setIsDeleting] = useState(false);
     const { publish } = useToast();
     const { session } = useSupabase();
@@ -48,6 +56,7 @@ const DocumentItem = ({ document, setDocuments }: DocumentProps) => {
         animate={{ x: 0, opacity: 1 }}
         exit={{ x: 64, opacity: 0 }}
         layout
+        ref={forwardedRef as RefObject<HTMLDivElement>}
         className="flex flex-col sm:flex-row sm:items-center justify-between w-full p-5 gap-5"
       >
         <p className="text-lg leading-tight max-w-sm">{document.name}</p>
@@ -91,7 +100,8 @@ const DocumentItem = ({ document, setDocuments }: DocumentProps) => {
         </div>
       </AnimatedCard>
     );
-};
+  }
+);
 
 DocumentItem.displayName = "DocumentItem";
 export default DocumentItem;

frontend/app/explore/page.tsx

@@ -41,7 +41,7 @@ export default function ExplorePage() {
       setIsPending(false);
     };
     fetchDocuments();
-  }, []);
+  }, [session.access_token]);
 
   return (
     <main>

frontend/app/upload/components/Crawler/hooks/useCrawler.ts

@@ -61,7 +61,7 @@ export const useCrawler = () => {
     } finally {
       setCrawling(false);
     }
-  }, [session.access_token]);
+  }, [session.access_token, publish]);
 
   return {
     isCrawling,

frontend/app/upload/components/FileUploader/components/FileComponent.tsx

@@ -1,20 +1,21 @@
 import { motion } from "framer-motion";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, RefObject, SetStateAction, forwardRef } from "react";
 import { MdClose } from "react-icons/md";
 
-export const FileComponent = ({
+interface FileComponentProps {
-  file,
-  setFiles,
-}: {
   file: File;
   setFiles: Dispatch<SetStateAction<File[]>>;
-}) => {
+}
+
+const FileComponent = forwardRef(
+  ({ file, setFiles }: FileComponentProps, forwardedRef) => {
     return (
       <motion.div
         initial={{ x: "-10%", opacity: 0 }}
         animate={{ x: "0%", opacity: 1 }}
         exit={{ x: "10%", opacity: 0 }}
         layout
+        ref={forwardedRef as RefObject<HTMLDivElement>}
         className="relative flex flex-row gap-1 py-2 dark:bg-black border-b last:border-none border-black/10 dark:border-white/25 leading-none px-6 overflow-hidden"
       >
         <div className="flex flex-1">
@@ -38,4 +39,9 @@ export const FileComponent = ({
         </button>
       </motion.div>
     );
-};
+  }
+);
+
+FileComponent.displayName = "FileComponent";
+
+export default FileComponent;

frontend/app/upload/components/FileUploader/hooks/useFileUploader.ts

@@ -45,7 +45,7 @@ export const useFileUploader = () => {
         });
       }
     },
-    [session.access_token]
+    [session.access_token, publish]
   );
 
   const onDrop = (acceptedFiles: File[], fileRejections: FileRejection[]) => {

frontend/app/upload/components/FileUploader/index.tsx

@@ -2,7 +2,7 @@
 import { AnimatePresence } from "framer-motion";
 import Button from "../../../components/ui/Button";
 import Card from "../../../components/ui/Card";
-import { FileComponent } from "./components/FileComponent";
+import FileComponent from "./components/FileComponent";
 import { useFileUploader } from "./hooks/useFileUploader";
 
 export const FileUploader = (): JSX.Element => {