* Add api methods for subscription
* Small changes
* little changes in remark.tsx
* disallow pass className to Button and Input
* Subscribe block
* add RSS and Email subscription drobdowns
* add hook useTheme
* unify dropdown import/export
* Change API
* rename subscribe methods
* add unsubscribe method
* Add email subscription to settings and user
* Refactor and add new steps
* render by single component
* add final step
* add unsubscribe step it user is subscribed
* Add tests
* Update subscription logic
* test without mocking redux methods but with mocking store
* update user in store after subscribe and unsubscribe
* little changes in subscription flow
* fix drobdown size
* Fix RSS subscription link for site
* fix link
* add test for RSS subscription
* Fix showing email subscription
* it don't show to unauth users
* it don't show to anonymous users
* it tested
* isUserAnonymous is a bit rewrited
* isUserAnonymous is tested
* Make Email button visible for anon users
* React X supporst Fragments thats why .babelrc changed
* disabled button is more visible
* fix hovering on disabled buttons
* create mocks for tests
* move email dropdown to __subscribe-by-email
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
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 MineevandUmputun
7d9e8ce076