@brandonireland/umgutilities v0.1.3
UMG Utility Library
The purpose of this library is to provide reusable API fetches to both Spotify & Contentful without the need to rewrite the same logic across multiple projects. Due to the time limit & nature of this project, there is plenty of room for expanding the libraries functionality. Some of these ideas can be found under the Expanding the Library section.
Table of Contents
- Installation & Setup
- Spotify Requirements
- Contentful Requirements
- Spotify Utilities
- Contentful Utilities
- Expanding the Library
Installation and Setup
Install the library via npm
or yarn
npm i @brandonireland/umgutilities
or yarn install @brandonireland/umgutilities
Spotify Requirements
The Spotify utilities & endpoints this library provides requires a client ID
as well as a client secret
and an app that has a Redirect URI. The details of the authentication process for Spotify can be found here for reference.
Quick tutorial for local development:
- Create a Spotify developer account found here and fill in your details.
- In your Spotify Developer Dashboard, click
Create An App
and provide a Name and Description. - To use this locally while developing, click on your newly developed app in your Dashboard, go to
Edit Settings
in the navigation and underRedirect URIs
and add in a callback URI. For example,https://localhost:3000/callback
- Your
client ID
as well asclient secret
can be found in your applications dashboard.
Contentful Requirements
To utilize the Contentful methods this library provides, requires a space
, environment
, accessToken
& host
provided by Contentful.
Quick Tutorial for local development:
- Create a Contentful Account here.
- Create an Organization and a space for your project.
- In your Spaces home, navigate to the settings tab and click on
API Keys
. - On the top right of the page, select
Add API Key
, then name your API key and click save. - The
space ID
,Content Preview API - access token
, &environment
value will be needed. For development purposes ourhost
key will bepreview.contentful.com
.
Using the Library
Spotify Example
import React, { useEffect, useState } from 'react';
import { SpotifyHelpers } from '@brandonireland/umgutilities';
const SpotifyData = () => {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const spotify = new SpotifyHelpers({ clientId: '<CLIENT_ID>', secret: '<SECRET>' });
spotify.artistId = '2YZyLoL8N0Wb9xBt1NhZWg';
const data = await spotify.getArtist();
setData(data);
}
fetchData();
}, []);
return (
<div>Hello World!</div>
);
}
export default SpotifyData;
The Library provides these Methods: | Method | Parameters | Type | Description | |--------------------|-------------------|------------------------|----------------------------| | getArtist | Id | String | Returns Artist Data | | getArtists | Id | String[] | Returns Array of Artists | | getArtistTopTracks | Id, market | String[], String | Returns Artists Top Tracks | | getRelatedArtists | Id | String | Returns Related Artists | | getArtistAlbums | Id, market, limit | String, String, Number | Returns Artists Albums | | getAlbums | Id | String[] | Returns Array of Albums | | getAlbum | Id | String | Returns Album | | getAlbumTracks | Id, market, limit | String, String, Number | Returns Album Tracks |
The Library provides these Getters
Get | Type | Default Value | Description |
---|---|---|---|
artistId | String | Returns Artist Id | |
limit | Number | 10 | Returns Limit |
market | String | 'US' | Returns Market |
The Library provides these Setters | Set | Type | Description | |----------|--------|--------------------| | artistId | String | Sets the Artist Id | | limit | Number | Sets the Limit | | market | String | Sets the Market |
Contentful Example
import React, { useEffect, useState } from 'react';
import { ContentfulHelpers } from '@brandonireland/umgutilities';
const ContentfulData = () => {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const contentful = new const contentful = new ContentfulHelpers({ space: '<SPACE_ID>', environment: '<ENVIRONMENT>', accessToken: '<CONTENTFUL_PREVIEW_TOKEN>', host: 'preview.contentful.com' });
const data = await contentful.getEntries({id: <ENTRY_ID>, limit: 1, include: 10});
setData(data);
}
fetchData();
}, []);
return (
<div>Hello World!</div>
);
}
export default ContentfulData;
The Library provides these Getters | Get | Type | Default Value | Description | |---------|--------|---------------|------------------| | limit | Number | 1 | Returns Limit | | include | Number | 10 | Returns included |
The Library provides these Setters
Set | Type | Description |
---|---|---|
limit | Number | Sets the Limit |
include | Number | Sets the amount to include |
Expanding the Library
This library could be expanded in many directions. Firstly, the Spotify methods could be expanded to hit different spotify endpoints like Search, Playlists, Shows, etc. The Spotify api can be found here for reference to give a few ideas.
Secondly, the Contentful Methods could be expanded into returning data in a formatted way thats easy to work with. Thirdly, the library could add new classes to support other API's that UMG utilizes frequently.