From f8839009f3f4455e61107e48b5922d3bcde6a9e6 Mon Sep 17 00:00:00 2001 From: "Collin M. Barrett" Date: Sat, 31 Aug 2019 10:00:02 -0500 Subject: [PATCH] useTablePageSizer hook --- .../src/components/listsTable/ListsTable.tsx | 162 ++---------------- src/FilterLists.Web.V2/src/hooks/index.ts | 3 +- .../src/hooks/useApiData.tsx | 14 +- .../src/hooks/useTablePageSizer.tsx | 22 +++ 4 files changed, 42 insertions(+), 159 deletions(-) create mode 100644 src/FilterLists.Web.V2/src/hooks/useTablePageSizer.tsx diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx index d0e2f6cbb..8ecf154f0 100644 --- a/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx +++ b/src/FilterLists.Web.V2/src/components/listsTable/ListsTable.tsx @@ -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(0); - const [isNarrowWindow, setIsNarrowWindow] = useState(false); + const tablePageSize = useTablePageSizer(); return ( @@ -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 }}> title="Info" dataIndex={nameof("id")} @@ -44,25 +42,25 @@ export const ListsTable = (props: RouteComponentProps) => { dataIndex={nameof("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) =>
{text}
} /> - {isNarrowWindow + {tablePageSize.isNarrowWindow ? null : title="Description" dataIndex={nameof("description")} className={styles.nogrow} render={(_text: string, record: List) => } />} - {isNarrowWindow + {tablePageSize.isNarrowWindow ? null : title="Software" dataIndex={nameof("syntaxId")} className={styles.nogrow} render={(text: string) =>
{text}
} />} - {isNarrowWindow + {tablePageSize.isNarrowWindow ? null : title="Languages" @@ -71,7 +69,7 @@ export const ListsTable = (props: RouteComponentProps) => { width={125} className={styles.nogrow} render={(languageIds: number[]) => languageIds ? languageIds.includes(l.id))} /> : null} />} - {isNarrowWindow + {tablePageSize.isNarrowWindow ? null : title="Tags" @@ -96,146 +94,6 @@ export const ListsTable = (props: RouteComponentProps) => { ); } -// export class ListsTable extends React.Component { -// 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 ( -// -// -// 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 }}> -// -// title="Info" -// dataIndex={nameof("id")} -// className={styles.nogrow} -// fixed="left" -// render={(_text: string, record: List) => } /> -// -// title="Name" -// dataIndex={nameof("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) =>
{text}
} /> -// {this.state.isNarrowWindow -// ? null -// : -// title="Description" -// dataIndex={nameof("description")} -// className={styles.nogrow} -// render={(_text: string, record: List) => } />} -// {this.state.isNarrowWindow -// ? null -// : -// title="Software" -// dataIndex={nameof("syntaxId")} -// className={styles.nogrow} -// render={(text: string) =>
{text}
} />} -// {this.state.isNarrowWindow -// ? null -// : -// title="Languages" -// dataIndex={nameof("languageIds")} -// sorter={(a, b) => arraySorter(a.languageIds, b.languageIds, this.state.languages)} -// width={125} -// className={styles.nogrow} -// render={(languageIds: number[]) => languageIds ? languageIds.includes(l.id))} /> : null} />} -// {this.state.isNarrowWindow -// ? null -// : -// title="Tags" -// dataIndex={nameof("tagIds")} -// sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, this.state.tags)} -// width={275} -// className={styles.nogrow} -// render={(tagIds: number[]) => tagIds ? tagIds.includes(t.id))} /> : null} />} -// -// { -// const list = this.state.lists.find(l => l.id === +props.match.params.id); -// return list -// ? 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 && -// }} /> -// -// ); -// } - -// componentWillUnmount() { -// window.removeEventListener('resize', this.updatePageSize); -// } -// } - interface ArraySortableEntity { id: number; name: string; diff --git a/src/FilterLists.Web.V2/src/hooks/index.ts b/src/FilterLists.Web.V2/src/hooks/index.ts index 695ceab13..e2d535883 100644 --- a/src/FilterLists.Web.V2/src/hooks/index.ts +++ b/src/FilterLists.Web.V2/src/hooks/index.ts @@ -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 }; diff --git a/src/FilterLists.Web.V2/src/hooks/useApiData.tsx b/src/FilterLists.Web.V2/src/hooks/useApiData.tsx index 7b3f9074d..d58f5311b 100644 --- a/src/FilterLists.Web.V2/src/hooks/useApiData.tsx +++ b/src/FilterLists.Web.V2/src/hooks/useApiData.tsx @@ -2,11 +2,13 @@ import { useEffect, useState } from 'react'; export const useApiData = (url: string) => { const [data, setData] = useState(); - 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; }; diff --git a/src/FilterLists.Web.V2/src/hooks/useTablePageSizer.tsx b/src/FilterLists.Web.V2/src/hooks/useTablePageSizer.tsx new file mode 100644 index 000000000..cde7da212 --- /dev/null +++ b/src/FilterLists.Web.V2/src/hooks/useTablePageSizer.tsx @@ -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(calculateSize()); + useEffect(() => { + const updatePageSize = () => { setState(calculateSize()) } + window.addEventListener('resize', updatePageSize); + return () => window.removeEventListener('resize', updatePageSize); + }, []); + return state; +} \ No newline at end of file