{...headerCellProps}>
+ {({ ...rest }) => (
+
+
+
+ Min
+
+ {
+ updateFilters((globalFilters) => ({
+ ...globalFilters,
+ [filterName]: [
+ Number(e.target.value),
+ (
+ globalFilters[filterName] as Array
+ )?.[1],
+ ],
+ }));
+ }}
+ onKeyDown={inputStopPropagation}
+ onClick={(e) => e.stopPropagation()}
+ />
+
+
+
+ Max
+
+
+ updateFilters({
+ ...filters,
+ [filterName]: [0, Number(e.target.value)],
+ })
+ }
+ onKeyDown={inputStopPropagation}
+ onClick={(e) => e.stopPropagation()}
+ />
+
+
+ )}
+
+ );
+};
+
+// Wrapper for rendering column header cell
+const HeaderCellRenderer = ({
+ tabIndex,
+ column,
+ children: filterFunction,
+ sortDirection,
+}: RenderHeaderCellProps & {
+ children: (args: { tabIndex: number; filters: Filter }) => React.ReactElement;
+}) => {
+ const filters = useContext(FilterContext)!;
+ const clickMeButtonRef = useRef(null);
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+ return (
+
+
{column.name}
+
+ {sortDirection === 'DESC' ? (
+
+ ) : sortDirection === 'ASC' ? (
+
+ ) : (
+
+ )}
+
setIsPopoverOpen(false)}
+ ref={clickMeButtonRef} // if you'd like a ref to your popover's child, you can grab one here
+ content={() => (
+ // The click handler here is used to stop the header from being sorted
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+ e.stopPropagation()}
+ >
+
+
+ Filter by {column.name}
+ {filterFunction({ tabIndex, filters })}
+
+
+
{
+ e.stopPropagation();
+ setIsPopoverOpen((isOpen) => !isOpen);
+ }}
+ >
+ Filters
+
+
+
+
(undefined);
type Comparator = (a: Repo, b: Repo) => number;
const getComparator = (sortColumn: keyof Repo): Comparator => {
switch (sortColumn) {
// number based sorting
- case "closedIssuesCount":
- case "collaboratorsCount":
- case "discussionsCount":
- case "forksCount":
- case "issuesCount":
- case "mergedPullRequestsCount":
- case "openIssuesCount":
- case "openPullRequestsCount":
- case "projectsCount":
- case "watchersCount":
+ case 'closedIssuesCount':
+ case 'collaboratorsCount':
+ case 'discussionsCount':
+ case 'forksCount':
+ case 'issuesCount':
+ case 'mergedPullRequestsCount':
+ case 'openIssuesCount':
+ case 'openPullRequestsCount':
+ case 'projectsCount':
+ case 'watchersCount':
return (a, b) => {
if (a[sortColumn] === b[sortColumn]) {
return 0;
@@ -55,33 +204,307 @@ const getComparator = (sortColumn: keyof Repo): Comparator => {
};
// alphabetical sorting
- case "licenseName":
- case "repoName":
- case "repositoryName":
+ case 'licenseName':
+ case 'repoName':
+ case 'repositoryName':
return (a, b) => {
- return a[sortColumn].localeCompare(b[sortColumn]);
+ return a[sortColumn]
+ .toLowerCase()
+ .localeCompare(b[sortColumn].toLowerCase());
};
default:
throw new Error(`unsupported sortColumn: "${sortColumn}"`);
}
};
+// Default set of filters
+const defaultFilters: Filter = {
+ licenseName: {
+ all: true,
+ },
+};
+
const RepositoriesTable = () => {
+ const [globalFilters, setGlobalFilters] = useState(defaultFilters);
+
+ // This needs a type, technically it's a Column but needs to be typed
+ const labels: Record> = {
+ Name: {
+ key: 'repositoryName',
+ name: 'Name',
+
+ renderHeaderCell: (p) => {
+ return (
+ {...p}>
+ {({ filters, ...rest }) => (
+
+ setGlobalFilters((otherFilters) => ({
+ ...otherFilters,
+ repositoryName: e.target.value,
+ }))
+ }
+ onKeyDown={inputStopPropagation}
+ onClick={(e) => e.stopPropagation()}
+ />
+ )}
+
+ );
+ },
+ },
+ License: {
+ key: 'licenseName',
+ name: 'License',
+
+ renderHeaderCell: (p) => {
+ // This is fine because we know it's going to be rendered as a component
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const [filteredOptions, setFilteredOptions] = useState('');
+
+ return (
+ {...p}>
+ {({ ...rest }) => (
+
+ setFilteredOptions(e.target.value)}
+ trailingAction={
+ {
+ setFilteredOptions('');
+ }}
+ icon={XIcon}
+ aria-label="Clear input"
+ sx={{ color: 'fg.subtle' }}
+ />
+ }
+ />
+
+ {
+ setGlobalFilters((otherFilters) => ({
+ ...otherFilters,
+ licenseName: {
+ ...otherFilters.licenseName,
+ all: !otherFilters.licenseName?.['all'],
+ },
+ }));
+ }}
+ >
+
+
+ All
+
+ {dropdownOptions('licenseName', filteredOptions).map((d) => {
+ if (d.value === '') {
+ return (
+ <>
+ {
+ setGlobalFilters((otherFilters) => ({
+ ...otherFilters,
+ licenseName: {
+ ...otherFilters.licenseName,
+ [d.value]:
+ !otherFilters.licenseName?.[d.value],
+ },
+ }));
+ }}
+ >
+
+
+ No License
+
+
+ );
+ }
+
+ return (
+ <>
+ {
+ setGlobalFilters((otherFilters) => ({
+ ...otherFilters,
+ licenseName: {
+ ...otherFilters.licenseName,
+ [d.value]: !otherFilters.licenseName?.[d.value],
+ },
+ }));
+ }}
+ >
+
+
+ {d.value}
+
+
+ );
+ })}
+
+
+ )}
+
+ );
+ },
+ },
+ Collaborators: {
+ key: 'collaboratorsCount',
+ name: 'Collaborators',
+ renderHeaderCell: (p) => {
+ return (
+ ([]);
- const sortedRepos = () => {
- if (sortColumns.length === 0) return repos;
+ const sortRepos = (inputRepos: Repo[]) => {
+ if (sortColumns.length === 0) {
+ return repos;
+ }
- const sortedRows = [...repos].sort((a, b) => {
+ const sortedRows = [...inputRepos].sort((a, b) => {
for (const sort of sortColumns) {
const comparator = getComparator(sort.columnKey as keyof Repo);
const compResult = comparator(a, b);
if (compResult !== 0) {
- return sort.direction === "ASC" ? compResult : -compResult;
+ return sort.direction === 'ASC' ? compResult : -compResult;
}
}
return 0;
@@ -90,34 +513,109 @@ const RepositoriesTable = () => {
return sortedRows;
};
+ /**
+ * Uses globalFilters to filter the repos that are then passed to sortRepos
+ *
+ * NOTE: We use some hacks like adding 'all' to the licenseName filter to
+ * make it easier to filter the repos.
+ *
+ * This is kind of a mess, but it works
+ */
+ const filterRepos = useCallback(
+ (inputRepos: Repo[]) => {
+ const result = inputRepos.filter((repo) => {
+ return (
+ (globalFilters.repositoryName
+ ? repo.repositoryName.includes(globalFilters.repositoryName)
+ : true) &&
+ ((globalFilters.licenseName?.[repo.licenseName] ?? false) ||
+ (globalFilters.licenseName?.['all'] ?? false)) &&
+ (globalFilters.collaboratorsCount
+ ? (globalFilters.collaboratorsCount?.[0] ?? 0) <=
+ repo.collaboratorsCount &&
+ repo.collaboratorsCount <=
+ (globalFilters.collaboratorsCount[1] ?? Infinity)
+ : true) &&
+ (globalFilters.watchersCount
+ ? (globalFilters.watchersCount?.[0] ?? 0) <= repo.watchersCount &&
+ repo.watchersCount <= (globalFilters.watchersCount[1] ?? Infinity)
+ : true) &&
+ (globalFilters.openIssuesCount
+ ? (globalFilters.openIssuesCount?.[0] ?? 0) <=
+ repo.openIssuesCount &&
+ repo.openIssuesCount <=
+ (globalFilters.openIssuesCount[1] ?? Infinity)
+ : true) &&
+ (globalFilters.closedIssuesCount
+ ? (globalFilters.closedIssuesCount?.[0] ?? 0) <=
+ repo.closedIssuesCount &&
+ repo.closedIssuesCount <=
+ (globalFilters.closedIssuesCount[1] ?? Infinity)
+ : true) &&
+ (globalFilters.openPullRequestsCount
+ ? (globalFilters.openPullRequestsCount?.[0] ?? 0) <=
+ repo.openPullRequestsCount &&
+ repo.openPullRequestsCount <=
+ (globalFilters.openPullRequestsCount[1] ?? Infinity)
+ : true) &&
+ (globalFilters.mergedPullRequestsCount
+ ? (globalFilters.mergedPullRequestsCount?.[0] ?? 0) <=
+ repo.mergedPullRequestsCount &&
+ repo.mergedPullRequestsCount <=
+ (globalFilters.mergedPullRequestsCount[1] ?? Infinity)
+ : true) &&
+ (globalFilters.forksCount
+ ? (globalFilters.forksCount?.[0] ?? 0) <= repo.forksCount &&
+ repo.forksCount <= (globalFilters.forksCount[1] ?? Infinity)
+ : true)
+ );
+ });
+
+ return result;
+ },
+ [globalFilters],
+ );
+
return (
-
-
-
-
-
- {subTitle()}
-
-
-
-
repo.repoName}
- defaultColumnOptions={{
- sortable: true,
- resizable: true,
- }}
- sortColumns={sortColumns}
- onSortColumnsChange={setSortColumns}
- style={{ height: "100%", width: "100%" }}
- />
+
+
+
+
+
+
+ {subTitle()}
+
+
+ {
+ setGlobalFilters(defaultFilters);
+ }}
+ className={globalFilters !== defaultFilters ? '' : 'opacity-0'}
+ >
+ Clear All Filters
+
+
+
+
+ {/* This is a weird hack to make the table fill the page */}
+
+ repo.repoName}
+ defaultColumnOptions={{
+ sortable: true,
+ resizable: true,
+ }}
+ sortColumns={sortColumns}
+ onSortColumnsChange={setSortColumns}
+ style={{ height: '100%', width: '100%' }}
+ />
+
+
-
+
);
}