fix(app): reloading while in a channel causes redirect to /channels/@me

packages/huginn-app/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "huginn"
-version = "0.3.3"
+version = "0.3.4-nightly.2"
 description = "Huginn's desktop application"
 authors = [ "Matin" ]
 repository = ""

packages/huginn-app/src/components/channels/ChannelMessages.tsx

@@ -28,7 +28,7 @@ export default function ChannelMessages(props: { channelId: Snowflake; messages:
 
    const messageRenderInfos = useMemo<MessageRenderInfo[]>(() => calculateMessageRenderInfos(), [props.messages, props.channelId]);
    const scroll = useRef<HTMLOListElement>(null);
-   const previousScrollTop = useRef(0);
+   const previousScrollTop = useRef(-1);
    const itemsHeight = useRef(0);
    const listHasUpdated = useRef(false);
    const shouldScrollOnNextRender = useRef(false);
@@ -76,6 +76,14 @@ export default function ChannelMessages(props: { channelId: Snowflake; messages:
       return value;
    }
 
+   function scrollDown() {
+      if (!scroll.current) {
+         return;
+      }
+
+      scroll.current.scrollTop = scroll.current.scrollHeight - scroll.current.clientHeight;
+   }
+
    function getFullHeight(element?: HTMLLIElement | null) {
       if (!element) {
          return 0;
@@ -91,6 +99,8 @@ export default function ChannelMessages(props: { channelId: Snowflake; messages:
       if (channelScroll.has(props.channelId) && scroll.current) {
          const newScroll = channelScroll.get(props.channelId) ?? 0;
          scroll.current.scrollTop = newScroll;
+      } else {
+         scrollDown();
       }
 
       const unlisten = listenEvent("message_added", d => {
@@ -130,13 +140,12 @@ export default function ChannelMessages(props: { channelId: Snowflake; messages:
          );
 
          previousHeightDiff = itemsHeight.current - previousHeight;
-
          scroll.current.scrollTop = previousScrollTop.current + (height - previousHeightDiff);
          previousScrollTop.current = -1;
       }
 
       if (shouldScrollOnNextRender.current) {
-         scroll.current.scrollTop = scroll.current.scrollHeight - scroll.current.clientHeight;
+         scrollDown();
          shouldScrollOnNextRender.current = false;
       }
 

packages/huginn-app/src/hooks/useLastSafePathname.ts

@@ -0,0 +1,14 @@
+import { routeHistory } from "@contexts/historyContext";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+
+export function useSafePathname() {
+   const navigate = useNavigate();
+   const location = useLocation();
+
+   async function navigateBack() {
+      const safePathname = routeHistory.lastPathname?.includes(location.pathname) ? "/channels/@me" : routeHistory.lastPathname;
+      await navigate({ to: safePathname });
+   }
+
+   return { navigateBack };
+}

packages/huginn-app/src/lib/middlewares.ts

@@ -10,6 +10,8 @@ export function setup(client: HuginnClient) {
    const pathname = router.state.location.pathname;
    if (!routeHistory.initialPathname) routeHistory.initialPathname = pathname;
 
+   console.log("to", pathname);
+
    if (pathname === "/splashscreen") {
       return;
    }
@@ -22,26 +24,30 @@ export function setup(client: HuginnClient) {
       return;
    } else {
       if (pathname !== "/login" && pathname !== "/register") {
+         console.log(pathname, "mask");
          throw redirect({ to: "/login", mask: pathname });
       }
    }
 }
 
 export function ensureChannelExists(channelId: Snowflake, queryClient: QueryClient) {
    const channels: (APIDMChannel | APIGroupDMChannel)[] | undefined = queryClient.getQueryData(["channels", "@me"]);
-
+   console.log(channels);
    const safePathname = routeHistory.lastPathname?.includes(channelId) ? "/channels/@me" : routeHistory.lastPathname;
    if (!channels?.some(x => x.id === channelId)) throw redirect({ to: safePathname });
+   console.log("CHANNEL EXISTS");
 }
 
 export function requireAuth(client: HuginnClient) {
    if (!client.isLoggedIn) {
+      console.log("REQUIRE AUTH");
       throw redirect({ to: "/login" });
    }
 }
 
 export function requireNotAuth(client: HuginnClient) {
    if (client.isLoggedIn) {
+      console.log("NO AUTH");
       throw redirect({ to: "/channels/@me" });
    }
 }

packages/huginn-app/src/routes/_layoutAnimation/_layoutAuth/login.tsx

@@ -68,6 +68,7 @@ function Login() {
 
    useEffect(() => {
       async function tryLogin() {
+         console.log("TRY LOGIN");
          if (client.readyState === ClientReadyState.INITIALIZING) return;
 
          const refreshToken = localStorage.getItem("refresh-token");
@@ -81,6 +82,7 @@ function Login() {
 
                setUser(client.user);
 
+               console.log("Everything good!");
                await navigate({ to: routeHistory.initialPathname === "/login" ? "/channels/@me" : routeHistory.initialPathname });
             } else {
                unhide();

packages/huginn-app/src/routes/_layoutAnimation/_layoutMain/_layoutHome.tsx

@@ -14,7 +14,7 @@ export const Route = createFileRoute("/_layoutAnimation/_layoutMain/_layoutHome"
    },
    component: LayoutHome,
    loader: async ({ context: { queryClient, client } }) => {
-      return queryClient.ensureQueryData(getChannelsOptions(client, "@me"));
+      return await queryClient.ensureQueryData(getChannelsOptions(client, "@me"));
    },
    errorComponent: RouteErrorComponent,
    gcTime: 0,

packages/huginn-app/src/routes/_layoutAnimation/_layoutMain/_layoutHome/channels.@me.$channelId.tsx

@@ -3,18 +3,15 @@ import RouteErrorComponent from "@components/RouteErrorComponent";
 import ChannelMessages from "@components/channels/ChannelMessages";
 import HomeTopbar from "@components/channels/HomeTopbar";
 import { useClient } from "@contexts/apiContext";
+import { useSafePathname } from "@hooks/useLastSafePathname";
 import { useErrorHandler } from "@hooks/useServerErrorHandler";
-import { ensureChannelExists } from "@lib/middlewares";
 import { getChannelsOptions, getMessagesOptions } from "@lib/queries";
 import { useQueryClient, useSuspenseInfiniteQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
 
 export const Route = createFileRoute("/_layoutAnimation/_layoutMain/_layoutHome/channels/@me/$channelId")({
    component: Component,
-   beforeLoad({ context: { queryClient }, params }) {
-      ensureChannelExists(params.channelId, queryClient);
-   },
    loader: async ({ params, context: { queryClient, client } }) => {
       return (
          queryClient.getQueryData(getMessagesOptions(queryClient, client, params.channelId).queryKey) ??
@@ -31,6 +28,7 @@ function Component() {
    const { channelId } = Route.useParams();
    const { error, data: messages } = useSuspenseInfiniteQuery(getMessagesOptions(queryClient, client, channelId));
    const channel = useSuspenseQuery(getChannelsOptions(client, "@me")).data?.find((x: { id: string }) => x.id === channelId);
+   const { navigateBack } = useSafePathname();
 
    const handleServerError = useErrorHandler();
 
@@ -40,7 +38,10 @@ function Component() {
       }
    }, [error]);
 
-   if (!channel) return;
+   if (!channel) {
+      navigateBack();
+      return;
+   }
 
    return (
       <div className="flex h-full flex-col">

packages/huginn-server/src/routes/api/channels/[channelId]/messages.get.ts

@@ -23,6 +23,8 @@ router.get(
          ["authorId"],
       );
 
+      // setResponseStatus(event, HttpCode.SERVER_ERROR);
+      // return null;
       setResponseStatus(event, HttpCode.OK);
       return messages;
    }),

packages/huginn-website/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
-})
+   plugins: [vue()],
+});