switch to native remix api instead of some navigator thing
This commit is contained in:
parent
ba57f53222
commit
c5bd37942c
|
@ -16,6 +16,7 @@ import Overlay from "~/components/Overlay";
|
||||||
import { ThreadReply } from "~/components/ThreadReply";
|
import { ThreadReply } from "~/components/ThreadReply";
|
||||||
import prisma from "~/utils/db.server";
|
import prisma from "~/utils/db.server";
|
||||||
import { useNavigate } from "@remix-run/react";
|
import { useNavigate } from "@remix-run/react";
|
||||||
|
import { useRevalidator } from "@remix-run/react";
|
||||||
|
|
||||||
export async function action({ request, params }) {
|
export async function action({ request, params }) {
|
||||||
const threadId = params.threadId;
|
const threadId = params.threadId;
|
||||||
|
@ -131,15 +132,11 @@ export default function Thread() {
|
||||||
const actionData = useActionData();
|
const actionData = useActionData();
|
||||||
const transition = useTransition();
|
const transition = useTransition();
|
||||||
const [replying, setReplying] = useState();
|
const [replying, setReplying] = useState();
|
||||||
const navigate = useNavigate();
|
const revalidator = useRevalidator();
|
||||||
|
|
||||||
const refresh = () => {
|
|
||||||
navigate(".", { replace: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
refresh();
|
revalidator.revalidate();
|
||||||
}, 5000);
|
}, 5000);
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer);
|
||||||
|
@ -147,25 +144,28 @@ export default function Thread() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Overlay>
|
<Overlay>
|
||||||
<div className="fixed top-0 right-0 m-4 space-x-4 rounded border bg-ctp-crust p-2">
|
<div className="fixed top-0 right-0 m-4 flex flex-col rounded border bg-ctp-crust p-2">
|
||||||
<Link
|
<div className="space-x-4">
|
||||||
onClick={(event) => {
|
<Link
|
||||||
event.preventDefault();
|
onClick={(event) => {
|
||||||
document.getElementById(`bottom`).scrollIntoView(true);
|
event.preventDefault();
|
||||||
}}
|
document.getElementById(`bottom`).scrollIntoView(true);
|
||||||
to={`/threads/${data.id}#bottom`}
|
}}
|
||||||
>
|
to={`/threads/${data.id}#bottom`}
|
||||||
Bottom
|
>
|
||||||
</Link>
|
Bottom
|
||||||
<Link
|
</Link>
|
||||||
onClick={(event) => {
|
<Link
|
||||||
event.preventDefault();
|
onClick={(event) => {
|
||||||
document.getElementById(`top`).scrollIntoView(true);
|
event.preventDefault();
|
||||||
}}
|
document.getElementById(`top`).scrollIntoView(true);
|
||||||
to={`/threads/${data.id}#top`}
|
}}
|
||||||
>
|
to={`/threads/${data.id}#top`}
|
||||||
Top
|
>
|
||||||
</Link>
|
Top
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<p>{revalidator.state === "loading" ? "Updating..." : ""}</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="top" className="flex flex-col">
|
<div id="top" className="flex flex-col">
|
||||||
<div
|
<div
|
||||||
|
|
Loading…
Reference in New Issue