How to detect if variable has redirect

[tirathsharma098]

React Router Dom V6

I have two Loader functions which send req to server

async function loadUserDetail(userId, userAction) {
  const token = getAuthToken();
  const userResponse = await axios({
    url: API.endpoint + '/user/user-detail/' + userId,
    params: {},
    headers: {
      'Content-Type': 'application/json',
      Authorization: token,
    },
    validateStatus: () => true,
  });
  return responseHandler(userResponse);
}

async function getAllPermissions() {
  const token = getAuthToken();
  const permissionsResponse = await axios({
    url: API.endpoint + '/permission/permission-dropdown',
    headers: {
      'Content-Type': 'application/json',
      Authorization: token,
    },
    validateStatus: () => true,
  });
  return responseHandler(permissionsResponse);
}

I have a response handler from which I am managing all loader and action responses.

Response Handler

export function responseHandler(response) {
  if (response?.data?.success === false) {
    toast.error(response.data.message, {
      position: toast.POSITION.TOP_RIGHT,
    });
    return null;
  }
  if (response?.data?.success === true) {
    toast.success(response.data.message, {
      position: toast.POSITION.TOP_RIGHT,
    });
    return response.data.data;
  }
  if (response.status === 401) {
    localStorage.clear();
    toast.error(response.data.message, {
      position: toast.POSITION.TOP_RIGHT,
    });
    // <Navigate to="/" />
    return redirect('/');
  }
  toast.error('Something went wrong', {
    position: toast.POSITION.TOP_RIGHT,
  });
  return redirect('/');
}

And finally I have a loader

export async function loader({ request, params }) {
  const { userId, userAction } = params;
  const responseToSend = {
    permissions: await getAllPermissions(),
    userDetail: await loadUserDetail(userId, userAction),
    userAction,
  };
  return responseToSend;
}

Now the problem is that when response handler returns redirect then loader is returning a object by assigning redirect object as a property of either permissions or userDetail instead of redirecting.

Now in component function

const { userDetail, userAction, permissions } = useLoaderData();

My Question is : After extracting userDetail and permissions how can I detect if any one of them contains redirect object and if contains then just redirect it to where I have redirected from response handler.

Thanks in advance.

[sergiodxa]

The return value of redirect('/') is a Response object, with a 3xx status code and a Location header, so you could do

function isRedirect(response: Response) {
  if (response.status < 300 || response.status > 399) return false;
  if (!response.headers.has("location")) return false;
  return true;
}

[tirathsharma098]

Thank you so much for a reply and I apreciate your time.
But I found Drew solution much better, Thank You again.

[tirathsharma098]

As @sergiodxa mentioned we can achive this in that way but I guess it is not a good Practice.
Best solution : Drew Solution

[kiliman]

Hmm.. I wouldn't say that @sergiodxa solution is not a good practice. It specifically answers what you asked, whether the response is a redirect. This answer is true whether you get it from Remix or Next or any other framework, as that is how the HTTP standard defines a redirect.

Your solution is a custom one-off. It may work in your particular use case, but I wouldn't say it's the better solution.

[tirathsharma098]

Ok Thanks