From a39df3124d8a3bfcb0b40b77364122ec294081d9 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Sun, 13 Jun 2021 00:22:53 -0400 Subject: [PATCH] goodbye, react-table! I don't have time for that --- vocodes/package.json | 2 - vocodes/src/v2/profile/ProfileFc.tsx | 9 - .../Profile_TtsInferenceResultListFc.tsx | 43 +- .../Profile_TtsInferenceResultListTableFc.tsx | 396 ------------------ 4 files changed, 5 insertions(+), 445 deletions(-) delete mode 100644 vocodes/src/v2/profile/Profile_TtsInferenceResultListTableFc.tsx diff --git a/vocodes/package.json b/vocodes/package.json index c770ce56e2..f35396d54b 100644 --- a/vocodes/package.json +++ b/vocodes/package.json @@ -22,7 +22,6 @@ "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", - "react-table": "^7.7.0", "typescript": "^3.7.5", "uuid": "^8.3.2" }, @@ -52,7 +51,6 @@ }, "devDependencies": { "@types/react-router-dom": "^5.1.7", - "@types/react-table": "^7.7.1", "@types/uuid": "^8.3.0" } } diff --git a/vocodes/src/v2/profile/ProfileFc.tsx b/vocodes/src/v2/profile/ProfileFc.tsx index 7182b1a265..0971c70a83 100644 --- a/vocodes/src/v2/profile/ProfileFc.tsx +++ b/vocodes/src/v2/profile/ProfileFc.tsx @@ -3,13 +3,11 @@ import { ApiConfig } from '../../common/ApiConfig'; import { GravatarFc } from '../common/GravatarFc'; import { Link } from 'react-router-dom'; import { ProfileTtsInferenceResultsListFc } from './Profile_TtsInferenceResultListFc'; -import { ProfileTtsInferenceResultsListTableFc } from './Profile_TtsInferenceResultListTableFc'; import { ProfileTtsModelListFc } from './Profile_TtsModelListFc'; import { ProfileW2lInferenceResultsListFc } from './Profile_W2lInferenceResultListFc'; import { ProfileW2lTemplateListFc } from './Profile_W2lTemplateListFc'; import { SessionWrapper } from '../../session/SessionWrapper'; import { useParams } from 'react-router-dom'; -import { profile } from 'console'; interface Props { sessionWrapper: SessionWrapper, @@ -197,13 +195,6 @@ function ProfileFc(props: Props) {

*/} - -

TTS Results Table

- - -
-
-

TTS Results

diff --git a/vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx b/vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx index 6d4ae99d1e..935d13fb86 100644 --- a/vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx +++ b/vocodes/src/v2/profile/Profile_TtsInferenceResultListFc.tsx @@ -32,16 +32,13 @@ interface Props { function ProfileTtsInferenceResultsListFc(props: Props) { const [ttsResults, setTtsResults] = useState>([]); - const [currentCursor, setCurrentCursor] = useState(null); const [nextCursor, setNextCursor] = useState(null); const [previousCursor, setPreviousCursor] = useState(null); const getPage = useCallback((cursor : string|null, reverse: boolean) => { - console.log('get page', cursor); - let args : ListTtsInferenceResultsForUserArgs = { - username: props.username , - limit: 5, + username: props.username, + limit: 25, }; if (cursor !== null) { @@ -79,34 +76,6 @@ function ProfileTtsInferenceResultsListFc(props: Props) { useEffect(() => { getPage(null, false); -// let args : ListTtsInferenceResultsForUserArgs = { -// username: props.username , -// limit: 5, -// }; -// -// const api = new ApiConfig(); -// const endpointUrl = api.listTtsInferenceResultsForUser(args); -// -// fetch(endpointUrl, { -// method: 'GET', -// headers: { -// 'Accept': 'application/json', -// }, -// credentials: 'include', -// }) -// .then(res => res.json()) -// .then(res => { -// const modelsResponse : TtsInferenceResultListResponsePayload = res; -// if (!modelsResponse.success) { -// return; -// } -// -// setTtsResults(modelsResponse.results) -// setNextCursor(modelsResponse.cursor_next || null) -// }) -// .catch(e => { -// //this.props.onSpeakErrorCallback(); -// }); }, [getPage, props.username]); // NB: Empty array dependency sets to run ONLY on mount let rows : Array = []; @@ -117,15 +86,14 @@ function ProfileTtsInferenceResultsListFc(props: Props) { let inferenceLink = `/tts/result/${result.tts_result_token}`; let modelLink = `/tts/${result.tts_model_token}`; + let text = result.raw_inference_text.length < 5 ? `Result: ${result.raw_inference_text}` : result.raw_inference_text; + rows.push( - ▶️ Result + ▶️ {text}   - - {result.raw_inference_text} - Model {duration_seconds} s {result.created_at} @@ -139,7 +107,6 @@ function ProfileTtsInferenceResultsListFc(props: Props) { Download & Play Link - Raw Text Model Duration Creation Date (UTC) diff --git a/vocodes/src/v2/profile/Profile_TtsInferenceResultListTableFc.tsx b/vocodes/src/v2/profile/Profile_TtsInferenceResultListTableFc.tsx deleted file mode 100644 index d7517a2948..0000000000 --- a/vocodes/src/v2/profile/Profile_TtsInferenceResultListTableFc.tsx +++ /dev/null @@ -1,396 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { ApiConfig, ListTtsInferenceResultsForUserArgs } from '../../common/ApiConfig'; -import { useTable, usePagination, } from 'react-table'; - -interface TtsInferenceResultListResponsePayload { - success: boolean, - results: Array, - cursor_next: string | null | undefined, - cursor_previous: string | null | undefined, -} - -interface TtsInferenceResult { - tts_result_token: string, - tts_model_token: string, - raw_inference_text: string, - - maybe_creator_user_token?: string, - maybe_creator_username?: string, - maybe_creator_display_name?: string, - - file_size_bytes: number, - duration_millis: number, - - created_at: string, - updated_at: string, -} - -interface Props { - username: string, -} - -// TODO: get rid of any binding -function Table({ - columns, - data, - fetchData, - loading, - pageCount: controlledPageCount, - nextCursor, -} : any) { - - //console.log(columns, data, fetchData, loading, controlledPageCount); - - const { - getTableProps, - getTableBodyProps, - headerGroups, - prepareRow, - page, - canPreviousPage, - canNextPage, - pageOptions, - pageCount, - gotoPage, - nextPage, - previousPage, - setPageSize, - // Get the state from the instance - state: { pageIndex, pageSize }, - } = useTable( - { - columns, - data, - initialState: { pageIndex: 0, pageSize: 5 }, // Pass our hoisted table state - manualPagination: true, // Tell the usePagination - // hook that we'll handle our own data fetching - // This means we'll also have to provide our own - // pageCount. - pageCount: -1, - } as any, - usePagination - ) as any - - //console.log('nextCursor', nextCursor) - - // Listen for changes in pagination and use the state to fetch our new data - React.useEffect(() => { - //console.log('calliong fetchData', nextCursor) - //fetchData({ pageIndex, pageSize, nextCursor }) - }, [fetchData, pageIndex, pageSize, nextCursor]) - - - - // Render the UI for your table - return ( - <> - 
-        
-          {JSON.stringify(
-            {
-              pageIndex,
-              pageSize,
-              pageCount,
-              canNextPage,
-              canPreviousPage,
-            },
-            null,
-            2
-          )}
-        
-
- - - {headerGroups.map((headerGroup: any) => ( - - {headerGroup.headers.map((column: any) => ( - - ))} - - ))} - - - {page.map((row : any, i : any) => { - prepareRow(row) - return ( - - {row.cells.map((cell: any) => { - return - })} - - ) - })} - - {loading ? ( - // Use our custom loading state to show a loading indicator - - ) : ( - - )} - - -
- {column.render('Header')} - - -
{cell.render('Cell')}
Loading... - Showing {page.length} of ~{controlledPageCount * pageSize}{' '} - results -
- {/* - Pagination can be built however you'd like. - This is just a very basic UI implementation: - */} -
- {' '} - - {' '} - {' '} - {' '} - {' '} - - Page{' '} - - {pageIndex + 1} of {pageOptions.length} - {' '} - - - | Go to page:{' '} - { - const page = e.target.value ? Number(e.target.value) - 1 : 0 - gotoPage(page) - }} - style={{ width: '100px' }} - /> - {' '} - -
- - ) - -} - - - - -function ProfileTtsInferenceResultsListTableFc(props: Props) { - const [ttsResults, setTtsResults] = useState>([]); - const [data, setData] = useState>([]) - const [loading, setLoading] = useState(false); - - const [nextCursor, setNextCursor] = useState(undefined); - const [previousCursor, setPreviousCursor] = useState(undefined); - - - const columns = React.useMemo( - () => [ - { - Header: 'RESULT LINK', - accessor: 'col1', // TODO: Can be function into data - }, - { - Header: 'Voice', - accessor: 'col2', - }, - { - Header: 'Duration', - accessor: 'col3', - }, - { - Header: 'Creation Date', - accessor: 'col4', - }, - ], - [] - ); - - /*const data = React.useMemo( - () => [ - { - col1: 'Hello', - col2: 'World', - col3: 'what', - col4: 'ever', - }, - { - col1: 'react-table', - col2: 'rocks', - col3: 'what', - col4: 'ever', - }, - { - col1: 'whatever', - col2: 'you want', - col3: 'what', - col4: 'ever', - }, - ], - [] - );*/ - - // TODO: Fix types here. - //const tableInstance = useTable({ columns : columns as any, data }) - - - const fetchData = React.useCallback(( { pageSize, pageToken, nextCursor} ) => { - console.log('fetchData', pageSize, pageToken, nextCursor); - - //console.log('callback args', pageSize, pageToken, nextCursor) - - let args : ListTtsInferenceResultsForUserArgs = { - username: props.username, - limit: 5, - }; - - if (nextCursor !== undefined) { - args.cursor = nextCursor; - } - - //console.log('nextCursor', nextCursor); - - const api = new ApiConfig(); - const endpointUrl = api.listTtsInferenceResultsForUser(args); - - //console.log('url', endpointUrl); - - setLoading(true) - - fetch(endpointUrl, { - method: 'GET', - headers: { - 'Accept': 'application/json', - }, - credentials: 'include', - }) - .then(res => res.json()) - .then(res => { - const modelResponse : TtsInferenceResultListResponsePayload = res; - if (!modelResponse.success) { - return; - } - - //console.log('response', modelResponse) - - setTtsResults(modelResponse.results); - - - setNextCursor(modelResponse.cursor_next || undefined); - //setPreviousCursor(modelResponse.cursor_previous|| undefined); - - //console.log('callback nextCursor', nextCursor); - - let data : any[] = []; - - modelResponse.results.forEach(result => { - data.push({ - col1: result.raw_inference_text, - col2: result.raw_inference_text, - col3: result.tts_model_token, - col4: result.created_at, - }); - }) - - setData(data); - setLoading(false); - }) - .catch(e => { - //this.props.onSpeakErrorCallback(); - }); - - }, []); - - -// const { -// getTableProps, -// getTableBodyProps, -// headerGroups, -// rows, -// prepareRow, -// } = tableInstance; - - return ( -
- test - - - - {/* -
- - {// Loop over the header rows - headerGroups.map(headerGroup => ( - // Apply the header row props - - {// Loop over the headers in each row - headerGroup.headers.map(column => ( - // Apply the header cell props - - ))} - - ))} - - - rows.map(row => { - // Prepare the row for display - prepareRow(row) - return ( - - row.cells.map(cell => { - return ( - - ) - })} - - ) - })} - -
- {// Render the header - column.render('Header')} -
- cell.render('Cell')} -
- */} - -
- ) -} - -export { ProfileTtsInferenceResultsListTableFc };