Feature/update sudoku exercise (#23)

* Updated sudoku exercise

- Moved from custom webpack configuration to use react-scripts to make things simpler.
- Upgraded dependencies to latest ones.
- Added linting and integration with codacy/codecov.
- Added continuous integration examples of how to run tests on push/pull requests and how to "deploy" in github pages upon release.
- Updated dockerfile to use an official node image so we don't have to install everything from scratch.
- Updated sass examples to make them more interesting.

.dockerignore

@@ -0,0 +1 @@
+node_modules/

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true,
+        "es6": true,
+        "jest": true,
+        "node": true
+    },
+    "settings": {
+        "react": {
+            "version": "16.13.1"
+        }
+    },
+    "extends": [
+        "eslint:recommended",
+        "react",
+        "plugin:react/recommended"
+    ],
+    "plugins": [
+        "react"
+    ]
+}

.github/workflows/release.yml

@@ -0,0 +1,39 @@
+name: Release
+
+on: release
+
+jobs:
+    unit-testing:
+        name: Unit Tests
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v1
+              with:
+                  node-version: 13
+            - name: install dependencies
+              run: npm install
+            - name: run tests
+              run: npm test
+
+    deploy:
+        name: Deploy to GitHub Pages
+        runs-on: ubuntu-latest
+        needs:
+            - unit-testing
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v1
+              with:
+                  node-version: 12.x
+            - name: Install Packages
+              run: npm install
+            - name: Build page
+              run: npm run build --verbose
+              env:
+                  CI: false
+            - name: Deploy to gh-pages
+              uses: peaceiris/actions-gh-pages@v3
+              with:
+                  deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+                  publish_dir: ./build

.github/workflows/testing.yml

@@ -0,0 +1,22 @@
+name: Testing
+
+on: push
+
+jobs:
+    unit-testing:
+        name: Unit Tests
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v1
+              with:
+                  node-version: 13
+            - name: install dependencies
+              run: npm install
+            - name: run tests
+              run: npm run test:ci
+            - name: Codecov
+              uses: codecov/codecov-action@v2
+              with:
+                  token: ${{ secrets.CODECOV_TOKEN }}
+                  flags: unittests

.gitignore

@@ -59,6 +59,6 @@ typings/
 
 # next.js build output
 .next
-
-public/css/*
-public/js/*
+.history/
+.vscode/
+build/

Dockerfile

@@ -1,31 +1,21 @@
 # -- Dockerfile -- #
 #
 # docker build -t react-exercise .
-# docker run -dit --name react-instance -v `pwd`:/storage/app -p 80:8080 react-exercise
+# docker run -dit --name react-instance -p 80:3000 react-exercise
 # docker exec -it react-instance /bin/bash
 
-FROM ubuntu:16.04
+FROM node:12-buster
 
 LABEL Description="React Sudoku" Version="1.0"
 
-# Install generic tools
-RUN apt-get update && apt-get install -y \
-  sudo \
-  vim \
-  net-tools \
-  curl
+EXPOSE 3000
 
-# Add node source repository to install the latest version
-RUN curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
+ARG APP_DIR="/opt/exercise-react"
 
-# Install basic tools
-RUN apt-get update && apt-get install -y \
-  nodejs
+RUN mkdir -p ${APP_DIR}
+WORKDIR ${APP_DIR}
 
-# Bring the process starter
-COPY startup.sh /root/
-RUN chmod +x /root/startup.sh
+COPY . ${APP_DIR}
+RUN npm install
 
-EXPOSE 8080
-
-ENTRYPOINT [ "/root/startup.sh" ]
+ENTRYPOINT [ "npm", "run", "start" ]

EXERCISES.md

@@ -7,20 +7,14 @@ All the exercises are possible and have been tested.
 
 ## Basic exercises
 
-1. Change color of the tiles the user has inserted a value.
+1. Change color of the tiles the user is editing at the moment.
 
 This exercise involve only sass updates. [SASS](https://sass-lang.com/) and
 [CSS pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)
 
-2. Move navigation menu at the bottom of the Sudoku.
+2. When the sudoku is solved, show a message congratulating the user.
 
-For this we don't need react, as we can't access the SudokuGame component thus it's
-not possible to move it freely as we would like.
-
-As workaround, it's possible to use [jQuery](http://api.jquery.com/) directly to
-modify DOM elements however we want. Once the DOM is [ready](http://api.jquery.com/ready/),
-we should [manipulate](http://api.jquery.com/category/manipulation/) the element
-to move it wherever we want.
+For this we will need to understand the SudokuGame component and how to pass it callbacks.
 
 ## Medium exercises
 

README.md

@@ -1,4 +1,8 @@
-## Synopsis
+# Synopsis
+
+[![Benchmark](https://github.com/gguridi/exercise-react/actions/workflows/release.yml/badge.svg?branch=master)](https://github.com/gguridi/exercise-react/actions/workflows/release.yml)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/d1cd1dc3fafb4086802a9a4a79b39189)](https://www.codacy.com/gh/gguridi/exercise-react/dashboard?utm_source=github.com&utm_medium=referral&utm_content=gguridi/exercise-react&utm_campaign=Badge_Grade)
+[![codecov](https://codecov.io/gh/gguridi/exercise-react/branch/master/graph/badge.svg?token=IUDIfrcUOY)](https://codecov.io/gh/gguridi/exercise-react)
 
 This is a basic website intended to work with React and Bootstrap. This website gives a basic
 functionality to show information in a responsive way.
@@ -13,7 +17,7 @@ The first thing to do is to [fork this repository](https://help.github.com/artic
 in your account. Once you have it forked you can clone it in your local environment
 with the command:
 
-```
+```bash
 git clone {repo-url} ./local-folder
 ```
 
@@ -28,16 +32,16 @@ operating system you are running.
 
 Once docker is installed, go to this folder and build the virtual machine with:
 
-```
+```bash
 cd <path-to-this-code>
 docker build -t react-exercise .
 ```
 
 Then execute the following code to run the virtual machine. The webservice will be mapped automatically to the port 80
 of our local machine. (ensure no other process is running in the port 80 or it might conflict):
 
-```
-docker run -dit --name react-instance -v `pwd`:/storage/app -p 80:8080 react-exercise
+```bash
+docker run -it --name react-instance -p 80:3000 react-exercise
 ```
 
 Note that the container has been created to run as an application. Once running it will
@@ -46,14 +50,14 @@ show the standard output and terminating the process will terminate also the con
 To connect to the container we can use (this will allow us to execute commands from
 inside the container using the bash shell):
 
-```
+```bash
 docker exec -it react-instance /bin/bash
 ```
 
 If you need to rerun the virtual machine then we need to remove it first. Maybe the
 following commands will help you executing _docker run_ again.
 
-```
+```bash
 docker stop react-instance
 docker rm react-instance
 ```
@@ -72,15 +76,15 @@ operating system you are running.
 Then, from the folder we have cloned the code, we can see a `package.json` file.
 This file contains the dependencies of our project. To install them type:
 
-```
+```bash
 npm install
 ```
 
 This will create a folder called `.node_modules` that will contain the dependencies.
 
 Once the dependencies are there, we can start the development server with:
 
-```
+```bash
 npm run start
 ```
 
@@ -113,7 +117,7 @@ The second one is installing them through npm. Then we include them as part of o
 React project and we let webpack, when builds the application, to manage the
 integration.
 
-```
+```bash
 import 'jquery';
 import 'bootstrap/dist/js/bootstrap';
 ```
@@ -134,7 +138,7 @@ The tests are located altogether with the code, under the .test.js extension.
 
 We can run the tests from inside the container or from outside, with:
 
-```
+```bash
 npm run test
 ```