Page Comparison

...

Integration with Backend API:-Hooks: - Code Block

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

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

...

service → elements

Code Block


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

const BRService = {
  
  create../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.createget,
      useCache: false,
      method: "POSTGET",
      auth: true,
      userService: true,
      params: { tenantId },
    }),
 
  get: (data, tenantId)
=> 
};

export Request({default       data: data,
      url: Urls.br.get,
      useCache: false,BRService;

service-> atoms-> url.js

Code Block
br: { methodcreate: "GEThttps://62f0e3e5e2bca93cd23f2ada.mockapi.io/user", auth: trueget:"https://62f0e3e5e2bca93cd23f2ada.mockapi.io/user", userService: true, params:},

Hooks: -

Code Block
import { tenantId }useQuery, useMutation }), from "react-query"; import BRService }from "../../services/elements/BR"; export defaultconst BRService;

service-> atoms-> url.js

Code Block

br: {
    create: "https://62f0e3e5e2bca93cd23f2ada.mockapi.io/user",
    get:"https://62f0e3e5e2bca93cd23f2ada.mockapi.io/user",
    
  },useBRCreate = (tenantId, config = {}) => {
  return useMutation((data) => BRService.create(data, tenantId));
};

export default useBRCreate;

register 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 };

...

Versions Compared

Old Version 9

New Version 10

Key