From f23adbb1758a622a19fca64822eb075ba3d1944b Mon Sep 17 00:00:00 2001 From: Degreat Date: Tue, 16 Apr 2024 08:22:24 +0000 Subject: [PATCH] pull to refresh --- client/app/components/navbar.tsx | 2 +- client/app/root.tsx | 1 - client/app/routes/discussions.tsx | 33 +++++++++++++++++-- client/app/routes/events.tsx | 2 +- client/app/routes/library.tsx | 2 +- client/app/routes/manifest[.]webmanifest.ts | 2 +- client/app/routes/timetable.tsx | 2 +- ...ble_.$year.$programme.$level.$sem.$day.tsx | 2 +- client/app/style.css | 17 ++++++++++ client/package.json | 1 + yarn.lock | 5 +++ 11 files changed, 60 insertions(+), 9 deletions(-) diff --git a/client/app/components/navbar.tsx b/client/app/components/navbar.tsx index 0a274d6..d08aa48 100644 --- a/client/app/components/navbar.tsx +++ b/client/app/components/navbar.tsx @@ -31,7 +31,7 @@ function Navbar() { const { user, unreadNotifications } = useGlobalCtx(); return ( -
+
diff --git a/client/app/root.tsx b/client/app/root.tsx index e8f1c37..f6cc444 100644 --- a/client/app/root.tsx +++ b/client/app/root.tsx @@ -55,7 +55,6 @@ export default function App() { React.useEffect(() => { if (scheme === "light") { - // dynamically change meta theme-color document .querySelector('meta[name="theme-color"]') ?.setAttribute("content", "#FAFAFA"); diff --git a/client/app/routes/discussions.tsx b/client/app/routes/discussions.tsx index 934d5b6..898c53e 100644 --- a/client/app/routes/discussions.tsx +++ b/client/app/routes/discussions.tsx @@ -4,7 +4,13 @@ import { MetaFunction, json, } from "@remix-run/node"; -import { Link, useFetcher, useLoaderData, useLocation } from "@remix-run/react"; +import { + Link, + useFetcher, + useLoaderData, + useLocation, + useRevalidator, +} from "@remix-run/react"; import React from "react"; import { TagsFilter } from "~/components/tags-filter"; import { PostInput } from "~/components/post-input"; @@ -20,6 +26,7 @@ import { DiscussionsEmpty } from "~/components/discussions-empty"; import { renderSummary } from "~/lib/render-summary.server"; import { createTagsQuery } from "~/lib/create-tags-query"; import { includeVotes } from "~/lib/include-votes"; +import PullToRefresh from "pulltorefreshjs"; const PAGE_SIZE = 50; @@ -74,9 +81,31 @@ export const meta: MetaFunction = ({ data }) => { export default function Discussions() { const { posts } = useLoaderData(); const { user } = useGlobalCtx(); + const revalidator = useRevalidator(); + + const contentRef = React.useRef(null); + + React.useEffect(() => { + if (!contentRef.current) { + return; + } + + PullToRefresh.init({ + mainElement: contentRef.current, + onRefresh() { + return new Promise((resolve) => { + revalidator.revalidate(); + setTimeout(resolve, 1500); + }); + }, + iconRefreshing: `
`, + }); + + return PullToRefresh.destroyAll; + }, [revalidator]); return ( -
+
diff --git a/client/app/routes/events.tsx b/client/app/routes/events.tsx index a64d33e..63ef6fc 100644 --- a/client/app/routes/events.tsx +++ b/client/app/routes/events.tsx @@ -53,7 +53,7 @@ export default function Events() { const { user } = useGlobalCtx(); return ( -
+

Events

diff --git a/client/app/routes/library.tsx b/client/app/routes/library.tsx index 93963c5..981f63b 100644 --- a/client/app/routes/library.tsx +++ b/client/app/routes/library.tsx @@ -197,7 +197,7 @@ export default function Library() { const editMode = Boolean($files.length); return ( -
+
diff --git a/client/app/routes/manifest[.]webmanifest.ts b/client/app/routes/manifest[.]webmanifest.ts index d4f9208..de3b808 100644 --- a/client/app/routes/manifest[.]webmanifest.ts +++ b/client/app/routes/manifest[.]webmanifest.ts @@ -9,7 +9,7 @@ export const loader = async () => { { short_name: appName, name: appName, - start_url: "/?version=2", + start_url: "/", display: "standalone", background_color: "#ffffff", display_override: ["fullscreen"], diff --git a/client/app/routes/timetable.tsx b/client/app/routes/timetable.tsx index 9038172..b11c178 100644 --- a/client/app/routes/timetable.tsx +++ b/client/app/routes/timetable.tsx @@ -33,7 +33,7 @@ export default function Timetable() { const { programmes } = useLoaderData(); return ( -
+
diff --git a/client/app/routes/timetable_.$year.$programme.$level.$sem.$day.tsx b/client/app/routes/timetable_.$year.$programme.$level.$sem.$day.tsx index 78fe9d6..8c6af11 100644 --- a/client/app/routes/timetable_.$year.$programme.$level.$sem.$day.tsx +++ b/client/app/routes/timetable_.$year.$programme.$level.$sem.$day.tsx @@ -113,7 +113,7 @@ export default function TimeTable() { const minutes = _minutes - hours * 60; return ( -
+