extern/web-check
1
0
Fork 0
mirror of https://github.com/Lissy93/web-check.git synced 2025-08-11 05:43:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Redirect if URL param present on home

Browse Source
This commit is contained in:
Alicia Sykes
2024-05-08 21:18:33 +01:00
parent 22cf1244c7
commit 32138847dd
4 changed files with 51 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/check/[...target].astro
View File

@ -14,6 +14,6 @@ const { pathname } = new URL(Astro.request.url)
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <body>
<Main {pathname} client:load /> <Main {pathname} client:visible />
</body> </body>
</html> </html>

6
src/v1-check/components/Form/Input.tsx
View File

@ -8,12 +8,14 @@ type Orientation = 'horizontal' | 'vertical';
interface Props { interface Props {
id: string, id: string,
value: string, value: string,
name?: string,
label?: string, label?: string,
placeholder?: string, placeholder?: string,
disabled?: boolean, disabled?: boolean,
size?: InputSize, size?: InputSize,
orientation?: Orientation; orientation?: Orientation;
handleChange: (nweVal: React.ChangeEvent<HTMLInputElement>) => void, handleChange: (nweVal: React.ChangeEvent<HTMLInputElement>) => void,
handleKeyDown?: (keyEvent: React.KeyboardEvent<HTMLInputElement>) => void,
}; };
type SupportedElements = HTMLInputElement | HTMLLabelElement | HTMLDivElement; type SupportedElements = HTMLInputElement | HTMLLabelElement | HTMLDivElement;
@ -50,7 +52,7 @@ const StyledLabel = styled.label<StyledInputTypes>`
const Input = (inputProps: Props): JSX.Element => { const Input = (inputProps: Props): JSX.Element => {
const { id, value, label, placeholder, disabled, size, orientation, handleChange } = inputProps; const { id, value, label, placeholder, name, disabled, size, orientation, handleChange, handleKeyDown } = inputProps;
return ( return (
<InputContainer orientation={orientation}> <InputContainer orientation={orientation}>
@ -59,9 +61,11 @@ const Input = (inputProps: Props): JSX.Element => {
id={id} id={id}
value={value} value={value}
placeholder={placeholder} placeholder={placeholder}
name={name}
disabled={disabled} disabled={disabled}
onChange={handleChange} onChange={handleChange}
inputSize={size} inputSize={size}
onKeyDown={handleKeyDown || (() => {})}
/> />
</InputContainer> </InputContainer>
); );

52
src/v1-check/views/Home.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { type ChangeEvent, type FormEvent, useState } from 'react'; import { type ChangeEvent, type FormEvent, useState, useEffect } from 'react';
import { useNavigate, type NavigateOptions } from 'react-router-dom'; import { useNavigate, useLocation, type NavigateOptions } from 'react-router-dom';
import Heading from 'v1-check/components/Form/Heading'; import Heading from 'v1-check/components/Form/Heading';
import Input from 'v1-check/components/Form/Input' import Input from 'v1-check/components/Form/Input'
@ -145,6 +145,17 @@ const Home = (): JSX.Element => {
const [inputDisabled] = useState(false); const [inputDisabled] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
/* Redirect strait to results, if somehow we land on /check?url=[] */
useEffect(() => {
const query = new URLSearchParams(location.search);
const urlFromQuery = query.get('url');
if (urlFromQuery) {
navigate(`/check/${encodeURIComponent(urlFromQuery)}`, { replace: true });
}
}, [navigate, location.search]);
/* Check is valid address, either show err or redirect to results page */ /* Check is valid address, either show err or redirect to results page */
const submit = () => { const submit = () => {
let address = userInput.endsWith("/") ? userInput.slice(0, -1) : userInput; let address = userInput.endsWith("/") ? userInput.slice(0, -1) : userInput;
@ -172,6 +183,19 @@ const Home = (): JSX.Element => {
if (!isError) setErrMsg(''); if (!isError) setErrMsg('');
}; };
const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
console.log(event.key);
if (event.key === 'Enter') {
event.preventDefault();
submit();
}
};
const formSubmitEvent = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
submit();
}
// const findIpAddress = () => { // const findIpAddress = () => {
// setUserInput(''); // setUserInput('');
// setPlaceholder('Looking up your IP...'); // setPlaceholder('Looking up your IP...');
@ -189,10 +213,6 @@ const Home = (): JSX.Element => {
// }); // });
// }; // };
const formSubmitEvent = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
submit();
}
return ( return (
<HomeContainer> <HomeContainer>
@ -208,9 +228,11 @@ const Home = (): JSX.Element => {
label="Enter a URL" label="Enter a URL"
size="large" size="large"
orientation="vertical" orientation="vertical"
name="url"
placeholder={placeholder} placeholder={placeholder}
disabled={inputDisabled} disabled={inputDisabled}
handleChange={inputChange} handleChange={inputChange}
handleKeyDown={handleKeyPress}
/> />
{/* <FindIpButton onClick={findIpAddress}>Or, find my IP</FindIpButton> */} {/* <FindIpButton onClick={findIpAddress}>Or, find my IP</FindIpButton> */}
{ errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>} { errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
@ -220,19 +242,31 @@ const Home = (): JSX.Element => {
<Heading as="h2" size="small" color={colors.primary}>Sponsored by</Heading> <Heading as="h2" size="small" color={colors.primary}>Sponsored by</Heading>
<div className="inner"> <div className="inner">
<p> <p>
<a target="_blank" rel="noreferrer" href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh"> <a
target="_blank"
rel="noreferrer"
href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh"
>
Terminal Trove Terminal Trove
</a> - The $HOME of all things in the terminal. </a> - The $HOME of all things in the terminal.
<br /> <br />
<span className="cta"> <span className="cta">
Get updates on the latest CLI/TUI tools via Get updates on the latest CLI/TUI tools via
the <a target="_blank" rel="noreferrer" className="cta" href="https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh"> the <a
target="_blank"
rel="noreferrer"
className="cta"
href="https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh"
>
Terminal Trove newsletter Terminal Trove newsletter
</a> </a>
</span> </span>
</p> </p>
<a target="_blank" rel="noreferrer" href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh"> <a
target="_blank"
rel="noreferrer"
href="https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh">
<img width="120" alt="Terminal Trove" src="https://i.ibb.co/NKtYjJ1/terminal-trove-web-check.png" /> <img width="120" alt="Terminal Trove" src="https://i.ibb.co/NKtYjJ1/terminal-trove-web-check.png" />
</a> </a>
</div> </div>

6
src/v1-check/views/Results.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useCallback, type ReactNode } from 'react'; import { useState, useEffect, useCallback, type ReactNode } from 'react';
import { useParams } from 'react-router-dom'; import { useParams, useLocation } from 'react-router-dom';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { ToastContainer } from 'react-toastify'; import { ToastContainer } from 'react-toastify';
import Masonry from 'react-masonry-css' import Masonry from 'react-masonry-css'
@ -154,12 +154,10 @@ const FilterButtons = styled.div`
const Results = (props: { address?: string } ): JSX.Element => { const Results = (props: { address?: string } ): JSX.Element => {
const startTime = new Date().getTime(); const startTime = new Date().getTime();
const { urlToScan } = useParams(); const address = props.address || useParams().address || '';
const address = props.address || urlToScan || '';
const [ addressType, setAddressType ] = useState<AddressType>('empt'); const [ addressType, setAddressType ] = useState<AddressType>('empt');
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>(<></>);