From ec1480fa8cb1520e4071af456ed41557888e668f Mon Sep 17 00:00:00 2001 From: Brandon Notowitz <151097606+BNOTOWITZ@users.noreply.github.com> Date: Sun, 21 Jul 2024 17:01:31 -0400 Subject: [PATCH 1/2] Update AppFunctional.js Update --- frontend/components/AppFunctional.js | 121 +++++++++++++++++++-------- 1 file changed, 86 insertions(+), 35 deletions(-) diff --git a/frontend/components/AppFunctional.js b/frontend/components/AppFunctional.js index 4c2b53a984..4ea9378522 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'}

{ [0, 1, 2, 3, 4, 5, 6, 7, 8].map(idx => ( -
- {idx === 4 ? 'B' : null} +
+ {idx === index ? 'B' : null}
)) }
-

+

{message}

- - - - - + + + + +
-
- - + + +
- ) + ); } From 017dc815f6567116a0957830099d5b1108e52ffe Mon Sep 17 00:00:00 2001 From: Brandon Notowitz <151097606+BNOTOWITZ@users.noreply.github.com> Date: Sun, 21 Jul 2024 17:27:15 -0400 Subject: [PATCH 2/2] Update App.test.js Update --- frontend/components/App.test.js | 41 +++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/frontend/components/App.test.js b/frontend/components/App.test.js index 96965c5591..db4dcc03ed 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) })