tribe-api-wrapper v1.3.2
tribe-api-wrapper
This package is designed to offer an accessible and efficient interface for the Tribe Leaderboard API. It encompasses a React component for visualizing leaderboards and a set of functions that were intended to facilitate various interactions with the API endpoints.
Project To-Do List
Test live now in storybook
- Update storybook build out
- Fix small errors/consistency in props/options
- Fix docs to be super efficient and explanatory
- Build more components
Table of Contents
- Installation
- Usage
- Examples
- API Docs
- Types
- Contributing
- License
- Links
- Disclaimer
Installation
Install the library using npm:
npm install tribe-api-wrapper
Usage
The library provides a set of functions that can be used directly to interact with the Tribe API. It also includes pre-made React components for common tasks. You can choose to use the functions directly or utilize the components based on your needs.
Importing Functions and Components
import {
getLeaderboard,
getClientList,
getPublicClientUserList,
Leaderboard,
ClientList,
UserList,
ClientCardLG,
ClientCardSM
} from 'tribe-api-wrapper';
Examples
Using Functions Directly
Fetching List of Clients
const clients = await getClientList();
Fetching Leaderboard Data
const data = await getLeaderboard('example-client-id', { timePeriod: 'week', trial: true, badgeFilter: false });
Fetching Public Client User List
const users = await getPublicClientUserList('example-client-id', { timePeriod: 'all', badgeFilter: false });
Examples
Using the getLeaderboard
Function
Note:
The client
parameter is required and can be a specific client ID or the special value \"all\" to get data for all clients.
TypeScript
import { LeaderboardResponse, getLeaderboard } from 'tribe-api-wrapper';
import { useState, useEffect } from 'react';
export default function Home() {
const [leaderboardData, setLeaderboardData] = useState<LeaderboardResponse | null>(null);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
async function fetchData() {
// To fetch leaderboard data for all clients, you can use 'all' as the client parameter:
const data = await getLeaderboard('all', { timePeriod: 'week', trial: true, badgeFilter: false });
if (data instanceof Error) {
setError(data.message);
} else {
setLeaderboardData(data as LeaderboardResponse);
}
}
fetchData();
}, []);
return (
<div>
<h1>Leaderboard</h1>
{error ? (
<div>Error: {error}</div>
) : leaderboardData ? (
leaderboardData.data.map((user) => (
<div key={user.username}>
Username: {user.username} <br />
Twitter Points: {user.twitter_points} <br />
Content Points: {user.content_points} <br />
Total Points: {user.total_points} <br />
{user.has_badge && `Badge: ${user.badge_icon}`} <br />
<hr />
</div>
))
) : (
<div>Loading...</div>
)}
</div>
);
}
JavaScript
import { getLeaderboard } from 'tribe-api-wrapper';
import { useState, useEffect } from 'react';
export default function Home() {
const [leaderboardData, setLeaderboardData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
const data = await getLeaderboard('example-client-id', { timePeriod: 'week', trial: true, badgeFilter: false });
if (data instanceof Error) {
setError(data.message);
} else {
setLeaderboardData(data);
}
}
fetchData();
}, []);
return (
<div>
<h1>Leaderboard</h1>
{error ? (
<div>Error: {error}</div>
) : leaderboardData ? (
leaderboardData.data.map((user) => (
<div key={user.username}>
Username: {user.username} <br />
Twitter Points: {user.twitter_points} <br />
Content Points: {user.content_points} <br />
Total Points: {user.total_points} <br />
{user.has_badge && `Badge: ${user.badge_icon}`} <br />
<hr />
</div>
))
) : (
<div>Loading...</div>
)}
</div>
);
}
Using the Leaderboard
Component
TypeScript
import { Leaderboard } from 'tribe-api-wrapper';
export default function Home() {
return (
<div>
<h1>Leaderboard</h1>
<Leaderboard
client="example-client-id"
timePeriod="week"
trial={true}
badgeFilter={false}
limit={10}
className="custom-leaderboard"
errorClassName="custom-error"
loadingClassName="custom-loading"
tableClassName="custom-table"
headerClassName="custom-header"
rowClassName="custom-row"
badgeClassName="custom-badge"
titleClassName="custom-title"
textClassName="custom-text"
badge_icon="path/to/badge/icon.png"
style={{ border: '1px solid #ccc' }}
/>
</div>
);
}
JavaScript
import { Leaderboard } from 'tribe-api-wrapper';
export default function Home() {
return (
<div>
<h1>Leaderboard</h1>
<Leaderboard
client="example-client-id"
timePeriod="week"
trial={true}
badgeFilter={false}
limit={10}
className="custom-leaderboard"
errorClassName="custom-error"
loadingClassName="custom-loading"
tableClassName="custom-table"
headerClassName="custom-header"
rowClassName="custom-row"
badgeClassName="custom-badge"
titleClassName="custom-title"
textClassName="custom-text"
badge_icon="path/to/badge/icon.png"
style={{ border: '1px solid #ccc' }}
/>
</div>
);
}
Using the UserList
Component
TypeScript
import { UserList } from 'tribe-api-wrapper';
export default function Home() {
return (
<UserList
client="example-client-id"
containerClassName="custom-container"
userClassName="custom-user"
textClassName="custom-text"
style={{ padding: '10px' }}
/>
);
}
JavaScript
import { UserList } from 'tribe-api-wrapper';
export default function Home() {
return (
<UserList
client="example-client-id"
containerClassName="custom-container"
userClassName="custom-user"
textClassName="custom-text"
style={{ padding: '10px' }}
/>
);
}
Using the ClientList
Component
TypeScript
import { ClientList } from 'tribe-api-wrapper';
export default function Home() {
return (
<ClientList
className="custom-list"
clientClassName="custom-client"
avatarClassName="custom-avatar"
backgroundClassName="custom-background"
textClassName="custom-text"
style={{ margin: '20px' }}
/>
);
}
JavaScript
import { ClientList } from 'tribe-api-wrapper';
export default function Home() {
return (
<ClientList
className="custom-list"
clientClassName="custom-client"
avatarClassName="custom-avatar"
backgroundClassName="custom-background"
textClassName="custom-text"
style={{ margin: '20px' }}
/>
);
}
Using the ClientCardLG
Component
TypeScript
import { ClientCardLG } from 'tribe-api-wrapper';
export default function Home() {
return (
<ClientCardLG
client="example-client-id"
cardClassName="custom-card-lg"
bannerClassName="custom-banner"
avatarClassName="custom-avatar"
nameClassName="custom-name"
style={{ boxShadow: '0 0 10px rgba(0,0,0,0.1)' }}
/>
);
}
JavaScript
import { ClientCardLG } from 'tribe-api-wrapper';
export default function Home() {
return (
<ClientCardLG
client="example-client-id"
cardClassName="custom-card-lg"
bannerClassName="custom-banner"
avatarClassName="custom-avatar"
nameClassName="custom-name"
style={{ boxShadow: '0 0 10px rgba(0,0,0,0.1)' }}
/>
);
}
Using the ClientCardSM
Component
TypeScript
import { ClientCardSM } from 'tribe-api-wrapper';
export default function Home() {
return (
<ClientCardSM
client="example-client-id"
cardClassName="custom-card-sm"
bannerClassName="custom-banner"
avatarClassName="custom-avatar"
nameClassName="custom-name"
style={{ boxShadow: '0 0 5px rgba(0,0,0,0.1)' }}
/>
);
}
JavaScript
import { ClientCardSM } from 'tribe-api-wrapper';
export default function Home() {
return (
<ClientCardSM
client="example-client-id"
cardClassName="custom-card-sm"
bannerClassName="custom-banner"
avatarClassName="custom-avatar"
nameClassName="custom-name"
style={{ boxShadow: '0 0 5px rgba(0,0,0,0.1)' }}
/>
);
}
Using the ClientProfile
Component
TypeScript
import { ClientProfile } from 'tribe-api-wrapper';
export default function Home() {
return (
<ClientProfile
client="example-client-id"
containerClassName="custom-container"
bannerClassName="custom-banner"
avatarClassName="custom-avatar"
leaderboardClassName="custom-leaderboard"
style={{ boxShadow: '0 0 5px rgba(0,0,0,0.1)' }}
/>
);
}
JavaScript
import { ClientProfile } from 'tribe-api-wrapper';
export default function Home() {
return (
<ClientProfile
client="example-client-id"
containerClassName="custom-container"
bannerClassName="custom-banner"
avatarClassName="custom-avatar"
leaderboardClassName="custom-leaderboard"
style={{ boxShadow: '0 0 5px rgba(0,0,0,0.1)' }}
/>
);
}
API Docs
Functions API Docs
Component API Docs
Types
Refer to types.ts
for the detailed type definitions.
Contributing
Contributions are welcome! Please follow the contributing guidelines for more information.
License
This project is licensed under the MIT License. See the LICENSE file for details.
Links
Disclaimer
Please note that this library was developed independently and is not associated with or endorsed by Tribe. It is intended for responsible and ethical use and is not designed to violate or circumvent Tribe's terms of service.
The library is provided "as-is," and users are encouraged to review Tribe's terms of service and ensure compliance with all applicable regulations. Use of this library is at your own risk, and the authors make no warranties or representations regarding its legality, reliability, or fitness for a particular purpose.
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago