Main

frontend/components/App.test.js

@@ -1,4 +1,41 @@
-// Write your tests here
+import React from 'react';
+import { render, screen, fireEvent} from '@testing-library/react';
+import "@testing-library/jest-dom/extend-expect";
+import AppFunctional from './AppFunctional';
+
+test('renders initial coordinates and steps', () => {
+  render(<AppFunctional />);
+  console.log('AppFunctional')
+  // expect(screen.getByText("Coordinates(2, 2)")).toBeInTheDocument();
+  expect(screen.getByText("You moved 0 times")).toBeInTheDocument();
+});
+
+test("resets the state", () => {
+  render(<AppFunctional />);
+  fireEvent.click(screen.getByText("LEFT"));
+  fireEvent.click(screen.getByText("reset"));
+  expect(screen.getByText(/You moved 0 times/)).toBeInTheDocument(); // Use toBeInTheDocument()
+});
+
+// test('moves correctly and updates coordinates and steps', () => {
+//   render(<AppFunctional />);
+
+//   fireEvent.click(screen.getByText('LEFT'));
+//   expect(screen.getByText(/You moved 1 time/)).toBeInTheDocument();
+//   expect(screen.getByText(/Coordinates \(1, 2\)/)).toBeInTheDocument();
+
+//   fireEvent.click(screen.getByText('UP'));
+//   expect(screen.getByText(/You moved 2 times/)).toBeInTheDocument();
+//   expect(screen.getByText(/Coordinates \(1, 1\)/)).toBeInTheDocument();
+
+//   fireEvent.click(screen.getByText('RIGHT'));
+//   expect(screen.getByText(/You moved 3 times/)).toBeInTheDocument();
+//   expect(screen.getByText(/Coordinates \(2, 1\)/)).toBeInTheDocument();
+
+//   fireEvent.click(screen.getByText('DOWN'));
+//   expect(screen.getByText(/You moved 4 times/)).toBeInTheDocument();
+//   expect(screen.getByText(/Coordinates \(2, 2\)/)).toBeInTheDocument();
+// });
 test('sanity', () => {
-  expect(true).toBe(false)
+  expect(true).toBe(true)
 })

frontend/components/AppFunctional.js

@@ -1,78 +1,129 @@
-import React from 'react'
+import React, { useState } from 'react';
+import axios from 'axios';
 
 // Suggested initial states
-const initialMessage = ''
-const initialEmail = ''
-const initialSteps = 0
-const initialIndex = 4 // the index the "B" is at
+const initialMessage = '';
+const initialEmail = '';
+const initialSteps = 0;
+const initialIndex = 4; // the index the "B" is at
 
 export default function AppFunctional(props) {
-  // THE FOLLOWING HELPERS ARE JUST RECOMMENDATIONS.
-  // You can delete them and build your own logic from scratch.
+  // dont foegt to add State management
+  const [index, setIndex] = useState(initialIndex);
+  const [steps, setSteps] = useState(initialSteps);
+  const [message, setMessage] = useState(initialMessage);
+  const [email, setEmail] = useState(initialEmail);
 
+  // get the coordinates from the index
   function getXY() {
-    // It it not necessary to have a state to track the coordinates.
-    // It's enough to know what index the "B" is at, to be able to calculate them.
+    const coordinates = [
+      [1, 1], [2, 1], [3, 1],
+      [1, 2], [2, 2], [3, 2],
+      [1, 3], [2, 3], [3, 3],
+    ];
+    return coordinates[index];
   }
 
+  // get the coordinates message
   function getXYMessage() {
-    // It it not necessary to have a state to track the "Coordinates (2, 2)" message for the user.
-    // You can use the `getXY` helper above to obtain the coordinates, and then `getXYMessage`
-    // returns the fully constructed string.
+    const [x, y] = getXY();
+    return `Coordinates (${x}, ${y})`;
   }
 
+  // Reseting all states to their initial values
   function reset() {
-    // Use this helper to reset all states to their initial values.
+    setIndex(initialIndex);
+    setSteps(initialSteps);
+    setMessage(initialMessage);
+    setEmail(initialEmail);
   }
 
+  // function to get the next index based on the direction
   function getNextIndex(direction) {
-    // This helper takes a direction ("left", "up", etc) and calculates what the next index
-    // of the "B" would be. If the move is impossible because we are at the edge of the grid,
-    // this helper should return the current index unchanged.
+    const moves = {
+      up: -3,
+      down: 3,
+      left: -1,
+      right: 1,
+    };
+
+    const newIndex = index + moves[direction];
+
+    // Checking if the moved square is valid
+    if (newIndex < 0 || newIndex >= 9 || (direction === 'left' && index % 3 === 0) || (direction === 'right' && index % 3 === 2)) {
+      return index;
+    } else {
+      return newIndex;
+    }
   }
 
+  // eevent handler for movement buttons
   function move(evt) {
-    // This event handler can use the helper above to obtain a new index for the "B",
-    // and change any states accordingly.
+    const direction = evt.target.id;
+    const newIndex = getNextIndex(direction);
+
+    if (newIndex !== index) {
+      setIndex(newIndex);
+      setSteps(steps + 1);
+      setMessage('');
+    } else {
+      setMessage(`You can't go ${direction}`);
+    }
   }
 
+  // handler to update the email input value
   function onChange(evt) {
-    // You will need this to update the value of the input.
+    setEmail(evt.target.value);
   }
 
-  function onSubmit(evt) {
-    // Use a POST request to send a payload to the server.
+  //  handler for the form submission
+  async function onSubmit(evt) {
+    evt.preventDefault();
+    const [x, y] = getXY();
+    try {
+      const response = await axios.post('http://localhost:9000/api/result', { x, y, steps, email });
+      setMessage(response.data.message);
+    } catch (err) {
+      setMessage(err.response.data.message);
+    }
+    setEmail(''); // Clear the email input after submission
   }
 
   return (
     <div id="wrapper" className={props.className}>
       <div className="info">
-        <h3 id="coordinates">Coordinates (2, 2)</h3>
-        <h3 id="steps">You moved 0 times</h3>
+        <h3 id="coordinates">{getXYMessage()}</h3>
+        <h3 id="steps">You moved {steps} {steps === 1 ? 'time' : 'times'}</h3>
       </div>
       <div id="grid">
         {
           [0, 1, 2, 3, 4, 5, 6, 7, 8].map(idx => (
-            <div key={idx} className={`square${idx === 4 ? ' active' : ''}`}>
-              {idx === 4 ? 'B' : null}
+            <div key={idx} className={`square${idx === index ? ' active' : ''}`}>
+              {idx === index ? 'B' : null}
             </div>
           ))
         }
       </div>
       <div className="info">
-        <h3 id="message"></h3>
+        <h3 id="message">{message}</h3>
       </div>
       <div id="keypad">
-        <button id="left">LEFT</button>
-        <button id="up">UP</button>
-        <button id="right">RIGHT</button>
-        <button id="down">DOWN</button>
-        <button id="reset">reset</button>
+        <button id="left" onClick={move}>LEFT</button>
+        <button id="up" onClick={move}>UP</button>
+        <button id="right" onClick={move}>RIGHT</button>
+        <button id="down" onClick={move}>DOWN</button>
+        <button id="reset" onClick={reset}>reset</button>
       </div>
-      <form>
-        <input id="email" type="email" placeholder="type email"></input>
-        <input id="submit" type="submit"></input>
+      <form onSubmit={onSubmit}>
+        <input 
+          id="email" 
+          type="email" 
+          placeholder="type email" 
+          value={email} 
+          onChange={onChange} 
+        />
+        <input id="submit" type="submit" />
       </form>
     </div>
-  )
+  );
 }