class optional

Author: Ladrillo

README.md

@@ -17,8 +17,8 @@ Study its functionality and also inspect the Console, the Network tab and the El
 
 ### Tools
 
-- Node 16.x
-- NPM 8.x (update NPM executing `npm i -g npm`)
+- Node >= 18.x
+- NPM >= 9.x (update NPM executing `npm i -g npm`)
 - Unix-like shell (Gitbash/bash/zsh)
 - Chrome >= 100.x
 
@@ -47,10 +47,10 @@ Study its functionality and also inspect the Console, the Network tab and the El
 ### MVP 1, The Grid
 
 - 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`.
+- Keep your code inside `frontend/components/AppFunctional.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 component in `AppClass.js` **is optional** but can be tackled if desired. It's not required to pass the sprint.
+- The DOM produced by `AppFunctional` must match exactly the DOM in the prototype:
   - The hierarchy of HTML elements, their ids, class names etc must be the same.
   - The current square is marked with a capital B and an "active" class name.
   - The submit success and error messages that display on the page come from the API (see Network tab).
@@ -68,7 +68,7 @@ Study its functionality and also inspect the Console, the Network tab and the El
 ### MVP 2, Testing
 
 - Using `codegrade_mvp.test.js` as inspiration, write 5 tests inside `frontend/components/App.test.js`:
-  - From inside the test file, import a component of your choosing, either `AppClass.js` or `AppFunctional.js`.
+  - From inside the test file, import `AppFunctional.js`.
   - Test that the visible texts in headings, buttons, links... render on the screen.
   - Test that typing on the input results in its value changing to the entered text.
 
@@ -94,4 +94,4 @@ Study its functionality and also inspect the Console, the Network tab and the El
   ```
 
 - "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 its tests (and vice versa).
+- ❗ Remember only the functional version is required; the class-based one is recommended but optional.

codegrade_mvp.test.js

@@ -1,7 +1,8 @@
 import server from './backend/mock-server'
 import React from 'react'
 import AppFunctional from './frontend/components/AppFunctional'
-import AppClass from './frontend/components/AppClass'
+// ❗ class component is optional, uncomment next line to test
+// import AppClass from './frontend/components/AppClass'
 import { render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 
@@ -46,15 +47,17 @@ test('AppFunctional is a functional component', () => {
     AppFunctional.prototype &&
     AppFunctional.prototype.isReactComponent
   ).not.toBeTruthy()
-})
-test('AppClass is a class-based component', () => {
-  expect(
-    AppClass.prototype &&
-    AppClass.prototype.isReactComponent
-  ).toBeTruthy()
 });
+// ❗ class component is optional, uncomment next lines to test
+// test('AppClass is a class-based component', () => {
+//   expect(
+//     AppClass.prototype &&
+//     AppClass.prototype.isReactComponent
+//   ).toBeTruthy()
+// });
 
-[AppFunctional, AppClass].forEach((Component, idx) => {
+// ❗ class component is optional, uncomment AppClass to test
+[AppFunctional, /* AppClass */].forEach((Component, idx) => {
   const label = idx === 0 ? 'FUNCTIONAL' : 'CLASS-BASED'
 
   describe(`${label}`, () => {

frontend/components/AppClass.js

@@ -1,3 +1,6 @@
+// ❗ OPTIONAL, not required to pass the sprint
+// ❗ OPTIONAL, not required to pass the sprint
+// ❗ OPTIONAL, not required to pass the sprint
 import React from 'react'
 
 // Suggested initial states
@@ -55,6 +58,7 @@ export default class AppClass extends React.Component {
     const { className } = this.props
     return (
       <div id="wrapper" className={className}>
+        <p>(This component is not required to pass the sprint)</p>
         <div className="info">
           <h3 id="coordinates">Coordinates (2, 2)</h3>
           <h3 id="steps">You moved 0 times</h3>

frontend/index.html

@@ -15,7 +15,7 @@
 
 <body>
   <div id="root"></div>
-  <footer>Bloom Institute of Technology 2022</footer>
+  <footer>Bloom Institute of Technology 2024</footer>
 </body>
 
 </html>

package-lock.json

@@ -50,8 +50,8 @@
     "yup": "0.32.11"
   },
   "engines": {
-    "node": ">=16.x",
-    "npm": ">=8.x"
+    "node": ">=18.x",
+    "npm": ">=9.x"
   },
   "repository": {
     "type": "git",

package.json

@@ -40,6 +40,7 @@ const config = {
     historyApiFallback: true,
     compress: true,
     port: FRONTEND_PORT,
+    client: { logging: 'none' },
   },
   module: {
     rules: [