Takeo NPM | npm.io

takeo

A package that make remote resource request and map resource to Model object.

1. Installation

npm install takeo or yarn install takeo

2. Using with typescript

3. Using with javascript

2-1. Import

import {request, models} from 'takeo';

2-2. Making a simple request

const http = new request.Http();
http
  .request({
    url: 'https://jsonplaceholder.typicode.com/Users',
    method: request.Http.GET, // Methods .GET | .POST | .PUT  | .DELETE | .PATCH
    // params: { id: 1 }, // This params will transform to querystring parameter
    data: {}, // POST data
  })
  .then((response) => {
    setPostList(response.data);
  })
  .catch((error) => {
    // console.log('error', error)
  });

2-3. Making request throught Model class

Create a Model class represent to remote resource.(User.js)

import {models} from 'takeo';

export class User extends models.Model {
  static objects = new models.Manager(User);
  static fields = ['id', 'name', 'username', 'email'];

  constructor(data) {
    super(data);
    this.fields = User.fields;
  }

  getManager() {
    return User.objects;
  }
}

Configuration

// The configuration will effect gobally
request.Http.defaultConfig = {
  baseURL: 'https://jsonplaceholder.typicode.com',
  header: {
    // http header here.
  },
  // other config here
};

Fetch data(list)

User.objects
  .filter({username: 'Bret'})
  .then((response) => {
    console.log('Fetch users success', resultSet);
    // resultSet is a list of User Model objects.
  })
  .catch((error) => {
    console.log('Error fetch users', error);
  });

The above line will make a request to '{baseURL}/{model_name}s/' (https://jsonplaceholder.typicode.com/users/). This URL is configureable by overiding a method in User Model class as bellow:

  static getResourceURL(): any {
    return 'custom/url/here'; // ex: '/api/profile' or 'https://example.com/api/profile'
  }

Fetch data(signle resource)

User.objects
  .get({id: 7})
  .then((user) => {
    console.log('Get user', user); // user is a Model(User) object.
  })
  .catch((error) => {
    console.log('Get user error', error);
  });

POST to create a signle resource

const newUser = await User.objects.create({
  email: 'lindsay.ferguson@reqres.in',
  first_name: 'Lindsay',
  last_name: 'Ferguson',
  avatar: 'https://reqres.in/img/faces/8-image.jpg',
});
// newUser is a Model(User) object.

PUT to update a signle resource

newUser.email = 'new.email@example.com';
newUser.save().then((updatedUser) => {
  console.log('Updated', updatedUser);
  // updatedUser is a Model(User) object.
});

DELETE a singole resource

newUser
  .delete()
  .then((result: any) => {
    console.log('Deleted user');
  })
  .catch((error: any) => {
    console.log('Delete user error', error);
  });

GET count resource

User.objects
  .count()
  .then((result: any) => {
    console.log('User count', result);
  })
  .catch((error: any) => {
    console.log('Count user error', error);
  });

3. Advance Usage

3-1. Using your own Manager class

Create a file UserManager.js

import {models} from 'takeo';

export class UserManager extends models.Manager {
  // Override this method to transform response data to Model object
  transformResponseToObject(responseData) {
    const resData = JSON.parse(responseData);
    return new this.model(resData.data);
  }

  // Override this method to transform response data to list of Model objects
  transformResponseToList(responseData) {
    return super.transformResponseToList(responseData);
  }

  // Add your cusutom function to model manager
  // Calling: User.objects.yourCustomFunction()
  yourCustomFunction() {
    // Your code here.
  }
}

Using UserManager as instead of default Manager class within your model class - User.js

import {UserManager} from './UserManager';

export class User extends models.Model {
  static objects = new UserManager(User);
  static fields= ['id', 'email', 'first_name', 'last_name', 'avatar']
  ...
  getManager() {
      return User.objects;
  }
  ...
}

Calling a custom function of your MyManager
```
User.objects.yourCustomFunction();
```

3-2. Custom request config

const user = await User.objects.filter(
  {email: 'email@example.com'},
  {
    url: 'custom-url-here',
    header: {
      // custom-header-here
    },
  },
);