* Move visibility param from redux store to local state
* use func for parsing location.search
* Remove bad wrapper
* we already have wrapper with NODE_ID on page and we shouldn't another one with the same id on page
* move common part of markup to level up
* Tinny refac of setSorting
* add dummy types for pollyfils
also, a bit rewrited way to resolve imports
* Move sort flag to local store
Because we don't need to share this param between diffrent parts of interface
* Add action creators
* move action to action creators
* Remove unused functions
* Merge in conditions in one
* One way for export API methods
* add default tags
* Rewrited changing read only mode
* removed unused function
* set sort changes
* always send sort from store
* rollback if sort don't work
* constanst
* add typing
* shorten export
* remove double define of host
project uses typescript to statically analyze code
project uses eslint to check frontend code. You can manually run via npm run lint.
git hooks (via husky) installed automatically on npm install and check and try to fix code style if possible, otherwise commit will be rejected
if you want IDE integration, you need eslint plugin to be installed.
CSS Styles
although styles have scss extension, it is actually pack of post-css plugins, so syntax differs, for example in calc function.
component styles use BEM notation (at least it should): block__element_modifier. Also there are mix classes: block_modifier.
component base style resides in the component's root directory with name of component converted to kebab-case. For example ListComments style is located in ./app/components/list-comments/list-comments/scss
component's element style resides in its own subdirectory, with name consisting of full elements selector, for example ListCommentsitem element is placed in __item directory under name ./list-comments__item.scss
each style should be required in index.ts of component's root directory
Imports
imports for typescript, javascript files should be without extension: ./index, not ./index.ts
if file resides in same directory or in subdirectory import should be relative: ./types/something
otherwise it should start from @app namespace: @app/common/store which mapped to /app/common/store.ts in webpack, tsconfig and jest
Testing
project uses jest as test harness.
jest check files that match regex \.test\.(j|t)s(x?)$, i.e comment.test.tsx, comment.test.js
tests are running on push attempt
example tests can be found in ./app/store/user/reducers.test.ts, ./app/components/auth-panel/auth-panel.test.tsx
how to add new locale.
add new item to ./tasks/supportedLocales.json
run npm run generate-langs
commit all changed files
translate all string in new generated dictionary ./app/locale/<new-locale>.json
Notes
Frontend part being bundled on docker env gets placed on /src/web and is available via http://{host}/web. for example embed.js entry point will be available at http://{host}/web/embed.js
Pavel MineevandGitHub
85c71716f9