Page Comparison

...

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

first, we will create a service inside the 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.

Code Block


import Urls from "../atoms/urls";
import { Request } from "../atoms/Utils/Request";

const BRService = {
  
  create: (data, tenantId) =>
    Request({
      data: data,
      url: Urls.br.create,
      useCache: false,
      method: "POST",
      auth: true,
      userService: true,
      params: { tenantId },
    }),
    get: (data, tenantId) =>
    Request({
      data: data,
      url: Urls.br.get,
      useCache: false,
      method: "GET",
      auth: true,
      userService: true,
      params: { tenantId },
    }),
 
    
 
};

export default BRService;

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

Code Block
br: { create: "https://62f0e3e5e2bca93cd23f2ada.mockapi.io/user", get:"https://62f0e3e5e2bca93cd23f2ada.mockapi.io/user", },

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 backed.

Code Block

import { useQuery, useMutation } from "react-query";

import BRService from "../../services/elements/BR";

export const useBRCreate = (tenantId, config = {}) => {
  return useMutation((data) => BRService.create(data, tenantId));
};

export default useBRCreate;

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

Code Block


import Enums from "./enums/index";
import mergeConfig from "./config/mergeConfig";
import { useStore } from "./services/index";
import { initI18n } from "./translations/index";
import { Storage, PersistantStorage } from "./services/atoms/Utils/Storage";
import { UserService } from "./services/elements/User";
import { ULBService } from "./services/molecules/Ulb";
import Hooks from "./hooks";
import { subFormRegistry } from "./subFormRegistry";
import BRService from "./services/elements/BR";

const setupLibraries = (Library, props) => {
  window.Digit = window.Digit || {};
  window.Digit[Library] = window.Digit[Library] || {};
  window.Digit[Library] = { ...window.Digit[Library], ...props };
};

const initLibraries = () => {
  setupLibraries("SessionStorage", Storage);
  setupLibraries("PersistantStorage", PersistantStorage);
  setupLibraries("UserService", UserService);
  setupLibraries("ULBService", ULBService);

  setupLibraries("Config", { mergeConfig });
  setupLibraries("Services", { useStore });

  setupLibraries("BRService", BRService);
  

  return new Promise((resolve) => {
    initI18n(resolve);
  });
};

export { initLibraries, Enums, Hooks, subFormRegistry };

Use service into create.js add-on submit function 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.

Code Block

import { FormComposer, Loader } from "@egovernments/digit-ui-react-components";
import React, {  useState } from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { newConfig } from "../../../components/config/config";

const Create = () => {
  const tenantId = Digit.ULBService.getCurrentTenantId();
  const { t } = useTranslation();
  const history = useHistory();
  

  const onSubmit = (data) => {

    let Users = [
      {

        user: {
          babyFirstName: data?.BrSelectName?.babyFirstName,
          babyLastName: data?.BrSelectName?.babyLastName,
          fatherName: data?.BrSelectName?.fatherName,
          motherName: data?.BrSelectName?.motherName,
          gender: data?.BrSelectGender?.gender,
          doctorName: data?.BrSelectName?.doctorName,
          hospitalName: data?.BrSelectName?.hospitalName,
          placeOfBirth: data?.BrSelectName?.placeOfBirth,
          applicantMobileNumber: data?.BRSelectPhoneNumber?.applicantMobileNumber,
          altMobileNumber: data?.BRSelectPhoneNumber?.altMobileNumber,
          emailId: data?.BRSelectEmailId?.emailId,
          permanentAddress: data?.BrSelectAddress?.permanentAddress,
          permanentCity: data?.BrSelectAddress?.permanentCity,
          correspondenceCity: data?.SelectCorrespondenceAddress?.correspondenceCity,
          correspondenceAddress: data?.SelectCorrespondenceAddress?.correspondenceAddress,
          bloodGroup: data?.SelectCorrespondenceAddress?.bloodGroup,
          tenantId: tenantId,
        },
        
      },
    ];
      /* use customiseCreateFormData hook to make some chnages to the Employee object */
     Digit.BRService.create(Users, tenantId).then((result,err)=>{
       let getdata = {...data , get: result }
       onSelect("", getdata, "", true);
       console.log("daaaa",getdata);
     })
     .catch((e) => {
     console.log("err");
    });

    history.push("/digit-ui/citizen/br/response");

    console.log("getting data",Users)
    
  };
 
  
  /* use newConfig instead of commonFields for local development in case needed */

  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),
      };
    })}
    onSubmit={onSubmit}
    fieldStyle={{ marginRight: 0 }}
  />
  );
};

export default Create;

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

Versions Compared

Old Version 10

New Version 11

Key