mirror of
https://github.com/collinbarrett/FilterLists.git
synced 2026-03-11 09:04:27 +00:00
extract ListsTable and ListDrawer below ListsTableHoc
This commit is contained in:
Collin M. Barrett
parent
44afc4aceb
commit
bb4c6bf156
4 changed files with 118 additions and 87 deletions
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
import { Redirect, Route, RouteComponentProps, StaticContext } from 'react-router';
|
||||
|
||||
import { Language } from '../../interfaces/Language';
|
||||
import { License } from '../../interfaces/License';
|
||||
import { List } from '../../interfaces/List';
|
||||
import { Tag } from '../../interfaces/Tag';
|
||||
import { ListInfoDrawer } from '../ListInfoDrawer';
|
||||
|
||||
interface Props {
|
||||
lists: List[];
|
||||
languages: Language[];
|
||||
licenses: License[];
|
||||
tags: Tag[];
|
||||
}
|
||||
|
||||
export const ListDrawer = (props: Props) => {
|
||||
const renderDrawer = (rp: RouteComponentProps<any, StaticContext, any>) => {
|
||||
const list = props.lists.find(l => l.id === +rp.match.params.id);
|
||||
return list
|
||||
? <ListInfoDrawer
|
||||
list={list as List}
|
||||
languages={list.languageIds && props.languages.filter((l: Language) => list.languageIds.includes(l.id))}
|
||||
license={list.licenseId ? props.licenses.find((l: License) => list.licenseId === l.id) : undefined}
|
||||
tags={list.tagIds && props.tags.filter((t: Tag) => list.tagIds.includes(t.id))}
|
||||
{...rp} />
|
||||
: props.lists && props.lists.length && <Redirect to={{ pathname: "/", }} />
|
||||
};
|
||||
return <Route path="/lists/:id" render={renderDrawer} />
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { Table } from 'antd';
|
||||
import React from 'react';
|
||||
import { Redirect, Route, RouteComponentProps } from 'react-router-dom';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
|
||||
import { useLanguages, useLicenses, useLists, useTablePageSizer, useTags } from '../../hooks';
|
||||
import { useTablePageSizer } from '../../hooks';
|
||||
import { Language } from '../../interfaces/Language';
|
||||
import { License } from '../../interfaces/License';
|
||||
import { List } from '../../interfaces/List';
|
||||
|
|
@ -11,92 +11,74 @@ import { nameof } from '../../utils';
|
|||
import { Description } from '../Description';
|
||||
import { LanguageCloud } from '../languageCloud';
|
||||
import { ListInfoButton } from '../ListInfoButton';
|
||||
import { ListInfoDrawer } from '../ListInfoDrawer';
|
||||
import { TagCloud } from '../tagCloud';
|
||||
import { arraySorter } from './arraySorter';
|
||||
import styles from './ListsTable.module.css';
|
||||
|
||||
export const ListsTable = (props: RouteComponentProps) => {
|
||||
const lists = useLists();
|
||||
const languages = useLanguages();
|
||||
const licenses = useLicenses();
|
||||
const tags = useTags();
|
||||
const tablePageSize = useTablePageSizer();
|
||||
interface Props {
|
||||
lists: List[];
|
||||
languages: Language[];
|
||||
licenses: License[];
|
||||
tags: Tag[];
|
||||
}
|
||||
|
||||
const ListsTable = () =>
|
||||
<Table<List>
|
||||
dataSource={lists}
|
||||
rowKey={record => record.id.toString()}
|
||||
loading={lists.length ? false : true}
|
||||
size="small"
|
||||
pagination={{ size: "small", simple: true, style: { float: "left" }, pageSize: tablePageSize.pageSize }}
|
||||
scroll={{ x: tablePageSize.isNarrowWindow ? undefined : 1200 }}>
|
||||
<Table.Column<List>
|
||||
title="Info"
|
||||
dataIndex={nameof<List>("id")}
|
||||
className={styles.nogrow}
|
||||
fixed="left"
|
||||
render={(_text: string, record: List) => <ListInfoButton list={record} {...props} />} />
|
||||
<Table.Column<List>
|
||||
title="Name"
|
||||
dataIndex={nameof<List>("name")}
|
||||
sorter={(a, b) => a.name.localeCompare(b.name)}
|
||||
defaultSortOrder={"ascend"}
|
||||
width={tablePageSize.isNarrowWindow ? undefined : 200}
|
||||
className={styles.nogrow}
|
||||
fixed="left"
|
||||
render={(text: string) => <div>{text}</div>} />
|
||||
{tablePageSize.isNarrowWindow
|
||||
? null
|
||||
: <Table.Column<List>
|
||||
title="Description"
|
||||
dataIndex={nameof<List>("description")}
|
||||
className={styles.nogrow}
|
||||
render={(_text: string, record: List) => <Description {...record} />} />}
|
||||
{tablePageSize.isNarrowWindow
|
||||
? null
|
||||
: <Table.Column<List>
|
||||
title="Software"
|
||||
dataIndex={nameof<List>("syntaxId")}
|
||||
className={styles.nogrow}
|
||||
render={(text: string) => <div>{text}</div>} />}
|
||||
{tablePageSize.isNarrowWindow
|
||||
? null
|
||||
: <Table.Column<List>
|
||||
title="Languages"
|
||||
dataIndex={nameof<List>("languageIds")}
|
||||
sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, languages)}
|
||||
width={125}
|
||||
className={styles.nogrow}
|
||||
render={(languageIds: number[]) => languageIds ? <LanguageCloud languages={languages.filter((l: Language) => languageIds.includes(l.id))} /> : null} />}
|
||||
{tablePageSize.isNarrowWindow
|
||||
? null
|
||||
: <Table.Column<List>
|
||||
title="Tags"
|
||||
dataIndex={nameof<List>("tagIds")}
|
||||
sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, tags)}
|
||||
width={275}
|
||||
className={styles.nogrow}
|
||||
render={(tagIds: number[]) => tagIds ? <TagCloud tags={tags.filter((t: Tag) => tagIds.includes(t.id))} /> : null} />}
|
||||
</Table>;
|
||||
|
||||
const ListDetailsDrawer = () =>
|
||||
<Route path="/lists/:id" render={rp => {
|
||||
const list = lists.find(l => l.id === +rp.match.params.id);
|
||||
return list
|
||||
? <ListInfoDrawer
|
||||
list={list as List}
|
||||
languages={list.languageIds && languages.filter((l: Language) => list.languageIds.includes(l.id))}
|
||||
license={list.licenseId ? licenses.find((l: License) => list.licenseId === l.id) : undefined}
|
||||
tags={list.tagIds && tags.filter((t: Tag) => list.tagIds.includes(t.id))}
|
||||
{...props} />
|
||||
: lists && lists.length && <Redirect to={{ pathname: "/", }} />
|
||||
}} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListsTable />
|
||||
<ListDetailsDrawer />
|
||||
</>
|
||||
);
|
||||
export const ListsTable = (props: RouteComponentProps & Props) => {
|
||||
const tablePageSize = useTablePageSizer();
|
||||
return (
|
||||
<Table<List>
|
||||
dataSource={props.lists}
|
||||
rowKey={record => record.id.toString()}
|
||||
loading={props.lists.length ? false : true}
|
||||
size="small"
|
||||
pagination={{ size: "small", simple: true, style: { float: "left" }, pageSize: tablePageSize.pageSize }}
|
||||
scroll={{ x: tablePageSize.isNarrowWindow ? undefined : 1200 }}>
|
||||
<Table.Column<List>
|
||||
title="Info"
|
||||
dataIndex={nameof<List>("id")}
|
||||
className={styles.nogrow}
|
||||
fixed="left"
|
||||
render={(_text: string, record: List) => <ListInfoButton list={record} {...props} />} />
|
||||
<Table.Column<List>
|
||||
title="Name"
|
||||
dataIndex={nameof<List>("name")}
|
||||
sorter={(a, b) => a.name.localeCompare(b.name)}
|
||||
defaultSortOrder={"ascend"}
|
||||
width={tablePageSize.isNarrowWindow ? undefined : 200}
|
||||
className={styles.nogrow}
|
||||
fixed="left"
|
||||
render={(text: string) => <div>{text}</div>} />
|
||||
{tablePageSize.isNarrowWindow
|
||||
? null
|
||||
: <Table.Column<List>
|
||||
title="Description"
|
||||
dataIndex={nameof<List>("description")}
|
||||
className={styles.nogrow}
|
||||
render={(_text: string, record: List) => <Description {...record} />} />}
|
||||
{tablePageSize.isNarrowWindow
|
||||
? null
|
||||
: <Table.Column<List>
|
||||
title="Software"
|
||||
dataIndex={nameof<List>("syntaxId")}
|
||||
className={styles.nogrow}
|
||||
render={(text: string) => <div>{text}</div>} />}
|
||||
{tablePageSize.isNarrowWindow
|
||||
? null
|
||||
: <Table.Column<List>
|
||||
title="Languages"
|
||||
dataIndex={nameof<List>("languageIds")}
|
||||
sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, props.languages)}
|
||||
width={125}
|
||||
className={styles.nogrow}
|
||||
render={(languageIds: number[]) => languageIds ? <LanguageCloud languages={props.languages.filter((l: Language) => languageIds.includes(l.id))} /> : null} />}
|
||||
{tablePageSize.isNarrowWindow
|
||||
? null
|
||||
: <Table.Column<List>
|
||||
title="Tags"
|
||||
dataIndex={nameof<List>("tagIds")}
|
||||
sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, props.tags)}
|
||||
width={275}
|
||||
className={styles.nogrow}
|
||||
render={(tagIds: number[]) => tagIds ? <TagCloud tags={props.tags.filter((t: Tag) => tagIds.includes(t.id))} /> : null} />}
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import { RouteComponentProps } from 'react-router-dom';
|
||||
|
||||
import { useLanguages, useLicenses, useLists, useTags } from '../../hooks';
|
||||
import { ListDrawer } from './ListDrawer';
|
||||
import { ListsTable } from './ListsTable';
|
||||
|
||||
export const ListsTableHoc = (props: RouteComponentProps) => {
|
||||
const lists = useLists();
|
||||
const languages = useLanguages();
|
||||
const licenses = useLicenses();
|
||||
const tags = useTags();
|
||||
return (
|
||||
<>
|
||||
<ListsTable lists={lists} languages={languages} licenses={licenses} tags={tags} {...props} />
|
||||
<ListDrawer lists={lists} languages={languages} licenses={licenses} tags={tags} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
import { ListsTable } from './ListsTable';
|
||||
import { ListsTableHoc } from './ListsTableHoc';
|
||||
|
||||
export { ListsTable }
|
||||
export { ListsTableHoc as ListsTable }
|
||||
Loading…
Reference in a new issue