Updated to final dockerized module

.gitignore

@@ -1,2 +1,4 @@
 .env
-node_modules
+node_modules
+public/bundle.js
+docker-compose.yml

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "configurations": [
+    {
+      "name": "Docker Node.js Launch",
+      "type": "docker",
+      "request": "launch",
+      "preLaunchTask": "docker-run: debug",
+      "platform": "node"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,39 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "docker-build",
+			"label": "docker-build",
+			"platform": "node",
+			"dockerBuild": {
+				"dockerfile": "${workspaceFolder}/Dockerfile",
+				"context": "${workspaceFolder}",
+				"pull": true
+			}
+		},
+		{
+			"type": "docker-run",
+			"label": "docker-run: release",
+			"dependsOn": [
+				"docker-build"
+			],
+			"platform": "node"
+		},
+		{
+			"type": "docker-run",
+			"label": "docker-run: debug",
+			"dependsOn": [
+				"docker-build"
+			],
+			"dockerRun": {
+				"env": {
+					"DEBUG": "*",
+					"NODE_ENV": "development"
+				}
+			},
+			"node": {
+				"enableDebugging": true
+			}
+		}
+	]
+}

db/Dockerfile

@@ -0,0 +1,12 @@
+FROM mysql:5.7
+
+ENV MYSQL_DATABASE=Shmetsy \
+    MYSQL_ROOT_PASSWORD=pass \
+    MYSQL_ROOT_HOST=%
+
+COPY ./schema.sql /docker-entrypoint-initdb.d/
+
+# docker run  -d \
+# --publish 6603:3306 \
+# --name=shmetsy-db db
+# --volume=./data:/var/lib/mysql

schema.sql → db/schema.sql

@@ -1,5 +1,9 @@
 DROP DATABASE IF EXISTS Shmetsy;
 CREATE DATABASE Shmetsy;
+-- CREATE USER 'root'@'%' IDENTIFIED BY 'root';
+-- CREATE USER 'root'@'localhost' IDENTIFIED BY 'root';
+-- GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'mysql';
+-- GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' IDENTIFIED BY 'mysql';
 USE Shmetsy;
 
 
@@ -80,5 +84,3 @@ INSERT INTO Colors (color_name, price_modifier, product_id) VALUES ("Orange", 9.
 INSERT INTO Colors (color_name, price_modifier, product_id) VALUES ("Black/White", 16.00, 1);
 
 INSERT INTO Colors (color_name, price_modifier, product_id) VALUES ("USA", 99.99, 1);
-
---    mysql -u mta630 < schema.sql

web/Dockerfile

@@ -0,0 +1,26 @@
+# Use Node v8 as the base image.
+FROM node:8
+
+# create and set app directory
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package*.json ./
+RUN npm install
+
+# Copy app source from current host directory to container working directory
+COPY . .
+CMD ["npm", "start"]
+
+
+# docker run  -d \
+# --publish 4200:4200 \
+# -e MYSQL_USER='root' \
+# -e MYSQL_PASSWORD='pass' \
+# -e MYSQL_DATABASE='Shmetsy' \
+# -e MYSQL_HOST='172.17.0.2' \
+# --link shmetsy-db:db \
+# --name=shmetsy-web server

client/src/components/Description.jsx → web/client/src/components/Description.jsx

@@ -21,15 +21,15 @@ class Description extends React.Component {
       }, () => {
         $('.mta-fader').css('display', 'none');
         $('#mta-text-box').addClass('mta-full-text-box').removeClass('mta-description-text-box');
-        $('.mta-learn-more-btn').html('Less');
+        $('.mta-learn-more-controller').html('Less');
       });
     } else {
       this.setState({
         show: false,
       }, () => {
         $('#mta-text-box').removeClass('mta-full-text-box').addClass('mta-description-text-box');
         $('.mta-fader').css('display', 'block');
-        $('.mta-learn-more-btn').html('Learn more about this item');
+        $('.mta-learn-more-controller').html('Learn more about this item');
       });
     }
   }
@@ -48,7 +48,7 @@ class Description extends React.Component {
           <p className="mta-fader"></p>
         </div>
         <div className="mta-btn-container">
-          <a className="mta-learn-more-btn" onClick={this.handleClick}>
+          <a className="mta-learn-more-btn learn-more-controller" onClick={this.handleClick}>
           Learn more about this item
           </a>
         </div>

client/src/components/Header.jsx → web/client/src/components/Header.jsx

@@ -13,10 +13,10 @@ class Header extends React.Component {
         <div className="mta-logo">Shmetsy</div>
         <div className="mta-search-bar-container">
           <input className="mta-search" type="text" placeholder="Search for items or shops"></input>
-          <div className="mta-search-button" type="button"><i className="fas fa-search"></i></div>
+          <div className="mta-search-button" type="button"><i className="fas fa-search mta-fa-search"></i></div>
         </div>
         <div className="mta-icons-container">
-          <div className="mta-header-column after-search">
+          <div className="mta-header-column mta-after-search">
             Sell on Shmetsy
           </div>
           <div className="mta-header-column mta-icons">

public/styles/style.css → web/client/src/components/main.module.css

@@ -394,6 +394,7 @@
   padding-top: 12px;
   padding-bottom: 12px;
   padding-right: 18px;
+  padding-left: 18px;
   text-decoration: none;
   color: #222222;
   border-radius: 24px;
@@ -532,7 +533,7 @@
 
 .mta-policies-header {
   font-size: 18px;
-  line-height: 1.mta-4;
+  line-height: 1.4;
   text-align: left;
 }
 

client/src/index.jsx → web/client/src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App.jsx';
 import Header from './components/Header.jsx';
+import style from './components/main.module.css';
 
 
 ReactDOM.render(<Header />, document.getElementById('header'));