refresh project

.eslintrc.json

@@ -1,25 +1,18 @@
 {
-    "env": {
-        "browser": true,
-        "es2020": true,
-        "cypress/globals": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended"
-    ],
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 11,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "cypress"
-    ],
-    "rules": {
-        "react/prop-types": 0
-    }
+  "env": {
+    "commonjs": true,
+    "es2021": true,
+    "node": true,
+    "browser": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {}
 }

.gitignore

@@ -1,13 +1,11 @@
-# Mac cruft
-.DS_Store
-
 # 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
@@ -56,6 +54,9 @@ web_modules/
 # Optional eslint cache
 .eslintcache
 
+# Optional stylelint cache
+.stylelintcache
+
 # Microbundle cache
 .rpt2_cache/
 .rts2_cache_cjs/
@@ -71,16 +72,20 @@ web_modules/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variables file
+# dotenv environment variable files
 .env
-.env.test
+.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
@@ -95,6 +100,13 @@ dist
 # vuepress build output
 .vuepress/dist
 
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
 # Serverless directories
 .serverless/
 
@@ -111,8 +123,11 @@ dist
 .vscode-test
 
 # yarn v2
-
 .yarn/cache
 .yarn/unplugged
 .yarn/build-state.yml
+.yarn/install-state.gz
 .pnp.*
+
+.DS_Store
+.vscode

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 BloomTech Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,4 +1,4 @@
-# Module Project: React Components and Components State
+# Module Project: React Components and Component State
 
 This project allows you to practice the concepts and techniques learned in this module and apply them in a concrete project. This module explored React components and component state. During the module, you studied what React is, what React components are and how to build them, what state is and how to make a component stateful, and how to update component state with click handlers. In this project you will demonstrate proficiency of these subjects and principles by fleshing out several stateful components.
 
@@ -12,54 +12,34 @@ Commit your code regularly and meaningfully. This helps both you and your team l
 
 ### Description
 
-This project includes a `src/components` folder containing several React components. In their current form these components are stateless and display hard-coded information only. You will make the app interactive by going into each component, adding state and implementing event handlers and helper functions to allow the users of the app to update state by interacting with the page.
+This project includes a `frontend/components` folder containing several React components. In their current form these components are stateless and display hard-coded information only. You will make the app interactive by going into each component, adding state and implementing event handlers and helper functions to allow the users of the app to update state by interacting with the page.
 
 ## Instructions
 
 ### Task 1: Project Set Up
 
-- [ ] Create a forked copy of this project.
-- [ ] Clone your OWN fork of the repository using your terminal.
+- [ ] Clone the repository to your machine using your terminal.
 - [ ] CD into the project base directory.
 - [ ] Download project dependencies by running `npm install`.
-- [ ] Start up the app using `npm start`.
-- [ ] Optionally run tests using `npm test`. (The app must be running on `http://localhost:1234`)
+- [ ] Start up the app using `npm run dev`.
 - [ ] Push commits: `git push origin main`.
 
-### Task 2a: Minimum Viable Product
+### Task 2: Minimum Viable Product
 
 1. Each component has the required slices of state.
 2. Each component's event handlers allow the user of the app to update state.
 3. Updated state is correctly reflected in the DOM for each component.
 
 #### Steps
 
-- [ ] You will add functionality to all components inside inside `src/components`.
-- [ ] Work on the components **in the same order in which they display in Chrome** (to go from easiest challenge to hardest).
-- [ ] Each file includes a link to a video, and a set of instructions which can be summarized as:
-  - Watch the video demoing the finished component, and think about how much state is needed.
+- [ ] You will add functionality to all components inside inside `frontend/components`.
+- [ ] Work on the components **in the same order in which they display in Chrome** (to go from the easiest challenge to the hardest).
+- [ ] Each file includes a design file and a set of instructions. The instructions are generally the following:
+  - Watch the design file showing the finished component, and think about how much state is needed.
   - Create the necessary slices of component state using the state hook.
-  - Fix the JSX so it displays information derived from state, instead of hard-coded data.
+  - Fix the JSX so it displays information derived from state (instead of hard-coded data).
   - Fix the event handlers so they allow the user to update state by interacting with the page.
 
-### Task 3: Stretch Problems
-
-After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals:
-
-#### Stretch Goal 1 (To-Do List)
-
-Create a `Todos.js` file inside `src/components`. Find a tutorial online on how to build a to-do list in React using component state (no Redux!), and implement it. We should be able to render a list of to-dos, and cross out (or remove) individual to-dos to mark them complete.
-
-#### Stretch Goal 2 (Tic-Tac-Toe)
-
-Build another component inside this project with a game of Tic Tac Toe. The positions of the 'Xs' and the 'Os' over time need to be maintained in a slice of state, so that the JSX may display the contents of the 3 x 3 grid accurately. Only empty squares may be selected by the human player, and the event handler that deals with these clicks will have to include quite a bit of logic:
-
-  1. Does the latest move by the human player mean **the game is over**? (Game over, then!)
-  2. Is the game **immediately winnable by the computer** by making a certain move? (Make that move!)
-  3. Can the computer **block the human from winning on their next move** by making certain move? (Prevent defeat!)
-
-The move by the computer should probably be random if the previous checks turn out negative, but you'll be surprised at how smart the "game engine" will feel.
-
 ## Submission Format
 
 - [ ] Submit a link to your repo in canvas.

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: '110' } }]
+      ]
+    },
+    production: {
+      plugins: [
+        [PLUGIN_STYLED_COMPONENTS],
+      ],
+      presets: [
+        [PRESET_REACT],
+        [PRESET_ENV, { targets: { chrome: '110' } }]
+      ]
+    },
+  }
+}

backend/helpers.js

@@ -0,0 +1,52 @@
+let todos
+let id = 1
+let getId = () => id++
+
+const resetTodos = () => {
+  id = 1
+  todos = [
+    { id: getId(), name: 'laundry', complete: false },
+    { id: getId(), name: 'dishes', complete: false },
+    { id: getId(), name: 'groceries', complete: false },
+  ]
+}
+
+resetTodos()
+
+const getAll = () => {
+  return todos
+}
+
+const getById = id => {
+  return todos.find(todo => todo.id === id)
+}
+
+const create = name => {
+  todos.push({ id: getId(), name, complete: false })
+  return todos
+}
+
+const toggleDone = id => {
+  todos = todos.map(todo => {
+    return todo.id == id
+      ? { ...todo, complete: !todo.complete }
+      : todo
+  })
+  return todos
+}
+
+const remove = id => {
+  todos = todos.filter(todo => {
+    return todo.id !== id
+  })
+  return todos
+}
+
+module.exports = {
+  getAll,
+  getById,
+  create,
+  toggleDone,
+  remove,
+  resetTodos,
+}

backend/mock-server.js

@@ -0,0 +1,43 @@
+const { setupServer } = require('msw/node')
+const { rest } = require('msw')
+const Todo = require('./helpers')
+
+function getAll(req, res, ctx) {
+  return res(
+    ctx.json(Todo.getAll()),
+  )
+}
+
+function getById(req, res, ctx) {
+  return res(
+    ctx.json(Todo.getById(req.params.id)),
+  )
+}
+
+function create(req, res, ctx) {
+  return res(
+    ctx.json(Todo.create(req.body)),
+  )
+}
+
+function toggleDone(req, res, ctx) {
+  return res(
+    ctx.json(Todo.toggleDone(req.params.id)),
+  )
+}
+
+function remove(req, res, ctx) {
+  return res(
+    ctx.json(Todo.remove(req.params.id)),
+  )
+}
+
+const handlers = [
+  rest.get('http://localhost:9009/api/todos', getAll),
+  rest.get('http://localhost:9009/api/todos/:id', getById),
+  rest.post('http://localhost:9009/api/todos', create),
+  rest.patch('http://localhost:9009/api/todos/:id', toggleDone),
+  rest.delete('http://localhost:9009/api/todos/:id', remove),
+]
+
+module.exports = setupServer(...handlers)

backend/routers/pics.js

@@ -0,0 +1,37 @@
+// TODO: this router is not mocked in MSW
+const express = require('express')
+
+const router = express.Router()
+
+const pics = [
+  ['karthik-sreenivas-rsx-joaKYrk-unsplash.jpg', 'Photo by Karthik Sreenivas on Unsplash'],
+  ['kaung-myat-min-iBLWICTNt0Y-unsplash.jpg', 'Photo by Kaung Myat Min on Unsplash'],
+  ['marcel-l-PQewPJqNKwQ-unsplash.jpg', 'Photo by Marcel L. on Unsplash'],
+  ['mostafa-meraji-DH3TclSIBuI-unsplash.jpg', 'Photo by Mostafa Meraji on Unsplash'],
+  ['mostafa-meraji-HJgEB78b2Z8-unsplash.jpg', 'Photo by Mostafa Meraji on Unsplash'],
+  ['rene-porter-hteGzeFuB7w-unsplash.jpg', 'Photo by René Porter on Unsplash'],
+  ['sam-moghadam-khamseh-_kn16nC2vcw-unsplash.jpg', 'Photo by Sam Moghadam Khamseh on Unsplash'],
+  ['tengyart-kSvpTrfhaiU-unsplash.jpg', 'Photo by Tengyart on Unsplash'],
+  ['vadim-kaipov-f6jkAE1ZWuY-unsplash.jpg', 'Photo by vadim kaipov on Unsplash'],
+  ['will-4lbniAdMzcc-unsplash.jpg', 'Photo by Will on Unsplash'],
+]
+
+const baseUrl = 'https://bloominstituteoftechnology.github.io/img'
+
+router.get('/list', (req, res) => {
+  let data = pics.map(pic => ({
+    file: `${baseUrl}/${pic[0]}`,
+    detail: pic[1],
+  }))
+  res.json(data)
+})
+
+router.get('/random', (req, res) => {
+  const pic = pics[Math.floor(Math.random() * pics.length)]
+  res.json({
+    file: `${baseUrl}/${pic[0]}`,
+    detail: pic[1],
+  })
+})
+
+module.exports = router