From 8d77e6651ac317db04e76893303ebaf005b97ab0 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 03:04:54 -0300 Subject: [PATCH 01/73] increase the project version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b01884d..ae20540 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-socket-simple-chat", - "version": "0.1.0", + "version": "0.2.0", "description": "a simple chat application that uses react.js, redux and socket.io", "scripts": { "start": "webpack-dev-server --mode development --open --hot", From e0138adb04eefb3c2d3c0c870ffd2af4aa97e274 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 03:06:04 -0300 Subject: [PATCH 02/73] add a link on the README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a27f278..d26c856 100644 --- a/README.md +++ b/README.md @@ -59,3 +59,4 @@ I also keep the webpack configure to consider the file paths from the `./src` di * [Optimizing front-end delivery with Webpack 4 | Jasel Gadhia](https://jes.al/2018/04/optimizing-front-end-delivery-with-Webpack-4/) +* Project architecture: [Scaling your Redux App with ducks | freeCodeCamp](https://medium.freecodecamp.org/scaling-your-redux-app-with-ducks-6115955638be) From 5853b346ed4979684c51cac1397783e941e73b39 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 03:09:24 -0300 Subject: [PATCH 03/73] add a new link to the README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d26c856..bc10814 100644 --- a/README.md +++ b/README.md @@ -59,4 +59,6 @@ I also keep the webpack configure to consider the file paths from the `./src` di * [Optimizing front-end delivery with Webpack 4 | Jasel Gadhia](https://jes.al/2018/04/optimizing-front-end-delivery-with-Webpack-4/) -* Project architecture: [Scaling your Redux App with ducks | freeCodeCamp](https://medium.freecodecamp.org/scaling-your-redux-app-with-ducks-6115955638be) +* Project architecture re-ducks: [Scaling your Redux App with ducks | freeCodeCamp](https://medium.freecodecamp.org/scaling-your-redux-app-with-ducks-6115955638be) + + * [[GitHub] alexnm / re-ducks](https://github.com/alexnm/re-ducks) - An attempt to extend the original proposal for redux modular architecture From 3e7187f4da4a573ef6851df1fbbb21688ee8ca6d Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 03:19:53 -0300 Subject: [PATCH 04/73] add a link to the README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index bc10814..5f66b18 100644 --- a/README.md +++ b/README.md @@ -62,3 +62,5 @@ I also keep the webpack configure to consider the file paths from the `./src` di * Project architecture re-ducks: [Scaling your Redux App with ducks | freeCodeCamp](https://medium.freecodecamp.org/scaling-your-redux-app-with-ducks-6115955638be) * [[GitHub] alexnm / re-ducks](https://github.com/alexnm/re-ducks) - An attempt to extend the original proposal for redux modular architecture + + * [[GitHub] FortechRomania / react-redux-complete-example](https://github.com/FortechRomania/react-redux-complete-example) - A react+redux example project based on the re-ducks folder structure From d576f166477390770175aedecda75e09a1872f6f Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 03:24:55 -0300 Subject: [PATCH 05/73] add react-router-dom lib --- package.json | 3 ++- yarn.lock | 61 ++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index ae20540..1e3254c 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ }, "dependencies": { "react": "^16.3.2", - "react-dom": "^16.3.2" + "react-dom": "^16.3.2", + "react-router-dom": "^4.2.2" }, "devDependencies": { "autoprefixer": "^8.5.0", diff --git a/yarn.lock b/yarn.lock index faa1c71..8a5f0d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3407,6 +3407,16 @@ he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +history@^4.7.2: + version "4.7.2" + resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" + dependencies: + invariant "^2.2.1" + loose-envify "^1.2.0" + resolve-pathname "^2.2.0" + value-equal "^0.4.0" + warning "^3.0.0" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -3423,7 +3433,7 @@ hoek@4.x.x: version "4.2.1" resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" -hoist-non-react-statics@^2.5.0: +hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" @@ -3696,7 +3706,7 @@ into-stream@^3.1.0: from2 "^2.1.1" p-is-promise "^1.1.0" -invariant@^2.2.2: +invariant@^2.2.1, invariant@^2.2.2: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -4383,7 +4393,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -5332,6 +5342,12 @@ path-to-regexp@0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" +path-to-regexp@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d" + dependencies: + isarray "0.0.1" + path-type@3.0.0, path-type@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f" @@ -5743,7 +5759,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.6.0, prop-types@^15.6.1: +prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1: version "15.6.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: @@ -5919,6 +5935,29 @@ react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" +react-router-dom@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" + dependencies: + history "^4.7.2" + invariant "^2.2.2" + loose-envify "^1.3.1" + prop-types "^15.5.4" + react-router "^4.2.0" + warning "^3.0.0" + +react-router@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986" + dependencies: + history "^4.7.2" + hoist-non-react-statics "^2.3.0" + invariant "^2.2.2" + loose-envify "^1.3.1" + path-to-regexp "^1.7.0" + prop-types "^15.5.4" + warning "^3.0.0" + react@^16.3.2: version "16.3.2" resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9" @@ -6242,6 +6281,10 @@ resolve-from@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" + resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -7319,6 +7362,10 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +value-equal@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" + vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" @@ -7371,6 +7418,12 @@ vm-browserify@0.0.4: dependencies: indexof "0.0.1" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + dependencies: + loose-envify "^1.0.0" + watchpack@^1.5.0: version "1.6.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00" From f5baf2318a92066a9d8d8a6b21f00582d7957062 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 03:43:05 -0300 Subject: [PATCH 06/73] add basic usage of react-router-dom --- src/chat/index.js | 44 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/src/chat/index.js b/src/chat/index.js index 95c12b9..67ed443 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -1,16 +1,52 @@ import React, { Component } from 'react'; +import { + BrowserRouter as Router, Route, Link +} from 'react-router-dom'; + import styles from './styles.scss'; +//----------------------------------------------------------------------------// + +const ChatRoom = () => ( +
TODO: define chat room component
+); + +const Settings = () => ( +
TODO: define settings component
+); + +const NavBar = () => ( +
+ Chat | + Settings +
+); + +const Routes = () => ( +
+ + +
+); + +//----------------------------------------------------------------------------// + class Chat extends Component { render(){ return ( -
-

React webapp build with the Webpack v4.

-

.env message: {process.env.MESSAGE}

-
+ +
+

React webapp build with the Webpack v4.

+

.env message: {process.env.MESSAGE}

+
+ +
+ +
+ ); } } From fd120d0f13c9c4914421d34eec6c5441b45dbe97 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 04:23:24 -0300 Subject: [PATCH 07/73] add compress to the webDev config --- webpack.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 56869df..218f18d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -305,7 +305,8 @@ module.exports = (env, argv) => { devServer: { host: ipAddress, - port: process.env.PORT || 3000 + port: (process.env.PORT || 3000), + compress: true } }; }; \ No newline at end of file From 7b53883c6364603b357a0748d5f1bf2224f14fff Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 04:23:42 -0300 Subject: [PATCH 08/73] add basic react-router-dom usage --- src/chat/index.js | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/src/chat/index.js b/src/chat/index.js index 67ed443..90715e2 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -1,25 +1,43 @@ import React, { Component } from 'react'; +// using HashRouter that will make the routes work +// over a deployment that hasn't a backend with historyApiFallback support import { - BrowserRouter as Router, Route, Link + HashRouter, Route, NavLink } from 'react-router-dom'; import styles from './styles.scss'; //----------------------------------------------------------------------------// +// TODO: move each component to it own .js file + const ChatRoom = () => ( -
TODO: define chat room component
+
+
+ TODO: define chat room component +
); const Settings = () => ( -
TODO: define settings component
+
+
+ TODO: define settings component +
); const NavBar = () => (
- Chat | - Settings + + Chat + | + + Settings +
); @@ -34,10 +52,12 @@ const Routes = () => ( class Chat extends Component { + // TODO: define chat application layout + render(){ return ( - +

React webapp build with the Webpack v4.

.env message: {process.env.MESSAGE}

@@ -46,7 +66,7 @@ class Chat extends Component {
- + ); } } From 609c0abe4d4ead018d10e8a8f74fc540ccfafe3f Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Thu, 17 May 2018 14:35:54 -0300 Subject: [PATCH 09/73] add comment on the src/chat/styles.scss file --- src/chat/styles.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/chat/styles.scss b/src/chat/styles.scss index 3272732..1d89f35 100644 --- a/src/chat/styles.scss +++ b/src/chat/styles.scss @@ -1,5 +1,13 @@ @import 'styles/global-variables'; +/* +CSS Selectors Reference | w3schools +https://www.w3schools.com/cssref/css_selectors.asp + +[attribute] | CSS-Tricks +https://css-tricks.com/almanac/selectors/a/attribute/ +*/ + .chat { h1 { From 3e8b5a7a3e24e584e8a1e6366b91c670bd557e4e Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 03:40:59 -0300 Subject: [PATCH 10/73] update webpack dev config --- webpack.config.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 218f18d..f063627 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -166,7 +166,7 @@ module.exports = (env, argv) => { // https://webpack.js.org/configuration/devtool/ // https://survivejs.com/webpack/building/source-maps/ - devtool: shouldUseSourceMap ? 'eval' : false, + devtool: shouldUseSourceMap ? 'eval-source-map' : false, entry: { app: PATHS.app @@ -231,9 +231,14 @@ module.exports = (env, argv) => { // https://blog.pusher.com/css-modules-react/ loader: 'css-loader', options: { - importLoaders: 1, - modules: true, - localIdentName: CSS_MODULE_NAME_PATTERN, + /* + generates css modules, but that turns each css module + in one isolated scope, where the local component (HTML DOM element) + doesn't have access to one style class defined in one parent above + */ + // importLoaders: 1, + // modules: true, + // localIdentName: CSS_MODULE_NAME_PATTERN, sourceMap: shouldUseSourceMap } }, @@ -252,7 +257,7 @@ module.exports = (env, argv) => { { loader: 'sass-loader', options: { - sourceMap: true, + // sourceMap: true, includePaths: [ PATHS.srcDir ] From 968c357f12ca20a254bc505154342b1e93cc992e Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 03:41:22 -0300 Subject: [PATCH 11/73] add raleway font-family --- src/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/index.html b/src/index.html index bee9f1b..e301446 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,10 @@ + Simple Chat + + From f03aaf41c6f080f1df633055b69648762a666a43 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 03:41:43 -0300 Subject: [PATCH 12/73] update the main scss file imported --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 58fc12a..e4ac73e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import styles from 'styles/main.scss'; +import styles from 'index.scss'; import App from 'app'; From ed0787d2a68b4f4d01aede38a2fe37c22bd62a9d Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 03:42:02 -0300 Subject: [PATCH 13/73] layout updates --- src/chat/_styles.scss | 134 ++++++++++++++++++++++++++++++ src/chat/index.js | 56 ++++++++----- src/chat/styles.scss | 17 ---- src/index.scss | 21 +++++ src/styles/_all.scss | 5 ++ src/styles/_body.scss | 23 +++++ src/styles/_global-variables.scss | 19 ----- src/styles/_global.scss | 13 --- src/styles/_html.scss | 3 + src/styles/_mixins.scss | 9 ++ src/styles/_variables.scss | 37 +++++++++ src/styles/main.scss | 3 - 12 files changed, 265 insertions(+), 75 deletions(-) create mode 100644 src/chat/_styles.scss delete mode 100644 src/chat/styles.scss create mode 100644 src/index.scss create mode 100644 src/styles/_all.scss create mode 100644 src/styles/_body.scss delete mode 100644 src/styles/_global-variables.scss delete mode 100644 src/styles/_global.scss create mode 100644 src/styles/_html.scss create mode 100644 src/styles/_mixins.scss create mode 100644 src/styles/_variables.scss delete mode 100644 src/styles/main.scss diff --git a/src/chat/_styles.scss b/src/chat/_styles.scss new file mode 100644 index 0000000..ae6b041 --- /dev/null +++ b/src/chat/_styles.scss @@ -0,0 +1,134 @@ +%border { + border: 0.1rem solid #cccccc; +} + +%margin-bottom { + margin-bottom: $default-unit-value; +} + +//---------------------------------------------------------------------------// + +// defines the application layout using the flexbox +.chat { + display: flex; + flex-direction: column; + + @include fix-content-position; + + &__header { + flex: none; + padding: 0.5rem 2rem; + + @extend %margin-bottom; + @extend %border; + + // TODO: remove + // background-color: #ffffff; + } + + &__body { + display: flex; + flex-direction: column; + flex: auto; + + &__content { + flex: auto; + padding: $default-unit-value; + + @extend %margin-bottom; + @extend %border; + + background-color: lighten($body-background-color, 5%); + } + + &__footer { + flex: none; + + // TODO: remove + // background-color: lightblue; + min-height: 3rem; + } + } +} + +//--- + +// TODO: move to it own .scss file related to navbar component +.navbar > a { + color: #222222; + text-decoration: none; + + &:first-child { + margin-right: $default-unit-value; + } + + &.active { + font-weight: bold; + text-decoration: underline; + } +} + +//--- + +// TODO: move to it own .scss file related to settings component +.btn-reset { + font-family: $body-font-family; + font-size: $body-font-size; + + line-height: $body-line-height; + + padding: 0.5rem 2rem; + + width: 100%; + height: 100%; + + background-color: darken($body-background-color, 10%); + + @extend %border; +} + +//--- + +// TODO: move to it own .scss file related to the same component +.chatroom { + + &__input { + width: 100%; + display: flex; + flex-direction: row; + + &__field { + flex: auto; + margin-right: 0.5rem; + + display: flex; + + & > input[type="text"] { + flex: auto; + + padding: 0.5rem 1rem; + + font-family: $body-font-family; + font-size: $body-font-size; + line-height: $body-line-height; + + @extend %border; + } + } + + &__submit { + flex: none; + + & > button { + background-color: unset; + padding: 0.5rem 1rem; + + font-family: $body-font-family; + font-size: $body-font-size; + line-height: $body-line-height; + + @extend %border; + } + } + } +} \ No newline at end of file diff --git a/src/chat/index.js b/src/chat/index.js index 90715e2..7701898 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; // using HashRouter that will make the routes work // over a deployment that hasn't a backend with historyApiFallback support @@ -6,33 +6,47 @@ import { HashRouter, Route, NavLink } from 'react-router-dom'; -import styles from './styles.scss'; - //----------------------------------------------------------------------------// // TODO: move each component to it own .js file const ChatRoom = () => ( -
-
- TODO: define chat room component -
+ +
+ TODO: define chat room component +
+
+
+
+ +
+
+ +
+
+
+ ); const Settings = () => ( -
-
- TODO: define settings component -
+ +
+ TODO: define settings component 123 +
+
+ +
+ ); const NavBar = () => ( -
+
Chat - | + @@ -42,7 +56,7 @@ const NavBar = () => ( ); const Routes = () => ( -
+
@@ -52,18 +66,14 @@ const Routes = () => ( class Chat extends Component { - // TODO: define chat application layout - render(){ - return ( -
-

React webapp build with the Webpack v4.

-

.env message: {process.env.MESSAGE}

-
- -
+
+ +
+ +
diff --git a/src/chat/styles.scss b/src/chat/styles.scss deleted file mode 100644 index 1d89f35..0000000 --- a/src/chat/styles.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import 'styles/global-variables'; - -/* -CSS Selectors Reference | w3schools -https://www.w3schools.com/cssref/css_selectors.asp - -[attribute] | CSS-Tricks -https://css-tricks.com/almanac/selectors/a/attribute/ -*/ - -.chat { - - h1 { - text-decoration: underline; - color: $custom-color; - } -} \ No newline at end of file diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..5ed708e --- /dev/null +++ b/src/index.scss @@ -0,0 +1,21 @@ +/* +useful links + +CSS Selectors Reference | w3schools +https://www.w3schools.com/cssref/css_selectors.asp + +[attribute] | CSS-Tricks +https://css-tricks.com/almanac/selectors/a/attribute/ +*/ + + +@import 'styles/all'; +@import 'chat/styles'; + +//---------------------------------------------------------------------------// + +// main application div where the react will be injected +// defined on the index.html file +#app { + @include fix-content-position; +} \ No newline at end of file diff --git a/src/styles/_all.scss b/src/styles/_all.scss new file mode 100644 index 0000000..5f5582f --- /dev/null +++ b/src/styles/_all.scss @@ -0,0 +1,5 @@ +@import 'variables'; +@import 'mixins'; + +@import 'html'; +@import 'body'; \ No newline at end of file diff --git a/src/styles/_body.scss b/src/styles/_body.scss new file mode 100644 index 0000000..46d8ad9 --- /dev/null +++ b/src/styles/_body.scss @@ -0,0 +1,23 @@ +body { + font-size: $body-font-size; + font-family: $body-font-family; + font-weight: $body-font-weight; + + line-height:$body-line-height; + + margin: $body-margin; + + @include fix-content-position(0.2rem); + + /* Larger than tablet */ + @media (min-width: $screen-tablet){ + margin: auto; + max-width: $desktop-body-max-width; + + @include fix-content-position($default-unit-value); + } + + // TODO: review and define color schemes support + color: $body-color; + background-color: $body-background-color; +} \ No newline at end of file diff --git a/src/styles/_global-variables.scss b/src/styles/_global-variables.scss deleted file mode 100644 index f39f4f8..0000000 --- a/src/styles/_global-variables.scss +++ /dev/null @@ -1,19 +0,0 @@ -// global variables - -// Understanding and Using rem Units in CSS — SitePoint -// https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ - -$html-font-size: 62.5%; - -// the effective font-size used on the application -$body-font-size: 1.5rem; - -//--- - -$body-background-color: rgb(223, 223, 223); -$body-color: rgb(39, 39, 39); - -//--- - -// $custom-color: #792c2c; -$custom-color: #0735cc; \ No newline at end of file diff --git a/src/styles/_global.scss b/src/styles/_global.scss deleted file mode 100644 index 7a73cc0..0000000 --- a/src/styles/_global.scss +++ /dev/null @@ -1,13 +0,0 @@ -// global styles - -html { - font-size: $html-font-size; - font-family: Arial, sans-serif; -} - -body { - margin: 5rem; - font-size: $body-font-size; - background-color: $body-background-color; - color: $body-color; -} \ No newline at end of file diff --git a/src/styles/_html.scss b/src/styles/_html.scss new file mode 100644 index 0000000..518dee9 --- /dev/null +++ b/src/styles/_html.scss @@ -0,0 +1,3 @@ +html { + font-size: $html-font-size; +} \ No newline at end of file diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 0000000..d5a5508 --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,9 @@ + +// mixin to fix the application content to fit in all available space +@mixin fix-content-position($unit: 0rem){ + position: absolute; + top: $unit; + bottom: $unit; + left: $unit; + right: $unit; +} \ No newline at end of file diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000..58359f7 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,37 @@ + +// Understanding and Using rem Units in CSS — SitePoint +// https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ + +$default-unit-value: 1rem; + +//----------------------------------------------------------------------------// + +$html-font-size: 62.5%; + +//----------------------------------------------------------------------------// + +// the effective font-size used on the application +$body-font-size: 1.5rem; +$body-font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; +$body-font-weight: 400; + +$body-margin: $default-unit-value; + +$body-line-height: 1.6; + +// default colors +$body-color: #222222; +$body-background-color: #f0f0f0; + +//----------------------------------------------------------------------------// + +$screen-tablet: 750px; + +//--- + +$desktop-body-max-width: 700px; + +//----------------------------------------------------------------------------// + +// $custom-color: #792c2c; +$custom-color: #0735cc; \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index 22796c1..0000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,3 +0,0 @@ -// main application styles -@import 'global-variables'; -@import 'global'; \ No newline at end of file From 9e9c1d1a180803ed33f90e7c96ea813eff1d21ef Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 11:12:13 -0300 Subject: [PATCH 14/73] update chat component definition --- src/chat/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chat/index.js b/src/chat/index.js index 7701898..2862bfd 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -31,7 +31,7 @@ const ChatRoom = () => ( const Settings = () => (
- TODO: define settings component 123 + TODO: define settings component
From 6db0bb260c6eb88a98ba08f084457e2073ff113d Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 11:35:05 -0300 Subject: [PATCH 15/73] organize chat components --- src/chat/index.js | 65 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 49 insertions(+), 16 deletions(-) diff --git a/src/chat/index.js b/src/chat/index.js index 2862bfd..fef539e 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -10,35 +10,68 @@ import { // TODO: move each component to it own .js file -const ChatRoom = () => ( +const ContentLayout = ({ + content = , + footer = +}) => (
- TODO: define chat room component + {content}
-
-
- -
-
- -
-
+ {footer}
); -const Settings = () => ( +//--- + +const ChatRoomContent = () => ( -
- TODO: define settings component -
-
- + TODO: define chat room component + +); + +const ChatRoomFooter = () => ( + +
+
+ +
+
+ +
+); + +const ChatRoom = () => ContentLayout({ + content: ChatRoomContent(), + footer: ChatRoomFooter() +}); + + +//--- + +const SettingsContent = () => ( + + TODO: define settings component + ); +const SettingsFooter = () => ( + + + +); + +const Settings = () => ContentLayout({ + content: SettingsContent(), + footer: SettingsFooter() +}); + +//--- + const NavBar = () => (
Date: Fri, 18 May 2018 12:40:46 -0300 Subject: [PATCH 16/73] remove unused styles --- src/chat/_styles.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/chat/_styles.scss b/src/chat/_styles.scss index ae6b041..37ccdb7 100644 --- a/src/chat/_styles.scss +++ b/src/chat/_styles.scss @@ -43,10 +43,6 @@ &__footer { flex: none; - - // TODO: remove - // background-color: lightblue; - min-height: 3rem; } } } From 6d68f8fe44793fccc95f09f555e4455d3319767b Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 13:25:36 -0300 Subject: [PATCH 17/73] update chat styles --- src/chat/_styles.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/chat/_styles.scss b/src/chat/_styles.scss index 37ccdb7..8479f7f 100644 --- a/src/chat/_styles.scss +++ b/src/chat/_styles.scss @@ -20,10 +20,8 @@ padding: 0.5rem 2rem; @extend %margin-bottom; - @extend %border; - // TODO: remove - // background-color: #ffffff; + @extend %border; } &__body { From 74e2bd7f3e57d0fa4385fcd1092944b5d39f1344 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 13:49:30 -0300 Subject: [PATCH 18/73] refactor styles --- src/chat/_styles.scss | 24 ++++++++++++++++++++---- src/chat/index.js | 35 +++++++++++++++++++++++++++-------- src/index.scss | 8 -------- src/styles/_body.scss | 16 +--------------- 4 files changed, 48 insertions(+), 35 deletions(-) diff --git a/src/chat/_styles.scss b/src/chat/_styles.scss index 8479f7f..b48354b 100644 --- a/src/chat/_styles.scss +++ b/src/chat/_styles.scss @@ -9,12 +9,28 @@ //---------------------------------------------------------------------------// // defines the application layout using the flexbox -.chat { - display: flex; - flex-direction: column; - +.layout { @include fix-content-position; + // TODO: review and define color schemes support + color: $body-color; + background-color: $body-background-color; + + &__content { + display: flex; + flex-direction: column; + + @include fix-content-position($default-unit-value); + + /* Larger than tablet */ + @media (min-width: $screen-tablet){ + margin: auto; + max-width: $desktop-body-max-width; + + // @include fix-content-position($default-unit-value); + } + } + &__header { flex: none; padding: 0.5rem 2rem; diff --git a/src/chat/index.js b/src/chat/index.js index fef539e..be3bc55 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -15,10 +15,10 @@ const ContentLayout = ({ footer = }) => ( -
+
{content}
-
+
{footer}
@@ -89,7 +89,7 @@ const NavBar = () => ( ); const Routes = () => ( -
+
@@ -97,17 +97,36 @@ const Routes = () => ( //----------------------------------------------------------------------------// +/* + + + + {children} + + + + {children} + + + {children} + + + + +*/ + class Chat extends Component { render(){ return ( -
- -
- +
+
+
+ +
+
-
); diff --git a/src/index.scss b/src/index.scss index 5ed708e..0dfa2a4 100644 --- a/src/index.scss +++ b/src/index.scss @@ -11,11 +11,3 @@ https://css-tricks.com/almanac/selectors/a/attribute/ @import 'styles/all'; @import 'chat/styles'; - -//---------------------------------------------------------------------------// - -// main application div where the react will be injected -// defined on the index.html file -#app { - @include fix-content-position; -} \ No newline at end of file diff --git a/src/styles/_body.scss b/src/styles/_body.scss index 46d8ad9..4031404 100644 --- a/src/styles/_body.scss +++ b/src/styles/_body.scss @@ -6,18 +6,4 @@ body { line-height:$body-line-height; margin: $body-margin; - - @include fix-content-position(0.2rem); - - /* Larger than tablet */ - @media (min-width: $screen-tablet){ - margin: auto; - max-width: $desktop-body-max-width; - - @include fix-content-position($default-unit-value); - } - - // TODO: review and define color schemes support - color: $body-color; - background-color: $body-background-color; -} \ No newline at end of file +} From 56e6c1728ba9e46dfafc70f1d2d75a97de671282 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 16:53:26 -0300 Subject: [PATCH 19/73] layout components test --- src/chat/_styles.scss | 30 ++++++------- src/chat/components/.gitkeep | 1 - src/chat/components/layout/index.js | 66 +++++++++++++++++++++++++++++ src/chat/index.js | 49 +++++++++++++-------- 4 files changed, 111 insertions(+), 35 deletions(-) delete mode 100644 src/chat/components/.gitkeep create mode 100644 src/chat/components/layout/index.js diff --git a/src/chat/_styles.scss b/src/chat/_styles.scss index b48354b..570f6e2 100644 --- a/src/chat/_styles.scss +++ b/src/chat/_styles.scss @@ -7,28 +7,26 @@ } //---------------------------------------------------------------------------// - // defines the application layout using the flexbox -.layout { + +.main { @include fix-content-position; // TODO: review and define color schemes support color: $body-color; background-color: $body-background-color; +} - &__content { - display: flex; - flex-direction: column; +.container { + display: flex; + flex-direction: column; - @include fix-content-position($default-unit-value); + @include fix-content-position($default-unit-value); - /* Larger than tablet */ - @media (min-width: $screen-tablet){ - margin: auto; - max-width: $desktop-body-max-width; - - // @include fix-content-position($default-unit-value); - } + /* Larger than tablet */ + @media (min-width: $screen-tablet){ + margin: auto; + max-width: $desktop-body-max-width; } &__header { @@ -61,7 +59,7 @@ } } -//--- +//---------------------------------------------------------------------------// // TODO: move to it own .scss file related to navbar component .navbar > a { @@ -78,7 +76,7 @@ } } -//--- +//---------------------------------------------------------------------------// // TODO: move to it own .scss file related to settings component .btn-reset { @@ -97,7 +95,7 @@ @extend %border; } -//--- +//---------------------------------------------------------------------------// // TODO: move to it own .scss file related to the same component .chatroom { diff --git a/src/chat/components/.gitkeep b/src/chat/components/.gitkeep deleted file mode 100644 index 5e6a61f..0000000 --- a/src/chat/components/.gitkeep +++ /dev/null @@ -1 +0,0 @@ -remove this file later \ No newline at end of file diff --git a/src/chat/components/layout/index.js b/src/chat/components/layout/index.js new file mode 100644 index 0000000..ff1ee4b --- /dev/null +++ b/src/chat/components/layout/index.js @@ -0,0 +1,66 @@ +/* + this file exposes the application layout components + + + + // navbar + + {children} + + + // router + + + // chat or settings + + + + {children} + + + + {children} + + + + +*/ + +import React, { Component, Fragment } from 'react'; + +// TODO: remove +const Container = () => ( +
Hello from the container
+); + + +/* + + +*/ +class Layout extends Component { + + render() { + const { children } = this.props; + + return ( + +
Hello World!
+ { children && children } + + ); + } +} + +// export default { +// Layout: , +// LayoutHeader: , +// LayoutBody: , +// Container: , +// ContainerBody: , +// ContainerFooter: +// }; + +export default Object.assign(Layout, { + Container +}) \ No newline at end of file diff --git a/src/chat/index.js b/src/chat/index.js index be3bc55..7d7c932 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -1,5 +1,7 @@ import React, { Component, Fragment } from 'react'; +import Layout from 'chat/components/layout'; + // using HashRouter that will make the routes work // over a deployment that hasn't a backend with historyApiFallback support import { @@ -15,10 +17,10 @@ const ContentLayout = ({ footer = }) => ( -
+
{content}
-
+
{footer}
@@ -29,6 +31,12 @@ const ContentLayout = ({ const ChatRoomContent = () => ( TODO: define chat room component + +
+ + + + ); @@ -89,7 +97,7 @@ const NavBar = () => ( ); const Routes = () => ( -
+
@@ -99,19 +107,24 @@ const Routes = () => ( /* - - - {children} - + + // navbar + + {children} + + + // chat or settings + + - - {children} - - - {children} - - - + {children} + + + + {children} + + + */ @@ -120,9 +133,9 @@ class Chat extends Component { render(){ return ( -
-
-
+
+
+
From c34ce41ec7cacdaca4a99260ffda5f662635adcf Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 19:47:32 -0300 Subject: [PATCH 20/73] small updates --- src/app.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app.js b/src/app.js index 42b014c..f1a3bfe 100644 --- a/src/app.js +++ b/src/app.js @@ -7,8 +7,7 @@ import { hot } from 'react-hot-loader'; import Chat from 'chat'; -const App = () => ( - -); +// will be displayed only on the development environment +console.log(process.env.MESSAGE); -export default hot(module)(App); \ No newline at end of file +export default hot(module)(Chat); \ No newline at end of file From 25c284043dab76667fa7d9dc5b7c4d6f83cbda54 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 21:21:08 -0300 Subject: [PATCH 21/73] define layout components --- src/chat/_styles.scss | 51 +-------------- src/chat/components/_styles.scss | 1 + src/chat/components/layout/Container.js | 29 +++++++++ src/chat/components/layout/ContainerBody.js | 32 ++++++++++ src/chat/components/layout/ContainerFooter.js | 33 ++++++++++ src/chat/components/layout/Layout.js | 29 +++++++++ src/chat/components/layout/LayoutBody.js | 26 ++++++++ src/chat/components/layout/LayoutHeader.js | 26 ++++++++ src/chat/components/layout/_styles.scss | 50 +++++++++++++++ src/chat/components/layout/index.js | 62 +++++++------------ .../components/layout/stylesClassNames.js | 16 +++++ src/chat/index.js | 6 -- 12 files changed, 264 insertions(+), 97 deletions(-) create mode 100644 src/chat/components/_styles.scss create mode 100644 src/chat/components/layout/Container.js create mode 100644 src/chat/components/layout/ContainerBody.js create mode 100644 src/chat/components/layout/ContainerFooter.js create mode 100644 src/chat/components/layout/Layout.js create mode 100644 src/chat/components/layout/LayoutBody.js create mode 100644 src/chat/components/layout/LayoutHeader.js create mode 100644 src/chat/components/layout/_styles.scss create mode 100644 src/chat/components/layout/stylesClassNames.js diff --git a/src/chat/_styles.scss b/src/chat/_styles.scss index 570f6e2..9d77a16 100644 --- a/src/chat/_styles.scss +++ b/src/chat/_styles.scss @@ -7,57 +7,8 @@ } //---------------------------------------------------------------------------// -// defines the application layout using the flexbox -.main { - @include fix-content-position; - - // TODO: review and define color schemes support - color: $body-color; - background-color: $body-background-color; -} - -.container { - display: flex; - flex-direction: column; - - @include fix-content-position($default-unit-value); - - /* Larger than tablet */ - @media (min-width: $screen-tablet){ - margin: auto; - max-width: $desktop-body-max-width; - } - - &__header { - flex: none; - padding: 0.5rem 2rem; - - @extend %margin-bottom; - - @extend %border; - } - - &__body { - display: flex; - flex-direction: column; - flex: auto; - - &__content { - flex: auto; - padding: $default-unit-value; - - @extend %margin-bottom; - @extend %border; - - background-color: lighten($body-background-color, 5%); - } - - &__footer { - flex: none; - } - } -} +@import 'components/styles'; //---------------------------------------------------------------------------// diff --git a/src/chat/components/_styles.scss b/src/chat/components/_styles.scss new file mode 100644 index 0000000..d4ea488 --- /dev/null +++ b/src/chat/components/_styles.scss @@ -0,0 +1 @@ +@import 'layout/styles'; \ No newline at end of file diff --git a/src/chat/components/layout/Container.js b/src/chat/components/layout/Container.js new file mode 100644 index 0000000..0c92903 --- /dev/null +++ b/src/chat/components/layout/Container.js @@ -0,0 +1,29 @@ +import React, { Component, Fragment } from 'react'; + +/* + + + // router + + + // chat or settings + + {children} + + + +*/ +class Container extends Component { + + render() { + const { children } = this.props; + + return ( + + { children && children } + + ); + } +} + +export default Container; \ No newline at end of file diff --git a/src/chat/components/layout/ContainerBody.js b/src/chat/components/layout/ContainerBody.js new file mode 100644 index 0000000..839f710 --- /dev/null +++ b/src/chat/components/layout/ContainerBody.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; + +/* + + + // router + + + // chat or settings + + + + {children} + + + + +*/ +class ContainerBody extends Component { + + render() { + const { children } = this.props; + + return ( +
+ { children && children } +
+ ); + } +} + +export default ContainerBody; \ No newline at end of file diff --git a/src/chat/components/layout/ContainerFooter.js b/src/chat/components/layout/ContainerFooter.js new file mode 100644 index 0000000..33e5f5b --- /dev/null +++ b/src/chat/components/layout/ContainerFooter.js @@ -0,0 +1,33 @@ +import React, { Component } from 'react'; +import styles from './stylesClassNames'; + +/* + + + // router + + + // chat or settings + + + + {children} + + + + +*/ +class ContainerFooter extends Component { + + render() { + const { children } = this.props; + + return ( +
+ { children && children } +
+ ); + } +} + +export default ContainerFooter; \ No newline at end of file diff --git a/src/chat/components/layout/Layout.js b/src/chat/components/layout/Layout.js new file mode 100644 index 0000000..d16e7e0 --- /dev/null +++ b/src/chat/components/layout/Layout.js @@ -0,0 +1,29 @@ +import React, { Component, Fragment } from 'react'; +import styles from './stylesClassNames'; + +/* + + {children} + +*/ +class Layout extends Component { + + render() { + const { children } = this.props; + + const mainStyles = [ + styles.main + // TODO: add color theme support + ]; + + return ( +
+
+ { children && children } +
+
+ ); + } +} + +export default Layout; \ No newline at end of file diff --git a/src/chat/components/layout/LayoutBody.js b/src/chat/components/layout/LayoutBody.js new file mode 100644 index 0000000..44407db --- /dev/null +++ b/src/chat/components/layout/LayoutBody.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; +import styles from './stylesClassNames'; + +/* + + + // router + + {children} + + +*/ +class LayoutBody extends Component { + + render() { + const { children } = this.props; + + return ( +
+ { children && children } +
+ ); + } +} + +export default LayoutBody; \ No newline at end of file diff --git a/src/chat/components/layout/LayoutHeader.js b/src/chat/components/layout/LayoutHeader.js new file mode 100644 index 0000000..b4a17aa --- /dev/null +++ b/src/chat/components/layout/LayoutHeader.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; +import styles from './stylesClassNames'; + +/* + + + // navbar + + {children} + + +*/ +class LayoutHeader extends Component { + + render() { + const { children } = this.props; + + return ( +
+ { children && children } +
+ ); + } +} + +export default LayoutHeader; \ No newline at end of file diff --git a/src/chat/components/layout/_styles.scss b/src/chat/components/layout/_styles.scss new file mode 100644 index 0000000..1a65397 --- /dev/null +++ b/src/chat/components/layout/_styles.scss @@ -0,0 +1,50 @@ +.main { + @include fix-content-position; + + // TODO: review and define color schemes support + color: $body-color; + background-color: $body-background-color; +} + +.container { + display: flex; + flex-direction: column; + + @include fix-content-position($default-unit-value); + + /* Larger than tablet */ + @media (min-width: $screen-tablet){ + margin: auto; + max-width: $desktop-body-max-width; + } + + &__header { + flex: none; + padding: 0.5rem 2rem; + + @extend %margin-bottom; + + @extend %border; + } + + &__body { + display: flex; + flex-direction: column; + flex: auto; + + &__content { + flex: auto; + padding: $default-unit-value; + + @extend %margin-bottom; + @extend %border; + + // TODO: review and define color schemes support + background-color: lighten($body-background-color, 5%); + } + + &__footer { + flex: none; + } + } +} \ No newline at end of file diff --git a/src/chat/components/layout/index.js b/src/chat/components/layout/index.js index ff1ee4b..26deef4 100644 --- a/src/chat/components/layout/index.js +++ b/src/chat/components/layout/index.js @@ -12,55 +12,35 @@ // chat or settings - + - + {children} - + - + {children} - - + + */ -import React, { Component, Fragment } from 'react'; +// TODO: implement coumpound & context api support (the second one to color themes support) +// https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-1-dd495fa1823 +// https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-2-react-3c5662b997ab -// TODO: remove -const Container = () => ( -
Hello from the container
-); - - -/* - - -*/ -class Layout extends Component { - - render() { - const { children } = this.props; - - return ( - -
Hello World!
- { children && children } - - ); - } -} - -// export default { -// Layout: , -// LayoutHeader: , -// LayoutBody: , -// Container: , -// ContainerBody: , -// ContainerFooter: -// }; +import Layout from './Layout'; +import LayoutHeader from './LayoutHeader'; +import LayoutBody from './LayoutBody'; +import Container from './Container'; +import ContainerBody from './ContainerBody'; +import ContainerFooter from './ContainerFooter'; export default Object.assign(Layout, { - Container -}) \ No newline at end of file + LayoutHeader, + LayoutBody, + Container, + ContainerBody, + ContainerFooter +}); diff --git a/src/chat/components/layout/stylesClassNames.js b/src/chat/components/layout/stylesClassNames.js new file mode 100644 index 0000000..d818311 --- /dev/null +++ b/src/chat/components/layout/stylesClassNames.js @@ -0,0 +1,16 @@ + +const main = 'main'; +const container = 'container' + +const layoutBody = `${container}__body`; + +const styles = { + main, + layout: container, + layoutHeader: `${container}__header`, + layoutBody, + containerBody: `${layoutBody}__content`, + containerFooter: `${layoutBody}__footer` +}; + +export default styles; \ No newline at end of file diff --git a/src/chat/index.js b/src/chat/index.js index 7d7c932..99d462f 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -31,12 +31,6 @@ const ContentLayout = ({ const ChatRoomContent = () => ( TODO: define chat room component - -
- - - - ); From 1a7195ecac505ef49579bb7419d424177c2d012c Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Fri, 18 May 2018 21:21:46 -0300 Subject: [PATCH 22/73] update container body layout component --- src/chat/components/layout/ContainerBody.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/chat/components/layout/ContainerBody.js b/src/chat/components/layout/ContainerBody.js index 839f710..e5c8a4f 100644 --- a/src/chat/components/layout/ContainerBody.js +++ b/src/chat/components/layout/ContainerBody.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import styles from './stylesClassNames'; /* @@ -22,7 +23,7 @@ class ContainerBody extends Component { const { children } = this.props; return ( -
+
{ children && children }
); From 17617250ff487b8a3946aa27d2e094b204d23643 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 02:10:01 -0300 Subject: [PATCH 23/73] refactor ui/layout components and its styles --- src/chat/Chat.js | 44 ++++++ src/chat/Routes.js | 12 ++ src/chat/_styles.scss | 87 +---------- src/chat/components/_styles.scss | 2 +- src/chat/components/index.js | 5 + .../components/layout/stylesClassNames.js | 16 -- src/chat/containers/.gitkeep | 1 - src/chat/containers/_styles.scss | 4 + src/chat/containers/chatroom/ChatRoom.js | 33 ++++ src/chat/containers/chatroom/_styles.scss | 42 ++++++ src/chat/containers/chatroom/index.js | 3 + src/chat/containers/index.js | 14 ++ .../layout/Container.js | 0 .../layout/ContainerBody.js | 0 .../layout/ContainerFooter.js | 0 .../layout/Layout.js | 11 +- .../layout/LayoutBody.js | 0 .../layout/LayoutHeader.js | 0 .../layout/_styles.scss | 9 +- .../layout/index.js | 9 +- .../containers/layout/stylesClassNames.js | 18 +++ src/chat/containers/navbar/NavBar.js | 25 +++ src/chat/containers/navbar/_styles.scss | 16 ++ src/chat/containers/navbar/index.js | 3 + src/chat/containers/settings/Settings.js | 26 ++++ src/chat/containers/settings/_styles.scss | 9 ++ src/chat/containers/settings/index.js | 3 + src/chat/index.js | 142 +----------------- src/styles/_all.scss | 4 +- src/styles/_button.scss | 28 ++++ src/styles/_variables.scss | 14 +- 31 files changed, 315 insertions(+), 265 deletions(-) create mode 100644 src/chat/Chat.js create mode 100644 src/chat/Routes.js create mode 100644 src/chat/components/index.js delete mode 100644 src/chat/components/layout/stylesClassNames.js delete mode 100644 src/chat/containers/.gitkeep create mode 100644 src/chat/containers/_styles.scss create mode 100644 src/chat/containers/chatroom/ChatRoom.js create mode 100644 src/chat/containers/chatroom/_styles.scss create mode 100644 src/chat/containers/chatroom/index.js create mode 100644 src/chat/containers/index.js rename src/chat/{components => containers}/layout/Container.js (100%) rename src/chat/{components => containers}/layout/ContainerBody.js (100%) rename src/chat/{components => containers}/layout/ContainerFooter.js (100%) rename src/chat/{components => containers}/layout/Layout.js (56%) rename src/chat/{components => containers}/layout/LayoutBody.js (100%) rename src/chat/{components => containers}/layout/LayoutHeader.js (100%) rename src/chat/{components => containers}/layout/_styles.scss (85%) rename src/chat/{components => containers}/layout/index.js (91%) create mode 100644 src/chat/containers/layout/stylesClassNames.js create mode 100644 src/chat/containers/navbar/NavBar.js create mode 100644 src/chat/containers/navbar/_styles.scss create mode 100644 src/chat/containers/navbar/index.js create mode 100644 src/chat/containers/settings/Settings.js create mode 100644 src/chat/containers/settings/_styles.scss create mode 100644 src/chat/containers/settings/index.js create mode 100644 src/styles/_button.scss diff --git a/src/chat/Chat.js b/src/chat/Chat.js new file mode 100644 index 0000000..6747701 --- /dev/null +++ b/src/chat/Chat.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react'; + +// using HashRouter that will make the routes work +// over a deployment that hasn't a backend with historyApiFallback support +import { HashRouter } from 'react-router-dom'; + +import { NavBar } from './containers'; +import { Layout, LayoutHeader, LayoutBody } from './containers/layout'; + +import Routes from './Routes'; + +class Chat extends Component { + + render() { + + /* + + + + + + + + + + + */ + + return ( + + + + + + + + + + + ); + } +} + +export default Chat; \ No newline at end of file diff --git a/src/chat/Routes.js b/src/chat/Routes.js new file mode 100644 index 0000000..65979ac --- /dev/null +++ b/src/chat/Routes.js @@ -0,0 +1,12 @@ +import React, { Fragment } from 'react'; +import { Route, Switch } from 'react-router-dom'; +import { ChatRoom, Settings } from './containers'; + +const Routes = () => ( + + + + +); + +export default Routes; \ No newline at end of file diff --git a/src/chat/_styles.scss b/src/chat/_styles.scss index 9d77a16..05e4e7a 100644 --- a/src/chat/_styles.scss +++ b/src/chat/_styles.scss @@ -2,92 +2,7 @@ border: 0.1rem solid #cccccc; } -%margin-bottom { - margin-bottom: $default-unit-value; -} - //---------------------------------------------------------------------------// @import 'components/styles'; - -//---------------------------------------------------------------------------// - -// TODO: move to it own .scss file related to navbar component -.navbar > a { - color: #222222; - text-decoration: none; - - &:first-child { - margin-right: $default-unit-value; - } - - &.active { - font-weight: bold; - text-decoration: underline; - } -} - -//---------------------------------------------------------------------------// - -// TODO: move to it own .scss file related to settings component -.btn-reset { - font-family: $body-font-family; - font-size: $body-font-size; - - line-height: $body-line-height; - - padding: 0.5rem 2rem; - - width: 100%; - height: 100%; - - background-color: darken($body-background-color, 10%); - - @extend %border; -} - -//---------------------------------------------------------------------------// - -// TODO: move to it own .scss file related to the same component -.chatroom { - - &__input { - width: 100%; - display: flex; - flex-direction: row; - - &__field { - flex: auto; - margin-right: 0.5rem; - - display: flex; - - & > input[type="text"] { - flex: auto; - - padding: 0.5rem 1rem; - - font-family: $body-font-family; - font-size: $body-font-size; - line-height: $body-line-height; - - @extend %border; - } - } - - &__submit { - flex: none; - - & > button { - background-color: unset; - padding: 0.5rem 1rem; - - font-family: $body-font-family; - font-size: $body-font-size; - line-height: $body-line-height; - - @extend %border; - } - } - } -} \ No newline at end of file +@import 'containers/styles'; diff --git a/src/chat/components/_styles.scss b/src/chat/components/_styles.scss index d4ea488..7f93493 100644 --- a/src/chat/components/_styles.scss +++ b/src/chat/components/_styles.scss @@ -1 +1 @@ -@import 'layout/styles'; \ No newline at end of file +// TODO: define \ No newline at end of file diff --git a/src/chat/components/index.js b/src/chat/components/index.js new file mode 100644 index 0000000..56e3ad0 --- /dev/null +++ b/src/chat/components/index.js @@ -0,0 +1,5 @@ +// exposes the presentation (dumb) components from the components directory + +// TODO: define the imports + +export default {}; \ No newline at end of file diff --git a/src/chat/components/layout/stylesClassNames.js b/src/chat/components/layout/stylesClassNames.js deleted file mode 100644 index d818311..0000000 --- a/src/chat/components/layout/stylesClassNames.js +++ /dev/null @@ -1,16 +0,0 @@ - -const main = 'main'; -const container = 'container' - -const layoutBody = `${container}__body`; - -const styles = { - main, - layout: container, - layoutHeader: `${container}__header`, - layoutBody, - containerBody: `${layoutBody}__content`, - containerFooter: `${layoutBody}__footer` -}; - -export default styles; \ No newline at end of file diff --git a/src/chat/containers/.gitkeep b/src/chat/containers/.gitkeep deleted file mode 100644 index 5e6a61f..0000000 --- a/src/chat/containers/.gitkeep +++ /dev/null @@ -1 +0,0 @@ -remove this file later \ No newline at end of file diff --git a/src/chat/containers/_styles.scss b/src/chat/containers/_styles.scss new file mode 100644 index 0000000..9d75efb --- /dev/null +++ b/src/chat/containers/_styles.scss @@ -0,0 +1,4 @@ +@import 'layout/styles'; +@import 'navbar/styles'; +@import 'chatroom/styles'; +@import 'settings/styles'; \ No newline at end of file diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js new file mode 100644 index 0000000..c132a3b --- /dev/null +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -0,0 +1,33 @@ +import React, { Component, Fragment } from 'react'; +import { ContainerBody, ContainerFooter } from 'chat/containers/layout'; + +class ChatRoom extends Component { + + render() { + + return ( + + + + TODO: define chat room component + + + +
+
+ +
+
+ +
+
+ + + ); + } +} + +export default ChatRoom; \ No newline at end of file diff --git a/src/chat/containers/chatroom/_styles.scss b/src/chat/containers/chatroom/_styles.scss new file mode 100644 index 0000000..e046392 --- /dev/null +++ b/src/chat/containers/chatroom/_styles.scss @@ -0,0 +1,42 @@ +.chatroom { + + &__input { + width: 100%; + display: flex; + flex-direction: row; + + &__field { + flex: auto; + margin-right: 0.5rem; + + display: flex; + + & > input[type="text"] { + flex: auto; + } + } + + &__submit { + flex: none; + } + } + + &__field { + padding: 0.5rem 1rem; + + font-family: $body-font-family; + font-size: $body-font-size; + line-height: $body-line-height; + + // TODO: define color theme support + @extend %border; + } + + &__btn { + padding: 0.5rem 1rem; + + // TODO: define color theme support + @extend %border; + background-color: unset; + } +} \ No newline at end of file diff --git a/src/chat/containers/chatroom/index.js b/src/chat/containers/chatroom/index.js new file mode 100644 index 0000000..6932872 --- /dev/null +++ b/src/chat/containers/chatroom/index.js @@ -0,0 +1,3 @@ +import ChatRoom from './ChatRoom'; + +export default ChatRoom; diff --git a/src/chat/containers/index.js b/src/chat/containers/index.js new file mode 100644 index 0000000..a28de87 --- /dev/null +++ b/src/chat/containers/index.js @@ -0,0 +1,14 @@ +// expose the smart components from the containers directory +// components aware about the store or context + +import Layout from './layout'; +import NavBar from './navbar'; +import ChatRoom from './chatroom'; +import Settings from './settings'; + +export { + Layout, + NavBar, + ChatRoom, + Settings +}; \ No newline at end of file diff --git a/src/chat/components/layout/Container.js b/src/chat/containers/layout/Container.js similarity index 100% rename from src/chat/components/layout/Container.js rename to src/chat/containers/layout/Container.js diff --git a/src/chat/components/layout/ContainerBody.js b/src/chat/containers/layout/ContainerBody.js similarity index 100% rename from src/chat/components/layout/ContainerBody.js rename to src/chat/containers/layout/ContainerBody.js diff --git a/src/chat/components/layout/ContainerFooter.js b/src/chat/containers/layout/ContainerFooter.js similarity index 100% rename from src/chat/components/layout/ContainerFooter.js rename to src/chat/containers/layout/ContainerFooter.js diff --git a/src/chat/components/layout/Layout.js b/src/chat/containers/layout/Layout.js similarity index 56% rename from src/chat/components/layout/Layout.js rename to src/chat/containers/layout/Layout.js index d16e7e0..ada5f2e 100644 --- a/src/chat/components/layout/Layout.js +++ b/src/chat/containers/layout/Layout.js @@ -1,4 +1,4 @@ -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; import styles from './stylesClassNames'; /* @@ -11,14 +11,9 @@ class Layout extends Component { render() { const { children } = this.props; - const mainStyles = [ - styles.main - // TODO: add color theme support - ]; - return ( -
-
+
+
{ children && children }
diff --git a/src/chat/components/layout/LayoutBody.js b/src/chat/containers/layout/LayoutBody.js similarity index 100% rename from src/chat/components/layout/LayoutBody.js rename to src/chat/containers/layout/LayoutBody.js diff --git a/src/chat/components/layout/LayoutHeader.js b/src/chat/containers/layout/LayoutHeader.js similarity index 100% rename from src/chat/components/layout/LayoutHeader.js rename to src/chat/containers/layout/LayoutHeader.js diff --git a/src/chat/components/layout/_styles.scss b/src/chat/containers/layout/_styles.scss similarity index 85% rename from src/chat/components/layout/_styles.scss rename to src/chat/containers/layout/_styles.scss index 1a65397..e5c7e86 100644 --- a/src/chat/components/layout/_styles.scss +++ b/src/chat/containers/layout/_styles.scss @@ -1,3 +1,7 @@ +%margin-bottom { + margin-bottom: $default-unit-value; +} + .main { @include fix-content-position; @@ -15,7 +19,7 @@ /* Larger than tablet */ @media (min-width: $screen-tablet){ margin: auto; - max-width: $desktop-body-max-width; + max-width: $desktop-use-max-width; } &__header { @@ -24,6 +28,7 @@ @extend %margin-bottom; + // TODO: review and define color schemes support @extend %border; } @@ -37,9 +42,9 @@ padding: $default-unit-value; @extend %margin-bottom; - @extend %border; // TODO: review and define color schemes support + @extend %border; background-color: lighten($body-background-color, 5%); } diff --git a/src/chat/components/layout/index.js b/src/chat/containers/layout/index.js similarity index 91% rename from src/chat/components/layout/index.js rename to src/chat/containers/layout/index.js index 26deef4..b02a600 100644 --- a/src/chat/components/layout/index.js +++ b/src/chat/containers/layout/index.js @@ -1,5 +1,5 @@ /* - this file exposes the application layout components + exposes the application layout components @@ -37,10 +37,13 @@ import Container from './Container'; import ContainerBody from './ContainerBody'; import ContainerFooter from './ContainerFooter'; -export default Object.assign(Layout, { +export { + Layout, LayoutHeader, LayoutBody, Container, ContainerBody, ContainerFooter -}); +}; + +export default Layout; diff --git a/src/chat/containers/layout/stylesClassNames.js b/src/chat/containers/layout/stylesClassNames.js new file mode 100644 index 0000000..6b722bb --- /dev/null +++ b/src/chat/containers/layout/stylesClassNames.js @@ -0,0 +1,18 @@ + +export const main = 'main'; +export const container = 'container' + +export const layoutHeader = `${container}__header`; +export const layoutBody = `${container}__body`; + +export const containerBody = `${layoutBody}__content`; +export const containerFooter = `${layoutBody}__footer`; + +export default { + main, + container, + layoutHeader, + layoutBody, + containerBody, + containerFooter +}; \ No newline at end of file diff --git a/src/chat/containers/navbar/NavBar.js b/src/chat/containers/navbar/NavBar.js new file mode 100644 index 0000000..b164581 --- /dev/null +++ b/src/chat/containers/navbar/NavBar.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react' +import { NavLink } from 'react-router-dom'; + +class NavBar extends Component { + + render() { + return ( +
+ + Chat + + + Settings + +
+ ); + } +} + +export default NavBar; diff --git a/src/chat/containers/navbar/_styles.scss b/src/chat/containers/navbar/_styles.scss new file mode 100644 index 0000000..b4c51aa --- /dev/null +++ b/src/chat/containers/navbar/_styles.scss @@ -0,0 +1,16 @@ +.navbar { + + & > a { + color: #222222; + text-decoration: none; + + &:first-child { + margin-right: $default-unit-value; + } + + &.active { + font-weight: bold; + text-decoration: underline; + } + } +} diff --git a/src/chat/containers/navbar/index.js b/src/chat/containers/navbar/index.js new file mode 100644 index 0000000..5e8ff88 --- /dev/null +++ b/src/chat/containers/navbar/index.js @@ -0,0 +1,3 @@ +import NavBar from './NavBar'; + +export default NavBar; \ No newline at end of file diff --git a/src/chat/containers/settings/Settings.js b/src/chat/containers/settings/Settings.js new file mode 100644 index 0000000..f6e952b --- /dev/null +++ b/src/chat/containers/settings/Settings.js @@ -0,0 +1,26 @@ +import React, { Component, Fragment } from 'react'; +import { ContainerBody, ContainerFooter } from 'chat/containers/layout'; + +class Settings extends Component { + + render() { + + return ( + + + + TODO: define settings component + + + + + + + ); + } +} + +export default Settings; \ No newline at end of file diff --git a/src/chat/containers/settings/_styles.scss b/src/chat/containers/settings/_styles.scss new file mode 100644 index 0000000..9909e92 --- /dev/null +++ b/src/chat/containers/settings/_styles.scss @@ -0,0 +1,9 @@ +.settings { + + &__btn { + + // TODO: define color theme support + @extend %border; + // background-color: unset; + } +} diff --git a/src/chat/containers/settings/index.js b/src/chat/containers/settings/index.js new file mode 100644 index 0000000..49dfba1 --- /dev/null +++ b/src/chat/containers/settings/index.js @@ -0,0 +1,3 @@ +import Settings from './Settings'; + +export default Settings; \ No newline at end of file diff --git a/src/chat/index.js b/src/chat/index.js index 99d462f..9efb316 100644 --- a/src/chat/index.js +++ b/src/chat/index.js @@ -1,143 +1,3 @@ -import React, { Component, Fragment } from 'react'; - -import Layout from 'chat/components/layout'; - -// using HashRouter that will make the routes work -// over a deployment that hasn't a backend with historyApiFallback support -import { - HashRouter, Route, NavLink -} from 'react-router-dom'; - -//----------------------------------------------------------------------------// - -// TODO: move each component to it own .js file - -const ContentLayout = ({ - content = , - footer = -}) => ( - -
- {content} -
-
- {footer} -
- -); - -//--- - -const ChatRoomContent = () => ( - - TODO: define chat room component - -); - -const ChatRoomFooter = () => ( - -
-
- -
-
- -
-
- -); - -const ChatRoom = () => ContentLayout({ - content: ChatRoomContent(), - footer: ChatRoomFooter() -}); - - -//--- - -const SettingsContent = () => ( - - TODO: define settings component - -); - -const SettingsFooter = () => ( - - - -); - -const Settings = () => ContentLayout({ - content: SettingsContent(), - footer: SettingsFooter() -}); - -//--- - -const NavBar = () => ( -
- - Chat - - - Settings - -
-); - -const Routes = () => ( -
- - -
-); - -//----------------------------------------------------------------------------// - -/* - - - // navbar - - {children} - - - // chat or settings - - - - {children} - - - - {children} - - - - -*/ - -class Chat extends Component { - - render(){ - return ( - -
-
-
- -
- -
-
- - ); - } -} +import Chat from './Chat'; export default Chat; \ No newline at end of file diff --git a/src/styles/_all.scss b/src/styles/_all.scss index 5f5582f..08698c4 100644 --- a/src/styles/_all.scss +++ b/src/styles/_all.scss @@ -2,4 +2,6 @@ @import 'mixins'; @import 'html'; -@import 'body'; \ No newline at end of file +@import 'body'; + +@import 'button'; \ No newline at end of file diff --git a/src/styles/_button.scss b/src/styles/_button.scss new file mode 100644 index 0000000..22a4d44 --- /dev/null +++ b/src/styles/_button.scss @@ -0,0 +1,28 @@ +.btn { + font-family: $body-font-family; + font-size: $body-font-size; + + line-height: $body-line-height; + + padding: 0.5rem 2rem; + + // add color theme support + // @extend %border; + background-color: darken($body-background-color, 2%); + &:active { + background-color: darken($body-background-color, 6%); + } + + &:focus { + outline: none; + } + + &:hover { + cursor: pointer; + } + + &-expand { + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 58359f7..ed34666 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -19,19 +19,21 @@ $body-margin: $default-unit-value; $body-line-height: 1.6; -// default colors -$body-color: #222222; -$body-background-color: #f0f0f0; - //----------------------------------------------------------------------------// $screen-tablet: 750px; //--- -$desktop-body-max-width: 700px; +$desktop-use-max-width: 700px; //----------------------------------------------------------------------------// +// default colors +$body-color: #222222; +$body-background-color: #f0f0f0; + // $custom-color: #792c2c; -$custom-color: #0735cc; \ No newline at end of file +$custom-color: #0735cc; + +//----------------------------------------------------------------------------// \ No newline at end of file From 4f996ab223b74059db73584c5b6f53433bcca780 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 02:16:20 -0300 Subject: [PATCH 24/73] add classnames dependency to the project --- package.json | 1 + yarn.lock | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/package.json b/package.json index 1e3254c..a1201a0 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "node": ">=8" }, "dependencies": { + "classnames": "^2.2.5", "react": "^16.3.2", "react-dom": "^16.3.2", "react-router-dom": "^4.2.2" diff --git a/yarn.lock b/yarn.lock index 8a5f0d6..508b2e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1616,6 +1616,10 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.5: + version "2.2.5" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" + clean-css@4.1.x: version "4.1.11" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a" From c5f6ff1deed2774d1b140ed15799f80f63ed3d19 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 03:12:55 -0300 Subject: [PATCH 25/73] use classNames dep to handle component css classes applied to them --- src/chat/containers/chatroom/ChatRoom.js | 15 +++++++++++++-- src/chat/containers/layout/ContainerBody.js | 9 ++++++++- src/chat/containers/layout/Layout.js | 9 ++++++++- src/chat/containers/navbar/NavBar.js | 8 +++++++- src/chat/containers/settings/Settings.js | 8 +++++++- 5 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index c132a3b..0dca4a0 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -1,9 +1,20 @@ import React, { Component, Fragment } from 'react'; +import classNames from 'classnames'; import { ContainerBody, ContainerFooter } from 'chat/containers/layout'; class ChatRoom extends Component { render() { + const fieldClass = classNames( + 'chatroom__field', + `chatroom__field--${this.props.theme || 'light'}` + ); + + const buttonClass = classNames( + 'btn', + `btn--${this.props.theme || 'light'}`, + 'chatroom__btn' + ) return ( @@ -17,11 +28,11 @@ class ChatRoom extends Component {
- +
diff --git a/src/chat/containers/layout/ContainerBody.js b/src/chat/containers/layout/ContainerBody.js index e5c8a4f..a3a125e 100644 --- a/src/chat/containers/layout/ContainerBody.js +++ b/src/chat/containers/layout/ContainerBody.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import classNames from 'classnames'; + import styles from './stylesClassNames'; /* @@ -20,10 +22,15 @@ import styles from './stylesClassNames'; class ContainerBody extends Component { render() { + const containerBodyClass = classNames( + styles.containerBody, + `${styles.containerBody}--${this.props.theme || 'light'}` + ); + const { children } = this.props; return ( -
+
{ children && children }
); diff --git a/src/chat/containers/layout/Layout.js b/src/chat/containers/layout/Layout.js index ada5f2e..e981150 100644 --- a/src/chat/containers/layout/Layout.js +++ b/src/chat/containers/layout/Layout.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import classNames from 'classnames'; + import styles from './stylesClassNames'; /* @@ -9,10 +11,15 @@ import styles from './stylesClassNames'; class Layout extends Component { render() { + const mainClass = classNames( + styles.main, + `${styles.main}--${this.props.theme || 'light'}` + ); + const { children } = this.props; return ( -
+
{ children && children }
diff --git a/src/chat/containers/navbar/NavBar.js b/src/chat/containers/navbar/NavBar.js index b164581..82196be 100644 --- a/src/chat/containers/navbar/NavBar.js +++ b/src/chat/containers/navbar/NavBar.js @@ -1,11 +1,17 @@ import React, { Component } from 'react' import { NavLink } from 'react-router-dom'; +import classNames from 'classnames'; class NavBar extends Component { render() { + const navbarClass = classNames( + 'navbar', + `navbar--${this.props.theme || 'light'}` + ); + return ( -
+
@@ -14,7 +20,7 @@ class Settings extends Component { From e8dd0537e324579e6128e96765f84a3a1f691ed5 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 06:19:08 -0300 Subject: [PATCH 26/73] themes styles and initial code support to switch between them --- src/chat/containers/chatroom/ChatRoom.js | 4 +- src/chat/containers/chatroom/_styles.scss | 17 +-- src/chat/containers/layout/LayoutHeader.js | 9 +- src/chat/containers/layout/_styles.scss | 16 +-- src/chat/containers/navbar/_styles.scss | 6 +- src/chat/containers/settings/_styles.scss | 11 +- src/styles/_all.scss | 4 +- src/styles/{_button.scss => _buttons.scss} | 22 ++-- src/styles/_forms.scss | 13 ++ src/styles/_mixins.scss | 33 ++++- src/styles/_themes.scss | 138 +++++++++++++++++++++ src/styles/_variables.scss | 9 -- 12 files changed, 222 insertions(+), 60 deletions(-) rename src/styles/{_button.scss => _buttons.scss} (54%) create mode 100644 src/styles/_forms.scss create mode 100644 src/styles/_themes.scss diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index 0dca4a0..d92ad0d 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -6,8 +6,8 @@ class ChatRoom extends Component { render() { const fieldClass = classNames( - 'chatroom__field', - `chatroom__field--${this.props.theme || 'light'}` + 'form-control', + `form-control--${this.props.theme || 'light'}` ); const buttonClass = classNames( diff --git a/src/chat/containers/chatroom/_styles.scss b/src/chat/containers/chatroom/_styles.scss index e046392..ebfdcbc 100644 --- a/src/chat/containers/chatroom/_styles.scss +++ b/src/chat/containers/chatroom/_styles.scss @@ -11,7 +11,7 @@ display: flex; - & > input[type="text"] { + input[type="text"] { flex: auto; } } @@ -21,22 +21,7 @@ } } - &__field { - padding: 0.5rem 1rem; - - font-family: $body-font-family; - font-size: $body-font-size; - line-height: $body-line-height; - - // TODO: define color theme support - @extend %border; - } - &__btn { padding: 0.5rem 1rem; - - // TODO: define color theme support - @extend %border; - background-color: unset; } } \ No newline at end of file diff --git a/src/chat/containers/layout/LayoutHeader.js b/src/chat/containers/layout/LayoutHeader.js index b4a17aa..4658a05 100644 --- a/src/chat/containers/layout/LayoutHeader.js +++ b/src/chat/containers/layout/LayoutHeader.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import classNames from 'classnames'; + import styles from './stylesClassNames'; /* @@ -13,10 +15,15 @@ import styles from './stylesClassNames'; class LayoutHeader extends Component { render() { + const layoutHeaderClass = classNames( + styles.layoutHeader, + `${styles.layoutHeader}--${this.props.theme || 'light'}` + ); + const { children } = this.props; return ( -
+
{ children && children }
); diff --git a/src/chat/containers/layout/_styles.scss b/src/chat/containers/layout/_styles.scss index e5c7e86..3878dc9 100644 --- a/src/chat/containers/layout/_styles.scss +++ b/src/chat/containers/layout/_styles.scss @@ -5,9 +5,8 @@ .main { @include fix-content-position; - // TODO: review and define color schemes support - color: $body-color; - background-color: $body-background-color; + @include base-colors; + @include theme-colors; } .container { @@ -28,8 +27,8 @@ @extend %margin-bottom; - // TODO: review and define color schemes support - @extend %border; + @include base-border; + @include theme-border; } &__body { @@ -43,9 +42,10 @@ @extend %margin-bottom; - // TODO: review and define color schemes support - @extend %border; - background-color: lighten($body-background-color, 5%); + background-color: lighten($base-background-color, 5%); + @include base-border(); + + @include theme-content-colors; } &__footer { diff --git a/src/chat/containers/navbar/_styles.scss b/src/chat/containers/navbar/_styles.scss index b4c51aa..902b9f8 100644 --- a/src/chat/containers/navbar/_styles.scss +++ b/src/chat/containers/navbar/_styles.scss @@ -1,7 +1,7 @@ .navbar { - & > a { - color: #222222; + a { + color: $base-color; text-decoration: none; &:first-child { @@ -13,4 +13,6 @@ text-decoration: underline; } } + + @include theme-navbar-colors; } diff --git a/src/chat/containers/settings/_styles.scss b/src/chat/containers/settings/_styles.scss index 9909e92..ea9b098 100644 --- a/src/chat/containers/settings/_styles.scss +++ b/src/chat/containers/settings/_styles.scss @@ -1,9 +1,2 @@ -.settings { - - &__btn { - - // TODO: define color theme support - @extend %border; - // background-color: unset; - } -} +// TODO: define if needed +// .settings {} diff --git a/src/styles/_all.scss b/src/styles/_all.scss index 08698c4..5f5f9dd 100644 --- a/src/styles/_all.scss +++ b/src/styles/_all.scss @@ -1,7 +1,9 @@ @import 'variables'; @import 'mixins'; +@import 'themes'; @import 'html'; @import 'body'; -@import 'button'; \ No newline at end of file +@import 'buttons'; +@import 'forms'; \ No newline at end of file diff --git a/src/styles/_button.scss b/src/styles/_buttons.scss similarity index 54% rename from src/styles/_button.scss rename to src/styles/_buttons.scss index 22a4d44..91397e5 100644 --- a/src/styles/_button.scss +++ b/src/styles/_buttons.scss @@ -6,17 +6,6 @@ padding: 0.5rem 2rem; - // add color theme support - // @extend %border; - background-color: darken($body-background-color, 2%); - &:active { - background-color: darken($body-background-color, 6%); - } - - &:focus { - outline: none; - } - &:hover { cursor: pointer; } @@ -25,4 +14,15 @@ width: 100%; height: 100%; } + + @include remove-outline; + + @include base-border; + + background-color: darken($base-background-color, 2%); + &:active { + background-color: darken($base-background-color, 6%); + } + + @include theme-button-colors; } \ No newline at end of file diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss new file mode 100644 index 0000000..69593ee --- /dev/null +++ b/src/styles/_forms.scss @@ -0,0 +1,13 @@ +.form-control { + padding: 0.5rem 1rem; + + font-family: $body-font-family; + font-size: $body-font-size; + line-height: $body-line-height; + + @include remove-outline; + + @include base-border; + + @include theme-form-control-colors; +} \ No newline at end of file diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index d5a5508..405ede3 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,4 +1,24 @@ +//----------------------------------------------------------------------------// +// BEM mixins + +// Sass's `@content` Directive Use Cases +// https://robots.thoughtbot.com/sasss-content-directive + +@mixin element($name) { + @at-root #{&}__#{$name} { + @content; + } +} + +@mixin modifier($name){ + @at-root #{&}--#{$name} { + @content; + } +} + +//----------------------------------------------------------------------------// + // mixin to fix the application content to fit in all available space @mixin fix-content-position($unit: 0rem){ position: absolute; @@ -6,4 +26,15 @@ bottom: $unit; left: $unit; right: $unit; -} \ No newline at end of file +} + +//----------------------------------------------------------------------------// + +// removes that blue outline color +@mixin remove-outline(){ + &:focus { + outline: none; + } +} + +//----------------------------------------------------------------------------// \ No newline at end of file diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss new file mode 100644 index 0000000..24ef30d --- /dev/null +++ b/src/styles/_themes.scss @@ -0,0 +1,138 @@ + +// light background-color: #FAFAFA + +$light-theme-background-color: #f0f0f0; +// $light-theme-color: #222222; +$light-theme-color: #555555; +$light-theme-border-color: #cccccc; + +$dark-theme-background-color: #333333; +$dark-theme-color: #9ab9b9; +$dark-theme-border-color: #5a5959; + +$base-background-color: $light-theme-background-color; +$base-color: $light-theme-color; +$base-border-color: $light-theme-border-color; + +//----------------------------------------------------------------------------// + +@mixin apply-border($applyColor: $base-border-color){ + border: 0.1rem solid $applyColor; +} + +@mixin base-border() { + @include apply-border(); +} + +@mixin base-colors(){ + background-color: $base-background-color; + color: $base-color; +} + +//----------------------------------------------------------------------------// + +$lightColorOffset: 35; +$darkColorOffSet: 20; +$themesColors: ( + 'light': ( + 'background-color': $light-theme-background-color, + 'color': $light-theme-color, + 'placeholder-color': lighten(desaturate($light-theme-color, $lightColorOffset), $lightColorOffset), + 'border-color': $light-theme-border-color + ), + 'dark': ( + 'background-color': $dark-theme-background-color, + 'color': $dark-theme-color, + 'placeholder-color': darken(desaturate($dark-theme-color, $darkColorOffSet), $darkColorOffSet), + 'border-color': $dark-theme-border-color + ) +); + +//--- + +@mixin theme-border(){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + @include apply-border(map-get($map, 'border-color')); + } + } +} + +@mixin theme-colors(){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + color: map-get($map, 'color'); + background-color: map-get($map, 'background-color'); + } + } +} + +@mixin theme-content-colors($lightenBy: 5%){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + @include apply-border(map-get($map, 'border-color')); + color: map-get($map, 'color'); + background-color: lighten(map-get($map, 'background-color'), $lightenBy); + } + } +} + +@mixin theme-button-colors($defaultBy: 1%, $activeBy: 3%){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + @include apply-border(map-get($map, 'border-color')); + color: map-get($map, 'color'); + background-color: lighten(map-get($map, 'background-color'), $defaultBy); + &:active { + background-color: darken(map-get($map, 'background-color'), $activeBy); + } + } + } +} + +@mixin theme-form-control-colors($lightenBy: 5%){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + @include apply-border(map-get($map, 'border-color')); + color: map-get($map, 'color'); + background-color: lighten(map-get($map, 'background-color'), $lightenBy); + &::placeholder { + color: map-get($map, 'placeholder-color'); + opacity: 1; + } + } + } +} + +@mixin theme-navbar-colors(){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + color: map-get($map, 'color'); + background-color: map-get($map, 'background-color'); + + a { + color: map-get($map, 'color'); + } + } + } +} + +//--- + +@mixin theme-color(){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + color: map-get($map, 'color'); + } + } +} + +@mixin theme-background-color(){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + background-color: map-get($map, 'background-color'); + } + } +} + +//----------------------------------------------------------------------------// \ No newline at end of file diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index ed34666..b627bf9 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -28,12 +28,3 @@ $screen-tablet: 750px; $desktop-use-max-width: 700px; //----------------------------------------------------------------------------// - -// default colors -$body-color: #222222; -$body-background-color: #f0f0f0; - -// $custom-color: #792c2c; -$custom-color: #0735cc; - -//----------------------------------------------------------------------------// \ No newline at end of file From c3b784d5cdfc705a4504b5ded2c4471230bc55a0 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 06:20:16 -0300 Subject: [PATCH 27/73] code cleanup on the _themes.scss file --- src/styles/_themes.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss index 24ef30d..b75959b 100644 --- a/src/styles/_themes.scss +++ b/src/styles/_themes.scss @@ -1,8 +1,5 @@ -// light background-color: #FAFAFA - $light-theme-background-color: #f0f0f0; -// $light-theme-color: #222222; $light-theme-color: #555555; $light-theme-border-color: #cccccc; From 606308b4126a3de6ca043a92db5e752b9f6d3cf9 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 20:04:23 -0300 Subject: [PATCH 28/73] review/update styles --- src/chat/containers/chatroom/ChatRoom.js | 4 +- src/chat/containers/layout/_styles.scss | 2 +- src/chat/containers/navbar/NavBar.js | 60 +++++++++++++++++++----- src/chat/containers/navbar/_styles.scss | 50 ++++++++++++++++++-- src/chat/containers/settings/Settings.js | 2 +- src/index.html | 11 ++++- src/styles/_buttons.scss | 3 ++ src/styles/_themes.scss | 17 ++++++- 8 files changed, 128 insertions(+), 21 deletions(-) diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index d92ad0d..cf8ae7b 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -32,7 +32,9 @@ class ChatRoom extends Component { placeholder="Enter a message">
- +
diff --git a/src/chat/containers/layout/_styles.scss b/src/chat/containers/layout/_styles.scss index 3878dc9..2f525ba 100644 --- a/src/chat/containers/layout/_styles.scss +++ b/src/chat/containers/layout/_styles.scss @@ -23,7 +23,7 @@ &__header { flex: none; - padding: 0.5rem 2rem; + padding: 0 2rem; @extend %margin-bottom; diff --git a/src/chat/containers/navbar/NavBar.js b/src/chat/containers/navbar/NavBar.js index 82196be..cffdc90 100644 --- a/src/chat/containers/navbar/NavBar.js +++ b/src/chat/containers/navbar/NavBar.js @@ -4,25 +4,61 @@ import classNames from 'classnames'; class NavBar extends Component { +/* +
+
+ + Chat + + ??? +
+ + + Settings + +
+*/ + render() { + const theme = this.props.theme || 'light'; + const navbarClass = classNames( 'navbar', - `navbar--${this.props.theme || 'light'}` + `navbar--${theme}` + ); + + const navbarSupClass = classNames( + 'navbar__sup', + `navbar__sup--${theme}` ); return (
- - Chat - - - Settings - +
    +
  • + + Chat + +
    + 10 +
    +
    • +
  • + + Settings + +
    • +
); } diff --git a/src/chat/containers/navbar/_styles.scss b/src/chat/containers/navbar/_styles.scss index 902b9f8..1f28779 100644 --- a/src/chat/containers/navbar/_styles.scss +++ b/src/chat/containers/navbar/_styles.scss @@ -4,9 +4,9 @@ color: $base-color; text-decoration: none; - &:first-child { - margin-right: $default-unit-value; - } + // &:first-child { + // margin-right: $default-unit-value; + // } &.active { font-weight: bold; @@ -14,5 +14,49 @@ } } + ul { + list-style-type: none; + margin: 0; + padding: 0; + line-height: 3.5rem; + + li { + display: inline-block; + + padding: 0 1rem; + + text-align: center; + + &:first-child { + padding-right: 0; + } + } + } + @include theme-navbar-colors; + + &__sup { + display: inline-flex; + + margin-left: 0.2rem; + + line-height: 1; + + direction: ltr; + unicode-bidi: isolate; + vertical-align: super; + + font-size: smaller; + + font-weight: bold; + text-decoration: none; + + color: $base-sup-color; + @include theme-navbar-sup-color; + + &__text { + min-width: 2.3rem; + text-align: left; + } + } } diff --git a/src/chat/containers/settings/Settings.js b/src/chat/containers/settings/Settings.js index a567d0a..0786c93 100644 --- a/src/chat/containers/settings/Settings.js +++ b/src/chat/containers/settings/Settings.js @@ -21,7 +21,7 @@ class Settings extends Component { diff --git a/src/index.html b/src/index.html index e301446..a2e3b87 100644 --- a/src/index.html +++ b/src/index.html @@ -8,7 +8,16 @@ Simple Chat - + + + diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss index 91397e5..64a9fc4 100644 --- a/src/styles/_buttons.scss +++ b/src/styles/_buttons.scss @@ -6,6 +6,9 @@ padding: 0.5rem 2rem; + display: inline-block; + white-space: nowrap; + &:hover { cursor: pointer; } diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss index b75959b..5ab7565 100644 --- a/src/styles/_themes.scss +++ b/src/styles/_themes.scss @@ -2,14 +2,17 @@ $light-theme-background-color: #f0f0f0; $light-theme-color: #555555; $light-theme-border-color: #cccccc; +$light-theme-sup-color: #FF0000; $dark-theme-background-color: #333333; $dark-theme-color: #9ab9b9; $dark-theme-border-color: #5a5959; +$dark-theme-sup-color: #ff9876; $base-background-color: $light-theme-background-color; $base-color: $light-theme-color; $base-border-color: $light-theme-border-color; +$base-sup-color: $light-theme-sup-color; //----------------------------------------------------------------------------// @@ -35,13 +38,15 @@ $themesColors: ( 'background-color': $light-theme-background-color, 'color': $light-theme-color, 'placeholder-color': lighten(desaturate($light-theme-color, $lightColorOffset), $lightColorOffset), - 'border-color': $light-theme-border-color + 'border-color': $light-theme-border-color, + 'sup-color': $light-theme-sup-color ), 'dark': ( 'background-color': $dark-theme-background-color, 'color': $dark-theme-color, 'placeholder-color': darken(desaturate($dark-theme-color, $darkColorOffSet), $darkColorOffSet), - 'border-color': $dark-theme-border-color + 'border-color': $dark-theme-border-color, + 'sup-color': $dark-theme-sup-color ) ); @@ -116,6 +121,14 @@ $themesColors: ( //--- +@mixin theme-navbar-sup-color(){ + @each $theme, $map in $themesColors { + @include modifier($theme){ + color: map-get($map, 'sup-color'); + } + } +} + @mixin theme-color(){ @each $theme, $map in $themesColors { @include modifier($theme){ From 1fde99394ef69dc036ddf775ec1c5118a0b3445f Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 20:11:11 -0300 Subject: [PATCH 29/73] add a comment to review later a css class to the layout components --- src/chat/containers/layout/_styles.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/chat/containers/layout/_styles.scss b/src/chat/containers/layout/_styles.scss index 2f525ba..db62128 100644 --- a/src/chat/containers/layout/_styles.scss +++ b/src/chat/containers/layout/_styles.scss @@ -37,6 +37,11 @@ flex: auto; &__content { + + // TODO: review + // display: flex; + // flex-direction: column; + flex: auto; padding: $default-unit-value; From 16b7095a9315be2443ae8ad759768e65ca70bcf2 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 22:27:42 -0300 Subject: [PATCH 30/73] more work on the layout components and its behaviors --- .babelrc | 2 +- package.json | 1 + src/chat/Chat.js | 2 +- src/chat/components/_styles.scss | 2 +- src/chat/components/index.js | 10 +++-- .../layout/Container.js | 0 .../layout/ContainerBody.js | 0 .../layout/ContainerFooter.js | 0 .../layout/Layout.js | 0 .../layout/LayoutBody.js | 0 .../layout/LayoutHeader.js | 0 .../layout/_styles.scss | 0 .../layout/index.js | 0 .../layout/stylesClassNames.js | 0 src/chat/components/navlink/SafeNavLink.js | 37 +++++++++++++++++++ src/chat/components/navlink/index.js | 5 +++ src/chat/containers/_styles.scss | 1 - src/chat/containers/chatroom/ChatRoom.js | 10 ++++- src/chat/containers/index.js | 2 - src/chat/containers/navbar/NavBar.js | 35 +++--------------- src/chat/containers/settings/Settings.js | 6 ++- 21 files changed, 71 insertions(+), 42 deletions(-) rename src/chat/{containers => components}/layout/Container.js (100%) rename src/chat/{containers => components}/layout/ContainerBody.js (100%) rename src/chat/{containers => components}/layout/ContainerFooter.js (100%) rename src/chat/{containers => components}/layout/Layout.js (100%) rename src/chat/{containers => components}/layout/LayoutBody.js (100%) rename src/chat/{containers => components}/layout/LayoutHeader.js (100%) rename src/chat/{containers => components}/layout/_styles.scss (100%) rename src/chat/{containers => components}/layout/index.js (100%) rename src/chat/{containers => components}/layout/stylesClassNames.js (100%) create mode 100644 src/chat/components/navlink/SafeNavLink.js create mode 100644 src/chat/components/navlink/index.js diff --git a/.babelrc b/.babelrc index 7f34eda..c045a2e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,4 @@ { - "presets": ["env", "react"], + "presets": ["env", "react", "stage-2"], "plugins": ["react-hot-loader/babel"] } \ No newline at end of file diff --git a/package.json b/package.json index a1201a0..81e1a58 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", + "babel-preset-stage-2": "^6.24.1", "clean-webpack-plugin": "^0.1.19", "css-loader": "^0.28.11", "dotenv-webpack": "^1.5.5", diff --git a/src/chat/Chat.js b/src/chat/Chat.js index 6747701..f7ed47b 100644 --- a/src/chat/Chat.js +++ b/src/chat/Chat.js @@ -5,7 +5,7 @@ import React, { Component } from 'react'; import { HashRouter } from 'react-router-dom'; import { NavBar } from './containers'; -import { Layout, LayoutHeader, LayoutBody } from './containers/layout'; +import { Layout, LayoutHeader, LayoutBody } from './components/layout'; import Routes from './Routes'; diff --git a/src/chat/components/_styles.scss b/src/chat/components/_styles.scss index 7f93493..d4ea488 100644 --- a/src/chat/components/_styles.scss +++ b/src/chat/components/_styles.scss @@ -1 +1 @@ -// TODO: define \ No newline at end of file +@import 'layout/styles'; \ No newline at end of file diff --git a/src/chat/components/index.js b/src/chat/components/index.js index 56e3ad0..3ca0e8d 100644 --- a/src/chat/components/index.js +++ b/src/chat/components/index.js @@ -1,5 +1,9 @@ -// exposes the presentation (dumb) components from the components directory +// exposes the presentation components from the components directory -// TODO: define the imports +import Layout from './layout'; +import NavLink from './navlink'; -export default {}; \ No newline at end of file +export { + Layout, + NavLink +}; \ No newline at end of file diff --git a/src/chat/containers/layout/Container.js b/src/chat/components/layout/Container.js similarity index 100% rename from src/chat/containers/layout/Container.js rename to src/chat/components/layout/Container.js diff --git a/src/chat/containers/layout/ContainerBody.js b/src/chat/components/layout/ContainerBody.js similarity index 100% rename from src/chat/containers/layout/ContainerBody.js rename to src/chat/components/layout/ContainerBody.js diff --git a/src/chat/containers/layout/ContainerFooter.js b/src/chat/components/layout/ContainerFooter.js similarity index 100% rename from src/chat/containers/layout/ContainerFooter.js rename to src/chat/components/layout/ContainerFooter.js diff --git a/src/chat/containers/layout/Layout.js b/src/chat/components/layout/Layout.js similarity index 100% rename from src/chat/containers/layout/Layout.js rename to src/chat/components/layout/Layout.js diff --git a/src/chat/containers/layout/LayoutBody.js b/src/chat/components/layout/LayoutBody.js similarity index 100% rename from src/chat/containers/layout/LayoutBody.js rename to src/chat/components/layout/LayoutBody.js diff --git a/src/chat/containers/layout/LayoutHeader.js b/src/chat/components/layout/LayoutHeader.js similarity index 100% rename from src/chat/containers/layout/LayoutHeader.js rename to src/chat/components/layout/LayoutHeader.js diff --git a/src/chat/containers/layout/_styles.scss b/src/chat/components/layout/_styles.scss similarity index 100% rename from src/chat/containers/layout/_styles.scss rename to src/chat/components/layout/_styles.scss diff --git a/src/chat/containers/layout/index.js b/src/chat/components/layout/index.js similarity index 100% rename from src/chat/containers/layout/index.js rename to src/chat/components/layout/index.js diff --git a/src/chat/containers/layout/stylesClassNames.js b/src/chat/components/layout/stylesClassNames.js similarity index 100% rename from src/chat/containers/layout/stylesClassNames.js rename to src/chat/components/layout/stylesClassNames.js diff --git a/src/chat/components/navlink/SafeNavLink.js b/src/chat/components/navlink/SafeNavLink.js new file mode 100644 index 0000000..c1705c9 --- /dev/null +++ b/src/chat/components/navlink/SafeNavLink.js @@ -0,0 +1,37 @@ +import React, { Component, Fragment } from 'react'; +import { NavLink, withRouter } from 'react-router-dom'; +import classNames from 'classnames'; + +// solves the error message +// Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack + +class SafeNavLink extends Component { + + render() { + const { + children, + history, to, + className, activeClassName, + staticContext, ...rest + } = this.props; + const isActive = (history.location.pathname === to); + const applyActiveCss = isActive ? (activeClassName || 'active') : null; + const applyActiveStyle = { + cursor: 'default' + }; + const applyCss = classNames( + className, applyActiveCss + ); + return ( + + { + isActive ? + { children } : + { children } + } + + ); + } +} + +export default withRouter(SafeNavLink); \ No newline at end of file diff --git a/src/chat/components/navlink/index.js b/src/chat/components/navlink/index.js new file mode 100644 index 0000000..6035185 --- /dev/null +++ b/src/chat/components/navlink/index.js @@ -0,0 +1,5 @@ +import SafeNavLink from './SafeNavLink'; + +export { + SafeNavLink +}; \ No newline at end of file diff --git a/src/chat/containers/_styles.scss b/src/chat/containers/_styles.scss index 9d75efb..4597284 100644 --- a/src/chat/containers/_styles.scss +++ b/src/chat/containers/_styles.scss @@ -1,4 +1,3 @@ -@import 'layout/styles'; @import 'navbar/styles'; @import 'chatroom/styles'; @import 'settings/styles'; \ No newline at end of file diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index cf8ae7b..bf657c5 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -1,13 +1,19 @@ import React, { Component, Fragment } from 'react'; import classNames from 'classnames'; -import { ContainerBody, ContainerFooter } from 'chat/containers/layout'; +import { ContainerBody, ContainerFooter } from 'chat/components/layout'; class ChatRoom extends Component { + componentDidMount() { + console.log('ChatRoom'); + } + render() { + const theme = this.props.theme || 'light'; + const fieldClass = classNames( 'form-control', - `form-control--${this.props.theme || 'light'}` + `form-control--${theme}` ); const buttonClass = classNames( diff --git a/src/chat/containers/index.js b/src/chat/containers/index.js index a28de87..6592686 100644 --- a/src/chat/containers/index.js +++ b/src/chat/containers/index.js @@ -1,13 +1,11 @@ // expose the smart components from the containers directory // components aware about the store or context -import Layout from './layout'; import NavBar from './navbar'; import ChatRoom from './chatroom'; import Settings from './settings'; export { - Layout, NavBar, ChatRoom, Settings diff --git a/src/chat/containers/navbar/NavBar.js b/src/chat/containers/navbar/NavBar.js index cffdc90..3a23301 100644 --- a/src/chat/containers/navbar/NavBar.js +++ b/src/chat/containers/navbar/NavBar.js @@ -1,29 +1,9 @@ import React, { Component } from 'react' -import { NavLink } from 'react-router-dom'; +import { SafeNavLink } from 'chat/components/navlink'; import classNames from 'classnames'; class NavBar extends Component { -/* -
-
- - Chat - - ??? -
- - - Settings - -
-*/ - render() { const theme = this.props.theme || 'light'; @@ -41,22 +21,17 @@ class NavBar extends Component {
  • - + Chat - +
    10
  • - + Settings - +
diff --git a/src/chat/containers/settings/Settings.js b/src/chat/containers/settings/Settings.js index 0786c93..7c387c4 100644 --- a/src/chat/containers/settings/Settings.js +++ b/src/chat/containers/settings/Settings.js @@ -1,9 +1,13 @@ import React, { Component, Fragment } from 'react'; import classNames from 'classnames'; -import { ContainerBody, ContainerFooter } from 'chat/containers/layout'; +import { ContainerBody, ContainerFooter } from 'chat/components/layout'; class Settings extends Component { + componentDidMount() { + console.log('Settings'); + } + render() { const buttonClass = classNames( 'btn', 'btn-expand', From f687b939114399fef97774a1457755d242b65b87 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 22:57:10 -0300 Subject: [PATCH 31/73] small container components updates --- src/chat/containers/chatroom/ChatRoom.js | 4 ---- src/chat/containers/settings/Settings.js | 9 +++------ 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index bf657c5..cbaaa44 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -4,10 +4,6 @@ import { ContainerBody, ContainerFooter } from 'chat/components/layout'; class ChatRoom extends Component { - componentDidMount() { - console.log('ChatRoom'); - } - render() { const theme = this.props.theme || 'light'; diff --git a/src/chat/containers/settings/Settings.js b/src/chat/containers/settings/Settings.js index 7c387c4..0d6595f 100644 --- a/src/chat/containers/settings/Settings.js +++ b/src/chat/containers/settings/Settings.js @@ -4,15 +4,12 @@ import { ContainerBody, ContainerFooter } from 'chat/components/layout'; class Settings extends Component { - componentDidMount() { - console.log('Settings'); - } - render() { + const theme = this.props.theme || 'light'; + const buttonClass = classNames( 'btn', 'btn-expand', - `btn--${this.props.theme || 'light'}`, - 'settings__btn' // TODO: remove + `btn--${theme}` ); return ( From 77664a391e48af67d23bc35e57dd44606baf3ea1 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sat, 19 May 2018 23:03:51 -0300 Subject: [PATCH 32/73] small update on the ChatRoom component --- src/chat/containers/chatroom/ChatRoom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index cbaaa44..6cd5de9 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -14,7 +14,7 @@ class ChatRoom extends Component { const buttonClass = classNames( 'btn', - `btn--${this.props.theme || 'light'}`, + `btn--${theme}`, 'chatroom__btn' ) From ec04e43df8fa22b8af989a48504de1c79e26d0b5 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 00:35:31 -0300 Subject: [PATCH 33/73] add es7 support to the babel loader --- .babelrc | 5 ++++- package.json | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.babelrc b/.babelrc index c045a2e..afc261d 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,7 @@ { "presets": ["env", "react", "stage-2"], - "plugins": ["react-hot-loader/babel"] + "plugins": [ + "react-hot-loader/babel", + ["transform-class-properties", { "spec": true }] + ] } \ No newline at end of file diff --git a/package.json b/package.json index 81e1a58..aeeaa96 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "autoprefixer": "^8.5.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", + "babel-plugin-transform-class-properties": "^6.24.1", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-2": "^6.24.1", From e6db78a6de01717d8ee5986dbba747593061b119 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 00:35:49 -0300 Subject: [PATCH 34/73] move chatroom footer to it own component --- src/chat/containers/chatroom/ChatRoom.js | 41 +++----- .../containers/chatroom/ChatRoomFooter.js | 93 +++++++++++++++++++ 2 files changed, 108 insertions(+), 26 deletions(-) create mode 100644 src/chat/containers/chatroom/ChatRoomFooter.js diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index 6cd5de9..263ec4d 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -2,21 +2,21 @@ import React, { Component, Fragment } from 'react'; import classNames from 'classnames'; import { ContainerBody, ContainerFooter } from 'chat/components/layout'; +import ChatRoomFooter from './ChatRoomFooter'; + class ChatRoom extends Component { - render() { - const theme = this.props.theme || 'light'; + handleSubmit = (message) => { + + // TODO: remove + console.log( `submit to the server, message: ${message}` ); - const fieldClass = classNames( - 'form-control', - `form-control--${theme}` - ); + // TODO: implement the message submit - const buttonClass = classNames( - 'btn', - `btn--${theme}`, - 'chatroom__btn' - ) + } + + render() { + const theme = this.props.theme || 'light'; return ( @@ -25,21 +25,10 @@ class ChatRoom extends Component { TODO: define chat room component - -
-
- -
-
- -
-
- + ); } diff --git a/src/chat/containers/chatroom/ChatRoomFooter.js b/src/chat/containers/chatroom/ChatRoomFooter.js new file mode 100644 index 0000000..caa4000 --- /dev/null +++ b/src/chat/containers/chatroom/ChatRoomFooter.js @@ -0,0 +1,93 @@ +import React, { Component } from 'react'; +import classNames from 'classnames'; +import { ContainerFooter } from 'chat/components/layout'; + +// TODO: add i18n support + +// https://reactjs.org/docs/forms.html +class ChatRoomFooter extends Component { + + state = { + message : '' + }; + + resetMessage = () => { + this.setState({ message : '' }); + } + + submit = () => { + if( + this.props.onSubmit && + this.state.message.length > 0 + ){ + this.props.onSubmit( + this.state.message + ); + this.resetMessage(); + } + } + + handleChange = (event) => { + this.setState({ + [event.target.name]: event.target.value + }); + } + + // https://reactjs.org/docs/events.html#keyboard-events + handleKeyPress = (event) => { + if( + event.ctrlKey && + event.key === 'Enter' + ){ + event.preventDefault(); + this.submit(); + } + } + + handleButtonClick = (event) => { + event.preventDefault(); + this.submit(); + } + + render() { + const theme = this.props.theme || 'light'; + + const fieldClass = classNames( + 'form-control', + `form-control--${theme}` + ); + + const buttonClass = classNames( + 'btn', + `btn--${theme}`, + 'chatroom__btn' + ) + + return ( + +
+
+ +
+
+ +
+
+ + ); + } +} + +export default ChatRoomFooter; \ No newline at end of file From cc3ba3ca6182d52813eaf31e2e24b75660a0ba96 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 00:56:06 -0300 Subject: [PATCH 35/73] update themes sup color --- src/styles/_themes.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss index 5ab7565..2dc3170 100644 --- a/src/styles/_themes.scss +++ b/src/styles/_themes.scss @@ -2,7 +2,7 @@ $light-theme-background-color: #f0f0f0; $light-theme-color: #555555; $light-theme-border-color: #cccccc; -$light-theme-sup-color: #FF0000; +$light-theme-sup-color: #f44336; $dark-theme-background-color: #333333; $dark-theme-color: #9ab9b9; From 1a0e8fec1cc2535ea9632adae3b4138b61897b61 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 00:56:18 -0300 Subject: [PATCH 36/73] add prop-types dependency to the project --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index aeeaa96..1f1473d 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "classnames": "^2.2.5", + "prop-types": "^15.6.1", "react": "^16.3.2", "react-dom": "^16.3.2", "react-router-dom": "^4.2.2" From 5f21f8e202dd7a39c431680122ca58c83541158e Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 00:56:51 -0300 Subject: [PATCH 37/73] add propTypes check to the chatroom footer component --- .../containers/chatroom/ChatRoomFooter.js | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/chat/containers/chatroom/ChatRoomFooter.js b/src/chat/containers/chatroom/ChatRoomFooter.js index caa4000..784c43d 100644 --- a/src/chat/containers/chatroom/ChatRoomFooter.js +++ b/src/chat/containers/chatroom/ChatRoomFooter.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; import { ContainerFooter } from 'chat/components/layout'; @@ -7,12 +8,31 @@ import { ContainerFooter } from 'chat/components/layout'; // https://reactjs.org/docs/forms.html class ChatRoomFooter extends Component { + // https://reactjs.org/docs/typechecking-with-proptypes.html + static propTypes = { + theme: PropTypes.string.isRequired, + onSubmit: PropTypes.func.isRequired, + listenCtrlEnter: PropTypes.bool + }; + + // https://reactjs.org/docs/react-without-es6.html#declaring-default-props + static defaultProps = { + listenCtrlEnter: true + }; + state = { - message : '' + message: '' }; + // https://reactjs.org/docs/refs-and-the-dom.html + messageField = React.createRef(); + + componentDidMount() { + this.messageField.current.focus(); + } + resetMessage = () => { - this.setState({ message : '' }); + this.setState({ message: '' }); } submit = () => { @@ -36,6 +56,7 @@ class ChatRoomFooter extends Component { // https://reactjs.org/docs/events.html#keyboard-events handleKeyPress = (event) => { if( + this.props.listenCtrlEnter && event.ctrlKey && event.key === 'Enter' ){ @@ -68,6 +89,7 @@ class ChatRoomFooter extends Component {
Date: Sun, 20 May 2018 01:54:30 -0300 Subject: [PATCH 38/73] add an is mobile check service --- src/chat/containers/chatroom/ChatRoom.js | 43 ++++++++++++++++--- .../containers/chatroom/ChatRoomFooter.js | 22 ++++++---- src/chat/services/is-mobile/index.js | 36 ++++++++++++++++ src/styles/_buttons.scss | 9 ++-- 4 files changed, 91 insertions(+), 19 deletions(-) create mode 100644 src/chat/services/is-mobile/index.js diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index 263ec4d..34329cc 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -4,12 +4,30 @@ import { ContainerBody, ContainerFooter } from 'chat/components/layout'; import ChatRoomFooter from './ChatRoomFooter'; +import checkIsMobile from 'chat/services/is-mobile'; +const isMobile = checkIsMobile.any(); + class ChatRoom extends Component { - handleSubmit = (message) => { + state = { + message: '', + keyPressed: '' + }; + + handleSubmit = (message, keyPressed) => { - // TODO: remove - console.log( `submit to the server, message: ${message}` ); + this.setState({ + message: message, + keyPressed: ( + keyPressed ? + [ + `key: ${keyPressed.key}`, + `ctrl: ${keyPressed.ctrlKey}`, + `shift: ${keyPressed.shiftKey}`, + `alt: ${keyPressed.altKey}` + ].join(' | ') : 'button clicked' + ) + }); // TODO: implement the message submit @@ -22,12 +40,25 @@ class ChatRoom extends Component { - TODO: define chat room component +
+ TODO: define chat room component +
+
+ message: { this.state.message } +
+
+ keyPressed: { this.state.keyPressed } +
+
+ isMobile: { `${isMobile}` } +
); diff --git a/src/chat/containers/chatroom/ChatRoomFooter.js b/src/chat/containers/chatroom/ChatRoomFooter.js index 784c43d..c227439 100644 --- a/src/chat/containers/chatroom/ChatRoomFooter.js +++ b/src/chat/containers/chatroom/ChatRoomFooter.js @@ -12,12 +12,14 @@ class ChatRoomFooter extends Component { static propTypes = { theme: PropTypes.string.isRequired, onSubmit: PropTypes.func.isRequired, - listenCtrlEnter: PropTypes.bool + listenSendKeys: PropTypes.bool, + isMobile: PropTypes.bool }; // https://reactjs.org/docs/react-without-es6.html#declaring-default-props static defaultProps = { - listenCtrlEnter: true + listenSendKeys: true, // TODO: change to false + isMobile: false }; state = { @@ -35,13 +37,13 @@ class ChatRoomFooter extends Component { this.setState({ message: '' }); } - submit = () => { + submit = ( event ) => { if( - this.props.onSubmit && - this.state.message.length > 0 + this.props.onSubmit //&& + // this.state.message.length > 0 ){ this.props.onSubmit( - this.state.message + this.state.message, event ); this.resetMessage(); } @@ -56,12 +58,14 @@ class ChatRoomFooter extends Component { // https://reactjs.org/docs/events.html#keyboard-events handleKeyPress = (event) => { if( - this.props.listenCtrlEnter && - event.ctrlKey && + this.props.listenSendKeys && + ( + isMobile || event.ctrlKey + ) && event.key === 'Enter' ){ event.preventDefault(); - this.submit(); + this.submit( event ); } } diff --git a/src/chat/services/is-mobile/index.js b/src/chat/services/is-mobile/index.js new file mode 100644 index 0000000..6a80f02 --- /dev/null +++ b/src/chat/services/is-mobile/index.js @@ -0,0 +1,36 @@ +/* + based on: + https://www.abeautifulsite.net/detecting-mobile-devices-with-javascript +*/ + +const doCheck = (regexp) => ( + navigator.userAgent.match(regexp) !== null +); + +//----------------------------------------------------------------------------// + +const Android = () => doCheck(/Android/i); + +const BlackBerry = () => doCheck(/BlackBerry/i); + +const iOS = () => doCheck(/iPhone|iPad|iPod/i); + +const Opera = () => doCheck(/Opera Mini/i); + +const Windows = () => doCheck(/IEMobile/i); + +const any = () => ( + Android() || BlackBerry() || iOS() || Opera() || Windows() +); + +//----------------------------------------------------------------------------// + +export default { + doCheck, + Android, + BlackBerry, + iOS, + Opera, + Windows, + any +}; diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss index 64a9fc4..eb5a7a7 100644 --- a/src/styles/_buttons.scss +++ b/src/styles/_buttons.scss @@ -1,4 +1,9 @@ .btn { + + // required to be able to trigger a button click over a mobile web browser + // https://github.com/facebook/react/issues/2055 + cursor: pointer; + font-family: $body-font-family; font-size: $body-font-size; @@ -9,10 +14,6 @@ display: inline-block; white-space: nowrap; - &:hover { - cursor: pointer; - } - &-expand { width: 100%; height: 100%; From 5b046a831ebe1d23d5b9dd1041b64f69e3d73acd Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 02:06:54 -0300 Subject: [PATCH 39/73] small refactor and code cleanup --- .../containers/chatroom/ChatRoomFooter.js | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/chat/containers/chatroom/ChatRoomFooter.js b/src/chat/containers/chatroom/ChatRoomFooter.js index c227439..889da0a 100644 --- a/src/chat/containers/chatroom/ChatRoomFooter.js +++ b/src/chat/containers/chatroom/ChatRoomFooter.js @@ -1,3 +1,5 @@ +// presentation component + import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -37,11 +39,14 @@ class ChatRoomFooter extends Component { this.setState({ message: '' }); } + // TODO: remove the event submit = ( event ) => { if( - this.props.onSubmit //&& - // this.state.message.length > 0 + this.props.onSubmit && + this.state.message.length > 0 ){ + + // TODO: do not send the event this.props.onSubmit( this.state.message, event ); @@ -49,16 +54,17 @@ class ChatRoomFooter extends Component { } } - handleChange = (event) => { + handleChange = ( event ) => { this.setState({ - [event.target.name]: event.target.value + [ event.target.name ]: event.target.value }); } // https://reactjs.org/docs/events.html#keyboard-events - handleKeyPress = (event) => { + handleKeyPress = ( event ) => { + const { listenSendKeys, isMobile } = this.props; if( - this.props.listenSendKeys && + listenSendKeys && ( isMobile || event.ctrlKey ) && @@ -69,13 +75,13 @@ class ChatRoomFooter extends Component { } } - handleButtonClick = (event) => { + handleButtonClick = ( event ) => { event.preventDefault(); this.submit(); } render() { - const theme = this.props.theme || 'light'; + const { theme } = this.props; const fieldClass = classNames( 'form-control', From 8b10d955996b93cbe4766cb67b7926a773837346 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 02:07:08 -0300 Subject: [PATCH 40/73] add propTypes check to the ChatRoom component --- src/chat/containers/chatroom/ChatRoom.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/chat/containers/chatroom/ChatRoom.js b/src/chat/containers/chatroom/ChatRoom.js index 34329cc..2ebbdf8 100644 --- a/src/chat/containers/chatroom/ChatRoom.js +++ b/src/chat/containers/chatroom/ChatRoom.js @@ -1,14 +1,29 @@ +// container component + import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; + import { ContainerBody, ContainerFooter } from 'chat/components/layout'; import ChatRoomFooter from './ChatRoomFooter'; import checkIsMobile from 'chat/services/is-mobile'; -const isMobile = checkIsMobile.any(); class ChatRoom extends Component { + // https://reactjs.org/docs/typechecking-with-proptypes.html + static propTypes = { + theme: PropTypes.string, // change to .isRequired + isMobile: PropTypes.bool + }; + + // https://reactjs.org/docs/react-without-es6.html#declaring-default-props + static defaultProps = { + theme: 'light', + isMobile: checkIsMobile.any() + }; + state = { message: '', keyPressed: '' @@ -34,8 +49,9 @@ class ChatRoom extends Component { } render() { - const theme = this.props.theme || 'light'; + const { theme, isMobile } = this.props; + // TODO: define ContainerBody content to display the messages return ( From ed5c4b4aa79a6203f129ca9d8cd5df5434999d03 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:26:28 -0300 Subject: [PATCH 41/73] code cleanup --- src/chat/_styles.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/chat/_styles.scss b/src/chat/_styles.scss index 05e4e7a..db6b49a 100644 --- a/src/chat/_styles.scss +++ b/src/chat/_styles.scss @@ -1,8 +1,2 @@ -%border { - border: 0.1rem solid #cccccc; -} - -//---------------------------------------------------------------------------// - @import 'components/styles'; @import 'containers/styles'; From f83ab977ba93456b982a577f216fae03ca20c289 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:27:07 -0300 Subject: [PATCH 42/73] define a mixin to handle screen larget than a table --- src/chat/components/layout/_styles.scss | 19 +++++++++++++++---- src/styles/_mixins.scss | 9 +++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/chat/components/layout/_styles.scss b/src/chat/components/layout/_styles.scss index db62128..0246f46 100644 --- a/src/chat/components/layout/_styles.scss +++ b/src/chat/components/layout/_styles.scss @@ -15,15 +15,18 @@ @include fix-content-position($default-unit-value); - /* Larger than tablet */ - @media (min-width: $screen-tablet){ + @include larger-than-tablet { margin: auto; max-width: $desktop-use-max-width; } &__header { flex: none; - padding: 0 2rem; + + padding: 0 $default-unit-value; + @include larger-than-tablet { + padding: 0 2rem; + } @extend %margin-bottom; @@ -38,12 +41,20 @@ &__content { - // TODO: review + // TODO: review - define a ScrollArea component // display: flex; // flex-direction: column; + // overflow: auto; + // > *:not(:last-child){ + // margin-bottom: 0.5rem; + // } flex: auto; + padding: $default-unit-value; + @include larger-than-tablet { + padding: $default-unit-value 2rem; + } @extend %margin-bottom; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 405ede3..3d4a2e4 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -30,6 +30,15 @@ //----------------------------------------------------------------------------// +// media query to screens that are larger than a tablet screen +@mixin larger-than-tablet() { + @media (min-width: $screen-tablet){ + @content; + } +} + +//----------------------------------------------------------------------------// + // removes that blue outline color @mixin remove-outline(){ &:focus { From 78a204c9dda87d5436872f8e0ab35f80fd16582c Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:28:14 -0300 Subject: [PATCH 43/73] fix the app default line-height variable value --- src/styles/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index b627bf9..6a671e8 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -17,7 +17,7 @@ $body-font-weight: 400; $body-margin: $default-unit-value; -$body-line-height: 1.6; +$body-line-height: 2.5rem; //----------------------------------------------------------------------------// From ce32961349d3cff1cc01771685c78e255685f896 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:28:31 -0300 Subject: [PATCH 44/73] small fix to mobile screen --- src/chat/containers/navbar/_styles.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/chat/containers/navbar/_styles.scss b/src/chat/containers/navbar/_styles.scss index 1f28779..2dfc047 100644 --- a/src/chat/containers/navbar/_styles.scss +++ b/src/chat/containers/navbar/_styles.scss @@ -22,8 +22,6 @@ li { display: inline-block; - - padding: 0 1rem; text-align: center; From a98f75c777ca466ae5634f9cd8a8d2ba83f0d160 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:29:07 -0300 Subject: [PATCH 45/73] initial styles to the settings page --- src/chat/containers/settings/_styles.scss | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/chat/containers/settings/_styles.scss b/src/chat/containers/settings/_styles.scss index ea9b098..c1d009e 100644 --- a/src/chat/containers/settings/_styles.scss +++ b/src/chat/containers/settings/_styles.scss @@ -1,2 +1,18 @@ -// TODO: define if needed -// .settings {} +$element-space-height: 1.5rem; + +.settings { + + &__body { + + > * { + + &:first-child { + margin-top: $element-space-height; + } + + &:not(:last-child) { + margin-bottom: $element-space-height; + } + } + } +} From 1bfc17199e4497650be32783a167d29e37482689 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:29:32 -0300 Subject: [PATCH 46/73] initial styles to the form-radio --- src/styles/_forms.scss | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss index 69593ee..36f0c7a 100644 --- a/src/styles/_forms.scss +++ b/src/styles/_forms.scss @@ -1,13 +1,24 @@ -.form-control { - padding: 0.5rem 1rem; +.form { - font-family: $body-font-family; - font-size: $body-font-size; - line-height: $body-line-height; - @include remove-outline; + &-control { + padding: 0.5rem 1rem; + + font-family: $body-font-family; + font-size: $body-font-size; + + @include remove-outline; + + @include base-border; + + @include theme-form-control-colors; + } - @include base-border; - - @include theme-form-control-colors; -} \ No newline at end of file + &-radio { + display: inline-block; + + &:not(:last-child){ + margin-right: 1rem; + } + } +} From 95c8b13d8491e7bcb8ed017fa598f407f0935054 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:31:23 -0300 Subject: [PATCH 47/73] defined the settings form fields UI --- src/chat/containers/settings/Settings.js | 125 ++++++++++++++++++++++- 1 file changed, 122 insertions(+), 3 deletions(-) diff --git a/src/chat/containers/settings/Settings.js b/src/chat/containers/settings/Settings.js index 0d6595f..af1db5b 100644 --- a/src/chat/containers/settings/Settings.js +++ b/src/chat/containers/settings/Settings.js @@ -1,27 +1,146 @@ +// container component + import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; import classNames from 'classnames'; + import { ContainerBody, ContainerFooter } from 'chat/components/layout'; +import checkIsMobile from 'chat/services/is-mobile'; + +// TODO: add i18n support + +const LoremIpsum = () => ( +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae turpis sed lectus laoreet tempus. Praesent vehicula ultricies est sed venenatis. Etiam imperdiet massa ut porttitor porttitor. Praesent id convallis ex, vel elementum arcu. Sed vitae ex vitae turpis lobortis varius quis vehicula arcu. Nulla facilisi. Pellentesque tempor, lorem id pulvinar lacinia, eros purus gravida est, ut consequat ante ex nec lectus. Cras dignissim pharetra nulla, convallis tincidunt lectus dictum in. Pellentesque at nisi sit amet tortor placerat eleifend. Morbi non rutrum diam. In hac habitasse platea dictumst. Cras congue dapibus enim vel luctus. Praesent posuere ante urna, gravida pulvinar ex interdum in. Fusce at sollicitudin erat.
+); + +// https://reactjs.org/docs/forms.html class Settings extends Component { + // https://reactjs.org/docs/typechecking-with-proptypes.html + static propTypes = { + theme: PropTypes.string.isRequired, + isMobile: PropTypes.bool + }; + + // https://reactjs.org/docs/react-without-es6.html#declaring-default-props + static defaultProps = { + theme: 'light', + isMobile: checkIsMobile.any() + }; + + state = { + form: { + userName: 'guest0001', + theme: this.props.theme, + clickDisplay: 12, + listenSendKeys: false, + locale: 'en' // used to the i18n + } + }; + + handleResetClick = ( event ) => { + + // TODO: remove + console.log( 'Settings: clicked on reset to default button' ); + + // TODO: define the code logic + + }; + render() { - const theme = this.props.theme || 'light'; + const { theme, isMobile } = this.props; const buttonClass = classNames( 'btn', 'btn-expand', `btn--${theme}` ); + // useful reference about how to define input radio + // http://react.tips/radio-buttons-in-reactjs/ + return ( - TODO: define settings component +
+
+
User Name
+
+
+ +
+
Interface color
+
+
+ +
+
+ +
+
+
+ +
+
Clock display
+
+
+ +
+
+ +
+
+
+ +
+
Send messages on { isMobile ? 'ENTER' : 'CTRL + ENTER' }
+
+
+ +
+
+ +
+
+
+ +
+
Language
+
+ +
+
+
From 59246bbff17b30510ebe6934b72c7ffec8ac5af5 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:44:09 -0300 Subject: [PATCH 48/73] update code of NavBar component --- src/chat/containers/navbar/NavBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chat/containers/navbar/NavBar.js b/src/chat/containers/navbar/NavBar.js index 3a23301..6968fe3 100644 --- a/src/chat/containers/navbar/NavBar.js +++ b/src/chat/containers/navbar/NavBar.js @@ -25,7 +25,7 @@ class NavBar extends Component { Chat
- 10 + 10
  • From 352f6e0e2b110616c7e412dfd5412bd7e96c102f Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 03:44:40 -0300 Subject: [PATCH 49/73] add onChange to the user name input field --- src/chat/containers/settings/Settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chat/containers/settings/Settings.js b/src/chat/containers/settings/Settings.js index af1db5b..792d017 100644 --- a/src/chat/containers/settings/Settings.js +++ b/src/chat/containers/settings/Settings.js @@ -66,7 +66,7 @@ class Settings extends Component {
    User Name
    -
    +
    '' }/>
    From eb1a41e3bdd01fccd718b706ddf8e56c5519690f Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 04:14:02 -0300 Subject: [PATCH 50/73] moved to components/form/_styles.scss --- src/{styles/_forms.scss => chat/components/form/_styles.scss} | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) rename src/{styles/_forms.scss => chat/components/form/_styles.scss} (95%) diff --git a/src/styles/_forms.scss b/src/chat/components/form/_styles.scss similarity index 95% rename from src/styles/_forms.scss rename to src/chat/components/form/_styles.scss index 36f0c7a..cb680b8 100644 --- a/src/styles/_forms.scss +++ b/src/chat/components/form/_styles.scss @@ -1,5 +1,6 @@ .form { + &-group {} &-control { padding: 0.5rem 1rem; @@ -21,4 +22,4 @@ margin-right: 1rem; } } -} +} \ No newline at end of file From 2971a3d6615f19480210b3e8ec9da4e6c3d4ac7d Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 04:14:18 -0300 Subject: [PATCH 51/73] load form styles --- src/chat/components/_styles.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/chat/components/_styles.scss b/src/chat/components/_styles.scss index d4ea488..9944615 100644 --- a/src/chat/components/_styles.scss +++ b/src/chat/components/_styles.scss @@ -1 +1,2 @@ -@import 'layout/styles'; \ No newline at end of file +@import 'layout/styles'; +@import 'form/styles'; \ No newline at end of file From 562b8ae6fdf9622b3fe0ca345f5da04938ae2489 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 04:14:34 -0300 Subject: [PATCH 52/73] remove the moved scss file import --- src/styles/_all.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles/_all.scss b/src/styles/_all.scss index 5f5f9dd..b85d6a6 100644 --- a/src/styles/_all.scss +++ b/src/styles/_all.scss @@ -5,5 +5,4 @@ @import 'html'; @import 'body'; -@import 'buttons'; -@import 'forms'; \ No newline at end of file +@import 'buttons'; \ No newline at end of file From 211e0bcc7450e9a5fd236a3c5bb313816845df17 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 06:15:50 -0300 Subject: [PATCH 53/73] define and use form components to the settings page --- src/chat/components/form/FormGroup.js | 40 +++++ src/chat/components/form/InputField.js | 40 +++++ src/chat/components/form/InputRadio.js | 51 ++++++ src/chat/components/form/InputRadioGroup.js | 53 ++++++ src/chat/components/form/_styles.scss | 4 +- src/chat/components/form/index.js | 11 ++ src/chat/components/index.js | 7 +- src/chat/containers/settings/Settings.js | 184 +++++++++++--------- 8 files changed, 308 insertions(+), 82 deletions(-) create mode 100644 src/chat/components/form/FormGroup.js create mode 100644 src/chat/components/form/InputField.js create mode 100644 src/chat/components/form/InputRadio.js create mode 100644 src/chat/components/form/InputRadioGroup.js create mode 100644 src/chat/components/form/index.js diff --git a/src/chat/components/form/FormGroup.js b/src/chat/components/form/FormGroup.js new file mode 100644 index 0000000..1f98a23 --- /dev/null +++ b/src/chat/components/form/FormGroup.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +class FormGroup extends Component { + + // https://reactjs.org/docs/typechecking-with-proptypes.html + static propTypes = { + theme: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + children: PropTypes.element.isRequired + }; + + // https://reactjs.org/docs/react-without-es6.html#declaring-default-props + static defaultProps = { + theme: 'light' + }; + + // https://jaketrent.com/post/send-props-to-children-react/ + // https://reactjs.org/docs/react-api.html#reactchildren + renderChildren = ( theme, children ) => { + return React.Children.map( children, child => { + return React.cloneElement( child, { + theme + }); + }); + } + + render() { + const { theme, label, children } = this.props; + + return ( +
    +
    { label }
    + { this.renderChildren( theme, children ) } +
    + ); + } +} + +export default FormGroup; \ No newline at end of file diff --git a/src/chat/components/form/InputField.js b/src/chat/components/form/InputField.js new file mode 100644 index 0000000..8a576d0 --- /dev/null +++ b/src/chat/components/form/InputField.js @@ -0,0 +1,40 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +class InputText extends Component { + + // https://reactjs.org/docs/typechecking-with-proptypes.html + static propTypes = { + theme: PropTypes.string, + type: PropTypes.oneOf(['text', 'password']), + name: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired + }; + + // https://reactjs.org/docs/react-without-es6.html#declaring-default-props + static defaultProps = { + theme: 'light', + type: 'text' + }; + + render() { + const { theme, type, className, ...rest } = this.props; + + const inputTextClass = classNames( + 'form-control', + `form-control--${theme}`, + className + ); + + return ( + + ); + } +} + +export default InputText; \ No newline at end of file diff --git a/src/chat/components/form/InputRadio.js b/src/chat/components/form/InputRadio.js new file mode 100644 index 0000000..89bd88a --- /dev/null +++ b/src/chat/components/form/InputRadio.js @@ -0,0 +1,51 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +class InputRadio extends Component { + + // https://reactjs.org/docs/typechecking-with-proptypes.html + static propTypes = { + theme: PropTypes.string, + label: PropTypes.string, + name: PropTypes.string, + value: PropTypes.string, + selected: PropTypes.string, + onChange: PropTypes.func + }; + + // https://reactjs.org/docs/react-without-es6.html#declaring-default-props + static defaultProps = { + theme: 'light' + }; + + render() { + const { + theme, label, + className, + value, selected, + ...rest + } = this.props; + + const inputRadioClass = classNames( + 'form-radio', + `form-radio--${theme}`, + className + ); + + return ( +
    + +
    + ); + } +} + +export default InputRadio; \ No newline at end of file diff --git a/src/chat/components/form/InputRadioGroup.js b/src/chat/components/form/InputRadioGroup.js new file mode 100644 index 0000000..1239495 --- /dev/null +++ b/src/chat/components/form/InputRadioGroup.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +class InputRadioGroup extends Component { + + // https://reactjs.org/docs/typechecking-with-proptypes.html + static propTypes = { + theme: PropTypes.string, + name: PropTypes.string.isRequired, + selected: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.bool + ]).isRequired, + onChange: PropTypes.func.isRequired, + children: PropTypes.arrayOf(PropTypes.element).isRequired + } + + // https://reactjs.org/docs/react-without-es6.html#declaring-default-props + static defaultProps = { + theme: 'light' + } + + // https://jaketrent.com/post/send-props-to-children-react/ + // https://reactjs.org/docs/react-api.html#reactchildren + renderChildren = ({ children, theme, name, selected, onChange }) => { + + return React.Children.map( children, child => { + return React.cloneElement( child, { + theme, name, selected, onChange + }); + }); + } + + render() { + const { theme, className } = this.props; + + const inputRadioGroupClass = classNames( + 'form-radio-group', + `form-radio-group--${theme}`, + className + ); + + return ( +
    + { this.renderChildren( this.props) } +
    + ); + } +} + +export default InputRadioGroup; \ No newline at end of file diff --git a/src/chat/components/form/_styles.scss b/src/chat/components/form/_styles.scss index cb680b8..a77073b 100644 --- a/src/chat/components/form/_styles.scss +++ b/src/chat/components/form/_styles.scss @@ -1,6 +1,6 @@ .form { - &-group {} + // &-group {} &-control { padding: 0.5rem 1rem; @@ -21,5 +21,7 @@ &:not(:last-child){ margin-right: 1rem; } + + // &-group {} } } \ No newline at end of file diff --git a/src/chat/components/form/index.js b/src/chat/components/form/index.js new file mode 100644 index 0000000..8bd6fc2 --- /dev/null +++ b/src/chat/components/form/index.js @@ -0,0 +1,11 @@ +import FormGroup from './FormGroup'; +import InputField from './InputField'; +import InputRadioGroup from './InputRadioGroup'; +import InputRadio from './InputRadio'; + +export { + FormGroup, + InputField, + InputRadioGroup, + InputRadio +}; \ No newline at end of file diff --git a/src/chat/components/index.js b/src/chat/components/index.js index 3ca0e8d..81ebe9d 100644 --- a/src/chat/components/index.js +++ b/src/chat/components/index.js @@ -1,9 +1,12 @@ // exposes the presentation components from the components directory -import Layout from './layout'; import NavLink from './navlink'; +import Layout from './layout'; +import Form from './form'; + export { + NavLink, Layout, - NavLink + Form }; \ No newline at end of file diff --git a/src/chat/containers/settings/Settings.js b/src/chat/containers/settings/Settings.js index 792d017..8465e6a 100644 --- a/src/chat/containers/settings/Settings.js +++ b/src/chat/containers/settings/Settings.js @@ -6,13 +6,19 @@ import classNames from 'classnames'; import { ContainerBody, ContainerFooter } from 'chat/components/layout'; +import { FormGroup, InputField, InputRadioGroup, InputRadio } from 'chat/components/form'; + import checkIsMobile from 'chat/services/is-mobile'; // TODO: add i18n support -const LoremIpsum = () => ( -
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae turpis sed lectus laoreet tempus. Praesent vehicula ultricies est sed venenatis. Etiam imperdiet massa ut porttitor porttitor. Praesent id convallis ex, vel elementum arcu. Sed vitae ex vitae turpis lobortis varius quis vehicula arcu. Nulla facilisi. Pellentesque tempor, lorem id pulvinar lacinia, eros purus gravida est, ut consequat ante ex nec lectus. Cras dignissim pharetra nulla, convallis tincidunt lectus dictum in. Pellentesque at nisi sit amet tortor placerat eleifend. Morbi non rutrum diam. In hac habitasse platea dictumst. Cras congue dapibus enim vel luctus. Praesent posuere ante urna, gravida pulvinar ex interdum in. Fusce at sollicitudin erat.
    -); +const DEFAULT_CONFIG = { + userName: 'Guest0001', + theme: 'light', + clickDisplay: '12', + listenSendKeys: 'off', + locale: 'en' // used to the i18n +} // https://reactjs.org/docs/forms.html class Settings extends Component { @@ -21,32 +27,44 @@ class Settings extends Component { static propTypes = { theme: PropTypes.string.isRequired, isMobile: PropTypes.bool - }; + } // https://reactjs.org/docs/react-without-es6.html#declaring-default-props static defaultProps = { theme: 'light', isMobile: checkIsMobile.any() - }; + } state = { - form: { - userName: 'guest0001', - theme: this.props.theme, - clickDisplay: 12, - listenSendKeys: false, - locale: 'en' // used to the i18n - } - }; + userName: 'Guest0001', + theme: this.props.theme, + clickDisplay: '12', + listenSendKeys: 'off', + locale: 'en' // used to the i18n + } handleResetClick = ( event ) => { // TODO: remove console.log( 'Settings: clicked on reset to default button' ); - // TODO: define the code logic + this.setState(DEFAULT_CONFIG); + + // TODO: trigger events + } - }; + handleChange = ( event ) => { + const { name, value } = event.target; + + // TODO: remove + console.log( `Settings: radio ${name} changed, new value ${value}` ); + + this.setState({ + [name]: value + }); + + // TODO: trigger events + } render() { const { theme, isMobile } = this.props; @@ -63,74 +81,82 @@ class Settings extends Component { -
    -
    -
    User Name
    -
    '' }/>
    -
    - -
    -
    Interface color
    -
    -
    - -
    -
    - -
    -
    -
    - -
    -
    Clock display
    -
    -
    - -
    -
    - -
    -
    -
    - -
    -
    Send messages on { isMobile ? 'ENTER' : 'CTRL + ENTER' }
    -
    -
    - -
    -
    - -
    -
    -
    +
    + + + + + + + + + + + + + + + + + + + + + + + + +
    Language
    - + + +
    From 085f8e1fb581f9c8b90fb5d329c9090d24f68e73 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 13:41:42 -0300 Subject: [PATCH 54/73] add component usage comment --- src/chat/components/form/FormGroup.js | 16 ++++++++++++-- src/chat/components/form/InputField.js | 14 ++++++++++-- src/chat/components/form/InputRadio.js | 19 ++++++++++++++-- src/chat/components/form/InputRadioGroup.js | 24 +++++++++++++++++++++ 4 files changed, 67 insertions(+), 6 deletions(-) diff --git a/src/chat/components/form/FormGroup.js b/src/chat/components/form/FormGroup.js index 1f98a23..5040a97 100644 --- a/src/chat/components/form/FormGroup.js +++ b/src/chat/components/form/FormGroup.js @@ -1,6 +1,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +/* + usage: + + + + < InputField, InputRadioGroup /> + + +*/ class FormGroup extends Component { // https://reactjs.org/docs/typechecking-with-proptypes.html @@ -8,12 +20,12 @@ class FormGroup extends Component { theme: PropTypes.string.isRequired, label: PropTypes.string.isRequired, children: PropTypes.element.isRequired - }; + } // https://reactjs.org/docs/react-without-es6.html#declaring-default-props static defaultProps = { theme: 'light' - }; + } // https://jaketrent.com/post/send-props-to-children-react/ // https://reactjs.org/docs/react-api.html#reactchildren diff --git a/src/chat/components/form/InputField.js b/src/chat/components/form/InputField.js index 8a576d0..9cd1a2c 100644 --- a/src/chat/components/form/InputField.js +++ b/src/chat/components/form/InputField.js @@ -2,6 +2,16 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +/* + usage: + + +*/ class InputText extends Component { // https://reactjs.org/docs/typechecking-with-proptypes.html @@ -10,13 +20,13 @@ class InputText extends Component { type: PropTypes.oneOf(['text', 'password']), name: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired - }; + } // https://reactjs.org/docs/react-without-es6.html#declaring-default-props static defaultProps = { theme: 'light', type: 'text' - }; + } render() { const { theme, type, className, ...rest } = this.props; diff --git a/src/chat/components/form/InputRadio.js b/src/chat/components/form/InputRadio.js index 89bd88a..38f013a 100644 --- a/src/chat/components/form/InputRadio.js +++ b/src/chat/components/form/InputRadio.js @@ -1,7 +1,22 @@ + // useful reference about how to define input radio + // http://react.tips/radio-buttons-in-reactjs/ + import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +/* + usage: + + +*/ class InputRadio extends Component { // https://reactjs.org/docs/typechecking-with-proptypes.html @@ -12,12 +27,12 @@ class InputRadio extends Component { value: PropTypes.string, selected: PropTypes.string, onChange: PropTypes.func - }; + } // https://reactjs.org/docs/react-without-es6.html#declaring-default-props static defaultProps = { theme: 'light' - }; + } render() { const { diff --git a/src/chat/components/form/InputRadioGroup.js b/src/chat/components/form/InputRadioGroup.js index 1239495..d1e76f6 100644 --- a/src/chat/components/form/InputRadioGroup.js +++ b/src/chat/components/form/InputRadioGroup.js @@ -2,6 +2,30 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +/* + usage: + + + + + + + + ... + + +*/ class InputRadioGroup extends Component { // https://reactjs.org/docs/typechecking-with-proptypes.html From 5491d252dcb7a71c160a808087293f19725044f6 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 14:25:44 -0300 Subject: [PATCH 55/73] define constants to the app --- .env.example | 6 +++- src/app.js | 3 -- src/chat/constants.js | 28 +++++++++++++++++ .../containers/chatroom/ChatRoomFooter.js | 4 +++ src/chat/containers/settings/Settings.js | 31 +++++-------------- 5 files changed, 44 insertions(+), 28 deletions(-) create mode 100644 src/chat/constants.js diff --git a/.env.example b/.env.example index 1e48bf0..aa84f65 100644 --- a/.env.example +++ b/.env.example @@ -1 +1,5 @@ -MESSAGE="hello world loaded from the .env.example file" \ No newline at end of file +USER_NAME="Guest0001" +THEME="light" +CLOCK_DISPLAY="12" +LISTEN_SEND_KEYS="off" +LOCALE="en" \ No newline at end of file diff --git a/src/app.js b/src/app.js index f1a3bfe..2c1a370 100644 --- a/src/app.js +++ b/src/app.js @@ -7,7 +7,4 @@ import { hot } from 'react-hot-loader'; import Chat from 'chat'; -// will be displayed only on the development environment -console.log(process.env.MESSAGE); - export default hot(module)(Chat); \ No newline at end of file diff --git a/src/chat/constants.js b/src/chat/constants.js new file mode 100644 index 0000000..8bdd629 --- /dev/null +++ b/src/chat/constants.js @@ -0,0 +1,28 @@ +import checkIsMobile from 'chat/services/is-mobile'; + +//----------------------------------------------------------------------------// + +export const isMobile = checkIsMobile.any(); + +//----------------------------------------------------------------------------// +// default settings + +export const defaultSettings = { + userName: process.env.USER_NAME || 'Guest0001', + theme: process.env.THEME || 'light', + clockDisplay: process.env.CLOCK_DISPLAY || '12', + listenSendKeys: process.env.LISTEN_SEND_KEYS || 'off', + locale: process.env.LOCALE || 'en' // i18n default language +}; + +export const keysToListenLabel = isMobile ? 'ENTER' : 'CTRL + ENTER'; + +//----------------------------------------------------------------------------// + +const defaultOuput = { + isMobile, + defaultSettings, + keysToListenLabel +}; + +export default defaultOuput; \ No newline at end of file diff --git a/src/chat/containers/chatroom/ChatRoomFooter.js b/src/chat/containers/chatroom/ChatRoomFooter.js index 889da0a..db459cd 100644 --- a/src/chat/containers/chatroom/ChatRoomFooter.js +++ b/src/chat/containers/chatroom/ChatRoomFooter.js @@ -12,6 +12,7 @@ class ChatRoomFooter extends Component { // https://reactjs.org/docs/typechecking-with-proptypes.html static propTypes = { + locale: PropTypes.string.isRequired, theme: PropTypes.string.isRequired, onSubmit: PropTypes.func.isRequired, listenSendKeys: PropTypes.bool, @@ -20,6 +21,7 @@ class ChatRoomFooter extends Component { // https://reactjs.org/docs/react-without-es6.html#declaring-default-props static defaultProps = { + locale: 'en', listenSendKeys: true, // TODO: change to false isMobile: false }; @@ -66,6 +68,8 @@ class ChatRoomFooter extends Component { if( listenSendKeys && ( + // when its running under the mobile web browser + // only check the enter key isMobile || event.ctrlKey ) && event.key === 'Enter' diff --git a/src/chat/containers/settings/Settings.js b/src/chat/containers/settings/Settings.js index 8465e6a..917486c 100644 --- a/src/chat/containers/settings/Settings.js +++ b/src/chat/containers/settings/Settings.js @@ -8,18 +8,10 @@ import { ContainerBody, ContainerFooter } from 'chat/components/layout'; import { FormGroup, InputField, InputRadioGroup, InputRadio } from 'chat/components/form'; -import checkIsMobile from 'chat/services/is-mobile'; +import constants from 'chat/constants' // TODO: add i18n support -const DEFAULT_CONFIG = { - userName: 'Guest0001', - theme: 'light', - clickDisplay: '12', - listenSendKeys: 'off', - locale: 'en' // used to the i18n -} - // https://reactjs.org/docs/forms.html class Settings extends Component { @@ -32,23 +24,17 @@ class Settings extends Component { // https://reactjs.org/docs/react-without-es6.html#declaring-default-props static defaultProps = { theme: 'light', - isMobile: checkIsMobile.any() + isMobile: constants.isMobile } - state = { - userName: 'Guest0001', - theme: this.props.theme, - clickDisplay: '12', - listenSendKeys: 'off', - locale: 'en' // used to the i18n - } + state = Object.assign({}, constants.defaultSettings); handleResetClick = ( event ) => { // TODO: remove console.log( 'Settings: clicked on reset to default button' ); - this.setState(DEFAULT_CONFIG); + this.setState(Object.assign({}, constants.defaultSettings)); // TODO: trigger events } @@ -74,9 +60,6 @@ class Settings extends Component { `btn--${theme}` ); - // useful reference about how to define input radio - // http://react.tips/radio-buttons-in-reactjs/ - return ( @@ -115,8 +98,8 @@ class Settings extends Component { theme={ theme } label={ 'Clock display' }> + label={ `Send messages on ${ constants.keysToListenLabel /*isMobile ? 'ENTER' : 'CTRL + ENTER'*/ }` }> Date: Sun, 20 May 2018 14:28:21 -0300 Subject: [PATCH 56/73] update default export --- src/chat/constants.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/chat/constants.js b/src/chat/constants.js index 8bdd629..b5d2110 100644 --- a/src/chat/constants.js +++ b/src/chat/constants.js @@ -19,10 +19,8 @@ export const keysToListenLabel = isMobile ? 'ENTER' : 'CTRL + ENTER'; //----------------------------------------------------------------------------// -const defaultOuput = { +export default { isMobile, defaultSettings, keysToListenLabel -}; - -export default defaultOuput; \ No newline at end of file +}; \ No newline at end of file From f9c8040e5893c406e58fe1b9a8ea09f55fc3b3b5 Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 15:06:33 -0300 Subject: [PATCH 57/73] add hashids dev to dynamically build the guest user name --- .env.example | 1 - package.json | 1 + src/chat/constants.js | 9 ++++++-- src/chat/services/hash/index.js | 37 +++++++++++++++++++++++++++++++++ src/chat/services/index.js | 7 +++++++ yarn.lock | 4 ++++ 6 files changed, 56 insertions(+), 3 deletions(-) create mode 100644 src/chat/services/hash/index.js create mode 100644 src/chat/services/index.js diff --git a/.env.example b/.env.example index aa84f65..7baa41b 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,3 @@ -USER_NAME="Guest0001" THEME="light" CLOCK_DISPLAY="12" LISTEN_SEND_KEYS="off" diff --git a/package.json b/package.json index 1f1473d..e484338 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "classnames": "^2.2.5", + "hashids": "^1.1.4", "prop-types": "^15.6.1", "react": "^16.3.2", "react-dom": "^16.3.2", diff --git a/src/chat/constants.js b/src/chat/constants.js index b5d2110..35aeb79 100644 --- a/src/chat/constants.js +++ b/src/chat/constants.js @@ -1,4 +1,6 @@ -import checkIsMobile from 'chat/services/is-mobile'; +// import checkIsMobile from 'chat/services/is-mobile'; + +import { hash, checkIsMobile } from 'chat/services'; //----------------------------------------------------------------------------// @@ -7,8 +9,11 @@ export const isMobile = checkIsMobile.any(); //----------------------------------------------------------------------------// // default settings +const localTime = new Date().getTime(); +const buildUserName = () => ( `Guest_${ hash(localTime).hashSum }` ) + export const defaultSettings = { - userName: process.env.USER_NAME || 'Guest0001', + userName: buildUserName(), theme: process.env.THEME || 'light', clockDisplay: process.env.CLOCK_DISPLAY || '12', listenSendKeys: process.env.LISTEN_SEND_KEYS || 'off', diff --git a/src/chat/services/hash/index.js b/src/chat/services/hash/index.js new file mode 100644 index 0000000..779195e --- /dev/null +++ b/src/chat/services/hash/index.js @@ -0,0 +1,37 @@ +import Hashids from 'hashids'; + +const config = { + salt: 'chat application hash support', + minLength: 4 +}; + +const hashids = new Hashids(config.salt, config.minLength); + +const isString = ( value ) => (typeof value === 'string'); + +//----------------------------------------------------------------------------// + +export const build = ( value ) => { + if( !isString(value) ) value = JSON.stringify( value ); + + const valueLength = value.length; + + let i, charArray = []; + for( i = 0; i < valueLength; i++ ) { + charArray.push( value.charCodeAt(i) ); + } + + let hash = hashids.encode( charArray ); + let hashSum = hash.length; + for( i = (hash.length-1); i >= 0; i-- ) { + hashSum += hash.charCodeAt( i ); + } + + return { + input: value, + hashSum, + hash + }; +}; + +export default build; \ No newline at end of file diff --git a/src/chat/services/index.js b/src/chat/services/index.js new file mode 100644 index 0000000..6a75b91 --- /dev/null +++ b/src/chat/services/index.js @@ -0,0 +1,7 @@ +import hash from './hash'; +import checkIsMobile from './is-mobile'; + +export { + hash, + checkIsMobile +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 508b2e8..8bbf24e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3389,6 +3389,10 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.0" +hashids@^1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/hashids/-/hashids-1.1.4.tgz#e4ff92ad66b684a3bd6aace7c17d66618ee5fa21" + hawk@~3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4" From f5e91e92a80e45eb00c96c5ad186c0692d6648ea Mon Sep 17 00:00:00 2001 From: Erko Bridee Date: Sun, 20 May 2018 17:08:52 -0300 Subject: [PATCH 58/73] define theme styles to the check inputs --- src/chat/components/form/InputRadio.js | 35 ++++++++---- src/chat/components/form/InputRadioGroup.js | 4 +- src/chat/components/form/_styles.scss | 59 +++++++++++++++++++-- src/styles/_themes.scss | 20 ++++++- 4 files changed, 99 insertions(+), 19 deletions(-) diff --git a/src/chat/components/form/InputRadio.js b/src/chat/components/form/InputRadio.js index 38f013a..86f61e9 100644 --- a/src/chat/components/form/InputRadio.js +++ b/src/chat/components/form/InputRadio.js @@ -34,28 +34,43 @@ class InputRadio extends Component { theme: 'light' } + handleClick = (event) => { + event.preventDefault(); + const { onChange, name, value } = this.props; + if( onChange ) { + onChange({ target: { name, value } }); + } + } + render() { const { theme, label, className, - value, selected, + name, value, + selected, ...rest } = this.props; const inputRadioClass = classNames( - 'form-radio', - `form-radio--${theme}`, + 'form-check', + `form-check--${theme}`, className ); return ( -
    -