Skip to content

Commit

Permalink
merge: add pools filters to table pools
Browse files Browse the repository at this point in the history
  • Loading branch information
@damnnou
damnnou committed Apr 23, 2024
2 parents 15b9890 + 2f0d047 commit b6bb8e5
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 82 deletions.
2 changes: 1 addition & 1 deletion src/components/common/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Account = () => {
</div>

return <div className="flex h-full justify-end gap-4 whitespace-nowrap">
<div className="hidden lg:block">
<div className="max-xl:hidden">
<w3m-network-button />
</div>
<div className="hidden md:block">
Expand Down
160 changes: 79 additions & 81 deletions src/components/common/Table/poolsTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
import { Button } from '@/components/ui/button';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
ColumnDef,
ColumnFiltersState,
Expand All @@ -17,15 +10,17 @@ import {
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from '@tanstack/react-table';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LoadingState } from './loadingState';
} from "@tanstack/react-table";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { LoadingState } from "./loadingState";
import { Input } from "@/components/ui/input";
import { Search, Tractor } from "lucide-react";
import { Switch } from "@/components/ui/switch";

interface PoolsTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
selectedRow?: number;
action?: (args?: any) => void;
defaultSortingID?: string;
link?: string;
Expand All @@ -37,16 +32,13 @@ interface PoolsTableProps<TData, TValue> {
const PoolsTable = <TData, TValue>({
columns,
data,
selectedRow,
action,
link,
defaultSortingID,
showPagination = true,
loading,
}: PoolsTableProps<TData, TValue>) => {
const [sorting, setSorting] = useState<SortingState>(
defaultSortingID ? [{ id: defaultSortingID, desc: true }] : []
);
const [sorting, setSorting] = useState<SortingState>(defaultSortingID ? [{ id: defaultSortingID, desc: true }] : []);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

const navigate = useNavigate();
Expand All @@ -55,9 +47,7 @@ const PoolsTable = <TData, TValue>({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: showPagination
? getPaginationRowModel()
: undefined,
getPaginationRowModel: showPagination ? getPaginationRowModel() : undefined,
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
Expand All @@ -66,86 +56,104 @@ const PoolsTable = <TData, TValue>({
sorting,
columnFilters,
},
globalFilterFn: (row: any, _, value: boolean | undefined) => row.original.isMyPool === value,
});

const isMyPools: boolean | undefined = table.getState().globalFilter;

const searchID = "pair";

if (loading) return <LoadingState />;

return (
<>
{searchID && (
<div className="flex gap-4 w-full justify-between items-center p-4 pb-0">
<div className="flex items-center relative w-fit">
<Input
placeholder="Search pool"
value={(table.getColumn(searchID)?.getFilterValue() as string) ?? ""}
onChange={(event) => table.getColumn(searchID)?.setFilterValue(event.target.value)}
className="border border-border border-opacity-60 pl-12 h-12 max-w-80 md:w-64 lg:w-80 focus:border-opacity-100 rounded-xl"
/>
<Search className="absolute left-4 text-border" size={20} />
</div>
<ul className="flex gap-1 p-1 border rounded-xl border-border/60 w-fit h-12 max-xs:hidden">
<li>
<Button
onClick={() => table.setGlobalFilter(undefined)}
className="rounded-lg h-full p-4 w-fit flex-nowrap"
size="md"
variant={!isMyPools ? "iconActive" : "ghost"}
>
All
</Button>
</li>
<li>
<Button
onClick={() => table.setGlobalFilter(true)}
className="rounded-lg h-full p-4 w-fit whitespace-nowrap"
size="md"
variant={isMyPools ? "iconActive" : "ghost"}
>
My pools
</Button>
</li>
</ul>
<div className="flex gap-2 max-md:gap-4 items-center w-fit ml-auto max-sm:hidden">
<label className="flex gap-2 items-center" htmlFor="farmingAvailable">
<Tractor className="w-5 h-5 max-md:w-6 max-md:h-6" color="#d84eff" />
<span className="max-md:hidden">Farming Available</span>
</label>
<Switch
id="farmingAvailable"
checked={table.getColumn("plugins")?.getFilterValue() === true}
onCheckedChange={() => {
const column = table.getColumn("plugins");
if (column?.getFilterValue() === undefined) column?.setFilterValue(true);
else column?.setFilterValue(undefined);
}}
/>
</div>
</div>
)}
<Table>
<TableHeader className="[&_tr]:border-b [&_tr]:border-opacity-30">
<TableHeader className="[&_tr]:border-b [&_tr]:border-opacity-30 border-t border-opacity-60">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow
key={headerGroup.id}
className="hover:bg-transparent"
>
<TableRow key={headerGroup.id} className="hover:bg-transparent">
{headerGroup.headers.map((header) => (
<TableHead
key={header.id}
className="rounded-xl text-white font-semibold [&_svg]:mt-auto"
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
<TableHead key={header.id} className="rounded-xl text-white font-semibold [&_svg]:mt-auto">
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody className="hover:bg-transparent text-[16px]">
{!table.getRowModel().rows?.length ? (
{!table.getRowModel().rows.length ? (
<TableRow className="hover:bg-card h-full">
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
) : (
table.getRowModel().rows.map((row: any) => {
const isSelected =
Number(selectedRow) === Number(row.original.id);

return (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && 'selected'
}
className={`border-card-border/40 ${
isSelected
? 'bg-muted-primary/60'
: 'bg-card-dark'
} ${(action || link) && 'cursor-pointer'} ${
action || link
? isSelected
? 'hover:bg-muted-primary'
: 'hover:bg-card-hover'
: 'hover:bg-card-dark'
}`}
data-state={row.getIsSelected() && "selected"}
className="border-card-border/40 bg-card-dark hover:bg-card-hover cursor-pointer"
onClick={() => {
if (action) {
action(row.original.id);
} else if (link) {
navigate(
`/${link}/${row.original.id}`
);
navigate(`/${link}/${row.original.id}`);
}
}}
>
{row.getVisibleCells().map((cell: any) => (
<TableCell
key={cell.id}
className="text-left"
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
<TableCell key={cell.id} className="text-left">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
Expand All @@ -156,20 +164,10 @@ const PoolsTable = <TData, TValue>({
</Table>
{showPagination && (
<div className="flex items-center justify-end space-x-2 px-4 mt-auto">
<Button
variant="outline"
size="sm"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
Previous
</Button>
<Button
variant="outline"
size="sm"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
Next
</Button>
</div>
Expand Down

0 comments on commit b6bb8e5

Please sign in to comment.