opencrvs / opencrvs-core

A global solution to civil registration

OpenCRVS

A digital public good for civil registration
Report an issue · Join our community · Read our documentation · www.opencrvs.org

• OpenCRVS
• Important! Please read
• Become part of the OpenCRVS Community
• License

OpenCRVS

OpenCRVS (Civil registration & Vital Statistics) is a digital public good to help achieve universal civil registration and evidence-based decision making in all country contexts.

We are on a mission to ensure that every individual on the planet is recognised, protected and provided for from birth.

Important! Please read

To proceed, refer to our documentation. It contains all the information you need.

Become part of the OpenCRVS Community

We want to see OpenCRVS implemented across the world. We can’t do this alone. Through the OpenCRVS Community, we are uniting experts in civil registration and other interested parties.

Visit our website

Join our community

We greatly appreciate any contributions to opencrvs-core

Raise an issue or join our community to ask for a new feature

1. Raise an issue
2. Involve yourself in design discussions
3. Co-create development tasks with our team
4. Fork the repo
5. Create a branch with your changes
6. Submit a PR
7. Address any comments the core contributors may have
8. The core contributors will merge the code once it is ready, thanks for you contribution to ensure every individual on the planet is recognised, protected and provided for from birth!

By contributing to the OpenCRVS code, you are conforming to the terms of the license.

License

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.

OpenCRVS is also distributed under the terms of the Civil Registration & Healthcare Disclaimer located at http://opencrvs.org/license.

Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.

opencrvs-core's Issues

Windows compatibility

Didn't manage to get the project running on Windows. OSX and Ubuntu seem to be working just fine. Not an urgent thing, but probably best to get this fixed at some point. Thoughts?

Add linting rule to enforce absolute import paths

import something from '../../../../something' vs import something from 'src/something'

Replace moment.js with date-fns

Moment.js is a heavy library.

We need to replace moment with date-fns in client and metrics and farajaland with date-fns.

We need to only import the function we need to use each time like this:

import addDays from 'date-fns/addDays'

• Remove the package and refactor all calculations that are rendered with moment with date-fns
• Add an eslint rule to enforce the import style

Add package.json files to prettierignore

Lerna tests on Travis randomly fail - Running concurrently is too slow

Occasionally Lerna tests on Travis fail with no output and Travis crashes.

For the failing build it looks like Lerna didn't ever produce any output for the login app tests. This is different from cases when the tests pass on travis. Perhaps it somehow getting stuck on the login tests and they are never completing. Still not 100% sure if this is just coincidence or not.

The commits should make sure Lerna doesn't hide any errors that may be occurring and ensure that Travis will attempt the tests 3 times before giving up.

Not sure though if this is resolved yet, and having tests not run in parallel will slow down everything once the project grows.

204f760

Replace Notification with FloatingNotification everywhere

Notification is a very old component. All instances must be replaced with FloatingNotification

If you change profile image, then you see the correct Notification style

Also please look at refactor of the styles and the callback naming convention is a bit strange

Stylelint raises a false positive for no-duplicate-selectors when using non standard selectors in styled-components

${} causes a stylelint false positive for no-duplicate-selectors when using non standard selectors in styled-components

const StyledButton = styled(PrimaryButton)`
justify-content: center;
${ButtonIcon} {
  margin: 1em
}

Discovered here:

8d7e89d#diff-08e3b93dc8a702ba003519765ab8fd14

Stylelint issue raised here: stylelint/stylelint#2199

This could be expected behaviour for Stylelint, and in fact the error could be an issue with StyledComponents "styled" method.

The only solution for now is to disable stylelint for this pattern:

const StyledButton = styled(PrimaryButton)`
justify-content: center;
/* stylelint-disable */
${ButtonIcon} {
/* stylelint-enable */
  margin: 1em
}

Make sure all projects define their own dependencies in their package.json files

Seems like many clients do not have all of their dependencies in their package.json files. At least register and login are missing styled-components completely.

Also: make sure node_modules directories inside subprojects do not have duplicated versions of libraries like React or node_modules that both the client app and components library is using.

Tests should always be in English by default

We need a test util to set the language config variable to English for all tests before any tests are run.

Add a custom linting rule

1. Last part of message id foo.bar.baz has to match with the key on the defineMessages object
2. No hard-coded strings anywhere in the code (there's an existing linting rule for this)
   • If translations are fetched from a CMS or similar, this might be tricky
3. Shows a linting error in the defineMessages block if the item isn't found in the message-file
4. Make sure translation objects don't have messages that aren't used anywhere

Resource:

• Custom TSLint rules — easier than you think
• typescript-react-intl

Only run precommit / prepush hook for project's that have staged changes

Introduce Fragments in Apollo Client and MockedProvider

We need to upgrade our GraphQL approach to use fragments in order to remove these warnings in tests and the technical debt incurred by MockedProvider not being able to match types properly in responses.

d1bd9d8

This work has been started but is incomplete: https://graphql-code-generator.com/docs/plugins/fragment-matcher

6302fa8#diff-9bc1cc81da67b3814a0e9b193c1cbfa6

WARNING: heuristic fragment matching going on! DEPRECATION WARNING: using fragments without __typename is unsupported behavior and will be removed in future versions of Apollo client. You should fix this and set addTypename to true now. You're using fragments in your queries, but either don't have the addTypename true option set in Apollo Client, or you are trying to write a fragment to the store without the __typename. Please turn on the addTypename option and include __typename when writing fragments so that Apollo Client can accurately match fragments.

Linters not run on CI

At the moment it's possible to commit / push code with non-consistent styles

Component types need to be unnecessarily defined

This is what's causing it:
microsoft/TypeScript#5711

So what we need to do:

import * as React from 'react'; // not referenced anywhere
import styled, { 
  StyledComponentClass /* not referenced anywhere */ 
} from 'styled-components'; 

export const Button = styled.button`
  background: red;
`;

Which leads us having to disable noUnusedLocals from tsconfig.json, which then again hides all unused variables, which is not ideal.

Refactor: App.tsx if blocks

https://github.com/jembi/OpenCRVS/blob/master/packages/register/src/App.tsx#L92-L152

would be easier to read if it was

if (!initialDraftsLoaded) {
  return (
    <ThemeProvider theme={getTheme(config.COUNTRY)}>
      <StyledSpinner id="appSpinner" />
    </ThemeProvider>
  )
}
return (
  <ApolloProvider client={this.props.client || client}>
    <Provider store={this.props.store}>
      <I18nContainer>
        <ThemeProvider theme={getTheme(config.COUNTRY)}>
          <ConnectedRouter history={this.props.history}>
            <ScrollToTop>
              <NotificationComponent>
                <Page>
                  <Switch>
                    <ProtectedRoute
                      exact
                      path={routes.HOME}
                      component={Home}
                    />
                    <ProtectedRoute
                      exact
                      path={routes.SELECT_VITAL_EVENT}
                      component={SelectVitalEvent}
                    />
                    <ProtectedRoute
                      exact
                      path={routes.SELECT_INFORMANT}
                      component={SelectInformant}
                    />
                    <ProtectedRoute
                      exact
                      path={routes.DRAFT_BIRTH_PARENT_FORM}
                      component={RegisterForm}
                    />

                    <ProtectedRoute
                      path={routes.DRAFT_BIRTH_PARENT_FORM_TAB}
                      component={RegisterForm}
                    />
                    <ProtectedRoute
                      path={routes.SAVED_REGISTRATION}
                      component={SavedRegistration}
                    />
                    <ProtectedRoute
                      path={routes.WORK_QUEUE}
                      component={WorkQueue}
                    />
                  </Switch>
                </Page>
              </NotificationComponent>
            </ScrollToTop>
          </ConnectedRouter>
        </ThemeProvider>
      </I18nContainer>
    </Provider>
  </ApolloProvider>
) 

No payload type inference in reducer branches

To clarify:

If you try to observe the type of action's payload inside one of the switch branches, TS will only give you any or something as unuseful, where as it should give you the exact type that corresponds with the action type in question.

Typing issue of some sort apparently

Refactor: Abstraction leak in App.tsx

  async loadDraftsFromStorage() {
    const draftsString = await storage.getItem('drafts')
    const drafts = JSON.parse(draftsString ? draftsString : '[]')
    this.props.store.dispatch(setInitialDrafts(drafts))
    this.setState({ initialDraftsLoaded: true })
  }

should be moved to draft reducer. As a general rule, localStorage (or any other data / services) shouldn't be accessed outside reducers at all

Deploy styleguide

Running "yarn add" in a package fails because internal packages are not published

➜  client git:(master) yarn add react-intl
yarn add v1.3.2
warning ../../package.json: No license field
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@opencrvs%2fcomponents: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/rrou/Code/OpenCRVS/packages/client/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Had to remove types so Jest wont complain when mounting components without Intl

Intl is added using a Jest utility during the mount process.

But this means that specifying props in injectIntl causes Jest to break. So I temporarily removed the types until we find a solution.

https://github.com/jembi/OpenCRVS/pull/224/files/2ddf0466ae38e6f2ef442312fa952a4118482ff1#diff-724ee6f91f53a96cd7e9b475426be5bf

Don't show coverage report in local environment by default

TASK: Only print out coverage report when tests are run on CI, but not on development:
It doesn't really provide any extra information and it completely clutters the test output.

yarn test --coverage=none --watch works as a workaround

Auth service fails randomly on startup

Possibly a Redis connection issue.

Also, sometimes I get thrown back to login after a successful authentication Fixed

Get rid of all warnings and other non-result related output from tests

Makes finding the actual issues really difficult

Test cases with relevant test data for death event

Check console and remove any warnings or errors

Rethink how Register - app's "ProtectedRoute" should work

At the moment it redirects the user to login if the user doesn't have a token or if the token is invalid / expired. From an offline-mode perspective, this probably won't work too well. If the user if off the grid, they cannot do any backend requests meaning the login wouldn't work in any case

Searching elements with .find('#id') in Enzyme returns more elements than expected

Impact:
Causes a weird issue when testing or simulating events on React components

Seems to be that it also finds components that aren't really rendered to HTML, but are only VDOM nodes that props like id or className flow through

enzymejs/enzyme#836

Client's Dockerfile needs to be in the root of the project

This is caused by client not being able to fetch the component library from npm.

#55

Resolve untidy enums

We need to resolve the untidy nature of the string enums in the sections discussed here:

#401 (comment)

Absolute import paths for frontend apps

import foo from '../../../../foo' is starting to be a bit annoying, and vscode's autoimports don't play well with our monorepo setup + relative paths

Add typing to <Query /> components

Preferably import the types in the gateway project to frontend projects. Maybe we should also create module where we would have all the queries in one place.

Store is referred directly from a view

https://github.com/jembi/OpenCRVS/blob/master/packages/login/src/views/StepTwo/StepTwoForm.tsx

Pass the reset function from a parent container as a prop

ReviewForm queries and render doesn't support form field configuration

Optimise docker container to build and pushes are quicker

[OCRVS-278] `yarn start` should open the styleguide in a browser

Probably want to wait until this is merged:
styleguidist/react-styleguidist#932

Add lint rule for hardcoded texts

We've had this few times in previous projects

Prettier doesn't like .graphql files with only import statements

https://github.com/jembi/OpenCRVS/pull/52/files#diff-fd66054e4b4e2e824e2bd40260c00e0bR7

Update React

Seems that we're using a relatively old version of React. Would be nice to use a more recent version to be able to use Hooks etc

Pre-commit hook always adds all unstaged changes to commit

must be caused by the last command in

"lint-staged": {
  "src/**/*.{ts,tsx,json}": [
    "prettier --write",
    "tslint",
    "git add"
  ]
},

Birth Certificate Name of Month in Bengali should follow correct spelling

Birth Certificate name of month in Bengali should follow the correct spelling. জানুয়ারী should be জানুয়ারি. Need to cross check with gov officials for the correct spelling.

Remove "eject" scripts from package.json files

Maybe it's best to remove them altogether if we don't want anyone to use them anyway

TextInput doesn't propagate onBlur event to a parent component

https://github.com/jembi/OpenCRVS/blob/master/packages/components/src/components/forms/TextInput.tsx#L69-L71

Check login SMS-code view after fix

Refactor how we manage drafts in Formik

One of the key selling points for Formik, is that we dont store the data in redux. But we are storing the draft data in redux. In fact we store all the drafts.

There is no need to store all the drafts. We might want to store only the active draft in redux as it may be quicker to read the draft from redux than from IndexedDB when we need it, but do we really need to? Can we load from indexedDB all the time? Which is faster?

Also regarding saving a draft, should we only do this when the user clicks save draft rather than automatically after finishing typing? It does slow down the application and perhaps the performance may be improved by fixing our drafts redux issues, but maybe saving a draft should be user initiated. @jpye-finch certainly wanted some feedback to the user each time this happens and we have a pop up Notification component to do that when the user clicks save draft, but that would be annoying to do after every time the user finishes typing.

I wonder what the benefits are. Thanks to @mgorabbani for raising these issues.

Build-time checks for missing environment variables

Needed at least for client and components packages

OR alternatively add default values so a developer would be able to start up everything

Gateway backend's structure doesn't match auth's and notification's

Let's refactor it so they all have the same directory and file structure especially from index.ts's PoV

Inconsistencies in the styleguide

Fonts are not displaying as they do in the app.

Additionally svgs are broken:

#256 (review)

Remove or auto-gen packages/register/src/tests/schema.graphql

Should refactor out listening for window resize on componentDidMount

All of these calls in componentDidMount:

window.addEventListener('resize', this.recordWindowWidth)

Should be replaced with: https://github.com/streamich/react-use/blob/master/docs/useWindowSize.md

Resent verification code isn't 000000 for demo users

Reconsider pre-commit and pre-push hooks

Especially pre-push hook is a bit annoying since it takes fairly long to run all tests for all projects. The same thing is also done by CI which leads me to believe this isn't so helpful after all.

Pre-commit hook on the other hand is still fairly quick and useful for people who don't have their editor automatically formatting everything. Would be nice if it would be optional though. Find myself using --no-verify way too often these days, which isn't a good sign