extern/web-check
1
0
Fork 0
mirror of https://github.com/Lissy93/web-check.git synced 2024-11-22 08:13:59 +01: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
Show Stats 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">
</head>
<body>
<Main {pathname} client:load />
<Main {pathname} client:visible />
</body>
</html>

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

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

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

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { type ChangeEvent, type FormEvent, useState } from 'react';
import { useNavigate, type NavigateOptions } from 'react-router-dom';
import { type ChangeEvent, type FormEvent, useState, useEffect } from 'react';
import { useNavigate, useLocation, type NavigateOptions } from 'react-router-dom';
import Heading from 'v1-check/components/Form/Heading';
import Input from 'v1-check/components/Form/Input'
@ -145,6 +145,17 @@ const Home = (): JSX.Element => {
const [inputDisabled] = useState(false);
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 */
const submit = () => {
let address = userInput.endsWith("/") ? userInput.slice(0, -1) : userInput;
@ -172,6 +183,19 @@ const Home = (): JSX.Element => {
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 = () => {
// setUserInput('');
// setPlaceholder('Looking up your IP...');
@ -189,10 +213,6 @@ const Home = (): JSX.Element => {
// });
// };
const formSubmitEvent = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
submit();
}
return (
<HomeContainer>
@ -208,9 +228,11 @@ const Home = (): JSX.Element => {
label="Enter a URL"
size="large"
orientation="vertical"
name="url"
placeholder={placeholder}
disabled={inputDisabled}
handleChange={inputChange}
handleKeyDown={handleKeyPress}
/>
{/* <FindIpButton onClick={findIpAddress}>Or, find my IP</FindIpButton> */}
{ errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
@ -220,19 +242,31 @@ const Home = (): JSX.Element => {
<Heading as="h2" size="small" color={colors.primary}>Sponsored by</Heading>
<div className="inner">
<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
</a> - The $HOME of all things in the terminal.
<br />
<span className="cta">
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
</a>
</span>
</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" />
</a>
</div>

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

@ -1,5 +1,5 @@
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 { ToastContainer } from 'react-toastify';
import Masonry from 'react-masonry-css'
@ -154,12 +154,10 @@ const FilterButtons = styled.div`
const Results = (props: { address?: string } ): JSX.Element => {
const startTime = new Date().getTime();
const { urlToScan } = useParams();
const address = props.address || urlToScan || '';
const address = props.address || useParams().address || '';
const [ addressType, setAddressType ] = useState<AddressType>('empt');
const [loadingJobs, setLoadingJobs] = useState<LoadingJob[]>(initialJobs);
const [modalOpen, setModalOpen] = useState(false);
const [modalContent, setModalContent] = useState<ReactNode>(<></>);