CarlosLevir

import axios from 'axios';
import * as env from '../.env.json';

const request = axios.create({
  baseURL: env.youtubeApiUrl
});

export default request;

CarlosLevir

{
  "youtubeApiUrl": "https://www.googleapis.com/youtube/v3",
  "youtubeApiKey": "sua_chave_da_api",
  "vevoChannelId": "UC2pmfLm7iq6Ov1UwYrWYkZA"
}

CarlosLevir

import request from './request';
import * as env from '../.env.json';

const getUnsubscribedTrailer = () => request.get(`/channels?key=${env.youtubeApiKey}&part=brandingSettings&id=${env.vevoChannelId}`);

export { getUnsubscribedTrailer };

CarlosLevir

import React, { Component } from 'react';
import { getUnsubscribedTrailer } from './services/youtubeVideosServices';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      unsubscribedTrailer: ''
    };

CarlosLevir

{
 "kind": "youtube#channelListResponse",
 "etag": "\"XpPGQXPnxQJhLgs6enD_n8JR4Qk/Pjiawp4_6R6R2a8t46glujRUbAU\"",
 "pageInfo": {
  "totalResults": 1,
  "resultsPerPage": 5
 },
 "items": [
  {
   "kind": "youtube#channel",

CarlosLevir

import React, { Component } from 'react';
import Welcome from './components/Welcome';

class App extends Component {
 
  render() {
    return (
      <>
        <Welcome />
      </>

CarlosLevir

  handleSubmit = (e) => {
    e.preventDefault(); 
    const username = e.target.elements.username.value;
    localStorage.setItem('@welcome-app/username', username);
    window.location.reload();
  }

  handleLogout = () => {
    localStorage.removeItem('@welcome-app/username');
    window.location.reload();

CarlosLevir

import React, { Component } from 'react'

class Welcome extends Component {
  
  handleSubmit = (e) => {
    e.preventDefault(); 
    const username = e.target.elements.username.value;
    localStorage.setItem('@welcome-app/username', username);
    window.location.reload();
  }

CarlosLevir

const styles = {
  container: {
    display: 'flex',
    textAlign: 'center',
    flexDirection: 'column',
    minWidth: '300px',
    boxShadow: 'rgba(0, 0, 0, 0.1) 0px 0px 20px',
    background: 'rgb(255, 255, 255)',
    borderRadius: '4px',
    padding: '30px 20px'

CarlosLevir

  <style>
    html, body {
      height: 100%;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #009587;
    }