Tracklist Improvement

[pyldin601]

[pyldin601]

For inspiration:

import React, { useState, useEffect } from 'react';
import { List, AutoSizer } from 'react-virtualized';
import axios from 'axios';

const AudioPlaylist = () => {
  const [tracks, setTracks] = useState([]);
  const [totalCount, setTotalCount] = useState(0);

  const fetchTracks = async (start, limit) => {
    try {
      const { data } = await axios.get('your_endpoint_here', {
        params: { offset: start, limit: limit },
      });
      setTracks((prevTracks) => [...prevTracks, ...data.tracks]);
      setTotalCount(data.totalCount);
    } catch (error) {
      console.error('Error fetching tracks:', error);
    }
  };

  useEffect(() => {
    fetchTracks(0, 20);
  }, []);

  const rowRenderer = ({ index, key, style }) => {
    const track = tracks[index];

    return (
      <div key={key} style={style}>
        {track ? track.name : 'Loading...'}
      </div>
    );
  };

  const handleScroll = ({ clientHeight, scrollHeight, scrollTop }) => {
    if (scrollHeight - scrollTop <= clientHeight * 2 && tracks.length < totalCount) {
      fetchTracks(tracks.length, 20);
    }
  };

  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          height={height}
          rowCount={totalCount}
          rowHeight={50}
          rowRenderer={rowRenderer}
          onScroll={handleScroll}
          width={width}
        />
      )}
    </AutoSizer>
  );
};

export default AudioPlaylist;