Function Tracks

apps/web/components/Tracks.tsx:48–256

({ tracks, categories }: TracksWithCategoriesProps)

}

export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
  const [selectedCategory, setSelectedCategory] = useRecoilState(category);
  const [filteredTracks, setFilteredTracks] = useState<TrackPros[]>(tracks);
  const [visibleTracks, setVisibleTracks] = useState<TrackPros[]>([]);
  const [sortBy, setSortBy] = useState<string>("new");
  const [isSelectOpen, setIsSelectOpen] = useState<boolean>(false);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [loading, setLoading] = useState<boolean>(true);
  const [selectedCohort, setSelectedCohort] = useState<number | null>(null);

  const tracksPerPage = 10;
  const isCohort2Selected = selectedCohort === CohortGroup.Two;
  const isCohort3Selected = selectedCohort === CohortGroup.Three;

  const filterTracks = () => {
    setLoading(true);
    setFilteredTracks(tracks.filter((t) => selectedCohort === 3 ? t.cohort === 3 : t.cohort !== 3));
    setCurrentPage(1); // Reset to first page on filtering
    setLoading(false);
  };

  const sortTracks = (sortBy: string) => {
    setLoading(true);
    let sortedTracks = [...filteredTracks];
    if (sortBy === "ascending") {
      sortedTracks.sort((a, b) => a.title.localeCompare(b.title));
    } else if (sortBy === "descending") {
      sortedTracks.sort((a, b) => b.title.localeCompare(a.title));
    } else if (sortBy === "new") {
      sortedTracks.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
    } else if (sortBy === "old") {
      sortedTracks.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
    }
    setFilteredTracks(sortedTracks);
    setLoading(false);
  };

  const handleCohortSelection = (cohort: number) => {
    setSelectedCohort((prevCohort) => (prevCohort === cohort ? null : cohort));
  };

  useEffect(() => {
    filterTracks();
  }, [selectedCategory, selectedCohort, tracks]);

  useEffect(() => {
    sortTracks(sortBy);
  }, [sortBy]);

  useEffect(() => {
    setLoading(true);
    const start = (currentPage - 1) * tracksPerPage;
    const end = start + tracksPerPage;
    setVisibleTracks(filteredTracks.slice(start, end));
    setLoading(false);
  }, [currentPage, filteredTracks]);

  const totalPages = Math.ceil(filteredTracks.length / tracksPerPage);