Solutions

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<string>('');
-  const [image2Url, setImage2Url] = React.useState<string>('');
-  const [image3Url, setImage3Url] = React.useState<string>('');
-  const [image4Url, setImage4Url] = React.useState<string>('');
+  // *** One image URL, one Set Image function, use with index *** //
+  const [imageUrl, setImageUrl] = React.useState<string>('');
+  const datesArray = ['2020-02-13', '2020-02-12', '2020-02-02', '2020-02-01'];
+  const [selectedCardIndex, setSelectedCardIndex] = React.useState<number>(0);
+  const [randomImageUrl, setRandomUrl] = React.useState<string>('');
 
   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() {
       <h3>1. Refactor this code to remove duplication.</h3>
       <h3>2. Convert the images into a slider using the pagination buttons.</h3>
       <div className="cards">
-        <div className="card" style={{ backgroundImage: `url(${image1Url})` }} />
-        <div className="card" style={{ backgroundImage: `url(${image2Url})` }} />
-        <div className="card" style={{ backgroundImage: `url(${image3Url})` }} />
-        <div className="card" style={{ backgroundImage: `url(${image4Url})` }} />
+        <div className="card" style={{ backgroundImage: `url(${imageUrl})` }} />
       </div>
       <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <button style={buttonStyles}>Previous</button>
-        <button style={buttonStyles}>Next</button>
+        <button style={buttonStyles} onClick={previousCard}>Previous</button>
+        <button style={buttonStyles} onClick={nextCard}>Next</button>
       </div>
       <h3>Randomised Image</h3>
       <h3>1. Randomise the image when you click the button.</h3>
       <div className="cards">
-        <div className="card" style={{ backgroundImage: `url(${image1Url})` }} />
+        <div className="card" style={{ backgroundImage: `url(${randomImageUrl})` }} />
       </div>
       <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <button style={buttonStyles}>Randomise</button>
+        <button style={buttonStyles} onClick={randomise}>Randomise</button>
       </div>
     </div>
   );

app/javascript/components/challenges/Counter.tsx

@@ -16,8 +16,9 @@ export default function Counter() {
         <input readOnly value={count} />
       </div>
       <div>
-        <button onClick={() => setCount(count ** 2)}>Decrease</button>
+        <button onClick={() => setCount(count - 1)}>Decrease</button>
         <button onClick={() => setCount(count + 1)}>Increase</button>
+        <button onClick={() => setCount(0)}>Reset</button>
       </div>
       {count === -10 && <NextButton />}
     </div>

app/javascript/components/challenges/Login.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 export default function Login() {
   const [email, setEmail] = React.useState<string>('');
+  let [emailValid, setEmailValid] = React.useState<boolean>(false);
+  const [showPassword, setShowPassword] = React.useState<boolean>(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() {
       <h3>4. Login successfully using the correct password.</h3>
       <form method="POST" action="/login">
         <input type="hidden" name="authenticity_token" value={authToken} />
+
+
         <label htmlFor="">Email</label>
-        <input name="email" type="text" value={email} />
-        <div style={{ color: 'red', margin: '10px 0' }}>{/* Email validation errors go here */}</div>
+        <input name="email" type="email" value={email} onChange={changeEmail} onBlur={validateEmail}/>
+        { !emailValid &&
+          <div style={{ color: 'red', margin: '10px 0' }}>{
+          <div>
+            <p>Your email is invalid</p>
+            <p>Please use an email of the correct format to continue.</p>
+            <p>For example, [email protected]</p>
+          </div>
+          }</div>
+        }
         <label htmlFor="">Password</label>
         <div style={{ display: 'flex', marginBottom: '20px' }}>
-          <input name="password" type="password" />
-          <button type="button">Show Password</button>
+          <input name="password" type={showPassword ? "text" : "password"} />
+          <button type="button" onClick={showPasswordHandler} >Toggle Show Password</button>
         </div>
         <button style={buttonStyles} disabled={!email}>
           Login

app/javascript/components/challenges/NextButton.tsx

@@ -24,7 +24,7 @@ export default function NextButton() {
 
   return (
     <div>
-      <div style={styles} onMouseMove={handleMouseMove}>
+      <div style={styles}>
         <a href="/challenge_2"> Go to next challenge</a>
       </div>
     </div>

app/javascript/components/staticPages/Home.tsx

@@ -1,6 +1,15 @@
 import * as React from 'react';
 
+// Home takes parameter linkPath which is typed as a String
+
+// **** How Linkpath is defined - notes **** //
+// Linkpath is defined within /views/static_pages/home.html.erb
+// https://stackoverflow.com/questions/37811890/react-rails-gem-pass-hash-in-view-helper-react-component
+// "The components being referenced are in the `app/javascript/components` directory, and we can pass props to the react components as a hash."
+// ****//
+
 export default function Home({ linkPath }: { linkPath: string }) {
+  // https://reactjs.org/docs/hooks-state.html
   const [isTextVisible, setIsTextVisible] = React.useState<boolean>(false);
 
   function handleClick() {

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 %>
+<%= react_component 'staticPages/Home', linkPath: challenge_1_path %>