fix(ui): fix icon appearing
This commit is contained in:
sylenien
parent
de21afde15
commit
500f617ec6
1 changed files with 173 additions and 150 deletions
|
|
@ -4,7 +4,12 @@ import { FilterKey } from 'Types/filter/filterType';
|
|||
import SessionItem from 'Shared/SessionItem';
|
||||
import { NoContent, Loader, Pagination, Button, Icon } from 'UI';
|
||||
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
||||
import { fetchSessions, addFilterByKeyAndValue, updateCurrentPage, setScrollPosition } from 'Duck/search';
|
||||
import {
|
||||
fetchSessions,
|
||||
addFilterByKeyAndValue,
|
||||
updateCurrentPage,
|
||||
setScrollPosition,
|
||||
} from 'Duck/search';
|
||||
import useTimeout from 'App/hooks/useTimeout';
|
||||
import { numberWithCommas } from 'App/utils';
|
||||
import { fetchListActive as fetchMetadata } from 'Duck/customField';
|
||||
|
|
@ -13,170 +18,188 @@ const AUTOREFRESH_INTERVAL = 5 * 60 * 1000;
|
|||
const PER_PAGE = 10;
|
||||
let sessionTimeOut: any = null;
|
||||
interface Props {
|
||||
loading: boolean;
|
||||
list: any;
|
||||
currentPage: number;
|
||||
total: number;
|
||||
filters: any;
|
||||
lastPlayedSessionId: string;
|
||||
metaList: any;
|
||||
scrollY: number;
|
||||
addFilterByKeyAndValue: (key: string, value: any, operator?: string) => void;
|
||||
updateCurrentPage: (page: number) => void;
|
||||
setScrollPosition: (scrollPosition: number) => void;
|
||||
fetchSessions: (filters: any, force: boolean) => void;
|
||||
fetchMetadata: () => void;
|
||||
activeTab: any;
|
||||
isEnterprise?: boolean;
|
||||
loading: boolean;
|
||||
list: any;
|
||||
currentPage: number;
|
||||
total: number;
|
||||
filters: any;
|
||||
lastPlayedSessionId: string;
|
||||
metaList: any;
|
||||
scrollY: number;
|
||||
addFilterByKeyAndValue: (key: string, value: any, operator?: string) => void;
|
||||
updateCurrentPage: (page: number) => void;
|
||||
setScrollPosition: (scrollPosition: number) => void;
|
||||
fetchSessions: (filters: any, force: boolean) => void;
|
||||
fetchMetadata: () => void;
|
||||
activeTab: any;
|
||||
isEnterprise?: boolean;
|
||||
}
|
||||
function SessionList(props: Props) {
|
||||
const { loading, list, currentPage, total, filters, lastPlayedSessionId, metaList, activeTab, isEnterprise = false } = props;
|
||||
const _filterKeys = filters.map((i: any) => i.key);
|
||||
const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
|
||||
const isBookmark = activeTab.type === 'bookmark';
|
||||
const isVault = isBookmark && isEnterprise;
|
||||
const NO_CONTENT = React.useMemo(() => {
|
||||
if (isBookmark && !isEnterprise) {
|
||||
return {
|
||||
icon: ICONS.NO_BOOKMARKS,
|
||||
message: 'No sessions bookmarked.',
|
||||
};
|
||||
} else if (isVault) {
|
||||
return {
|
||||
icon: ICONS.NO_SESSIONS_IN_VAULT,
|
||||
message: 'No sessions found in vault.',
|
||||
};
|
||||
}
|
||||
return {
|
||||
icon: ICONS.NO_SESSIONS,
|
||||
message: 'No relevant sessions found for the selected time period.',
|
||||
};
|
||||
}, [isBookmark, isVault, activeTab]);
|
||||
const {
|
||||
loading,
|
||||
list,
|
||||
currentPage,
|
||||
total,
|
||||
filters,
|
||||
lastPlayedSessionId,
|
||||
metaList,
|
||||
activeTab,
|
||||
isEnterprise = false,
|
||||
} = props;
|
||||
const _filterKeys = filters.map((i: any) => i.key);
|
||||
const hasUserFilter =
|
||||
_filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
|
||||
const isBookmark = activeTab.type === 'bookmark';
|
||||
const isVault = isBookmark && isEnterprise;
|
||||
const NO_CONTENT = React.useMemo(() => {
|
||||
if (isBookmark && !isEnterprise) {
|
||||
return {
|
||||
icon: ICONS.NO_BOOKMARKS,
|
||||
message: 'No sessions bookmarked.',
|
||||
};
|
||||
} else if (isVault) {
|
||||
return {
|
||||
icon: ICONS.NO_SESSIONS_IN_VAULT,
|
||||
message: 'No sessions found in vault.',
|
||||
};
|
||||
}
|
||||
return {
|
||||
icon: ICONS.NO_SESSIONS,
|
||||
message: 'No relevant sessions found for the selected time period.',
|
||||
};
|
||||
}, [isBookmark, isVault, activeTab]);
|
||||
|
||||
useTimeout(() => {
|
||||
if (!document.hidden) {
|
||||
props.fetchSessions(null, true);
|
||||
}
|
||||
}, AUTOREFRESH_INTERVAL);
|
||||
useTimeout(() => {
|
||||
if (!document.hidden) {
|
||||
props.fetchSessions(null, true);
|
||||
}
|
||||
}, AUTOREFRESH_INTERVAL);
|
||||
|
||||
useEffect(() => {
|
||||
// handle scroll position
|
||||
const { scrollY } = props;
|
||||
window.scrollTo(0, scrollY);
|
||||
if (total === 0) {
|
||||
props.fetchSessions(null, true);
|
||||
}
|
||||
props.fetchMetadata()
|
||||
useEffect(() => {
|
||||
// handle scroll position
|
||||
const { scrollY } = props;
|
||||
window.scrollTo(0, scrollY);
|
||||
if (total === 0) {
|
||||
props.fetchSessions(null, true);
|
||||
}
|
||||
props.fetchMetadata();
|
||||
|
||||
return () => {
|
||||
props.setScrollPosition(window.scrollY);
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
props.setScrollPosition(window.scrollY);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const refreshOnActive = () => {
|
||||
if (document.hidden && !!sessionTimeOut) {
|
||||
clearTimeout(sessionTimeOut);
|
||||
return;
|
||||
}
|
||||
|
||||
sessionTimeOut = setTimeout(function() {
|
||||
if (!document.hidden) {
|
||||
props.fetchSessions(null, true);
|
||||
}
|
||||
}, 5000)
|
||||
const refreshOnActive = () => {
|
||||
if (document.hidden && !!sessionTimeOut) {
|
||||
clearTimeout(sessionTimeOut);
|
||||
return;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("visibilitychange", refreshOnActive);
|
||||
return () => {
|
||||
document.removeEventListener("visibilitychange", refreshOnActive);
|
||||
}
|
||||
}, [])
|
||||
sessionTimeOut = setTimeout(function () {
|
||||
if (!document.hidden) {
|
||||
props.fetchSessions(null, true);
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
const onUserClick = (userId: any) => {
|
||||
if (userId) {
|
||||
props.addFilterByKeyAndValue(FilterKey.USERID, userId);
|
||||
} else {
|
||||
props.addFilterByKeyAndValue(FilterKey.USERID, '', 'isUndefined');
|
||||
}
|
||||
useEffect(() => {
|
||||
document.addEventListener('visibilitychange', refreshOnActive);
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', refreshOnActive);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Loader loading={loading}>
|
||||
<NoContent
|
||||
title={
|
||||
<div className="flex items-center justify-center flex-col">
|
||||
<AnimatedSVG name={NO_CONTENT.icon} size={170} />
|
||||
<div className="mt-2" />
|
||||
<div className="text-center text-gray-600 relative">
|
||||
{NO_CONTENT.message}
|
||||
<div style={{ position: 'absolute', right: -140, top: -115 }}>
|
||||
<Icon name="list-arrow" size={130} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
subtext={
|
||||
<div className="flex flex-col items-center">
|
||||
{(isVault || isBookmark) && (
|
||||
<div>
|
||||
{isVault
|
||||
? 'Add a session to your vault from player screen to retain it for ever.'
|
||||
: 'Bookmark important sessions in player screen and quickly find them here.'}
|
||||
</div>
|
||||
)}
|
||||
<Button variant="text-primary" className="mt-4" icon="sync-alt" onClick={() => props.fetchSessions(null, true)}>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
show={!loading && list.size === 0}
|
||||
>
|
||||
{list.map((session: any) => (
|
||||
<div key={session.sessionId} className="border-b">
|
||||
<SessionItem
|
||||
session={session}
|
||||
hasUserFilter={hasUserFilter}
|
||||
onUserClick={onUserClick}
|
||||
metaList={metaList}
|
||||
lastPlayedSessionId={lastPlayedSessionId}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</NoContent>
|
||||
const onUserClick = (userId: any) => {
|
||||
if (userId) {
|
||||
props.addFilterByKeyAndValue(FilterKey.USERID, userId);
|
||||
} else {
|
||||
props.addFilterByKeyAndValue(FilterKey.USERID, '', 'isUndefined');
|
||||
}
|
||||
};
|
||||
|
||||
{total > 0 && (
|
||||
<div className="flex items-center justify-between p-5">
|
||||
<div>
|
||||
Showing <span className="font-medium">{(currentPage - 1) * PER_PAGE + 1}</span> to{' '}
|
||||
<span className="font-medium">{(currentPage - 1) * PER_PAGE + list.size}</span> of{' '}
|
||||
<span className="font-medium">{numberWithCommas(total)}</span> sessions.
|
||||
</div>
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={Math.ceil(total / PER_PAGE)}
|
||||
onPageChange={(page) => props.updateCurrentPage(page)}
|
||||
limit={PER_PAGE}
|
||||
debounceRequest={1000}
|
||||
/>
|
||||
return (
|
||||
<Loader loading={loading}>
|
||||
<NoContent
|
||||
title={
|
||||
<div className="flex items-center justify-center flex-col">
|
||||
<AnimatedSVG name={NO_CONTENT.icon} size={170} />
|
||||
<div className="mt-2" />
|
||||
<div className="text-center text-gray-600 relative">
|
||||
{NO_CONTENT.message}
|
||||
{NO_CONTENT.message.endsWith('selected time period.') ? (
|
||||
<div style={{ position: 'absolute', right: -140, top: -115 }}>
|
||||
<Icon name="list-arrow" size={130} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
subtext={
|
||||
<div className="flex flex-col items-center">
|
||||
{(isVault || isBookmark) && (
|
||||
<div>
|
||||
{isVault
|
||||
? 'Add a session to your vault from player screen to retain it for ever.'
|
||||
: 'Bookmark important sessions in player screen and quickly find them here.'}
|
||||
</div>
|
||||
)}
|
||||
</Loader>
|
||||
);
|
||||
<Button
|
||||
variant="text-primary"
|
||||
className="mt-4"
|
||||
icon="sync-alt"
|
||||
onClick={() => props.fetchSessions(null, true)}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
show={!loading && list.size === 0}
|
||||
>
|
||||
{list.map((session: any) => (
|
||||
<div key={session.sessionId} className="border-b">
|
||||
<SessionItem
|
||||
session={session}
|
||||
hasUserFilter={hasUserFilter}
|
||||
onUserClick={onUserClick}
|
||||
metaList={metaList}
|
||||
lastPlayedSessionId={lastPlayedSessionId}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</NoContent>
|
||||
|
||||
{total > 0 && (
|
||||
<div className="flex items-center justify-between p-5">
|
||||
<div>
|
||||
Showing <span className="font-medium">{(currentPage - 1) * PER_PAGE + 1}</span> to{' '}
|
||||
<span className="font-medium">{(currentPage - 1) * PER_PAGE + list.size}</span> of{' '}
|
||||
<span className="font-medium">{numberWithCommas(total)}</span> sessions.
|
||||
</div>
|
||||
<Pagination
|
||||
page={currentPage}
|
||||
totalPages={Math.ceil(total / PER_PAGE)}
|
||||
onPageChange={(page) => props.updateCurrentPage(page)}
|
||||
limit={PER_PAGE}
|
||||
debounceRequest={1000}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Loader>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
(state: any) => ({
|
||||
list: state.getIn(['sessions', 'list']),
|
||||
filters: state.getIn(['search', 'instance', 'filters']),
|
||||
lastPlayedSessionId: state.getIn(['sessions', 'lastPlayedSessionId']),
|
||||
metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
|
||||
loading: state.getIn(['sessions', 'loading']),
|
||||
currentPage: state.getIn(['search', 'currentPage']) || 1,
|
||||
total: state.getIn(['sessions', 'total']) || 0,
|
||||
scrollY: state.getIn(['search', 'scrollY']),
|
||||
activeTab: state.getIn(['search', 'activeTab']),
|
||||
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
|
||||
}),
|
||||
{ updateCurrentPage, addFilterByKeyAndValue, setScrollPosition, fetchSessions, fetchMetadata }
|
||||
(state: any) => ({
|
||||
list: state.getIn(['sessions', 'list']),
|
||||
filters: state.getIn(['search', 'instance', 'filters']),
|
||||
lastPlayedSessionId: state.getIn(['sessions', 'lastPlayedSessionId']),
|
||||
metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key),
|
||||
loading: state.getIn(['sessions', 'loading']),
|
||||
currentPage: state.getIn(['search', 'currentPage']) || 1,
|
||||
total: state.getIn(['sessions', 'total']) || 0,
|
||||
scrollY: state.getIn(['search', 'scrollY']),
|
||||
activeTab: state.getIn(['search', 'activeTab']),
|
||||
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
|
||||
}),
|
||||
{ updateCurrentPage, addFilterByKeyAndValue, setScrollPosition, fetchSessions, fetchMetadata }
|
||||
)(SessionList);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue