extern/web-check
1
0
Fork 0
mirror of https://github.com/Lissy93/web-check.git synced 2025-06-19 19:28:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor, toggle filters, re-order screenshot

Browse Source
This commit is contained in:
Alicia Sykes 2023-08-25 21:02:28 +01:00
parent 09f5af26df
commit b6b0c25966
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/Results.tsx
View File

@ -102,7 +102,7 @@ const FilterButtons = styled.div`
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
} }
button, input { button, input, .toggle-filters {
background: ${colors.backgroundLighter}; background: ${colors.backgroundLighter};
color: ${colors.textColor}; color: ${colors.textColor};
border: none; border: none;
@ -112,7 +112,7 @@ const FilterButtons = styled.div`
border: 1px solid transparent; border: 1px solid transparent;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
button { button, .toggle-filters {
cursor: pointer; cursor: pointer;
text-transform: capitalize; text-transform: capitalize;
box-shadow: 2px 2px 0px ${colors.bgShadowColor}; box-shadow: 2px 2px 0px ${colors.bgShadowColor};
@ -137,6 +137,9 @@ const FilterButtons = styled.div`
font-size: 0.8rem; font-size: 0.8rem;
opacity: 0.8; opacity: 0.8;
} }
.toggle-filters {
font-size: 0.8rem;
}
`; `;
const Results = (): JSX.Element => { const Results = (): JSX.Element => {
@ -148,6 +151,7 @@ const Results = (): JSX.Element => {
const [loadingJobs, setLoadingJobs] = useState<LoadingJob[]>(initialJobs); const [loadingJobs, setLoadingJobs] = useState<LoadingJob[]>(initialJobs);
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [modalContent, setModalContent] = useState<ReactNode>(<></>); const [modalContent, setModalContent] = useState<ReactNode>(<></>);
const [showFilters, setShowFilters] = useState(false);
const [searchTerm, setSearchTerm] = useState<string>(''); const [searchTerm, setSearchTerm] = useState<string>('');
const [tags, setTags] = useState<string[]>([]); const [tags, setTags] = useState<string[]>([]);
@ -647,13 +651,6 @@ const Results = (): JSX.Element => {
Component: TraceRouteCard, Component: TraceRouteCard,
refresh: updateTraceRouteResults, refresh: updateTraceRouteResults,
tags: ['server'], tags: ['server'],
}, {
id: 'screenshot',
title: 'Screenshot',
result: screenshotResult || lighthouseResults?.fullPageScreenshot?.screenshot,
Component: ScreenshotCard,
refresh: updateScreenshotResult,
tags: ['client', 'meta'],
}, { }, {
id: 'security-txt', id: 'security-txt',
title: 'Security.Txt', title: 'Security.Txt',
@ -717,6 +714,13 @@ const Results = (): JSX.Element => {
Component: RankCard, Component: RankCard,
refresh: updateRankResults, refresh: updateRankResults,
tags: ['meta'], tags: ['meta'],
}, {
id: 'screenshot',
title: 'Screenshot',
result: screenshotResult || lighthouseResults?.fullPageScreenshot?.screenshot,
Component: ScreenshotCard,
refresh: updateScreenshotResult,
tags: ['client', 'meta'],
}, { }, {
id: 'tls-cipher-suites', id: 'tls-cipher-suites',
title: 'TLS Cipher Suites', title: 'TLS Cipher Suites',
@ -851,7 +855,7 @@ const Results = (): JSX.Element => {
<ProgressBar loadStatus={loadingJobs} showModal={showErrorModal} showJobDocs={showInfo} /> <ProgressBar loadStatus={loadingJobs} showModal={showErrorModal} showJobDocs={showInfo} />
{ address?.includes(window?.location?.hostname || 'web-check.as93.net') && <SelfScanMsg />} { address?.includes(window?.location?.hostname || 'web-check.as93.net') && <SelfScanMsg />}
<Loader show={loadingJobs.filter((job: LoadingJob) => job.state !== 'loading').length < 5} /> <Loader show={loadingJobs.filter((job: LoadingJob) => job.state !== 'loading').length < 5} />
<FilterButtons> <FilterButtons>{ showFilters ? <>
<div className="one-half"> <div className="one-half">
<span className="group-label">Filter by</span> <span className="group-label">Filter by</span>
{['server', 'client', 'meta'].map((tag: string) => ( {['server', 'client', 'meta'].map((tag: string) => (
@ -873,6 +877,9 @@ const Results = (): JSX.Element => {
/> />
<span className="group-label">Search</span> <span className="group-label">Search</span>
</div> </div>
</> : (
<span className="toggle-filters" onClick={() => setShowFilters(true)}>Show Filters</span>
) }
</FilterButtons> </FilterButtons>
<ResultsContent> <ResultsContent>
<Masonry <Masonry
@ -881,12 +888,11 @@ const Results = (): JSX.Element => {
columnClassName="masonry-grid-col"> columnClassName="masonry-grid-col">
{ {
resultCardData resultCardData
.filter(({ tags: cardTags, title }) => ( .map(({ id, title, result, tags, refresh, Component }, index: number) => {
tags.length === 0 || tags.some(tag => cardTags.includes(tag))) && const show = (tags.length === 0 || tags.some(tag => tags.includes(tag)))
title.toLowerCase().includes(searchTerm.toLowerCase()) && title.toLowerCase().includes(searchTerm.toLowerCase())
) && (result && !result.error);
.map(({ id, title, result, refresh, Component }, index: number) => ( return show ? (
(result && !result.error) ? (
<ErrorBoundary title={title}> <ErrorBoundary title={title}>
<Component <Component
key={`${title}-${index}`} key={`${title}-${index}`}
@ -895,8 +901,7 @@ const Results = (): JSX.Element => {
actionButtons={refresh ? makeActionButtons(title, refresh, () => showInfo(id)) : undefined} actionButtons={refresh ? makeActionButtons(title, refresh, () => showInfo(id)) : undefined}
/> />
</ErrorBoundary> </ErrorBoundary>
) : <></> ) : null})
))
} }
</Masonry> </Masonry>
</ResultsContent> </ResultsContent>