prehistoric-systems/FilterLists
1
0
Fork 0
mirror of https://github.com/collinbarrett/FilterLists.git synced 2026-03-11 09:04:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

useTablePageSizer hook

Browse source
This commit is contained in:
Collin M. Barrett 2019-08-31 10:00:02 -05:00
parent 8e4b3adf3d
commit f8839009f3
4 changed files with 42 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx
View file

@ -1,8 +1,8 @@
import { Table } from 'antd';
import React, { useEffect, useState } from 'react';
import React from 'react';
import { Redirect, Route, RouteComponentProps } from 'react-router-dom';
import { useLanguages, useLicenses, useLists, useTags } from '../../hooks';
import { useLanguages, useLicenses, useLists, useTablePageSizer, useTags } from '../../hooks';
import { Language } from '../../interfaces/Language';
import { License } from '../../interfaces/License';
import { List } from '../../interfaces/List';
@ -20,9 +20,7 @@ export const ListsTable = (props: RouteComponentProps) => {
const languages = useLanguages();
const licenses = useLicenses();
const tags = useTags();
const [pageSize, setPageSize] = useState<number>(0);
const [isNarrowWindow, setIsNarrowWindow] = useState<boolean>(false);
const tablePageSize = useTablePageSizer();
return (
<span>
@ -31,8 +29,8 @@ export const ListsTable = (props: RouteComponentProps) => {
rowKey={record => record.id.toString()}
loading={lists.length ? false : true}
size="small"
pagination={{ size: "small", simple: true, style: { float: "left" }, pageSize: pageSize }}
scroll={{ x: isNarrowWindow ? undefined : 1200 }}>
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")}
@ -44,25 +42,25 @@ export const ListsTable = (props: RouteComponentProps) => {
dataIndex={nameof<List>("name")}
sorter={(a, b) => a.name.localeCompare(b.name)}
defaultSortOrder={"ascend"}
width={isNarrowWindow ? undefined : 200}
width={tablePageSize.isNarrowWindow ? undefined : 200}
className={styles.nogrow}
fixed="left"
render={(text: string) => <div>{text}</div>} />
{isNarrowWindow
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Description"
dataIndex={nameof<List>("description")}
className={styles.nogrow}
render={(_text: string, record: List) => <Description {...record} />} />}
{isNarrowWindow
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Software"
dataIndex={nameof<List>("syntaxId")}
className={styles.nogrow}
render={(text: string) => <div>{text}</div>} />}
{isNarrowWindow
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Languages"
@ -71,7 +69,7 @@ export const ListsTable = (props: RouteComponentProps) => {
width={125}
className={styles.nogrow}
render={(languageIds: number[]) => languageIds ? <LanguageCloud languages={languages.filter((l: Language) => languageIds.includes(l.id))} /> : null} />}
{isNarrowWindow
{tablePageSize.isNarrowWindow
? null
: <Table.Column<List>
title="Tags"
@ -96,146 +94,6 @@ export const ListsTable = (props: RouteComponentProps) => {
);
}
// export class ListsTable extends React.Component<RouteComponentProps, State> {
// constructor(props: any) {
// super(props);
// this.state = {
// lists: [],
// languages: [],
// licenses: [],
// tags: [],
// pageSize: 0,
// isNarrowWindow: false
// };
// this.updatePageSize = this.updatePageSize.bind(this);
// }
// componentDidMount() {
// this.fetchData();
// this.updatePageSize();
// window.addEventListener('resize', this.updatePageSize);
// }
// private fetchData() {
// this.fetchLists();
// this.fetchLanguages();
// this.fetchTags();
// this.fetchLicenses();
// }
// private fetchLists() {
// fetch("/api/v1/lists")
// .then(response => response.json())
// .then(json => (json as List[]).sort((a, b) => a.name.localeCompare(b.name)))
// .then(lists => { this.setState({ lists: lists }); });
// }
// private fetchLanguages() {
// fetch("/api/v1/languages")
// .then(response => response.json())
// .then(json => (json as Language[]).sort((a, b) => a.name.localeCompare(b.name)))
// .then(languages => { this.setState({ languages: languages }); });
// }
// private fetchTags() {
// fetch("/api/v1/tags")
// .then(response => response.json())
// .then(json => (json as Tag[]).sort((a, b) => a.name.localeCompare(b.name)))
// .then(tags => { this.setState({ tags: tags }); });
// }
// private fetchLicenses() {
// fetch("/api/v1/licenses")
// .then(response => response.json())
// .then(json => (json as License[]).sort((a, b) => a.name.localeCompare(b.name)))
// .then(licenses => { this.setState({ licenses: licenses }); });
// }
// private updatePageSize() {
// this.setState({
// pageSize: Math.floor((window.innerHeight - 211.5) / 56),
// isNarrowWindow: window.innerWidth < 576 ? true : false
// });
// }
// render() {
// return (
// <span>
// <Table<List>
// dataSource={this.state.lists}
// rowKey={record => record.id.toString()}
// loading={this.state.lists.length ? false : true}
// size="small"
// pagination={{ size: "small", simple: true, style: { float: "left" }, pageSize: this.state.pageSize }}
// scroll={{ x: this.state.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} {...this.props} />} />
// <Table.Column<List>
// title="Name"
// dataIndex={nameof<List>("name")}
// sorter={(a, b) => a.name.localeCompare(b.name)}
// defaultSortOrder={"ascend"}
// width={this.state.isNarrowWindow ? undefined : 200}
// className={styles.nogrow}
// fixed="left"
// render={(text: string) => <div>{text}</div>} />
// {this.state.isNarrowWindow
// ? null
// : <Table.Column<List>
// title="Description"
// dataIndex={nameof<List>("description")}
// className={styles.nogrow}
// render={(_text: string, record: List) => <Description {...record} />} />}
// {this.state.isNarrowWindow
// ? null
// : <Table.Column<List>
// title="Software"
// dataIndex={nameof<List>("syntaxId")}
// className={styles.nogrow}
// render={(text: string) => <div>{text}</div>} />}
// {this.state.isNarrowWindow
// ? null
// : <Table.Column<List>
// title="Languages"
// dataIndex={nameof<List>("languageIds")}
// sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, this.state.languages)}
// width={125}
// className={styles.nogrow}
// render={(languageIds: number[]) => languageIds ? <LanguageCloud languages={this.state.languages.filter((l: Language) => languageIds.includes(l.id))} /> : null} />}
// {this.state.isNarrowWindow
// ? null
// : <Table.Column<List>
// title="Tags"
// dataIndex={nameof<List>("tagIds")}
// sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, this.state.tags)}
// width={275}
// className={styles.nogrow}
// render={(tagIds: number[]) => tagIds ? <TagCloud tags={this.state.tags.filter((t: Tag) => tagIds.includes(t.id))} /> : null} />}
// </Table>
// <Route path="/lists/:id" render={props => {
// const list = this.state.lists.find(l => l.id === +props.match.params.id);
// return list
// ? <ListInfoDrawer
// list={list as List}
// languages={list.languageIds && this.state.languages.filter((l: Language) => list.languageIds.includes(l.id))}
// license={list.licenseId ? this.state.licenses.find((l: License) => list.licenseId === l.id) : undefined}
// tags={list.tagIds && this.state.tags.filter((t: Tag) => list.tagIds.includes(t.id))}
// {...this.props} />
// : this.state.lists && this.state.lists.length && <Redirect to={{ pathname: "/", }} />
// }} />
// </span>
// );
// }
// componentWillUnmount() {
// window.removeEventListener('resize', this.updatePageSize);
// }
// }
interface ArraySortableEntity {
id: number;
name: string;

3
src/FilterLists.Web.V2/src/hooks/index.ts
View file

@ -2,6 +2,7 @@ import { useApiData } from './useApiData';
import { useLanguages } from './useLanguages';
import { useLicenses } from './useLicenses';
import { useLists } from './useLists';
import { useTablePageSizer } from './useTablePageSizer';
import { useTags } from './useTags';
export { useLists, useLanguages, useLicenses, useTags, useApiData };
export { useApiData, useLanguages, useLicenses, useLists, useTablePageSizer, useTags };

14
src/FilterLists.Web.V2/src/hooks/useApiData.tsx
View file

@ -2,11 +2,13 @@ import { useEffect, useState } from 'react';
export const useApiData = <T extends {}>(url: string) => {
const [data, setData] = useState<T>();
const fetchData = async () => {
(await fetch(url))
.json()
.then(r => setData(r));
};
useEffect(() => { fetchData(); }, []);
useEffect(() => {
const fetchData = async () => {
(await fetch(url))
.json()
.then(r => setData(r));
};
fetchData();
}, [url]);
return data;
};

22
src/FilterLists.Web.V2/src/hooks/useTablePageSizer.tsx Normal file
View file

@ -0,0 +1,22 @@
import { useEffect, useState } from 'react';
interface TablePageSize {
pageSize: number;
isNarrowWindow: boolean;
}
export const useTablePageSizer = () => {
const calculateSize = () => {
return {
pageSize: Math.floor((window.innerHeight - 211.5) / 56),
isNarrowWindow: window.innerWidth < 576 ? true : false
};
}
const [state, setState] = useState<TablePageSize>(calculateSize());
useEffect(() => {
const updatePageSize = () => { setState(calculateSize()) }
window.addEventListener('resize', updatePageSize);
return () => window.removeEventListener('resize', updatePageSize);
}, []);
return state;
}