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)
This commit is contained in:
!MAD! 2023-05-29 15:56:49 +05:30 committed by GitHub
parent 989f8de4ca
commit 3769795f9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 130 additions and 114 deletions

View File

@ -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;

View File

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

View File

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

View File

@ -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 = ({
file,
setFiles,
}: {
interface FileComponentProps {
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;

View File

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

View File

@ -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 => {