Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* adding instagram source * fixed request values * api request change * removed tmp.yaml and logs * updated instagram svg * added styling icon for instagram * fix console.log * fixed small bugs: title and button * fixed avatar icon
- Loading branch information
Showing
22 changed files
with
420 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
frontend/ui/src/pages/Channels/Providers/Instagram/InstagramConnect.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| @import 'assets/scss/fonts.scss'; | ||
| @import 'assets/scss/colors.scss'; | ||
|
|
||
| .wrapper { | ||
| background: white; | ||
| display: block; | ||
| border-radius: 10px; | ||
| padding-left: 96px; | ||
| padding-top: 88px; | ||
| width: 100%; | ||
| padding: 32px; | ||
| margin: 88px 1.5em 0 100px; | ||
| min-height: calc(100vh - 170px); | ||
| } | ||
|
|
||
| .headline { | ||
| @include font-xl; | ||
| font-weight: bold; | ||
| margin-bottom: 8px; | ||
| } | ||
|
|
||
| .backButton { | ||
| display: block; | ||
| margin-bottom: 16px; | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| &:hover { | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| .backIcon { | ||
| height: 13px; | ||
| width: 17px; | ||
| path { | ||
| fill: var(--color-airy-blue); | ||
| } | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| .inputContainer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-bottom: 32px; | ||
| width: 474px; | ||
| margin-top: 16px; | ||
|
|
||
| label { | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| input { | ||
| @include font-base; | ||
| } | ||
| } | ||
|
|
||
| .subtitle { | ||
| display: flex; | ||
| flex-direction: column; | ||
| @include font-s; | ||
| color: var(--color-airy-blue); | ||
| img { | ||
| width: 17px; | ||
| height: 13px; | ||
| } | ||
| } |
152 changes: 152 additions & 0 deletions
152
frontend/ui/src/pages/Channels/Providers/Instagram/InstagramConnect.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import React, {useEffect, useState} from 'react'; | ||
| import {withRouter, RouteComponentProps} from 'react-router-dom'; | ||
| import _, {connect, ConnectedProps} from 'react-redux'; | ||
|
|
||
| import {connectInstagramChannel} from '../../../../actions/channel'; | ||
| import {StateModel} from '../../../../reducers'; | ||
|
|
||
| import {Button, Input, LinkButton, InfoButton} from 'components'; | ||
| import {ConnectChannelInstagramRequestPayload} from 'httpclient'; | ||
| import {ReactComponent as ArrowLeftIcon} from 'assets/images/icons/arrow-left-2.svg'; | ||
|
|
||
| import styles from './InstagramConnect.module.scss'; | ||
|
|
||
| import {CHANNELS_CONNECTED_ROUTE} from '../../../../routes/routes'; | ||
|
|
||
| type InstagramProps = { | ||
| channelId?: string; | ||
| } & RouteComponentProps<{channelId: string}> & | ||
| ConnectedProps<typeof connector>; | ||
|
|
||
| const mapStateToProps = (state: StateModel, props: RouteComponentProps<{channelId: string}>) => ({ | ||
| channel: state.data.channels[props.match.params.channelId], | ||
| }); | ||
|
|
||
| const mapDispatchToProps = { | ||
| connectInstagramChannel, | ||
| }; | ||
|
|
||
| const connector = connect(mapStateToProps, mapDispatchToProps); | ||
|
|
||
| const InstagramConnect = (props: InstagramProps) => { | ||
| const {connectInstagramChannel, channel} = props; | ||
| const [id, setId] = useState(channel?.sourceChannelId || ''); | ||
| const [token, setToken] = useState(''); | ||
| const [accountId, setAccountId] = useState(''); | ||
| const [name, setName] = useState(channel?.metadata?.name || ''); | ||
| const [image, setImage] = useState(channel?.metadata?.imageUrl || ''); | ||
| const [buttonTitle, setButtonTitle] = useState('Connect Page'); | ||
| const [errorMessage, setErrorMessage] = useState(''); | ||
|
|
||
| const buttonStatus = () => { | ||
| return !(id.length > 5 && token != ''); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (channel) { | ||
| setButtonTitle('Update Page'); | ||
| } | ||
| }, []); | ||
|
|
||
| const connectNewChannel = () => { | ||
| const connectPayload: ConnectChannelInstagramRequestPayload = { | ||
| pageId: id, | ||
| pageToken: token, | ||
| accountId: accountId, | ||
| ...(name && | ||
| name !== '' && { | ||
| name, | ||
| }), | ||
| ...(image && | ||
| image !== '' && { | ||
| imageUrl: image, | ||
| }), | ||
| }; | ||
|
|
||
| connectInstagramChannel(connectPayload) | ||
| .then(() => { | ||
| props.history.replace(CHANNELS_CONNECTED_ROUTE + '/instagram'); | ||
| }) | ||
| .catch(() => { | ||
| setErrorMessage('Please check entered value'); | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={styles.wrapper}> | ||
| <h1 className={styles.headline}>Instagram</h1> | ||
| <div> | ||
| <InfoButton | ||
| link="https://airy.co/docs/core/sources/instagram" | ||
| text="more information about this source" | ||
| color="grey"></InfoButton> | ||
|
|
||
| <LinkButton onClick={props.history.goBack} type="button"> | ||
| <ArrowLeftIcon className={styles.backIcon} /> | ||
| Back | ||
| </LinkButton> | ||
| </div> | ||
| <div className={styles.inputContainer}> | ||
| <Input | ||
| id="id" | ||
| label="Facebook Page ID connected to the Instagram account" | ||
| placeholder="Add the Facebook Page ID" | ||
| value={id} | ||
| onChange={(event: React.ChangeEvent<HTMLInputElement>) => setId(event.target.value)} | ||
| minLength={6} | ||
| required={true} | ||
| height={32} | ||
| hint={errorMessage} | ||
| fontClass="font-base" | ||
| /> | ||
| <Input | ||
| id="token" | ||
| label="Token" | ||
| placeholder="Add the page Access Token" | ||
| value={token} | ||
| onChange={(event: React.ChangeEvent<HTMLInputElement>) => setToken(event.target.value)} | ||
| required={true} | ||
| height={32} | ||
| hint={errorMessage} | ||
| fontClass="font-base" | ||
| /> | ||
| <Input | ||
| id="account_id" | ||
| label="ID of the Instagram account" | ||
| placeholder="Add the ID of the Instagram account" | ||
| value={accountId} | ||
| onChange={(event: React.ChangeEvent<HTMLInputElement>) => setAccountId(event.target.value)} | ||
| required={true} | ||
| height={32} | ||
| hint={errorMessage} | ||
| fontClass="font-base" | ||
| /> | ||
| <Input | ||
| id="name" | ||
| label="Name (optional)" | ||
| placeholder="Add a name" | ||
| hint="The standard name will be the same as the Facebook Page" | ||
| value={name} | ||
| onChange={(event: React.ChangeEvent<HTMLInputElement>) => setName(event.target.value)} | ||
| height={32} | ||
| fontClass="font-base" | ||
| /> | ||
| <Input | ||
| id="image" | ||
| label="Image URL (optional)" | ||
| placeholder="Add an URL" | ||
| hint="The standard picture is the same as the Facebook Page" | ||
| value={image} | ||
| onChange={(event: React.ChangeEvent<HTMLInputElement>) => setImage(event.target.value)} | ||
| height={32} | ||
| fontClass="font-base" | ||
| /> | ||
| </div> | ||
| <Button styleVariant="normal" disabled={buttonStatus()} onClick={() => connectNewChannel()}> | ||
| {buttonTitle} | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default withRouter(connector(InstagramConnect)); |
Oops, something went wrong.