Add Module Code for Birth-Registration

After adding all required Dependency and config we will create code for Birth-Registration.

Create Form UI:-

First, we need to create a form where users can enter all required information and submit the form.
for that, we need to create an index.js into web->micor-ui->internals ->packages->module->br->src->pages->citizen->create(you can give any name instead of create)->index.js
In Index.js will import the Formcomposer that is already present. inside that, we will add Heading, label, and config.

import { FormComposer } from "@egovernments/digit-ui-react-components";
import React from "react";
import { useTranslation } from "react-i18next";

import { newConfig } from "../../../components/config/config";

const Create = () => {
 
  const { t } = useTranslation();
  const configs = newConfig?newConfig:newConfig;

  return (
    <FormComposer
    heading={t("Create Birth Registration")}
    label={t("ES_COMMON_APPLICATION_SUBMIT")}
    config={configs.map((config) => {
      return {
        ...config,
        body: config.body.filter((a) => !a.hideInEmployee),
      };
    })}
  
    fieldStyle={{ marginRight: 0 }}
  />
  );
};

export default Create;

Config.js:-

In Config.js we create a JSON file where it contains the head that is the heading of our form then in the body, we are adding type so in type we mention the component and we add the component name e.g:- We create BrSelectName.js inside that we maintain the form label, details, and validation. so like that same for other fields also we create. once newConfig components are added then will map newConfig Json in the above index.js so the fields should be rendered to UI.

export const newConfig =[
    {
        "head": "Birth-Details",
        "body": [
         
            {
                type: "component",
                component: "BrSelectName",
                key: "BrSelectName",
                withoutLabel: true,
              },
              {
                type: "component",
                component: "BRSelectGender",
                key: "BRSelectPhoneGender",
                withoutLabel: true,
              },
              {
                type: "component",
                component: "BRSelectPhoneNumber",
                key: "BRSelectPhoneNumber",
                withoutLabel: true,
              },
              {
                type: "component",
                component: "BRSelectEmailId",
                key: "BRSelectEmailId",
                withoutLabel: true,
              },
          
              {
                type: "component",
                component: "BrSelectAddress",
                key: "BrSelectAddress",
                withoutLabel: true,
              },
              {
                type: "component",
                component: "SelectCorrespondenceAddress",
                key: "SelectCorrespondenceAddress",
                withoutLabel: true,
              },
        ]
    },

];

Components that we are using in newConfig.js:-

BrSelectName
BrSelectGender
BrSelectPhoneNumber
BrSelectEmailId
BrSelectAddress
SelectCorrespondenceAddress

Routing:-

After Adding the config.js and index.js (Create ) will add routing for the birth-registration form for that we need to create the index.js into br->src->pages->citizen->index.js where we will add the private route. so in index.js, we mention the path and component name which component we need to show or render after entering a specific path or link.

import { AppContainer, BackButton,PrivateRoute } from "@egovernments/digit-ui-react-components";
import React from "react";
import {  Switch, useRouteMatch } from "react-router-dom";

import { useTranslation } from "react-i18next";



const App = () => {
  const { path, url, ...match } = useRouteMatch();
  const { t } = useTranslation();

  const Create = Digit?.ComponentRegistryService?.getComponent("BRCreate");
  const Response = Digit?.ComponentRegistryService?.getComponent("Response");
  
  return (
    <span className={"pt-citizen"}>
      <Switch>
        <AppContainer>
        <BackButton>Back</BackButton> 
        
          <PrivateRoute path={`${path}/birth`} component={Create} />
          <PrivateRoute path={`${path}/response`} component={Response} />
        </AppContainer>
      </Switch>
    </span>
  );
};

export default App;

Add Card On Homepage:-

once the form is created and also routing is added we add the Birth-Registration Module card on our DIgit-UI Homepage.

Module.js:-

Module.js is the entry point of every module e.g:- ( Birth-Registration, Property Tax ) so here we need to Register all the components, Links, Module Codes, etc.

Enable Module:-

After Register all components, Links, and module code we need to enable it in Two Places:-
1) Web-> Src->app.js :-
In app.js we import the BRModule, initBRComponents, and BRLinks and enable the BR module.

2) web->micro-ui-internals->example->src->index.js :-
In index.js also we will import the BRModule, initBRComponents, and BRLinks and enable the BR module.

Once we enable the BR module in app.js and index.js our birth-registration module we will be able to see into UI.
so In modules->core->src->pages->citizen->Home->index.js we add the

once we add the link to the homepage we can able to see the birth-registration module on our Digit-UI Homepage so this way we can add the homepage card for the citizen module.

Integration with Backend API:-

we have done with the UI part for the citizen module, now we will see how to integrate it with the backend API.

Service:-

we create a service where we mention the API's call e.g:- POST, GET, PUT, PATCH, etc.
basically, we will create a request inside the request we pass the data, URL, method, auth, and other params.

In Request, we are passing the URL so that url we mention or add into the service-> atoms-> url.js

Hooks: -

Once BRService is created with all requests then will create a Hook and that hook we will use in our code to pass the data to the backend.

After creating Service and Hooks we need to register it into packages-> libraries->src->index.js

so we setup the backend service, and now we will use the hooks or service to send the data backend. after submitting the form.

so we add the onSubmit function in our code (br->src->pages->citizen->create->index.js) and in that function, we are passing the user’s entered data to the BRService that we have created.

your integration is done your data will save into the database.