diff --git a/components/RepositoryItem.tsx b/components/RepositoryItem.tsx index 34c4a0bd..1650e96e 100644 --- a/components/RepositoryItem.tsx +++ b/components/RepositoryItem.tsx @@ -57,6 +57,7 @@ export const RepositoryItem = ({ repository }: RepositoryItemProps) => { repositoryLang={repository.language.display} repositoryTopics={repository.topics} repositoryNumIssues={repository.issues.length} + repositoryStars={repository.stars_display} /> diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx index 34bc5488..b397e783 100644 --- a/components/RepositoryList.tsx +++ b/components/RepositoryList.tsx @@ -11,6 +11,11 @@ import { RepositoryItem } from "./RepositoryItem"; import { SDGFilter } from "./SDGFilter"; import { Grid, Stack } from "@primer/react-brand"; +import Select from "react-select"; +import { REPOSITORY_SORT_OPTIONS } from "../constants"; +import { RepositorySortOrder } from "../types"; +import { useAppData } from "../hooks/useAppData"; + type RepositoryListProps = { repositories: Repository[]; filter: string; @@ -61,12 +66,33 @@ export const RepositoryList = ({ repositories, filter }: RepositoryListProps) => const loadMoreItems = () => setItems(items + itemsPerScroll); const hasMoreItems = items < filteredRepositories.length; + const { repositorySortOrder, updateRepositorySortOrder } = useAppData(); + + const sortOptions = REPOSITORY_SORT_OPTIONS.map((sortOrder) => ({ + value: sortOrder, + label: sortOrder + })); + return (
+ +