Add Module Code for Birth-Registration

After adding all required Dependency. will add the Birth-Registration module code.

Create form UI :-

Add Card On Homepage:-

Integration with Backend Api:-

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

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.

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:-

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,

};

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.

Add Module Code for Birth-Registration

0 Comments