README
slack-status-sender
Your Slack status, sent to your site.
Install
npm install --save slack-status-sender
or
yarn add slack-status-sender
Usage
Javascript function
Just get the raw data object using the getStatus function.
import { getStatus } from 'slack-status-sender';
const status = getStatus({ userId: 'SlackID', teamId: 'TeamID', token: 'APIToken' });
// status = a promise which will return { data: { status: { emoji, emojiText, content } } }
React
import React, { Component } from 'react'
import { SlackStatus } from 'slack-status-sender'
class Example extends Component {
render () {
return (
<SlackStatus
teamId="YourTeamId"
userId="YourUserId"
token="YourAPIToken"
/>
)
}
}
Javascript plugin
Add these meta tags to your HTML
<meta name="statusify-team-id" content="TeamID" />
<meta name="statusify-token" content="APIToken" />
Add the Javascript plugin
<script>
!function(){"use strict";function e(){var t=document.querySelectorAll(".status-sender"),d=document.querySelector('[name="status-sender-team-id"]').getAttribute("content"),c=document.querySelector('[name="status-sender-token"]').getAttribute("content"),i=function(t){t.innerHTML="Failed to load status",t.classList.remove("status-sender--loading"),t.classList.add("status-sender--error")};t&&[].concat(function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}(t)).forEach(function(o){var t,e,n,s,a,r=o.getAttribute("data-id"),u=o.getAttribute("data-placeholder");(t={userId:r,teamId:d,token:c},n=t.userId,s=t.teamId,a=t.token,fetch("https://sender.etch.co/graphql",{method:"POST",headers:{"Content-Type":"application/json",Authorization:"Bearer "+a},body:JSON.stringify({query:(e={userId:n,teamId:s},'\n query {\n status(userId: "'+e.userId+'", teamId: "'+e.teamId+'") {\n content\n emoji\n emojiText\n }\n }\n ')})}).then(function(t){return t.json()}).then(function(t){return t.data})).then(function(t){if(t.status){var e=t.status,n=e.emoji,s=e.content,a=(""===n||!n)&&(""===s||!s),r='\n <span class="status-sender__emoji">'+(t.status.emoji||"◯")+"</span>\n ";""!==t.status.content&&(r+='<span class="status-sender__text">'+t.status.content+"</span>"),a&&(r+="<span className='status-sender__placeholder'>"+(u||"No status")+"</span>"),o.innerHTML=r,o.classList.remove("status-sender--loading")}else i(o)}).catch(function(){i(o)})})}document.addEventListener("DOMContentLoaded",function(t){e()})}();
</script>
Then add this HTML where you would like to display slack statuses
<div class="slack-status-sender slack-status-sender--loading" data-id="SlackID">
Loading...
</div>
Support
Officially supports last two versions of Chrome, Firefox, Safari and Edge. Should work in Internet Explorer 11 if you polyfill fetch and promises.
License
MIT © etchteam