diff --git a/src/pages/check/[...target].astro b/src/pages/check/[...target].astro index e0fd325..31d8ff4 100644 --- a/src/pages/check/[...target].astro +++ b/src/pages/check/[...target].astro @@ -14,6 +14,6 @@ const { pathname } = new URL(Astro.request.url) -
+
diff --git a/src/v1-check/components/Form/Input.tsx b/src/v1-check/components/Form/Input.tsx index 91baca4..fb90719 100644 --- a/src/v1-check/components/Form/Input.tsx +++ b/src/v1-check/components/Form/Input.tsx @@ -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) => void, + handleKeyDown?: (keyEvent: React.KeyboardEvent) => void, }; type SupportedElements = HTMLInputElement | HTMLLabelElement | HTMLDivElement; @@ -50,7 +52,7 @@ const StyledLabel = styled.label` 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 ( @@ -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 || (() => {})} /> ); diff --git a/src/v1-check/views/Home.tsx b/src/v1-check/views/Home.tsx index 6a2dacb..9d55c61 100644 --- a/src/v1-check/views/Home.tsx +++ b/src/v1-check/views/Home.tsx @@ -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) => { + console.log(event.key); + if (event.key === 'Enter') { + event.preventDefault(); + submit(); + } + }; + + const formSubmitEvent = (event: FormEvent) => { + event.preventDefault(); + submit(); + } + // const findIpAddress = () => { // setUserInput(''); // setPlaceholder('Looking up your IP...'); @@ -189,10 +213,6 @@ const Home = (): JSX.Element => { // }); // }; - const formSubmitEvent = (event: FormEvent) => { - event.preventDefault(); - submit(); - } return ( @@ -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} /> {/* Or, find my IP */} { errorMsg && {errorMsg}} @@ -220,19 +242,31 @@ const Home = (): JSX.Element => { Sponsored by

- + Terminal Trove - The $HOME of all things in the terminal.
Get updates on the latest CLI/TUI tools via - the + the Terminal Trove newsletter

- + Terminal Trove
diff --git a/src/v1-check/views/Results.tsx b/src/v1-check/views/Results.tsx index 4b9fb88..b49fb6e 100644 --- a/src/v1-check/views/Results.tsx +++ b/src/v1-check/views/Results.tsx @@ -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('empt'); - const [loadingJobs, setLoadingJobs] = useState(initialJobs); const [modalOpen, setModalOpen] = useState(false); const [modalContent, setModalContent] = useState(<>);