notrebekahmikaelson
notrebekahmikaelson
PostsComments
TTCTheo's Typesafe Cult
Created by notrebekahmikaelson on 5/10/2024 in #questions
@tanstack/react-virtual not displaying my virtual list
update - when using JSON.strigify to wrap the entire ma[ping of row virtualizer , it renders them
8 replies
TTCTheo's Typesafe Cult
Created by index on 5/10/2024 in #questions
Next JS Double
yup
3 replies
TTCTheo's Typesafe Cult
Created by notrebekahmikaelson on 5/10/2024 in #questions
@tanstack/react-virtual not displaying my virtual list
app-index.js:33 Warning: Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
app-index.js:33 Warning: Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
8 replies
TTCTheo's Typesafe Cult
Created by notrebekahmikaelson on 5/10/2024 in #questions
@tanstack/react-virtual not displaying my virtual list
just another side note that console error is using forwardRef instead of using. that as regular props (probably used by radix-ui or shadcn)
8 replies
TTCTheo's Typesafe Cult
Created by notrebekahmikaelson on 5/10/2024 in #questions
@tanstack/react-virtual not displaying my virtual list
screen recording of the issue with the detailed video explanation of the output showing console, tanstack router data and also my elements tab
8 replies
TTCTheo's Typesafe Cult
Created by notrebekahmikaelson on 5/10/2024 in #questions
@tanstack/react-virtual not displaying my virtual list
8 replies
TTCTheo's Typesafe Cult
Created by notrebekahmikaelson on 5/10/2024 in #questions
@tanstack/react-virtual not displaying my virtual list
Frontend Code - 
"use client";

import { useParams } from "next/navigation";
import { api } from "~/trpc/react";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useRef, useEffect } from "react";
import AnnouncementSkeleton from "./AnnouncementSkeleton";

export default function AnnouncementContainer() {
  const { id } = useParams<{ id: string }>();
  const {
    isLoading,
    data,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage,
    isFetching,
  } = api.announcement.getBySociety.useInfiniteQuery(
    {
      societyId: id,
      limit: 2,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    },
  );

  const allAnnouncements = data
    ? data.pages.flatMap((_announcement) => _announcement.announcements)
    : [];

  const parentRef = useRef(null);

  const rowVirtualizer = useVirtualizer({
    count: hasNextPage ? allAnnouncements.length + 1 : allAnnouncements.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 5,
    overscan: 5,
    debug: true,
  });

  useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();

    if (!lastItem) {
      return;
    }

    if (
      lastItem.index >= allAnnouncements.length - 1 &&
      hasNextPage &&
      !isFetchingNextPage
    ) {
      void fetchNextPage();
    }
  }, [
    hasNextPage,
    fetchNextPage,
    allAnnouncements.length,
    isFetchingNextPage,
    rowVirtualizer.getVirtualItems(),
  ]);

  return (
    <>
      {isLoading ? (
        <AnnouncementSkeleton />
      ) : (
        <div ref={parentRef}>
          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
            const isLoaderRow = virtualRow.index > allAnnouncements.length - 1;
            const announcement = allAnnouncements[virtualRow.index];

            return JSON.stringify(announcement);
          })}
        </div>
      )}
      {isFetching && !isFetchingNextPage ? <AnnouncementSkeleton /> : null}
    </>
  );
}
"use client";

import { useParams } from "next/navigation";
import { api } from "~/trpc/react";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useRef, useEffect } from "react";
import AnnouncementSkeleton from "./AnnouncementSkeleton";

export default function AnnouncementContainer() {
  const { id } = useParams<{ id: string }>();
  const {
    isLoading,
    data,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage,
    isFetching,
  } = api.announcement.getBySociety.useInfiniteQuery(
    {
      societyId: id,
      limit: 2,
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    },
  );

  const allAnnouncements = data
    ? data.pages.flatMap((_announcement) => _announcement.announcements)
    : [];

  const parentRef = useRef(null);

  const rowVirtualizer = useVirtualizer({
    count: hasNextPage ? allAnnouncements.length + 1 : allAnnouncements.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 5,
    overscan: 5,
    debug: true,
  });

  useEffect(() => {
    const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();

    if (!lastItem) {
      return;
    }

    if (
      lastItem.index >= allAnnouncements.length - 1 &&
      hasNextPage &&
      !isFetchingNextPage
    ) {
      void fetchNextPage();
    }
  }, [
    hasNextPage,
    fetchNextPage,
    allAnnouncements.length,
    isFetchingNextPage,
    rowVirtualizer.getVirtualItems(),
  ]);

  return (
    <>
      {isLoading ? (
        <AnnouncementSkeleton />
      ) : (
        <div ref={parentRef}>
          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
            const isLoaderRow = virtualRow.index > allAnnouncements.length - 1;
            const announcement = allAnnouncements[virtualRow.index];

            return JSON.stringify(announcement);
          })}
        </div>
      )}
      {isFetching && !isFetchingNextPage ? <AnnouncementSkeleton /> : null}
    </>
  );
}
8 replies
TTCTheo's Typesafe Cult
Created by yolo on 4/18/2024 in #questions
zod validation with uploadthing and server actions
you can use next-safe-actions
7 replies
TTCTheo's Typesafe Cult
Created by Buckmonster on 4/6/2024 in #questions
Next Steps Confirmation - "if your app includes tRPC"
applicable for next13 and above
4 replies
TTCTheo's Typesafe Cult
Created by Buckmonster on 4/6/2024 in #questions
Next Steps Confirmation - "if your app includes tRPC"
you are using the app directory instead of pages router for router in nextjs
4 replies