Initial commit

Author: Ladrillo

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "commonjs": true,
+    "es2021": true,
+    "node": true,
+    "browser": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {}
+}

.gitignore

@@ -0,0 +1,133 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.vscode
+.DS_Store

README.md

@@ -0,0 +1,91 @@
+# Sprint Challenge: Advanced React
+
+## Intro
+
+In this challenge, you will write the logic for [THIS](https://the-gabe-grid.herokuapp.com/) widget.
+
+Study its functionality and also inspect the Console, the Network tab and the Elements tab in Chrome Dev Tools:
+
+- There are two versions of the widget, with identical functionality.
+- The input box at the bottom of the page expects a valid email address.
+- Email validation errors arrive from the server, as you can see in the Network tab, under "Preview".
+- The payload sent to the server on form submit can also be seen in the Network tab, under "Payload".
+- The origin of coordinates of the grid is at its top-left corner.
+- One valid email in particular, `[email protected]`, **results in a server error.**
+
+## Requirements
+
+### Tools
+
+- Node 16.x
+- NPM 8.x (update NPM executing `npm i -g npm`)
+- Chrome >= 96.x
+
+Other configurations might work but haven't been tested.
+
+### Optional Tools
+
+- Postman (download [here](https://www.postman.com/downloads/))
+
+## Project Setup
+
+- Fork, clone, and `npm install`. You don't need to add any extra libraries.
+- Launch the project on a dev server running `npm run dev`.
+- See your widget visiting `http://localhost:3000` in Chrome.
+- Run tests locally executing `npm test`. The test file is `codegrade_mvp.test`.
+
+## API
+
+- The application includes an endpoint on `POST http://localhost:9000/result`.
+- You can experiment with this endpoint using an HTTP client like Postman.
+- The endpoint expects a payload like `{ "x": 1, "y": 2, "steps": 3, "email": "[email protected]" }`:
+  - `x` is an integer between 1 and 3.
+  - `y` is an integer between 1 and 3.
+  - `steps` is an integer larger than 0.
+  - `email` is a valid email address.
+
+## MVP
+
+### MVP 1, The Grid -- Long Explanation
+
+- Replicate the **functionality and DOM** shown in the prototype linked at the top of this README.
+- Keep your code inside `frontend/components/AppFunctional.js` and `frontend/components/AppClass.js`.
+- The component exposed by `AppFunctional.js` must be a stateful functional component.
+- The one in `AppClass.js` must be a stateful class-based component.
+- The DOM produced by your components must match exactly the DOM in the prototype:
+  - The HTML hierarchy, ids, class names etc must be the same.
+  - The current square is marked with a capital B.
+  - Success and error messages must be those sent by the API (see Network tab -> "Preview").
+  - No frontend form validation code is required.
+- The coordinates of each square of the grid are as follows:
+
+  ```
+    (1, 1) (2, 1) (3, 1)
+    (1, 2) (2, 2) (3, 2)
+    (1, 3) (2, 3) (3, 3)
+  ```
+
+### MVP 1, The Grid -- Short Explanation
+
+- Make **ALL** the tests pass!
+
+### MVP 2, Testing
+
+- Using `codegrade_mvp.test.js` as inspiration, write a few tests inside `frontend/components/App.test.js`:
+  - From inside the test file, import a component of your choosing, either `AppClass.js` or `AppFunctional.js`.
+  - Test that emails over 100 characters long result in a particular server error on the screen.
+  - Inspect the API with Postman to see what this error actually is.
+
+### Stretch Goals
+
+- Extract some of the stateful logic into a custom hook at the top of `AppFunctional.js`.
+- Build a stateless component responsible for rendering the markup in the stateful components, so it does not have to be repeated.
+- Do not break your MVP by pushing broken stretch goals. You must keep your tests passing at 100%.
+
+### Important Notes
+
+- Design the state of the app before opening your editor. You might need fewer pieces of state than you think!
+- Find the simplest data structure that describes effectively the state of the grid.
+- "Product" works hard designing the messages: we must reproduce them faithfully, down to the last comma.
+- If you start with Functional, don't switch to Class-Based until Functional is passing all tests (and viceversa).
+- If the direction of the `y` axis surprises you, know that elements in HTML also have their origin of coordinates at their top-left corner.

babel.config.js

@@ -0,0 +1,37 @@
+const PLUGIN_TRANSFORM_RUNTIME = '@babel/plugin-transform-runtime'
+const PLUGIN_STYLED_COMPONENTS = 'babel-plugin-styled-components'
+
+const PRESET_REACT = '@babel/preset-react'
+const PRESET_ENV = '@babel/preset-env'
+
+module.exports = {
+  env: {
+    testing: {
+      plugins: [
+        [PLUGIN_TRANSFORM_RUNTIME],
+      ],
+      presets: [
+        [PRESET_REACT],
+        [PRESET_ENV, { modules: 'commonjs', debug: false }]
+      ]
+    },
+    development: {
+      plugins: [
+        [PLUGIN_STYLED_COMPONENTS],
+      ],
+      presets: [
+        [PRESET_REACT],
+        [PRESET_ENV, { targets: { chrome: '96' } }]
+      ]
+    },
+    production: {
+      plugins: [
+        [PLUGIN_STYLED_COMPONENTS],
+      ],
+      presets: [
+        [PRESET_REACT],
+        [PRESET_ENV, { targets: { chrome: '96' } }]
+      ]
+    },
+  }
+}

backend/helpers.js

@@ -0,0 +1,56 @@
+const yup = require('yup')
+
+const schema = yup.object().shape({
+  email: yup
+    .string()
+    .trim()
+    .email('email must be a valid email')
+    .required('email is required')
+    .max(100, 'email must be under 100 chars'),
+  x: yup
+    .number()
+    .typeError('x coordinate must be a number')
+    .required('x coordinate is required')
+    .max(3, 'x coordinate must be 1, 2 or 3')
+    .min(1, 'x coordinate must be 1, 2 or 3'),
+  y: yup
+    .number()
+    .typeError('y coordinate must be a number')
+    .required('y coordinate is required')
+    .max(3, 'y coordinate must be 1, 2 or 3')
+    .min(1, 'y coordinate must be 1, 2 or 3'),
+  steps: yup
+    .number()
+    .typeError('steps must be a number')
+    .required('steps is required')
+    .min(0, 'steps must be 0 or greater'),
+})
+
+async function buildResponse(req) {
+  let status = 200
+  let message
+
+  try {
+    const validated = await schema.validate(req.body, { stripUnknown: true })
+
+    const { email, x, y, steps } = validated
+    const code = (((x + 1) * (y + 2)) * (steps + 1)) + email.length
+
+    if (email === '[email protected]') {
+      message = `[email protected] failure #${code}`
+      status = 403
+    } else {
+      const name = email.split('@')[0]
+      message = `${name} win #${code}`
+    }
+  } catch (err) {
+    message = `Ouch: ${err.message}`
+    status = 422
+  }
+
+  return [status, { message }]
+}
+
+module.exports = {
+  buildResponse,
+}

backend/mock-server.js

@@ -0,0 +1,27 @@
+const { setupServer } = require('msw/node')
+const { rest } = require('msw')
+
+const { buildResponse } = require('./helpers')
+
+async function result(req, res, ctx) {
+  const [status, payload] = await buildResponse(req)
+  return res(
+    ctx.status(status),
+    ctx.json(payload),
+  )
+}
+
+function catchAll(req, res, ctx) {
+  const message = `Endpoint [${req.method}] /${req.params['0']} does not exist`
+  return res(
+    ctx.status(404),
+    ctx.json({ message }),
+  )
+}
+
+const handlers = [
+  rest.post('http://localhost:9000/api/result', result),
+  rest.all('http://localhost:9000/*', catchAll),
+]
+
+module.exports = setupServer(...handlers)

backend/server.js

@@ -0,0 +1,30 @@
+const express = require('express')
+const cors = require('cors')
+const path = require('path')
+
+const { buildResponse } = require('./helpers')
+
+const server = express()
+
+server.use(express.json())
+
+server.use(express.static(path.join(__dirname, '../dist')))
+
+server.use(cors())
+
+server.post('/api/result', async (req, res) => {
+  const [status, payload] = await buildResponse(req)
+  res.status(status).json(payload)
+})
+
+server.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, '../dist/index.html'))
+})
+
+server.use((req, res) => {
+  res.status(404).json({
+    message: `Endpoint [${req.method}] ${req.path} does not exist`,
+  })
+})
+
+module.exports = server