mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +01:00
162 lines
5.3 KiB
TypeScript
162 lines
5.3 KiB
TypeScript
|
import useFeedbackPosted from 'hooks/api/getters/useFeedbackPosted/useFeedbackPosted';
|
||
|
import { VirtualizedTable } from 'component/common/Table';
|
||
|
import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
|
||
|
import { useFlexLayout, useSortBy, useTable } from 'react-table';
|
||
|
import { sortTypes } from 'utils/sortTypes';
|
||
|
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
|
||
|
import { PageContent } from 'component/common/PageContent/PageContent';
|
||
|
import { PageHeader } from 'component/common/PageHeader/PageHeader';
|
||
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||
|
import { Search } from 'component/common/Search/Search';
|
||
|
import { useMediaQuery } from '@mui/material';
|
||
|
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
|
||
|
import { useSearch } from 'hooks/useSearch';
|
||
|
import theme from 'themes/theme';
|
||
|
import { useState } from 'react';
|
||
|
import { FeedbackSchema } from '../../openapi';
|
||
|
|
||
|
interface IFeedbackSchemaCellProps {
|
||
|
value?: string | null; // FIXME: proper type
|
||
|
row: { original: FeedbackSchema };
|
||
|
}
|
||
|
|
||
|
export const FeedbackList = () => {
|
||
|
const { feedback } = useFeedbackPosted();
|
||
|
|
||
|
const [searchValue, setSearchValue] = useState('');
|
||
|
|
||
|
const columns = [
|
||
|
{
|
||
|
Header: 'Category',
|
||
|
accessor: 'category',
|
||
|
Cell: ({
|
||
|
row: { original: feedback },
|
||
|
}: IFeedbackSchemaCellProps) => (
|
||
|
<TextCell>{feedback.category}</TextCell>
|
||
|
),
|
||
|
searchable: true,
|
||
|
},
|
||
|
{
|
||
|
Header: 'UserType',
|
||
|
accessor: 'userType',
|
||
|
Cell: ({
|
||
|
row: { original: feedback },
|
||
|
}: IFeedbackSchemaCellProps) => (
|
||
|
<TextCell>{feedback.userType}</TextCell>
|
||
|
),
|
||
|
searchable: true,
|
||
|
},
|
||
|
{
|
||
|
Header: 'DifficultyScore',
|
||
|
accessor: 'difficultyScore',
|
||
|
Cell: ({
|
||
|
row: { original: feedback },
|
||
|
}: IFeedbackSchemaCellProps) => (
|
||
|
<TextCell>{feedback.difficultyScore}</TextCell>
|
||
|
),
|
||
|
},
|
||
|
{
|
||
|
Header: 'Positive',
|
||
|
accessor: 'positive',
|
||
|
minWidth: 100,
|
||
|
Cell: ({
|
||
|
row: { original: feedback },
|
||
|
}: IFeedbackSchemaCellProps) => (
|
||
|
<TextCell>{feedback.positive}</TextCell>
|
||
|
),
|
||
|
disableSortBy: true,
|
||
|
searchable: true,
|
||
|
},
|
||
|
{
|
||
|
Header: 'Areas for improvement',
|
||
|
accessor: 'areasForImprovement',
|
||
|
minWidth: 100,
|
||
|
Cell: ({
|
||
|
row: { original: feedback },
|
||
|
}: IFeedbackSchemaCellProps) => (
|
||
|
<TextCell>{feedback.areasForImprovement}</TextCell>
|
||
|
),
|
||
|
disableSortBy: true,
|
||
|
searchable: true,
|
||
|
},
|
||
|
{
|
||
|
Header: 'Created at',
|
||
|
accessor: 'createdAt',
|
||
|
Cell: DateCell,
|
||
|
},
|
||
|
];
|
||
|
|
||
|
const { data, getSearchText } = useSearch(columns, searchValue, feedback);
|
||
|
|
||
|
const { headerGroups, rows, prepareRow } = useTable(
|
||
|
{
|
||
|
columns: columns as any,
|
||
|
data,
|
||
|
initialState: {
|
||
|
sortBy: [
|
||
|
{
|
||
|
id: 'createdAt',
|
||
|
desc: true,
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
sortTypes,
|
||
|
autoResetHiddenColumns: false,
|
||
|
autoResetSortBy: false,
|
||
|
disableSortRemove: true,
|
||
|
disableMultiSort: true,
|
||
|
defaultColumn: {
|
||
|
Cell: TextCell,
|
||
|
},
|
||
|
},
|
||
|
useSortBy,
|
||
|
useFlexLayout,
|
||
|
);
|
||
|
|
||
|
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
|
||
|
|
||
|
return (
|
||
|
<PageContent
|
||
|
header={
|
||
|
<PageHeader
|
||
|
title={`Feedbacks posted (${rows.length})`}
|
||
|
actions={
|
||
|
<>
|
||
|
<ConditionallyRender
|
||
|
condition={!isSmallScreen}
|
||
|
show={
|
||
|
<>
|
||
|
<Search
|
||
|
initialValue={searchValue}
|
||
|
onChange={setSearchValue}
|
||
|
/>
|
||
|
<PageHeader.Divider />
|
||
|
</>
|
||
|
}
|
||
|
/>
|
||
|
</>
|
||
|
}
|
||
|
>
|
||
|
<ConditionallyRender
|
||
|
condition={isSmallScreen}
|
||
|
show={
|
||
|
<Search
|
||
|
initialValue={searchValue}
|
||
|
onChange={setSearchValue}
|
||
|
/>
|
||
|
}
|
||
|
/>
|
||
|
</PageHeader>
|
||
|
}
|
||
|
>
|
||
|
<SearchHighlightProvider value={getSearchText(searchValue)}>
|
||
|
<VirtualizedTable
|
||
|
rows={rows}
|
||
|
headerGroups={headerGroups}
|
||
|
prepareRow={prepareRow}
|
||
|
/>
|
||
|
</SearchHighlightProvider>
|
||
|
</PageContent>
|
||
|
);
|
||
|
};
|