import React, { FC, useState } from "react" import { useRequestObtainPocketRequestToken } from "../../apis/SettingApi" import { toast } from "react-hot-toast" import { Button, InputField, List, ListItem, Tag, Tooltip } from "@kiwicom/orbit-components" import { ChevronRight, QuestionCircle } from "@kiwicom/orbit-components/icons" import styled from "styled-components" const PocketSettingUnauthenticated: FC = () => { const [consumerKey, setConsumerKey] = useState('') const [fetching, activate] = useActivate() return ( <List type="primary"> <ListItem label="Status" icon={<ChevronRight />}> <Tag size="small">Disconnected</Tag> </ListItem> <ListItem label={ <> Consumer Key <Tooltip content={ <a href="https://getpocket.com/developer/docs/authentication" target="_blank" rel="noreferrer" style={{ wordWrap: 'break-word', color: 'white' }} > https://getpocket.com/developer/docs/authentication </a> }> <QuestionCircle size="small" /> </Tooltip> </> } icon={<ChevronRight />} > <ConsumerKeyInputWrapper> <InputField value={consumerKey} onChange={e => setConsumerKey((e.target as any).value)} size="small" /> <Button onClick={() => activate(consumerKey)} loading={fetching} size="small" > Connect </Button> </ConsumerKeyInputWrapper> </ListItem> </List> ) } const useActivate = (): [boolean, (consumerKey: string) => void] => { const [fetching, obtainPocketRequestToken] = useRequestObtainPocketRequestToken() const activate = (consumerKey: string) => { if (consumerKey.length <= 0) { toast.error('consumer key required') return } const redirectURI = `${window.location.protocol}//${window.location.host}/settings/pocket-auth` obtainPocketRequestToken(consumerKey, redirectURI) .then(requestToken => { window.location.href = `https://getpocket.com/auth/authorize?request_token=${requestToken}&redirect_uri=${redirectURI}` }) } return [fetching, activate] } const ConsumerKeyInputWrapper = styled.div` div[class*="InputField__Field"] { display: inline-block; margin-top: 6px; max-width: 400px; } button { display: inline-flex; margin-left: 10px; } ` export default PocketSettingUnauthenticated