How can I use Hooks in Non-Functional Components

Question

import { AES, enc, mode, pad } from "react-native-crypto-js";
import Constants from "expo-constants";
import axios from "axios";
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import { Platform } from "react-native";
import { useDispatch } from "react-redux";
import { setJwtToken } from "../actions/jwtTokenActions";
let secretKey = Constants.manifest.configurations.secretKey;
let baseUrl = Constants.manifest.configurations.baseUrl + "/api/Login";




const DEFAULT_HEADERS = {
  "Content-Type": "application/json-patch+json",
  Accept: "application/json",
  "Access-Control-Allow-Origin": "*",
};

function getCurrentUtcDate() {
  const currentDate = new Date();
  const currentDateUtc = Date.UTC(
    currentDate.getUTCFullYear(),
    currentDate.getUTCMonth(),
    currentDate.getUTCDate(),
    currentDate.getUTCHours(),
    currentDate.getUTCMinutes(),
    currentDate.getUTCSeconds()
  );

  return new Date(currentDateUtc);
}

/**
 * 
 * @param {GetLoginChiperTextParams} params 
 * @returns 
 */
export function GetLoginChiperText(params) {

  params.time = getCurrentUtcDate().getTime();

  var key = enc.Utf8.parse(secretKey);
  var iv = enc.Utf8.parse(secretKey);

  var chiperText = AES.encrypt(enc.Utf8.parse(JSON.stringify(body)), key, {
    keySize: 128 / 8,
    iv: iv,
    mode: mode.CBC,
    padding: pad.Pkcs7,
  }).toString();
  return chiperText;
}

export async function LoginRequest(chiperText) {
  const dispatch = useDispatch();
  try {
    let loginRequest = await fetch(baseUrl + "/Login", {
      method: "post",
      body: JSON.stringify({ chiperText }),
      headers: {
        "Content-Type": "application/json-patch+json",
        Accept: "application/json",
      },
    });

    let jwtToken = await loginRequest.json();
    dispatch(setJwtToken(jwtToken));
    return jwtToken;
  } catch (error) {
    console.error(error);
    return null;
  }
}


export async function CheckJwtToken(jwtToken) {
  try {
    const url = `${baseUrl}/CheckJwtToken`;
    let headers = { ...DEFAULT_HEADERS };
    headers.Authorization = `Bearer ${jwtToken}`;

    const { data } = await axios.get(url, {
      headers,
      withCredentials: true,
    });
    return true;
  } catch (error) {
    console.log(error)
    return false;
  }
}

//#region TYPE_DEFINITIONS

/**
* @typedef {Object} GetLoginChiperTextParams
* @property {string} username
* @property {string} password
* @property {string} pushNotificationToken
* @property {int} tokenUserId
* @property {int} tokenCustomerId
* @property {Date} time
**/

//#endregion

I want you yo focus on LoginRequest function.

As you can see I am trying to dispatch the jwtToken on function but As you may also know React doesnt allow me that. Because hooks can only be called in functional components. But we are using this functions at some many places in our app to receive data from the backend.

As you can see our lives depends on this functions because its a heavy data application and we always grab the data from api's like that.

What I am tryna do in here is to have an idea how can I find the best possible , suitable changes on this component to able to use Hooks.

Some says axios interceptors will do the job but ı couldnt find the way actually. İf you enlighten me I would be so thankful to you.

How can I make it happen , How can ı use and dispatch the jwtToken here . I am a junior so I am trying to grab an idea on here . İf I made a mistake just tell me and I will try to fix it.

Hope I made it clear. I would be so thankfull if you enlighten me with this.

Answer 1

Consider writing this as a custom hook:

export function useLoginRequest() {
  return async function() {
    const dispatch = useDispatch();
    try {
      ...

Then in your functional component(s):

const loginRequest = useLoginRequest();

...

await loginRequest(...)