MiniSDK

0001 - Component v1.js

const { useState, useEffect } = React;

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
   axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
        setPosts(res.data.slice(0, 10));
        console.log(posts);
    });
  }, []);

  return (
    <div>{posts.map(post => <div key={post.id}>{post.content}</div>)}</div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

0002 - Post API.js

class Posts {
  constructor(instance) {
    this.instance = instance;
  }

  list() {
    return this.instance.get('posts');
  }

  create(data) {
    return this.instance.post(
      `posts`,
      data
    );
  }

  update(postId, data) {
    return this.instance.patch(`posts/${postId}`, data);
  }
}

export default (...params) => new Posts(...params);

0003 - API.js

import config from './config';
import postFactory from './posts';

export class Api {
  constructor(url) {
    const hasUserHeader = true;
    this.instance = config(
      url,
      hasUserHeader
    ).instance();
  }

  posts(options = {}) {
    return postFactory(this.instance, options);
  }

}

export default (params) => new Api(params);

0004 - Config.js

import axios from 'axios';
import { getToken, getUser } from '../helper/authentication';

export class Config {
  constructor({
    api_url = 'http://localhost:3333',
    has_user_header
  }) {
    if (!api_url) throw new Error('Missing api_url');
    this.axios = this.create(api_url, has_user_header);

    this.intercept('request');
    this.intercept('response', ({ data }) => data);
  }

  create(apiUrl, has_user_header) {
    return axios.create({
      baseURL: apiUrl,
      timeout: 30000,
      headers: {
        'Content-Type': 'application/json',
        app: 'exemple/app',
        ...(has_user_header ? { user: {toString: () => getUser().email} } : {}),
        ...(has_user_header ? { authorization: { toString: () => getToken() }} : {})
      },
    });
  }

  intercept(
    hook,
    successFn = console.log,
    errFn = console.error
  ) {
    const allowedHooks = new Set(['request', 'response']);
    if (!allowedHooks.has(hook))
      throw new Error(
        'Just request and response are allowed to be intercepted',
      );
    this.axios.interceptors[hook].use(
      async (request) => {
        const data = successFn(request);
        if (hook === 'response' && !!data) return successFn(request);
        return request;
      },
      (error) => {
        errFn(error);
        return Promise.reject(error);
      },
    );
  }

  instance() {
    return this.axios;
  }
}

export default (config) => new Config(config);

0005 - Component v2 - using sdk.js

import { useState, useEffect } from 'react';
import API from 'infra/services/api'

const api = API("https://jsonplaceholder.typicode.com/")
function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    api.posts().list().then((data) => {
        setPosts(data.slice(0, 10));
        console.log(posts);
    })
  }, []);

  return (
    <div>{posts.map(post => <div key={post.id}>{post.content}</div>)}</div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));