diff --git a/frontend/components/App.test.js b/frontend/components/App.test.js
index 96965c559..db4dcc03e 100644
--- a/frontend/components/App.test.js
+++ b/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();
+ console.log('AppFunctional')
+ // expect(screen.getByText("Coordinates(2, 2)")).toBeInTheDocument();
+ expect(screen.getByText("You moved 0 times")).toBeInTheDocument();
+});
+
+test("resets the state", () => {
+ render();
+ 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();
+
+// 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)
})
diff --git a/frontend/components/AppFunctional.js b/frontend/components/AppFunctional.js
index 4c2b53a98..4ea937852 100644
--- a/frontend/components/AppFunctional.js
+++ b/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 (
-
Coordinates (2, 2)
-
You moved 0 times
+
{getXYMessage()}
+
You moved {steps} {steps === 1 ? 'time' : 'times'}