Page Comparison

...

Create:

skeleton code:-

Go to micro-ui--internals → packages → modules. Inside the module, create a folder and give the name of service e.g:- service name is birth-registration then create folder br (you can give any name).
After creating br will add the package.json into a created folder where we mention the module name
and other dependencies.

Code Block

{
    "name": "@egovernments/digit-ui-module-br",
    "version": "1.5.4",
    "license": "MIT",
    "description": "Birth Registration Module",
    "main": "dist/index.js",
    "module": "dist/index.modern.js",
    "source": "src/Module.js",
    "files": [
      "dist"
    ],
    "scripts": {
      "start": "microbundle-crl watch --no-compress --format modern,cjs",
      "build": "microbundle-crl --no-compress --format modern,cjs",
      "prepublish": "yarn build"
    },
    "peerDependencies": {
      "react": "17.0.2",
      "react-router-dom": "5.3.0"
    },
    "dependencies": {
      "@egovernments/digit-ui-libraries": "1.5.4",
      "@egovernments/digit-ui-react-components": "1.5.4",
      "lodash.merge": "^4.6.2",
      "react": "17.0.2",
      "react-dom": "17.0.2",
      "react-hook-form": "6.15.8",
      "react-i18next": "11.16.2",
      "react-query": "3.6.1",
      "react-redux": "7.2.8",
      "react-router-dom": "5.3.0",
      "react-table": "7.7.0",
      "redux": "4.1.2",
      "redux-thunk": "2.4.1"
    }
  }

After creating the package.json for birth registration we maintain the following project structure.

Image Added

Register Module into mdms:-

If you are creating a new module then, first we need to enable that module as true in citymodule.json
update the Module in citymodule.json.

Code Block
{ "module": "BR", "code": "BR", "active": true, "order": 1, "tenants": [ { "code": "pb.jalandhar" }, { "code": "pb.nawanshahr" }, { "code": "pb.amritsar" } ] },

Suppose your module name is BR(Birth-Registration) then change the module and code as BR. and update the citymodule.json file.

Adding New Screen:-

After Creating the project structure in the module add the required dependency.

Package.Json:-
We need to add or update the module dependency in three places.
Micro-ui-internals:-
Now open the micro-ui-internals package.json file and update the dependency. e.g:- If we need to add br module then will add these dependencies.

Code Block
"dev:br": "cd packages/modules/br && yarn start", "build:br": "cd packages/modules/br && yarn build",

...

example:-
Now open the example package.json file and update the dependency. e.g:- If we need to add br module then will add these dependencies.
Code Block
"@egovernments/digit-ui-module-br":"^1.4.0",

Image Added

Web:-
Now open the Web package.json file and update the dependency. e.g:- If we need to add br module then will add these dependencies.

Code Block
"@egovernments/digit-ui-module-br":"1.5.4",

Image Added

Routing:-

Now we will see how to add a new screen.Create an index.js (you can give any name) file in a particular module or service as seen below

Image Added

So here in pages ->citizen->create-> index.js, we are adding new screen code whatever we need to render on UI that code we will add. after adding the code will add the route for the create.js file.

Image Added

For Routing will create an index.js file where we mention or add all routes. Above index.js will add a private route so we mention the path and component name which component we need to show or render after entering a specific path or link.

Module.js:-
In Module.js we register the component which components we need to show or render on UI.
e.g:-

Code Block

import { Header, CitizenHomeCard, PTIcon } from "@egovernments/digit-ui-react-components";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useRouteMatch } from "react-router-dom";
import CitizenApp from "./pages/citizen/index";
import Create from "./pages/citizen/create/index";
import EmployeeApp from "./pages/employee";
import BRCard from "./components/BRCard";

const componentsToRegister = {
  BRCreate : Create,
 
};

export const BRModule = ({ stateCode, userType, tenants }) => {
  const { path, url } = useRouteMatch();

  const moduleCode = "BR";
  const language = Digit.StoreData.getCurrentLanguage();
  const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });



  Digit.SessionStorage.set("BR_TENANTS", tenants);
  useEffect(()=>userType === "employee"&&Digit.LocalizationService.getLocale({ 
    modules: [`rainmaker-${Digit.ULBService.getCurrentTenantId()}`],
     locale: Digit.StoreData.getCurrentLanguage(), 
     tenantId: Digit.ULBService.getCurrentTenantId()
    }),
   []);

  if (userType === "employee") {
    return <EmployeeApp path={path} url={url} userType={userType} />;
  } else return <CitizenApp />;
};

export const BRLinks = ({ matchPath, userType }) => {
  const { t } = useTranslation();
  // const [params, setParams, clearParams] = Digit.Hooks.useSessionStorage("PT_CREATE_PROPERTY", {});

  // useEffect(() => {
  //   clearParams();
  // }, []);

  const links = [
  
    {
      link: `${matchPath}/birth`,
      i18nKey: t("Create_BirthRegistration"),
    },

   
  ];

  return <CitizenHomeCard header={t("BirthRegistration")} links={links} Icon={() => <PTIcon className="fill-path-primary-main" />} />;
};

export const initBRComponents = () => {
  Object.entries(componentsToRegister).forEach(([key, value]) => {
    Digit.ComponentRegistryService.setComponent(key, value);
  });
};
export const BRComponents = {

  BRModule,
  BRLinks,

};

Image Added

So After adding all components to the module.js again we need to enable modules into the web->src-> app.js and in example->src->index.js. there we need to import.

After enabling the module into App.js and index.js routing will work.

Versions Compared

Old Version 4

New Version 5

Key

Create: