diff --git a/app/javascript/components/challenges/Cards.tsx b/app/javascript/components/challenges/Cards.tsx index cff2f1a..bf2a7e3 100644 --- a/app/javascript/components/challenges/Cards.tsx +++ b/app/javascript/components/challenges/Cards.tsx @@ -3,27 +3,38 @@ import * as React from 'react'; export default function Cards() { const nasaApiKey = '6H6EdNLLrDu8SC1LZMJkbJzoGIghjvrjzgQpF72W'; const baseUri = 'https://api.nasa.gov/planetary/apod'; + const dates = ['2020-02-13', '2020-02-12', '2020-02-02', '2020-02-01']; + const randomDateGenerator = () => { + const min = new Date(1996,6,16).getTime(); + const max = new Date((d => new Date(d.setDate(d.getDate()-1)))(new Date)).getTime(); + const random = Math.random() * (max - min) + min; + return new Date(random).toISOString().slice(0,10); + } - const [image1Url, setImage1Url] = React.useState(''); - const [image2Url, setImage2Url] = React.useState(''); - const [image3Url, setImage3Url] = React.useState(''); - const [image4Url, setImage4Url] = React.useState(''); + const [imageUrl, setImageUrl] = React.useState(''); + const [currentIndex, setCurrentIndex] = React.useState(0); + const [randomDate, setRandomDate] = React.useState(randomDateGenerator()); + const [randomImage, setRandomImage] = React.useState(''); React.useEffect(() => { - getImage('2020-02-13').then(response => setImage1Url(response)); - getImage('2020-02-12').then(response => setImage2Url(response)); - getImage('2020-02-02').then(response => setImage3Url(response)); - getImage('2020-02-01').then(response => setImage4Url(response)); - }, []); - - function getImage(date: string) { - return fetch(`${baseUri}?api_key=${nasaApiKey}&date=${date}`) - .then(response => { - return response.json(); - }) - .then(jsonResponse => { - return jsonResponse.hdurl; - }); + getImage(dates[currentIndex]).then(response => setImageUrl(response)); + getImage(randomDate).then(response => setRandomImage(response)); + }, [currentIndex, randomDate]); + + const handleNext = () => setCurrentIndex(prev => (prev + 1) % dates.length); + const handlePrevious = () => setCurrentIndex(prev => (prev - 1 + dates.length) % dates.length); + const handleRandomise = () => setRandomDate(randomDateGenerator()); + + const getImage = async(date: string) => { + try { + const response = await fetch(`${baseUri}?api_key=${nasaApiKey}&date=${date}`); + if (response.ok) { + const jsonResponse = await response.json(); + return jsonResponse.hdurl ? jsonResponse.hdurl : 'https://apod.nasa.gov/apod/image/1901/sombrero_spitzer_3000.jpg'; + } + } catch (error) { + console.log(error); + } } const buttonStyles: React.CSSProperties = { @@ -42,22 +53,19 @@ export default function Cards() {

1. Refactor this code to remove duplication and make it more 'Reacty'.

2. Convert the images into a slider using the pagination buttons.

-
-
-
-
+
- - + +

Randomised Image

1. Randomise the image when you click the button.

-
+
- +
); diff --git a/app/javascript/components/challenges/Counter.tsx b/app/javascript/components/challenges/Counter.tsx index f436fca..010a102 100644 --- a/app/javascript/components/challenges/Counter.tsx +++ b/app/javascript/components/challenges/Counter.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import NextButton from './NextButton'; export default function Counter() { - const [count, setCount] = React.useState(0); + const [count, setCount] = React.useState(-10); return (
@@ -16,8 +16,9 @@ export default function Counter() {
- - + + +
{count === -10 && }
diff --git a/app/javascript/components/challenges/Login.tsx b/app/javascript/components/challenges/Login.tsx index ed38966..d602a7f 100644 --- a/app/javascript/components/challenges/Login.tsx +++ b/app/javascript/components/challenges/Login.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; export default function Login() { const [email, setEmail] = React.useState(''); + const [showError, setShowError] = React.useState(false); + const [showPassword, setShowPassword] = React.useState(false); React.useEffect(() => { console.log( @@ -9,6 +11,16 @@ export default function Login() { ); }); + const handleEmailChange = e => setEmail(e.target.value.trim().toLowerCase()); + + const handleBlur = () => { + const validEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + const isValidEmail = validEmail.test(email); + setShowError(!isValidEmail); + }; + + const handleShowPassword = () => setShowPassword(!showPassword); + const buttonStyles: React.CSSProperties = { backgroundColor: 'green', padding: '10px 15px', @@ -29,12 +41,12 @@ export default function Login() {
- -
{/* Email validation errors go here */}
+ +
{showError &&

Please enter a valid email address.

}
- - + +