109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { graphql } from 'gatsby'
|
|
import Img from 'gatsby-image'
|
|
import styled from '@emotion/styled'
|
|
|
|
import Layout from '../components/layout'
|
|
import SEO from '../components/seo'
|
|
|
|
type User = {
|
|
id: string
|
|
username: string
|
|
|
|
// alert customization https://dev.streamlabs.com/v1.0/reference#alerts
|
|
image_href: string
|
|
sound_href: string
|
|
message: string
|
|
user_message: string
|
|
duration: string
|
|
special_text_color: string
|
|
}
|
|
|
|
const Wrapper = styled.div`
|
|
width: 800px;
|
|
max-width: 100%;
|
|
padding: 3em 15px;
|
|
margin: 0 auto;
|
|
`
|
|
|
|
const Data = styled.span`
|
|
display: inline-block;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
padding: 3px 8px;
|
|
`
|
|
|
|
const OauthRedirectPage = ({ location }: { location: Location }) => {
|
|
const [user, setUser] = useState<User | void>(undefined)
|
|
const [githubUsername, setGithubUsername] = useState('')
|
|
const token = location.search.replace('?token=', '')
|
|
|
|
useEffect(() => {
|
|
// load the user
|
|
fetch(`${process.env.GATSBY_BASE_API}/me`, {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
})
|
|
.then(res => res.json())
|
|
.then(res => setUser(res))
|
|
.catch(console.error.bind(console))
|
|
}, [])
|
|
|
|
if (!user) {
|
|
return (
|
|
<Layout>
|
|
<SEO />
|
|
<div>Loading...</div>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<SEO />
|
|
<Wrapper>
|
|
<h3>Nearly there!</h3>
|
|
<div>
|
|
One last step: add a GitHub webhook. Sounds complicated? It's not!
|
|
Let's walk you through it.
|
|
</div>
|
|
<ol>
|
|
<li>
|
|
What's your GitHub username?{' '}
|
|
<input
|
|
value={githubUsername}
|
|
onChange={e => setGithubUsername(e.target.value)}
|
|
/>
|
|
</li>
|
|
<li>
|
|
Head over{' '}
|
|
<a
|
|
href={`https://github.com/sponsors/${githubUsername}/dashboard/webhooks/new`}
|
|
target="_blank"
|
|
>{`https://github.com/sponsors/${githubUsername}/dashboard/webhooks/new`}</a>
|
|
</li>
|
|
<li>
|
|
Fill the form with the following information:
|
|
<ul>
|
|
<li>
|
|
Payload URL:{' '}
|
|
<Data>{`${process.env.GATSBY_BASE_API}/webhook/github/${user.id}`}</Data>
|
|
</li>
|
|
<li>
|
|
Content Type: <Data>application/json</Data>
|
|
</li>
|
|
<li>
|
|
Secret: <Data>{token}</Data>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
Done! When someone sponsors you on GitHub, you will now receive an
|
|
alert on streamlabs.
|
|
</li>
|
|
</ol>
|
|
</Wrapper>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default OauthRedirectPage
|