Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature: Sorting & finding by username (ID) admin interface #1778

Merged
merged 9 commits into from
Feb 21, 2023
Merged

feature: Sorting & finding by username (ID) admin interface #1778

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2b18796
feature: Sorting & finding by username (ID) admin interface https://g…
owen-duncan-snobel Feb 21, 2023
5caa3d5
updated filterOption => filterByColumn
owen-duncan-snobel Feb 21, 2023
8e3552c
removed unused imports
owen-duncan-snobel Feb 21, 2023
10b98ae
removed filterbycolumn and used the lastitem in filtervalues instead
owen-duncan-snobel Feb 21, 2023
d11053b
added ? to filterValue conditional
owen-duncan-snobel Feb 21, 2023
a3038b0
changed logic for the filter values
owen-duncan-snobel Feb 21, 2023
4bf2f2f
pre-commit run
owen-duncan-snobel Feb 21, 2023
cba03a4
display_name => filterValue and removed filterByOption param from Dat…
owen-duncan-snobel Feb 21, 2023
ad6e6a6
changes to handleFilterValuesChange
owen-duncan-snobel Feb 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 8 additions & 6 deletions website/src/components/DataTable/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import {
} from "@tanstack/react-table";
import { Filter } from "lucide-react";
import { useTranslation } from "next-i18next";
import { ChangeEvent, ReactNode, useState } from "react";
import { ChangeEvent, Dispatch, ReactNode, SetStateAction, useRef, useState } from "react";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are all of these imports used?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AbdBarho Not all of them are used, I'll remove them now. My first attempt used Dispatch and SetStateAction but I changed approaches at some point

import { useDebouncedCallback } from "use-debounce";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand All @@ -50,6 +50,8 @@ export type FilterItem = {
value: string;
};

export type FilterOption = "display_name" | "username";
owenduncansnobel marked this conversation as resolved.
Show resolved Hide resolved

export type DataTableRowPropsCallback<T> = (row: Row<T>) => TableRowProps;

export type DataTableProps<T> = {
Expand All @@ -59,7 +61,7 @@ export type DataTableProps<T> = {
filterValues?: FilterItem[];
onNextClick?: () => void;
onPreviousClick?: () => void;
onFilterChange?: (items: FilterItem[]) => void;
onFilterChange?: (items: FilterItem[], filterByColumn?: string) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you need filterByColumn here? Isn't id in FilterItem enough?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went and removed it

owenduncansnobel marked this conversation as resolved.
Show resolved Hide resolved
disableNext?: boolean;
disablePrevious?: boolean;
disablePagination?: boolean;
Expand Down Expand Up @@ -104,7 +106,7 @@ export const DataTable = <T,>({
} else {
newValues = filterValues.map((oldValue) => (oldValue.id === value.id ? value : oldValue));
}
onFilterChange && onFilterChange(newValues);
onFilterChange && onFilterChange(newValues, value.id);
};
return (
<>
Expand Down Expand Up @@ -198,13 +200,13 @@ const FilterModal = ({
value: string;
}) => {
const { isOpen, onOpen, onClose } = useDisclosure();

const initialFocusRef = useRef();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the purpose of this ref?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AbdBarho That ref is for auto-focusing on the text input when the filter button is clicked. That way you can start typing as soon as the parent div/button is clicked

const handleInputChange = useDebouncedCallback((e: ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value);
}, 500);

return (
<Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
<Popover isOpen={isOpen} onOpen={onOpen} initialFocusRef={initialFocusRef} onClose={onClose}>
<PopoverTrigger>
<Button variant={"unstyled"} ml="2">
<Filter size="1em"></Filter>
Expand All @@ -216,7 +218,7 @@ const FilterModal = ({
<PopoverBody mt="4">
<FormControl>
<FormLabel>{label}</FormLabel>
<Input onChange={handleInputChange} defaultValue={value}></Input>
<Input ref={initialFocusRef} onChange={handleInputChange} autoFocus defaultValue={value}></Input>
</FormControl>
</PopoverBody>
</PopoverContent>
Expand Down
25 changes: 17 additions & 8 deletions website/src/components/UserTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Card, CardBody, IconButton } from "@chakra-ui/react";
import { createColumnHelper } from "@tanstack/react-table";
import { createColumnHelper, HeaderGroup } from "@tanstack/react-table";
import { Pencil } from "lucide-react";
import Link from "next/link";
import { memo, useState } from "react";
import { get } from "src/lib/api";
import type { FetchUsersResponse, User } from "src/types/Users";
import useSWR from "swr";

import { DataTable, DataTableColumnDef, FilterItem } from "./DataTable/DataTable";
import { DataTable, DataTableColumnDef, FilterItem, FilterOption } from "./DataTable/DataTable";
import { useCursorPagination } from "./DataTable/useCursorPagination";

const columnHelper = createColumnHelper<User>();
Expand All @@ -16,9 +16,12 @@ const columns: DataTableColumnDef<User>[] = [
columnHelper.accessor("user_id", {
header: "ID",
}),
columnHelper.accessor("id", {
header: "Auth ID",
}),
{
...columnHelper.accessor("id", {
header: "Auth ID",
}),
filterable: true,
},
columnHelper.accessor("auth_method", {
header: "Auth Method",
}),
Expand Down Expand Up @@ -47,17 +50,23 @@ const columns: DataTableColumnDef<User>[] = [
export const UserTable = memo(function UserTable() {
const { pagination, resetCursor, toNextPage, toPreviousPage } = useCursorPagination();
const [filterValues, setFilterValues] = useState<FilterItem[]>([]);
const handleFilterValuesChange = (values: FilterItem[]) => {
const [filterOption, setFilterOption] = useState<string>("display_name");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You dont need this state. The last FilterItem is the column you want, so just discard the rest values and keep the last one only

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went and removed the state and used the last FilterItem

const handleFilterValuesChange = (values: FilterItem[], filterByColumn?: string) => {
if (filterByColumn) setFilterOption(filterByColumn);
setFilterValues(values);
resetCursor();
};

// Fetch and save the users.
// This follows useSWR's recommendation for simple pagination:
// https://swr.vercel.app/docs/pagination#when-to-use-useswr
const display_name = filterValues.find((value) => value.id === "display_name")?.value ?? "";

// TODO this should probably change names + back-end changes since we are search by not only display name
owenduncansnobel marked this conversation as resolved.
Show resolved Hide resolved
const display_name = filterValues.find((value) => value.id === filterOption)?.value ?? "";
const { data, error } = useSWR<FetchUsersResponse<User>>(
`/api/admin/users?direction=${pagination.direction}&cursor=${pagination.cursor}&searchDisplayName=${display_name}&sortKey=display_name`,
`/api/admin/users?direction=${pagination.direction}&cursor=${
pagination.cursor
}&searchDisplayName=${display_name}&sortKey=${filterOption === "display_name" ? filterOption : "username"}`,
get,
{
keepPreviousData: true,
Expand Down