DEV Community: Kevin

Infinite Scroll in Nextjs and typescript

Kevin — Wed, 19 Jun 2024 23:14:39 +0000

After a couple of days I finally was able to achieve an infinite scroll on my project. Here is yet another time saving snippet that you can use to achieve the same in a shorter time frame. As usual this is not a tutorial but a quick post to help a fellow developer save time on implementing an infinite scroll. You'll have to edit the code to fit the needs of your project.

I am using nextUI for the frontend components.

First we'll create a dummy user object

interface User {
  id: number;
  name: string;
}

Then I create a function to generate dummy data to populate the users array with user objects.

const generateDummyData = (start: number, count: number): User[] => {
  return Array.from({ length: count }, (_, i) => ({
    id: start + i,
    name: `User ${start + i + 1}`,
  }));
};

Time to implement a function called loadMoreUsers to fetch and append more user data as one scrolls down the page. I have simulated an api call time delay of 2 seconds.

const loadMoreUsers = async () => {
    if (loading || page >= 10) return;
    setLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate 2-second delay
    const newUsers = generateDummyData(page * 10, 10);
    setUsers((prevUsers) => [...prevUsers, ...newUsers]);
    setPage((prevPage) => prevPage + 1);
    setLoading(false);
  };

Next step is to use useEffect to load initial user data when the component mounts and to handle scrolling to load more users...

useEffect(() => {
    if (!initialized.current) {
        initialized.current = true
        loadMoreUsers();
    }
  }, []);

  useEffect(() => {
    const handleScroll = () => {
        if (
            window.innerHeight +
              Math.max(
                window.pageYOffset,
                document.documentElement.scrollTop,
                document.body.scrollTop
              ) >
            document.documentElement.offsetHeight - 100
          ) {
            if (page < 10 && page > 0) { 
                 loadMoreUsers();
              }
          } else {
            return;
          }

    };

Lastly we add an event listener for the scrollbar...

window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [page, loading]);

That's it. Below is the full script...You can save it as a seperate file in the utils or components and simply import it to your project.

import { Card, CardBody,Spinner,Button } from '@nextui-org/react';
import { useEffect, useState, useRef } from 'react';

interface User {
  id: number;
  name: string;
}

const generateDummyData = (start: number, count: number): User[] => {
  return Array.from({ length: count }, (_, i) => ({
    id: start + i,
    name: `User ${start + i + 1}`,
  }));
};

const UserListPage = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(0);

  const initialized = useRef(false)


  const loadMoreUsers = async () => {
    if (loading || page >= 10) return;
    setLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate 2-second delay
    const newUsers = generateDummyData(page * 10, 10);
    setUsers((prevUsers) => [...prevUsers, ...newUsers]);
    setPage((prevPage) => prevPage + 1);
    setLoading(false);
  };

  useEffect(() => {
    if (!initialized.current) {
        initialized.current = true
        loadMoreUsers();
    }
  }, []);

  useEffect(() => {
    const handleScroll = () => {
        if (
            window.innerHeight +
              Math.max(
                window.pageYOffset,
                document.documentElement.scrollTop,
                document.body.scrollTop
              ) >
            document.documentElement.offsetHeight - 100
          ) {
            if (page < 10 && page > 0) { 
                 loadMoreUsers();
              }
          } else {
            return;
          }

    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [page, loading]);

  return (
    <div>
      {users.map((user) => (
        <Card key={user.id}>
          <CardBody>
            <p>{user.name}</p>
          </CardBody>
        </Card>
      ))}


        {loading ? (<Spinner />) : (<Button onClick={loadMoreUsers}>Load more</Button> )}
    </div>
  );
};

export default UserListPage;

That's it folks....Now you can proceed to the other interesting parts of your project. Once I implement the api version I shall share as well

Populating Select Input with data from an API using Nextjs and typescript

Kevin — Tue, 04 Jun 2024 18:16:28 +0000

After a series of nerve racking attempts and failures including combing through the entire internet I was finally able to achieve this feat. I shall share with you the function I currently use to populate select input using Nextjs from a Nest js api backend.

Working with asynchronous functions can be a real paid and some of the errors I encountered while attempting this included

Property 'data' does not exist on type 'Promise'
Type {} is not assignable to type ReactNode
And the biggest pain of them all.... “Invalid Hook Call” Error in React: Hooks Can Only Be Called Inside of a Function Component

After literally taking days to achieve such a menial task I finally stumble upon a response on StackOverflow by Alarid (Shoutout to Alarid) that pointed me to the right direction.

This is a front end implementation only and am using the following libaries

Nextjs
Axios
Nextui

Of course this is just a "proof of concept" can can be edited to fit the libraries you are using on your nextjs project. For example you could be using the default 'fetch' method to pull data from an api endpoint or any other third party library like swr or tanstack

To begin make sure the libraries are installed
Create file "apiSelect" in the filepath "@/app/lib/apiSelect.tsx"
Use the code below and edit according to your need.


import axios from "axios";
import { useState, useEffect } from "react";
import {Select, SelectItem} from "@nextui-org/react";

function apiSelect(url : string , lable: string, selected: string="") {
  const [options, setOptions] = useState<string[]>([]);

  useEffect(() => {
    async function fetchData() {
      // Fetch data

      const { data } = await axios.get(url);
      const results: any[] = []
      // Store results in the results array
      data.forEach((value: any) => {
        results.push({
          key: value.id,
          value: value.name,
        });
      });
      // Update the options state
      setOptions([
        ...results
      ])
    }

    // Trigger the fetch
    fetchData();
  }, []);



  return (

            <Select 
                label={lable}
                className="max-w-xs" 
            >
                {(options).map((option: any) => (
                <SelectItem key={option.key}>
                    {option.value}
                </SelectItem>
                ))}
            </Select>
  );
}

export default apiSelect;

Incase you need to use authentication tokens you can include the token variable as an argument and implement using axios as shown below

import axios from "axios";
import { useState, useEffect } from "react";
import {Select, SelectItem} from "@nextui-org/react";

function apiSelect(url : string , token : string, lable: string, selected: string="") {
  const [options, setOptions] = useState<string[]>([]);

  useEffect(() => {
    async function fetchData() {
      // Fetch data
      const config = {
        headers: { Authorization: `Bearer ${token}` }
     };
      const { data } = await axios.get(url, config);
      const results: any[] = []
      // Store results in the results array
      data.forEach((value: any) => {
        results.push({
          key: value.id,
          value: value.name,
        });
      });
      // Update the options state
      setOptions([
        ...results
      ])
    }

    // Trigger the fetch
    fetchData();
  }, []);



  return (

            <Select 
                label={lable}
                className="max-w-xs" 
            >
                {(options).map((option: any) => (
                <SelectItem key={option.key}>
                    {option.value}
                </SelectItem>
                ))}
            </Select>
  );


export default apiSelect;

Import the function to page.tsx file so that you can call the function.

import apiSelect from "@/app/lib/apiSelect";

Call the function

You use the example below to call the function
With Token
{apiSelect(url, token, "Select a Role")}

Without token

{apiSelect(url, "Select a Role")}

Hope this helps save you lots of hours trying to figure this out...

Peace