// @flow import React, { useState } from 'react'; import { isNameValid } from 'lbry-redux'; import Button from 'component/button'; import { Form, FormField } from 'component/common/form'; import { INVALID_NAME_ERROR } from 'constants/claim'; import Card from 'component/common/card'; import I18nMessage from 'component/i18nMessage'; import analytics from 'analytics'; export const DEFAULT_BID_FOR_FIRST_CHANNEL = 0.01; type Props = { createChannel: (string, number) => Promise, creatingChannel: boolean, createChannelError: string, claimingReward: boolean, user: User, doToggleInterestedInYoutubeSync: () => void, }; function UserFirstChannel(props: Props) { const { createChannel, creatingChannel, claimingReward, user, createChannelError, doToggleInterestedInYoutubeSync, } = props; const { primary_email: primaryEmail } = user; const initialChannel = primaryEmail ? primaryEmail.split('@')[0] : ''; const [channel, setChannel] = useState(initialChannel); const [nameError, setNameError] = useState(undefined); function handleCreateChannel() { createChannel(`@${channel}`, DEFAULT_BID_FOR_FIRST_CHANNEL).then(channelClaim => { if (channelClaim) { analytics.apiLogPublish(channelClaim); } }); } function handleChannelChange(e) { const { value } = e.target; setChannel(value); if (!isNameValid(value, false)) { setNameError(INVALID_NAME_ERROR); } else { setNameError(); } } return (

{__('Your channel will be used for publishing and commenting.')}

{__('You can have more than one or remove it later.')}

} actions={
@
doToggleInterestedInYoutubeSync()} /> ), }} > Have a YouTube channel? %sync_channel%.
} />
); } export default UserFirstChannel;