70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { useStore } from 'App/mstore';
|
|
import { numberWithCommas } from 'App/utils';
|
|
import { Input } from 'antd';
|
|
import ReloadButton from 'Shared/ReloadButton';
|
|
import SessionItem from 'Shared/SessionItem';
|
|
import { Loader, Pagination } from 'UI';
|
|
import { observer } from 'mobx-react-lite';
|
|
|
|
function LiveTestsModal({ testId, closeModal }: { testId: string; closeModal: () => void }) {
|
|
const [page, setPage] = React.useState(1);
|
|
const [isLoading, setIsLoading] = React.useState(false);
|
|
const [userId, setUserId] = React.useState('');
|
|
const { uxtestingStore } = useStore();
|
|
|
|
React.useEffect(() => {
|
|
uxtestingStore.getAssistSessions(testId, page, undefined);
|
|
}, []);
|
|
|
|
const refreshData = (page: number) => {
|
|
setIsLoading(true);
|
|
setPage(page);
|
|
uxtestingStore
|
|
.getAssistSessions(testId, page, userId)
|
|
.then(() => setIsLoading(false))
|
|
.catch(() => setIsLoading(false));
|
|
};
|
|
|
|
return (
|
|
<div className={'h-screen p-4 bg-white'}>
|
|
<div className={'border-b flex items-center justify-between mb-4 py-2'}>
|
|
<ReloadButton onClick={() => refreshData(page)} />
|
|
<div className={'w-3/4 font-semibold text-xl'}>Live Participants</div>
|
|
<Input.Search
|
|
allowClear
|
|
placeholder="Filter by participant ID or name"
|
|
onChange={(e) => setUserId(e.target.value)}
|
|
onSearch={() => refreshData(page)}
|
|
/>
|
|
</div>
|
|
<Loader loading={isLoading}>
|
|
{uxtestingStore.testAssistSessions.list.map((s: any) => (
|
|
<SessionItem onClick={closeModal} key={s.sessionId} session={s} live />
|
|
))}
|
|
<div className={'flex items-center justify-between'}>
|
|
<div>
|
|
Showing <span className="font-medium">{(page - 1) * 10 + 1}</span> to{' '}
|
|
<span className="font-medium">
|
|
{(page - 1) * 10 + uxtestingStore.testAssistSessions.list.length}
|
|
</span>{' '}
|
|
of{' '}
|
|
<span className="font-medium">
|
|
{numberWithCommas(uxtestingStore.testAssistSessions.total)}
|
|
</span>{' '}
|
|
ongoing tests.
|
|
</div>
|
|
<Pagination
|
|
page={page}
|
|
total={uxtestingStore.testAssistSessions.total}
|
|
onPageChange={refreshData}
|
|
limit={10}
|
|
debounceRequest={200}
|
|
/>
|
|
</div>
|
|
</Loader>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(LiveTestsModal);
|