-
Notifications
You must be signed in to change notification settings - Fork 691
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
mockup rendering of link checking result
- Loading branch information
1 parent
737d686
commit a34d385
Showing
3 changed files
with
129 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
packages/react-email/src/components/sidebar/link-checker.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import { | ||
| checkLinks, | ||
| type LinkCheckingResult, | ||
| } from '../../actions/email-validation/check-links'; | ||
| import { Button } from '../button'; | ||
|
|
||
| const checkingResultsCache = new Map<string, LinkCheckingResult[]>(); | ||
|
|
||
| interface LinkCheckerProps { | ||
| currentEmailOpenSlug: string; | ||
| } | ||
|
|
||
| export const LinkChecker = ({ currentEmailOpenSlug }: LinkCheckerProps) => { | ||
| const [results, setResults] = React.useState< | ||
| LinkCheckingResult[] | undefined | ||
| >(checkingResultsCache.get(currentEmailOpenSlug)); | ||
|
|
||
| const handleRun = () => { | ||
| checkLinks(currentEmailOpenSlug) | ||
| .then((newResults) => { | ||
| checkingResultsCache.set(currentEmailOpenSlug, newResults); | ||
| setResults(newResults); | ||
| }) | ||
| .catch((exception) => { | ||
| throw exception; | ||
| }); | ||
| }; | ||
|
|
||
| console.log(results); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col text-center p-2 gap-3 w-[calc(100vw-36px)] h-full lg:w-full lg:min-w-[231px] lg:max-w-[231px]"> | ||
| <h2 className="text-xl">Link Checker</h2> | ||
| {results ? ( | ||
| <> | ||
| <ol className="list-none p-0"> | ||
| {results.map((result) => ( | ||
| <LinkCheckingResultView {...result} key={result.link} /> | ||
| ))} | ||
| </ol> | ||
| <Button className="w-fit mt-auto mr-auto" onClick={handleRun}> | ||
| Re-run | ||
| </Button> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <span className="text-gray-300 text-sm"> | ||
| Check if all links are valid and going to the right pages | ||
| </span> | ||
| <Button className="w-fit mx-auto" onClick={handleRun}> | ||
| Run | ||
| </Button> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const LinkCheckingResultView = (props: LinkCheckingResult) => { | ||
| let status: 'success' | 'error' | 'warning' = 'success'; | ||
| if (props.checks.security === 'failed') { | ||
| status = 'warning'; | ||
| } | ||
| if (props.checks.syntax === 'failed') { | ||
| status = 'error'; | ||
| } | ||
| if (props.checks.responseCode === 'failed') { | ||
| status = 'error'; | ||
| } | ||
| return ( | ||
| <li className="group" data-status={status}> | ||
| <div className="data-[status=error]:text-red-400 data-[status=warning]:text-yellow-300 data-[status=success]:text-green-400"> | ||
| {props.link} | ||
| </div> | ||
| </li> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters