functional?

frontend/components/App.test.js

@@ -1,4 +1,72 @@
+import React from 'react'
+import AppFunctional from './AppFunctional'
+import { render, fireEvent, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
 // Write your tests here
 test('sanity', () => {
-  expect(true).toBe(false)
+  expect(true).toBe(true)
 })
+
+
+test('header renders', () => {
+  render(<AppFunctional />)
+
+  const coordinates = screen.queryByText(/coordinates/i)
+  const upButton = screen.queryByText('UP')
+  const leftButton = screen.queryByText('LEFT')
+  const rightButton = screen.queryByText('RIGHT')
+  const downButton = screen.queryByText('DOWN')
+  const resetButton = screen.queryByText('reset')
+
+  expect(coordinates).toBeInTheDocument()
+  expect(leftButton).toBeInTheDocument()
+  expect(rightButton).toBeInTheDocument()
+  expect(upButton).toBeInTheDocument()
+  expect(downButton).toBeInTheDocument()
+  expect(resetButton).toBeInTheDocument()
+})
+
+test('typing in input results in text entered', () => {
+  render(<AppFunctional />)
+
+  const inputBox = screen.getByRole('textbox', {id:'email'})
+
+  expect(inputBox)
+    .toBeInTheDocument()
+  fireEvent.change(inputBox, { target: {value: 'pizzatime'}})
+  expect(inputBox)
+    .toHaveValue('pizzatime')
+})
+
+test('clicking reset clears input box', () => {
+  render(<AppFunctional />)
+
+  const inputBox = screen.getByRole('textbox', {id:'email'})
+  const resetButton = screen.getByTestId('reset')
+
+  fireEvent.change(inputBox, { target: {value: 'pizzatime'}})
+  expect(inputBox)
+    .toHaveValue('pizzatime')
+  fireEvent.click(resetButton)
+  expect(inputBox)
+    .toHaveValue('')
+})
+
+test('cannot go up past bounds', () => {
+  render(<AppFunctional />)
+
+  const upButton = screen.getByTestId('up')
+
+  fireEvent.click(upButton)
+  fireEvent.click(upButton)
+  expect(screen.getByText("You can't go up")).toBeInTheDocument()
+})
+
+test('displays moves', () => {
+  render(<AppFunctional />)
+
+  const upButton = screen.getByTestId('up')
+
+  fireEvent.click(upButton)
+  expect(screen.getByText("You moved 1 time")).toBeInTheDocument()
+})

frontend/components/AppClass.js

@@ -1,10 +1,23 @@
-import React from 'react'
+import React, {useState} from 'react'
+import axios from 'axios'
+import * as yup from 'yup'
+
+
+const formSchema = yup.object().shape({
+  formValue: yup
+    .string()
+    .email('Ouch: email must be a valid email')
+    .required('Ouch: email is required')
+    .notOneOf(['[email protected]'],'[email protected] failure #71')
+})
 
 // Suggested initial states
 const initialMessage = ''
 const initialEmail = ''
 const initialSteps = 0
 const initialIndex = 4 // the index the "B" is at
+const initialX = 2
+const initialY = 2
 
 const initialState = {
   message: initialMessage,
@@ -14,75 +27,144 @@ const initialState = {
 }
 
 export default class AppClass extends React.Component {
+  constructor(){
+    super()
+    this.state= {
+      x: initialX,
+      y: initialY,
+      steps: initialSteps,
+      xy: initialIndex,
+      message: initialMessage,
+      formValues: ''
+    }
+
+  }
   // THE FOLLOWING HELPERS ARE JUST RECOMMENDATIONS.
   // You can delete them and build your own logic from scratch.
 
   getXY = () => {
+    return(`(${this.state.x},${this.state.y})`)
+
     // 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.
   }
 
-  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.
-  }
-
   reset = () => {
-    // Use this helper to reset all states to their initial values.
+    this.setState({
+      x: initialX,
+      y: initialY,
+      steps: initialSteps,
+      message: initialMessage,
+      xy: initialIndex,
+      formValues: ''
+    })
   }
 
   getNextIndex = (direction) => {
+    if(direction === 'left'){
+      if(this.state.x - 1 === 0){
+        return ({"x": this.state.x, "y":this.state.y})
+      }
+      return ({"x": this.state.x - 1, "y":this.state.y,"xy":this.state.xy -1,"steps": this.state.steps + 1})
+    }
+    if(direction === 'right'){
+      if(this.state.x + 1 === 4){
+        return ({"x": this.state.x, "y":this.state.y})
+      }
+      return ({"x": this.state.x + 1, "y":this.state.y,"xy":this.state.xy + 1,"steps": this.state.steps + 1})
+    }
+    if(direction === 'up'){
+      if(this.state.y - 1 === 0){
+        return ({"x": this.state.x, "y":this.state.y})
+      }
+      return ({"x": this.state.x, "y":this.state.y - 1,"xy":this.state.xy - 3,"steps": this.state.steps + 1})
+    }
+    if(direction === 'down'){
+      if(this.state.y + 1 === 4){
+        return ({"x": this.state.x, "y":this.state.y})
+      }
+      return ({"x": this.state.x, "y":this.state.y + 1,"xy":this.state.xy + 3,"steps": this.state.steps + 1})
+    }
     // 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.
   }
 
   move = (evt) => {
+    let nextMove = this.getNextIndex(evt.target.id)
+    if (`(${nextMove.x},${nextMove.y})` === this.getXY()){
+      return this.setState({message: `You can't go ${evt.target.id}`})
+    }
+    this.setState({...this.state,
+      message: initialMessage,
+      x: nextMove.x,
+      y: nextMove.y,
+      steps: nextMove.steps,
+      xy: nextMove.xy})
     // This event handler can use the helper above to obtain a new index for the "B",
     // and change any states accordingly.
   }
 
   onChange = (evt) => {
-    // You will need this to update the value of the input.
+    this.setState({formValues: evt.target.value})
+  }
+
+  validate = (name,value) => {
+    yup.reach(formSchema, name)
+      .validate(value)
+      .then(() => this.post())
+      .catch(err => this.setState({message:err.errors[0]}))
+  }
+
+  post = () => {
+    const toSend = {
+      "x": this.state.x,
+      "y": this.state.y,
+      "steps": this.state.steps,
+      "email": this.state.formValues
+    }
+    axios.post('http://localhost:9000/api/result', toSend)
+      .then(({data}) => {this.setState({message: data.message})})
+      .finally(this.setState({formValues: ''}))
   }
 
   onSubmit = (evt) => {
-    // Use a POST request to send a payload to the server.
+    evt.preventDefault()
+    this.validate('formValue', this.state.formValues)
   }
 
   render() {
     const { className } = this.props
     return (
       <div id="wrapper" className={className}>
         <div className="info">
-          <h3 id="coordinates">Coordinates (2, 2)</h3>
-          <h3 id="steps">You moved 0 times</h3>
+          <h3 id="coordinates">{`Coordinates ${this.getXY()}`}</h3>
+          <h3 id="steps">{`You moved ${this.state.steps} ${this.state.steps === 1 ? 'time' : 'times'}`}</h3> {/*Stateful move tracker*/}
         </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 === this.state.xy ? ' active' : ''}`}>
+                {idx === this.state.xy ? 'B' : null} 
               </div>
             ))
           }
         </div>
         <div className="info">
-          <h3 id="message"></h3>
+          <h3 id="message">{this.state.message}</h3>{/*display message from API call*/}
         </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={(e) => this.move(e)}>LEFT</button>
+          <button id="up" onClick={(e) => this.move(e)}>UP</button>
+          <button id="right" onClick={(e) => this.move(e)}>RIGHT</button>
+          <button id="down" onClick={(e) => this.move(e)}>DOWN</button>
+          <button id="reset" onClick={() => this.reset()}>reset</button>
         </div>
-        <form>
-          <input id="email" type="email" placeholder="type email"></input>
+        <form onSubmit={(e) => this.onSubmit(e)}>
+          <input id="email" type="text" placeholder="type email" value={this.state.formValues} onChange={(e) => this.onChange(e)}></input>
           <input id="submit" type="submit"></input>
         </form>
       </div>
     )
   }
-}
+}