Merge pull request #289 from systemli/rewrite-twitter-card

♻️ Rewrite Twitter Card to TypeScript

package.json

@@ -38,6 +38,7 @@
     "@types/node": "^18.0.0",
     "@types/react-dom": "^17.0.17",
     "@types/react-router-dom": "^5.0.0",
+    "@types/react-twitter-auth": "^0.0.4",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "@webpack-cli/serve": "^1.7.0",

src/api/Ticker.ts

@@ -36,22 +36,24 @@ export interface TickerInformation {
 export interface TickerTwitter {
   active: boolean
   connected: boolean
+  name: string
+  screen_name: string
+  description: string
+  image_url: string
+}
+
+export interface TickerTwitterFormData {
+  active: boolean
+  disconnect: boolean
+  token: string
+  secret: string
 }
 
 export interface TickerLocation {
   lat: number
   lon: number
 }
 
-/*
-export function putTickerTwitter(data: any, id: number) {
-  return Auth.fetch(`${ApiUrl}/admin/tickers/${id}/twitter`, {
-    body: JSON.stringify(data),
-    method: 'PUT',
-  })
-}
-*/
-
 export function useTickerApi(token: string) {
   const headers = {
     Accept: 'application/json',
@@ -135,6 +137,14 @@ export function useTickerApi(token: string) {
     }).then(response => response.json())
   }
 
+  const putTickerTwitter = (data: TickerTwitterFormData, ticker: Ticker) => {
+    return fetch(`${ApiUrl}/admin/tickers/${ticker.id}/twitter`, {
+      headers: headers,
+      body: JSON.stringify(data),
+      method: 'put',
+    }).then(response => response.json())
+  }
+
   return {
     deleteTicker,
     deleteTickerUser,
@@ -145,5 +155,6 @@ export function useTickerApi(token: string) {
     putTicker,
     putTickerUsers,
     putTickerReset,
+    putTickerTwitter,
   }
 }

src/components/TickerCard.tsx

@@ -38,10 +38,10 @@ const TickerCard: FC<Props> = props => {
         </Card.Description>
       </Card.Content>
       <Card.Content>
-        <Button.Group compact fluid size="tiny">
+        <Button.Group compact size="tiny">
           <TickerModalForm
             ticker={props.ticker}
-            trigger={<Button color="black" content="edit" icon="edit" />}
+            trigger={<Button color="black" content="Edit" icon="edit" />}
           />
         </Button.Group>
       </Card.Content>

src/components/TickerResetModal.tsx

@@ -29,7 +29,6 @@ const TickerResetModal: FC<Props> = props => {
         queryClient.invalidateQueries(['messages', props.ticker.id])
         queryClient.invalidateQueries(['tickerUsers', props.ticker.id])
         queryClient.invalidateQueries(['ticker', props.ticker.id])
-        // TODO: twitter
       })
       .finally(() => {
         setOpen(false)

src/components/TwitterCard.tsx

@@ -0,0 +1,141 @@
+import React, { FC, useCallback } from 'react'
+import { useQueryClient } from 'react-query'
+import TwitterLogin from 'react-twitter-auth'
+import { Button, Card, Container, Icon } from 'semantic-ui-react'
+import { ApiUrl } from '../api/Api'
+import { Ticker, useTickerApi } from '../api/Ticker'
+import useAuth from './useAuth'
+
+interface Props {
+  ticker: Ticker
+}
+
+interface TwitterAuthResponseData {
+  access_secret: string
+  access_token: string
+}
+
+const TwitterCard: FC<Props> = ({ ticker }) => {
+  const queryClient = useQueryClient()
+  const { token } = useAuth()
+  const { putTickerTwitter } = useTickerApi(token)
+
+  const twitter = ticker.twitter || {}
+  const requestTokenUrl = `${ApiUrl}/admin/auth/twitter/request_token?callback=${encodeURI(
+    window.location.origin
+  )}`
+  const loginUrl = `${ApiUrl}/admin/auth/twitter`
+
+  const updateTickerTwitter = useCallback(
+    (active: boolean, token = '', secret = '', disconnect = false) => {
+      const formData = {
+        active,
+        disconnect,
+        token,
+        secret,
+      }
+
+      putTickerTwitter(formData, ticker).then(() =>
+        queryClient.invalidateQueries(['ticker', ticker.id])
+      )
+    },
+    [ticker, putTickerTwitter, queryClient]
+  )
+
+  const toggleActive = useCallback(() => {
+    updateTickerTwitter(!twitter.active)
+  }, [twitter.active, updateTickerTwitter])
+
+  const connect = useCallback(
+    (response: any) => {
+      response.json().then((data: TwitterAuthResponseData) => {
+        updateTickerTwitter(true, data.access_token, data.access_secret)
+      })
+    },
+    [updateTickerTwitter]
+  )
+
+  const disconnect = useCallback(() => {
+    updateTickerTwitter(false, '', '', true)
+  }, [updateTickerTwitter])
+
+  const alertError = useCallback((error: string) => {
+    alert(error)
+  }, [])
+
+  return twitter.connected ? (
+    <Container>
+      <Card fluid>
+        <Card.Content>
+          <Card.Header>
+            <Icon
+              color={twitter.active ? 'green' : 'red'}
+              name={twitter.active ? 'toggle on' : 'toggle off'}
+            />
+            {twitter.name}
+          </Card.Header>
+          <Card.Meta>
+            <a
+              href={'https://twitter.com/' + twitter.screen_name}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              @{twitter.screen_name}
+            </a>
+          </Card.Meta>
+          <Card.Description>{twitter.description}</Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+          <Button.Group compact size="tiny">
+            {twitter.active ? (
+              <Button
+                color="yellow"
+                content="Disable"
+                icon="pause"
+                onClick={toggleActive}
+              />
+            ) : (
+              <Button
+                color="green"
+                content="Enable"
+                icon="play"
+                onClick={toggleActive}
+              />
+            )}
+            <Button
+              color="red"
+              content="Disconnect"
+              icon="delete"
+              onClick={disconnect}
+            />
+          </Button.Group>
+        </Card.Content>
+      </Card>
+    </Container>
+  ) : (
+    <Container>
+      <Card fluid>
+        <Card.Content>
+          You are currently not connected to Twitter. New messages will not be
+          published to your account.
+        </Card.Content>
+        <Card.Content extra>
+          <TwitterLogin
+            // @ts-ignore
+            className="ui button blue tiny compact"
+            loginUrl={loginUrl}
+            onFailure={alertError}
+            onSuccess={connect}
+            requestTokenUrl={requestTokenUrl}
+            showIcon={false}
+          >
+            <Icon name="twitter" />
+            Connect
+          </TwitterLogin>
+        </Card.Content>
+      </Card>
+    </Container>
+  )
+}
+
+export default TwitterCard