diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx index 6c2fe038..d7c70177 100644 --- a/components/RepositoryList.tsx +++ b/components/RepositoryList.tsx @@ -2,14 +2,15 @@ import { faCircleNotch } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React, { useState } from "react"; import InfiniteScroll from "react-infinite-scroll-component"; - import { Repository } from "../types"; import { RepositoryItem } from "./RepositoryItem"; +import Select from 'react-select'; type RepositoryListProps = { repositories: Repository[]; }; + const Loader = () => (
@@ -22,17 +23,29 @@ export const RepositoryList = ({ repositories }: RepositoryListProps) => { const itemsPerScroll = 15; const [items, setItems] = useState(itemsPerScroll); const [filter, setFilter] = useState(""); + const [selectedLanguages, setSelectedLanguages] = useState([]); const filteredRepositories = repositories.filter((repository) => { - // Check if any property of the RepositoryItem matches the filter value - return Object.values(repository).some((value) => { + // Check if the repository's language is included in the selected languages array + const languageFilter = selectedLanguages.length === 0 || selectedLanguages.includes(repository.language.display); + + const nameFilter = Object.values(repository).some((value) => { if (value === null) { return false; } return value.toString().toLowerCase().includes(filter.toLowerCase()); }); + + return languageFilter && nameFilter; }); + const allLanguages = repositories.map((repository) => repository.language.display); + const uniqueLanguages = allLanguages.filter((language, index) => allLanguages.indexOf(language) === index); + const languageOptions = uniqueLanguages.map((language) => ({ + value: language, + label: language, + })); + return (
@@ -43,6 +56,17 @@ export const RepositoryList = ({ repositories }: RepositoryListProps) => { placeholder="Search Repositories" className="border rounded-sm p-2 mb-4" /> + +