From a45c7e26f81e52c4272a52fb16be4bf681796027 Mon Sep 17 00:00:00 2001 From: Bill Rogers Date: Mon, 26 Apr 2021 12:28:25 +0100 Subject: [PATCH 1/2] applicant completed challenges --- .../components/challenges/Cards.tsx | 65 ++++++++++++++----- .../components/challenges/Counter.tsx | 3 +- .../components/challenges/Login.tsx | 37 +++++++++-- .../components/challenges/NextButton.tsx | 2 +- .../components/staticPages/Home.tsx | 9 +++ app/views/static_pages/home.html.erb | 2 +- 6 files changed, 94 insertions(+), 24 deletions(-) diff --git a/app/javascript/components/challenges/Cards.tsx b/app/javascript/components/challenges/Cards.tsx index 04793f1..9f2d395 100644 --- a/app/javascript/components/challenges/Cards.tsx +++ b/app/javascript/components/challenges/Cards.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; export default function Cards() { + // https://github.com/nasa/apod-api const nasaApiKey = '6H6EdNLLrDu8SC1LZMJkbJzoGIghjvrjzgQpF72W'; const baseUri = 'https://api.nasa.gov/planetary/apod'; - const [image1Url, setImage1Url] = React.useState(''); - const [image2Url, setImage2Url] = React.useState(''); - const [image3Url, setImage3Url] = React.useState(''); - const [image4Url, setImage4Url] = React.useState(''); + // *** One image URL, one Set Image function, use with index *** // + const [imageUrl, setImageUrl] = React.useState(''); + const datesArray = ['2020-02-13', '2020-02-12', '2020-02-02', '2020-02-01']; + const [selectedCardIndex, setSelectedCardIndex] = React.useState(0); + const [randomImageUrl, setRandomUrl] = 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)); - }, []); + // One Get image, pass date as variable + getImage(datesArray[selectedCardIndex]).then(response => setImageUrl(response)); + }, [selectedCardIndex]); function getImage(date: string) { return fetch(`${baseUri}?api_key=${nasaApiKey}&date=${date}`) @@ -25,6 +25,40 @@ export default function Cards() { return jsonResponse.hdurl; }); } + + const randomise = () => { + getImageRandom().then(response => setRandomUrl(response)); + } + + function getImageRandom() { + return fetch(`${baseUri}?api_key=${nasaApiKey}&count=1`) + .then(response => { + return response.json(); + }) + .then(jsonResponse => { + return jsonResponse[0].url; + }); + } + + React.useEffect(() => { + getImageRandom().then(response => setRandomUrl(response)); + }, []); + + const previousCard = () => { + if (selectedCardIndex != 0) { + setSelectedCardIndex(selectedCardIndex - 1); + } else { + setSelectedCardIndex(datesArray.length - 1); + } + } + + const nextCard = () => { + if (selectedCardIndex < datesArray.length - 1) { + setSelectedCardIndex(selectedCardIndex + 1); + } else { + setSelectedCardIndex(0); + } + } const buttonStyles: React.CSSProperties = { padding: '10px 20px', @@ -42,22 +76,19 @@ export default function Cards() {

1. Refactor this code to remove duplication.

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..6b206be 100644 --- a/app/javascript/components/challenges/Counter.tsx +++ b/app/javascript/components/challenges/Counter.tsx @@ -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..63082d8 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(''); + let [emailValid, setEmailValid] = React.useState(false); + const [showPassword, setShowPassword] = React.useState(false); React.useEffect(() => { console.log( @@ -17,6 +19,23 @@ export default function Login() { color: 'white', }; + const changeEmail = (e) => setEmail(e.target.value); + + const validateEmail = (email) => { + const re = /^(([^<>()[\]\\.,;:\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 testResult = re.test(String(email.target.value).toLowerCase()); + if (testResult) { + setEmailValid(true); + } else { + setEmailValid(false); + } + } + + const showPasswordHandler = () => { + setShowPassword(!showPassword); + console.log('show password clicked' + showPassword); + } + const authToken = document.querySelector('head meta[name="csrf-token"]' as any).content; return ( @@ -28,13 +47,23 @@ export default function Login() {

4. Login successfully using the correct password.

+ + - -
{/* Email validation errors go here */}
+ + { !emailValid && +
{ +
+

Your email is invalid

+

Please use an email of the correct format to continue.

+

For example, michaelbutlerjersey@gmail.com

+
+ }
+ }
- - + +