Ibrahim garba

frontend/components/App.test.js

@@ -1,4 +1,41 @@
+import React from 'react'
+import {render, screen, fireEvent} from "@testing-library/react"
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event'
+import AppFunctional from './AppFunctional'
+
 // Write your tests here
+const updateStatelessSelectors = document => {
+  up = document.querySelector('#up')
+  down = document.querySelector('#down')
+  left = document.querySelector('#left')
+  right = document.querySelector('#right')
+  reset = document.querySelector('#reset')
+  submit = document.querySelector('#submit')
+}
+
+
+const updateStatefulSelectors = document => {
+  squares = document.querySelectorAll('.square')
+  coordinates = document.querySelector('#coordinates')
+  steps = document.querySelector('#steps')
+  message = document.querySelector('#message')
+  email = document.querySelector('#email')
+}
+
 test('sanity', () => {
-  expect(true).toBe(false)
+render (<AppFunctional />)
 })
+
+
+
+test('Check text content',  () => {
+  render (<AppFunctional />)
+expect(up).toHaveTextContent(/UP/i)
+})
+
+test('Check to see submit button is in document', () => {
+  render (<AppFunctional />)
+  expect(submit).toBeInTheDocument()
+})
+

frontend/components/AppClass.js

@@ -1,85 +1,220 @@
 import React 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 initialState = {
-  message: initialMessage,
-  email: initialEmail,
-  index: initialIndex,
-  steps: initialSteps,
-}
+
+
+
 
 export default class AppClass extends React.Component {
   // THE FOLLOWING HELPERS ARE JUST RECOMMENDATIONS.
   // You can delete them and build your own logic from scratch.
+  constructor(){
+
+super()
+  this.state = {
+    message: '',
+    email: '',
+    index: 4,
+    steps: 0,
+      x: 2,
+      y: 2,
+      error: false,
+      header: `You moved 0 times`
+
+
+  }
+}
+
+
 
-  getXY = () => {
+
+  getXY = (number) => {
     // 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.
+   const coordinates = [[1, 1], [2, 1], [3, 1],
+ [1, 2], [2, 2], [3, 2],
+    [1, 3], [2, 3],[3, 3]
+  ]
+
+    return coordinates[this.state.index].toString()
+
+  }
+  getCords = () => {
+  const coordinates = this.getXY(this.index)
+  this.setState({
+    x: Number(coordinates[0]),
+    y: Number(coordinates[2])
+  })
   }
+
+
 
   reset = () => {
-    // Use this helper to reset all states to their initial values.
+    // Use this helper to reset all states to their initial value
+    this.setState({
+      index: 4,
+      steps: 0,
+      header:`You moved 0 times`,
+      email: '',
+      message: ''
+    })
   }
 
-  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.
+  componentDidUpdate( prevProps, prevState){
+    if(prevState.index !== this.state.index){
+      this.getCords()
+    } 
+ }
+
+
+
+ checkErrorsLeft = () => {
+
+    this.setState({
+      message:("You can't go left")
+    })
+    return this.state.index && this.state.steps
   }
+
 
-  move = (evt) => {
-    // This event handler can use the helper above to obtain a new index for the "B",
-    // and change any states accordingly.
+ checkErrorsRight = () => {
+    this.setState({
+      message:"You can't go right",
+      error: true
+    })
+
+ }
+
+ checkErrorsUp = () => {
+
+    this.setState({
+      message:(`You can't go up`)
+    })
+    return this.state.index
   }
+
+
+ checkErrorsDown = () => {
+    this.setState({
+      message:"You can't go down"
+    })
+    return this.state.index
+  }
+
+
+ moveLeft = () => { 
+  this.setState({
+  index: this.state.index - 1,
+  message: '',
+  steps: this.state.steps + 1,
+})
+
+
+ }
+
+ moveRight = () => {
+  this.setState({
+    index: this.state.index + 1,
+    message: '',
+    steps: this.state.steps + 1
+  })
+
+} 
+
+
+ moveUp = () => {
+  this.setState({
+    index: this.state.index - 3,
+    message: '',
+    steps: this.state.steps + 1
+  })
+
+ }
+
+ moveDown = () => {
+  this.setState({
+    index: this.state.index + 3,
+    message: '',
+    steps: this.state.steps + 1
+  })
+
+ }
 
   onChange = (evt) => {
     // You will need this to update the value of the input.
+    this.setState({
+      email: evt.target.value
+    })
   }
 
+
+
+
+
   onSubmit = (evt) => {
     // Use a POST request to send a payload to the server.
+
+    evt.preventDefault()
+ const {x, y, steps, email} = this.state
+    axios.post(`http://localhost:9000/api/result`,{x, y, steps, email} )
+    .then (res => {
+      this.setState({
+        message: res.data.message,
+        email: ''
+      })
+    })
+    .catch(err => this.setState({
+      message: err.response.data.message
+      }))
   }
 
   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.state.x}, {this.state.y})</h3>
+          <h3 id="steps">{this.state.steps === 1 ? `You moved 1 time` : `You moved ${this.state.steps} 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 === this.state.index ? ' active' : ''}`}>
+                {idx === this.state.index ? 'B' : null}
               </div>
             ))
           }
         </div>
         <div className="info">
-          <h3 id="message"></h3>
+          <h3 id="message">{this.state.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={() => { 
+         if(this.state.index === 0 || this.state.index === 3 || this.state.index === 6){
+          this.checkErrorsLeft()
+         } else
+        this.moveLeft()
+      }}>LEFT</button>
+          <button id="up" onClick={() => {
+           if(this.state.index === 0 || this.state.index === 1 || this.state.index === 2){
+            this.checkErrorsUp() } else
+          this.moveUp()   
+          }}>UP</button>
+          <button id="right" onClick={() => { 
+              if(this.state.index === 2 || this.state.index === 5 || this.state.index === 8){ this.checkErrorsRight()} else
+            this.moveRight()
+          }}>RIGHT</button>
+          <button id="down" onClick={() => {
+          if(this.state.index === 6 || this.state.index === 7 || this.state.index === 8){
+            this.checkErrorsDown()} else
+            this.moveDown()
+            }}>DOWN</button>
+          <button id="reset" onClick={this.reset}>reset</button>
         </div>
-        <form>
-          <input id="email" type="email" placeholder="type email"></input>
+        <form onSubmit={this.onSubmit}>
+          <input value={this.state.email} onChange= {this.onChange}id="email" type="email" placeholder="type email"></input>
           <input id="submit" type="submit"></input>
         </form>
       </div>

frontend/components/AppFunctional.js

@@ -1,78 +1,186 @@
 import React from 'react'
+import { useState,useEffect, useRef} 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
+// the index the "B" is at
+
+
+// How to update state 
+
 
 export default function AppFunctional(props) {
   // THE FOLLOWING HELPERS ARE JUST RECOMMENDATIONS.
   // You can delete them and build your own logic from scratch.
+  const [initialMessage, setIntialMessage] = useState('')
+  const [initialEmail, setIntiaEmail] = useState('')
+  const [initialSteps, setIntialSteps] = useState(0)
+  const [initialIndex, setIntialIndex] = useState(4) 
+  const [headerMessage, setHeaderMessage] = useState(`You moved ${initialSteps} times`)
+ const [formData, setFormData] = useState({
+  email: '',
+  steps: 0,
+  x: '',
+  y: ''
+ })
+
+ //Create a way when at the end of the grid to not be able to go right, left,up and down
 
-  function getXY() {
+ // create a function that when called update the intitalmesssage to "You can go left,right and etc"
+
+ //Inside the function create a conditional for when the border indexes are clicked they return the error message
+
+useEffect( () => {
+  if(initialSteps === 1){
+     setHeaderMessage(`You moved ${initialSteps} time`)
+  } else {
+    setHeaderMessage(`You moved ${initialSteps} times`)
+  }
+}, [initialSteps] )
+
+
+
+  function getXY(initialIndex) {
     // 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.
+    // e.g when the number 3 is entered your varible changes to 2,1
+
+    // return that number as a xy coordinate
+
+   const coordinates =[ [1, 1], [2, 1], [3, 1],
+ [1, 2], [2, 2], [3, 2],
+    [1, 3], [2, 3],[3, 3]
+   ]
+   return coordinates[initialIndex].toString()
   }
 
+
   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.
+    // returns the fully constructed string. 
   }
 
   function reset() {
     // Use this helper to reset all states to their initial values.
+    setIntialSteps(0)
+    setIntialIndex(4)
+    setIntialMessage('')
+    setHeaderMessage('You moved 0 times')
+    setIntiaEmail('')
   }
 
-  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.
-  }
+
+
 
-  function move(evt) {
-    // This event handler can use the helper above to obtain a new index for the "B",
-    // and change any states accordingly.
-  }
 
   function onChange(evt) {
-    // You will need this to update the value of the input.
+    // You will need this to update the value of t
+    setIntiaEmail(evt.target.value)
+
+  }
+  const coordinates = getXY(initialIndex)
+  const data = {
+    email: initialEmail,
+    steps: initialSteps,
+    x: Number(coordinates[0]),
+    y: Number(coordinates[2]),
   }
 
+
   function onSubmit(evt) {
     // Use a POST request to send a payload to the server.
+
+    evt.preventDefault()
+
+
+
+
+axios.post( `http://localhost:9000/api/result`,data)
+  .then(res => {
+setFormData({
+  email: data.email,
+  steps: data.steps,
+  x: data.x,
+  y: data.y
+})
+setIntialMessage(res.data.message)
+setIntiaEmail('')
+
+
+  })
+  .catch(err => setIntialMessage(err.response.data.message))
+
   }
 
+
+// The index state should correspond with 
+
+
   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"> 
+                    Coordinates ({data.x}, {data.y})
+       </h3>
+        <h3 id="steps">{headerMessage}</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}
+          [0,1,2,3,4,5,6,7,8].map(idx => (
+            <div key={idx} className={`square${idx === initialIndex ? ' active' : ''}`}>
+              {idx === initialIndex ? 'B' : null}
             </div>
           ))
+
         }
       </div>
       <div className="info">
-        <h3 id="message"></h3>
+        <h3 id="message">
+          {initialMessage}
+        </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={() =>  {if(initialIndex === 0 || initialIndex === 3||
+        initialIndex === 6) {
+          setIntialMessage(`You can't go left`)
+          return initialIndex
+        } else setIntialIndex(initialIndex - 1)
+        setIntialMessage('')
+        setIntialSteps(initialSteps + 1)
+        }}  >LEFT</button>
+        <button id="up" onClick={() => {if(initialIndex === 0 || initialIndex === 1 || initialIndex === 2) {
+      setIntialMessage("You can't go up")
+          return initialIndex
+        } else
+          setIntialIndex(initialIndex -3)
+          setIntialMessage('')
+          setIntialSteps(initialSteps + 1)
+        }} >UP</button>
+        <button id="right" onClick={() => {if(initialIndex === 2 || initialIndex === 5 || initialIndex === 8) {
+          setIntialMessage("You can't go right")
+          return initialIndex
+        } else{
+          setIntialIndex(initialIndex + 1)
+          setIntialMessage('')
+          setIntialSteps(initialSteps + 1)
+        }}} >RIGHT</button>
+        <button id="down" onClick={() => {if(initialIndex === 6 || initialIndex === 7 || initialIndex === 8) {
+          setIntialMessage("You can't go down")
+          return initialIndex
+        } else {
+          setIntialIndex(initialIndex + 3)
+          setIntialMessage('')
+          setIntialSteps(initialSteps + 1)
+        }}}>DOWN</button>
+        <button id="reset" onClick={reset}> reset</button>
       </div>
-      <form>
-        <input id="email" type="email" placeholder="type email"></input>
+      <form onSubmit={onSubmit}>
+        <input value={initialEmail} onChange={onChange}id="email" type="email" placeholder="type email"></input>
         <input id="submit" type="submit"></input>
       </form>
     </div>
   )
 }
+
+

package.json

@@ -16,8 +16,10 @@
     "@babel/plugin-transform-runtime": "7.18.2",
     "@babel/preset-env": "7.18.2",
     "@babel/preset-react": "7.17.12",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "28.1.1",
     "babel-loader": "8.2.5",
     "babel-plugin-styled-components": "2.0.7",