api.ts

import { client } from '~/services/api.server';
import { getAccessToken } from '~/services/session.server';

import { Team } from './types';

export const getTeam = async (
  request: Request,
  { teamId }: { teamId: string }
): Promise<Team> => {
  const { data } = await client.get(`/teams/${teamId}`, {
    headers: {
      Authorization: `Bearer ${await getAccessToken(request)}`,
    },
  });
  return data;
};

export const updateTeam = async (
  request: Request,
  { teamId, name }: { teamId: string; name: string }
): Promise<Team> => {
  const { data } = await client.patch(
    `/teams/${teamId}`,
    {
      name,
    },
    {
      headers: {
        Authorization: `Bearer ${await getAccessToken(request)}`,
      },
    }
  );
  return data;
};

client.ts

import axios from "axios";

export const client = axios.create({
  baseURL: process.env.API_URL,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
    "X-Requested-With": "XMLHttpRequest",
  },
});

general.tsx

export const action: ActionFunction = async ({ params, request }) => {
  const { name } = Object.fromEntries(await request.formData());

  if (typeof name !== "string") return form.notFilledOutCorrectly();

  try {
    await TeamsApi.updateTeam(request, {
      teamId: params.teamId!,
      name,
    });
    return null;
  } catch (error: any) {
    if (!error.response) {
      throw error;
    }

    const { detail, ...rest } = error.response.data;
    return json<ActionData>(
      {
        generalError: detail,
        formFieldErrors: rest,
      },
      { status: error.response.status }
    );
  }
};