fix(app): up scrolling does not work with more than 2 pages

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

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

packages/huginn-app/src/components/BaseMessage.tsx

@@ -3,7 +3,7 @@ import { APIMessageUser, MessageFlags, hasFlag } from "@huginn/shared";
 import { tokenize } from "@lib/huginn-tokenizer";
 import clsx from "clsx";
 import moment from "moment";
-import { forwardRef, useCallback, useMemo } from "react";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
 import { Descendant, Node, Path, Range, Text, createEditor } from "slate";
 import { DefaultElement, Editable, RenderElementProps, RenderLeafProps, Slate, withReact } from "slate-react";
 import UserAvatarWithStatus from "./UserAvatarWithStatus";
@@ -29,6 +29,8 @@ const BaseMessage = forwardRef<
 
    const initialValue = useMemo(() => deserialize(props.content ?? ""), []);
 
+   const lastRanges = useRef<Range[]>();
+
    // const formattedTime = useMemo(() => {
    //    const date = new Date(props.createdAt);
 
@@ -56,7 +58,11 @@ const BaseMessage = forwardRef<
       return <DefaultElement {...props} />;
    }, []);
 
-   const decorate = useCallback(([node, path]: [Node, Path]) => {
+   function decorate([node, path]: [Node, Path]) {
+      if (lastRanges.current) {
+         return [...lastRanges.current];
+      }
+
       const ranges: Range[] = [];
 
       if (!Text.isText(node)) {
@@ -76,15 +82,17 @@ const BaseMessage = forwardRef<
          skippedCharacters += (token.mark?.length ?? 0) * 2;
       }
 
+      lastRanges.current = ranges;
+
       return ranges;
-   }, []);
+   }
 
    return (
       <li
          ref={ref}
          className={clsx(
             "hover:bg-secondary group select-text p-2",
-            props.newMinute && !props.nextNewMinute && "pb-0.5",
+            props.newMinute && props.nextNewMinute === false && "pb-0.5",
             (props.newMinute || props.newDate) && "rounded-t-lg",
             !props.newMinute && "py-0.5",
             (props.nextNewMinute || props.nextNewMinute === undefined) && "rounded-b-lg",
@@ -109,7 +117,7 @@ const BaseMessage = forwardRef<
                      // onMouseDown={(e) => e.preventDefault()}
                      // onClick={(e) => e.preventDefault()}
                      readOnly
-                     decorate={param => decorate(param)}
+                     decorate={decorate}
                      renderLeaf={renderLeaf}
                      renderElement={renderElement}
                      className={clsx(
@@ -122,6 +130,16 @@ const BaseMessage = forwardRef<
                      // className=""
                   />
                </Slate>
+               {/* <div
+                  className={clsx(
+                     "px-2 py-1 font-normal text-white [overflow-wrap:anywhere]",
+                     isSelf ? "bg-primary" : "bg-background",
+                     props.newMinute && "rounded-tr-md",
+                     (props.nextNewMinute ?? props.nextNewMinute === undefined) && "rounded-bl-md rounded-br-md ",
+                  )}
+               >
+                  {props.content}
+               </div> */}
                {/* {props.content} */}
             </div>
          </div>

packages/huginn-app/src/components/TitleBar.tsx

@@ -21,7 +21,6 @@ export default function TitleBar(): ReactPortal {
 
    useEffect(() => {
       if (window.__TAURI_INTERNALS__) {
-         console.log("JA");
          appWindow.current = getCurrentWebviewWindow();
       }
    }, []);

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

@@ -47,9 +47,7 @@ export default function ChannelMessages(props: { channelId: Snowflake; messages:
             });
          }
 
-         listHasUpdated.current = false;
-         await fetchPreviousPage();
-         previousScrollTop.current = scroll.current.scrollTop;
+         await fetchPrevious();
          // Scrolling down
       } else if (
          scroll.current.scrollHeight - scroll.current.clientHeight - scroll.current.scrollTop <= bottomScrollOffset &&
@@ -62,6 +60,16 @@ export default function ChannelMessages(props: { channelId: Snowflake; messages:
       }
    }
 
+   async function fetchPrevious() {
+      if (!scroll.current) {
+         return;
+      }
+
+      listHasUpdated.current = false;
+      await fetchPreviousPage();
+      previousScrollTop.current = scroll.current.scrollTop;
+   }
+
    function calculateMessageRenderInfos(): MessageRenderInfo[] {
       const value = props.messages.map((message, i) => {
          const lastMessage = props.messages[i - 1];
@@ -92,10 +100,22 @@ export default function ChannelMessages(props: { channelId: Snowflake; messages:
       const styles = getComputedStyle(element);
       const margin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
 
-      return Math.ceil(element.offsetHeight + margin);
+      return element.offsetHeight + margin;
+   }
+
+   async function checkForExtraSpace() {
+      if (!scroll.current) {
+         return;
+      }
+
+      if (scroll.current.scrollHeight === scroll.current.clientHeight && !isFetchingPreviousPage) {
+         await fetchPrevious();
+      }
    }
 
    useEffect(() => {
+      checkForExtraSpace();
+
       if (channelScroll.has(props.channelId) && scroll.current) {
          const newScroll = channelScroll.get(props.channelId) ?? 0;
          scroll.current.scrollTop = newScroll;
@@ -131,13 +151,10 @@ export default function ChannelMessages(props: { channelId: Snowflake; messages:
          let previousHeight = 0;
          let previousHeightDiff = 0;
 
-         data.pages.slice(1)?.forEach(x =>
-            x.forEach(y => {
-               const elementHeight =
-                  getFullHeight(getContent(y.id)?.current) + getFullHeight(getContent(y.id + "_separator")?.current);
-               previousHeight += elementHeight;
-            }),
-         );
+         data.pages[1].forEach(x => {
+            const elementHeight = getFullHeight(getContent(x.id)?.current) + getFullHeight(getContent(x.id + "_separator")?.current);
+            previousHeight += elementHeight;
+         });
 
          previousHeightDiff = itemsHeight.current - previousHeight;
          scroll.current.scrollTop = previousScrollTop.current + (height - previousHeightDiff);

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

@@ -10,8 +10,6 @@ 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;
    }
@@ -24,30 +22,25 @@ 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/lib/queries.ts

@@ -17,10 +17,10 @@ export function getMessagesOptions(queryClient: QueryClient, client: HuginnClien
       queryKey: ["messages", channelId],
       initialPageParam: { before: "", after: "" },
       queryFn: ({ pageParam }) =>
-         client.channels.getMessages(channelId, 20, pageParam.before.toString() || undefined, pageParam.after.toString() || undefined),
+         client.channels.getMessages(channelId, 50, pageParam.before.toString() || undefined, pageParam.after.toString() || undefined),
       getPreviousPageParam(first) {
          const earliestMessage = first[0];
-         return earliestMessage && first.length >= 20 ? { before: earliestMessage.id, after: "" } : undefined;
+         return earliestMessage && first.length >= 50 ? { before: earliestMessage.id, after: "" } : undefined;
       },
       getNextPageParam(last) {
          const channels: APIGetUserChannelsResult | undefined = queryClient.getQueryData(["channels", "@me"]);

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

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