Preply Chat
Development
Local development(Standalone, recommended)
npm start
- to have stage40 API endpoing (recommended)
npm run start:local
- to have monolith API endpointnpm run start:prod
- to have prod API endpoint (use it only if you know what to do)
- `open http://localhost:9001/messages for messenger view
- `open http://localhost:9001/classroom/${collocutorId} for chat widget in classroom view
- `open http://localhost:9001/chat/${collocutorId} for default chat widget view (e.g monolith pages, node-ssr)
by default we use API endpoint from the stage40 so make sure you are logined as a tutor or a student.
- You will have to login
http://localhost:9001/en/login
(see notes below about API Proxy below)
API Proxy
To prevent CORS errors, we proxy all calls to /graphql
, /api
and a few other endpoints via localhost
using webpack-dev-server:proxy
.
We also proxy the monolith's authentication routes (e.g.: /**/login
) so that you can login locally (with credentials or social network) and acquire your session cookies @localhost.
Local development inside inside Another App e.g. Preply Space
In @preply/chat
npm link
npm i
npm start
In preply-space
npm i
npm link @preply/chat
npm start
Tip: this shows all your globally-linked npm packages:
npm ls -g --depth=0 --link=true
Before release
- Make sure you have incremented chat version(https://docs.npmjs.com/about-semantic-versioning)
- Run
npm version x.y.z
to incremented version and update package.json, package-lock.json
Date localization
All datetime that goes from BE is in UTC time, we have to format this to user timezone format. Please, use only useTimeZone, toZonedDate, and FormattedDate for date localization.
Example:
const { timeZone } = useTimeZone();
const localDatetime = toZonedDate(new Date(datetime), timeZone);
return <FormattedDate value={localDatetime} />
Codestyle
-
Refer to the ESLint in Preply: How to for a detailed guide on how we pursue the same codestyle within different projects at Preply.
:bulb: You’ll need to install dependencies in the repo root by running yarn
there to enable linting via CLI.
-
Please, use tokens from @preply/ds-web-core
for styles such as font-size, padding, margins, etc
theme file;
Example:
Bad:
font-size: 16px;
color: #3bb3bd;
padding: 16px;
Good:
font-size: t(text.small.regular.body.fontSize);
color: t(color.background.positiveLight);
padding: ${t(spacing[16])};
-
Name custom hooks with name starting with use
details so as to avoid breaking app in case of incorrect hook usage details
Release
Follow this readme
Common flow
- Merge your PR with chat feature
- CI autopublishes new chat to NPM @preply/chat
- Wait for Jenkins PR(It looks like
...update dependency @preply/chat to...
) - If bot didn't create PR (usually it takes up to 10 mins after a package was deployed) check Jenkins jobs. You can also trigger it manually by calling:
docker run renovate/renovate --token=$GITHUB_TOKEN --dry-run=true preply/apollo
- Start
/dynamic
in this PR and check chat on each service
Manual (only if CI autopublish doesn't work)
1. Via CI
- Create GH release:
- Tag version: client-chat-${VERSION FROM PACKAGE.JSON} e.g. client-chat-1.2.3
- Target:
master
or your branch of PR with chat changes - Release title: the same as tag version
- Go to Prod_Flow in jenkins CI
- Choose
client-chat
servise - Choose tag
2. Locally (Only if CI doesn't work)
npm run build
npm publish
3. Publish alfa/beta version
- Create PR with your branch
- Create new tag from your branch e.g:
git tag client-chat-6.4.0-alfa.0
- Push new tag e.g:
git push origin client-chat-6.4.0-alfa.0
- Go to CI(jenkins), chose your service and tag then press button
Build
Projects which use chat (better do a lookup in package.json
files throughout the repo 'cause this might update)
- EDU
- Node-ssr
- Monolith
- "Preply-space"
- Dashboard
Recommendations for use
- do not use heavy packages as it increases bundle size(such as moment js)
Monitoring / Alerting
Errors from this service are reported to Sentry under client-pkgs project.
To filter errors that are only related to this service use source
tag.
Runtime requirements for hosting apps
- Polyfilled Intl APIs. See react-intl docs
Testing
We have limited e2e tests coverage, so we have to test chat manually also according to the QA framework
- Create PR and build dynamic using
/dynamic npm
- Wait for e2e tests to pass
- Test chat manually according to the QA framework (at least 1 device with 1 resolution)