Extracts NPM | npm.io

Usage

Run one of the following command inside your project directory to install the package:

$ npm i extracts
or
$ yarn add extracts

Single Fetch

// test with zod and React
import { ex } from "extracts";
import z from "zod";

const TypeUser = z.objects({
  id: z.number(),
  username: z.string(),
  name: z.string(),
});

type UserDatum = z.infer<typeof TypeUser>;

const [user, setUser] = useState<Array<UserDatum>>([]);

useEffect(() => {
  // this code will running as async
  (async function () {
    const res = await ex.fetchJSON<Array<UserDatum>>("https://jsonplaceholder.typicode.com/users");

    setUser(res);
  })();
}, []);

// will be convert to
// but adding type definitions
const res = await fetch("https://jsonplaceholder.typicode.com/users").then(resp => resp.json);

// and in above example we assign into state ;)
setUser(res);

Fetching API with customize headers or authorization headers

// cart-services
const { getToken } = getClientSideAuth();

const authHeaders: {
  "Content-Type": "application/json";
  Accept: "application/json";
  Authorization: `Bearer ${getToken}`;
  // .. other customizations
};

const apiClient = "https://api.yourapp.com/v1";

const getListCart = () => {
  const res = await ex.get<Array<CartType>>(`${apiClient}/list-cart`, {
    headers: { ...authHeaders },
  });

  return await res.json();
};

const getVoucher = () => {
  // in here we didn't provide headers because default headers it was setup by default
  // and not need authorization
  const res = await ex.fetchjson<Array<VoucherType>>(`${apiClient}/get-voucher`);

  return await res;
};

getListCart().then(res => console.log("fromjson", res));
getVoucher().then(res => console.log("from get", res));

Extends Extracts into your service API

import { Activities } from "@types/data";
import { Extracts } from "extracts";

export class CoreAPI extends Extracts {
  // override url and assign your api url, and assign this service
  // private is if services API is private and need a authorization
  // default url API is "/" and private false

  constructor() {
    super("/api/your-path");
  }

  // your logic API goes here when use token or not (isPrivate)

  getToken(): string {
    // somehow you get token
    const { token } = getClientAuth();

    return token;
  }

  setToken({ token }: { token: string }) {
    cookie.set("token", token, { expires: 7, path: "/" });
  }
}

class Activity extends CoreAPI {
  getDetailActivities = async (id: number) => {
    return await this.extracts<Activities>(`/activity-groups/${id}`, "GET");
  };

  deleteActivities = async (id: number) => {
    return await this.extracts(`/activity-groups/${id}`, "DELETE", {
      isPrivate: true,
    });
  };

  getAllActivities = async () => {
    return await this.extracts<{ data: Array<Activities> }>("/activity-groups?email=test@gmail.com", "GET");
  };

  createActivities = async (props: Activities) => {
    return await this.extracts("/activity-groups", "POST", {
      json: {
        ...props,
      },
    });
  };

  updateActivities = async (id: number, props: Activities) => {
    return await this.extracts(`/activity-groups/${id}`, "PATCH", {
      json: {
        ...props,
      },
    });
  };
}

class Auth extends CoreAPI {
  login = async ({ email, password }: { email: string; password: string }) => {
    const data = await this.extracts("/sign_in", "POST", {
      json: {
        email,
        password,
      },
    });

    if (data?.meta?.token) {
      this.setToken({
        token: data?.meta?.token,
      });
    }

    return data;
  };
}

And consume it into frontend application ❤