From f70bd9e0075e6f9a750f71069d242ecb7c507987 Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 14:53:45 +0000 Subject: [PATCH 01/11] fix path to to first challenge --- app/views/static_pages/home.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb index c9b906b..e1620be 100644 --- a/app/views/static_pages/home.html.erb +++ b/app/views/static_pages/home.html.erb @@ -1,2 +1,2 @@ <%# This is the link to the first challenge -> challenge_1_path %> -<%= react_component 'staticPages/Home', linkPath: nil %> \ No newline at end of file +<%= react_component 'staticPages/Home', linkPath: challenge_1_path %> \ No newline at end of file From ece4af77d5c964a66a15475b8eaea163f1fa910f Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 14:58:46 +0000 Subject: [PATCH 02/11] fix the counter and add reset --- app/javascript/components/challenges/Counter.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 && } From b0de2c3e54924559ac7f3884953f85b15874885d Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 15:00:59 +0000 Subject: [PATCH 03/11] remove annoyance with onMouseMove --- app/javascript/components/challenges/NextButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/components/challenges/NextButton.tsx b/app/javascript/components/challenges/NextButton.tsx index 4193b3b..517410d 100644 --- a/app/javascript/components/challenges/NextButton.tsx +++ b/app/javascript/components/challenges/NextButton.tsx @@ -24,7 +24,7 @@ export default function NextButton() { return (
- From 4b0ed04337aaa67407887dfe07b0237c6322f55a Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 15:07:29 +0000 Subject: [PATCH 04/11] fix email field --- app/javascript/components/challenges/Login.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/javascript/components/challenges/Login.tsx b/app/javascript/components/challenges/Login.tsx index ed38966..ebd488c 100644 --- a/app/javascript/components/challenges/Login.tsx +++ b/app/javascript/components/challenges/Login.tsx @@ -3,6 +3,8 @@ import * as React from 'react'; export default function Login() { const [email, setEmail] = React.useState(''); + const handleEmailChange = e => setEmail(e.target.value.trim().toLowerCase()); + React.useEffect(() => { console.log( 'Once you have fixed this form and added the new functionality sign in with the email: pinpoint@email.com', @@ -29,7 +31,7 @@ export default function Login() {
- +
{/* Email validation errors go here */}
From 3615cc6f41765a097207eb870feb565b7296b140 Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 15:13:05 +0000 Subject: [PATCH 05/11] change the order as useEffect should be first(?) --- app/javascript/components/challenges/Login.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/components/challenges/Login.tsx b/app/javascript/components/challenges/Login.tsx index ebd488c..1f97f9d 100644 --- a/app/javascript/components/challenges/Login.tsx +++ b/app/javascript/components/challenges/Login.tsx @@ -3,14 +3,14 @@ import * as React from 'react'; export default function Login() { const [email, setEmail] = React.useState(''); - const handleEmailChange = e => setEmail(e.target.value.trim().toLowerCase()); - React.useEffect(() => { console.log( 'Once you have fixed this form and added the new functionality sign in with the email: pinpoint@email.com', ); }); + const handleEmailChange = e => setEmail(e.target.value.trim().toLowerCase()); + const buttonStyles: React.CSSProperties = { backgroundColor: 'green', padding: '10px 15px', From e23b4384166aa5598d2580b19fef8dedaa2470d9 Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 15:19:44 +0000 Subject: [PATCH 06/11] validate the email on input blur --- app/javascript/components/challenges/Login.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/app/javascript/components/challenges/Login.tsx b/app/javascript/components/challenges/Login.tsx index 1f97f9d..5f48e65 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( @@ -11,6 +13,12 @@ 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 buttonStyles: React.CSSProperties = { backgroundColor: 'green', padding: '10px 15px', @@ -31,8 +39,8 @@ export default function Login() { - -
{/* Email validation errors go here */}
+ +
{showError &&

Please enter a valid email address.

}
From 8da42c2a854e9f8f21fe4d080bd16a9bbb5228d6 Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 15:22:15 +0000 Subject: [PATCH 07/11] add functionality to show password --- app/javascript/components/challenges/Login.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/javascript/components/challenges/Login.tsx b/app/javascript/components/challenges/Login.tsx index 5f48e65..d602a7f 100644 --- a/app/javascript/components/challenges/Login.tsx +++ b/app/javascript/components/challenges/Login.tsx @@ -19,6 +19,8 @@ export default function Login() { setShowError(!isValidEmail); }; + const handleShowPassword = () => setShowPassword(!showPassword); + const buttonStyles: React.CSSProperties = { backgroundColor: 'green', padding: '10px 15px', @@ -43,8 +45,8 @@ export default function Login() {
{showError &&

Please enter a valid email address.

}
- - + +
- + +

Randomised Image

1. Randomise the image when you click the button.

-
+
From 59d6366bbe036623fbae20054b9f4b3486080026 Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 17:09:48 +0000 Subject: [PATCH 09/11] add randomised image funcionality --- app/javascript/components/challenges/Cards.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/app/javascript/components/challenges/Cards.tsx b/app/javascript/components/challenges/Cards.tsx index 1c26784..17885b2 100644 --- a/app/javascript/components/challenges/Cards.tsx +++ b/app/javascript/components/challenges/Cards.tsx @@ -4,16 +4,26 @@ 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().getTime(); + const random = Math.random() * (max - min) + min; + return new Date(random).toISOString().slice(0,10); + } 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(dates[currentIndex]).then(response => setImageUrl(response)); - }, [currentIndex]); + 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()); function getImage(date: string) { return fetch(`${baseUri}?api_key=${nasaApiKey}&date=${date}`) @@ -50,10 +60,10 @@ export default function Cards() {

Randomised Image

1. Randomise the image when you click the button.

-
+
- +
); From 7e8da54f61745b8c90fb37674dd34f16986a7dd8 Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 17:17:35 +0000 Subject: [PATCH 10/11] refactor fetch image & add failsafe --- app/javascript/components/challenges/Cards.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/app/javascript/components/challenges/Cards.tsx b/app/javascript/components/challenges/Cards.tsx index 17885b2..53529b4 100644 --- a/app/javascript/components/challenges/Cards.tsx +++ b/app/javascript/components/challenges/Cards.tsx @@ -25,14 +25,16 @@ export default function Cards() { const handlePrevious = () => setCurrentIndex(prev => (prev - 1 + dates.length) % dates.length); const handleRandomise = () => setRandomDate(randomDateGenerator()); - function getImage(date: string) { - return fetch(`${baseUri}?api_key=${nasaApiKey}&date=${date}`) - .then(response => { - return response.json(); - }) - .then(jsonResponse => { - return jsonResponse.hdurl; - }); + 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 = { From c8c2dd44313b5a719a089d7ab31e8faf49d7f76a Mon Sep 17 00:00:00 2001 From: NotUsedCode Date: Fri, 1 Jan 2021 17:27:59 +0000 Subject: [PATCH 11/11] remove currentDate in case img not published --- app/javascript/components/challenges/Cards.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/components/challenges/Cards.tsx b/app/javascript/components/challenges/Cards.tsx index 53529b4..bf2a7e3 100644 --- a/app/javascript/components/challenges/Cards.tsx +++ b/app/javascript/components/challenges/Cards.tsx @@ -6,7 +6,7 @@ export default function Cards() { 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().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); }