Criando meu primeiro Widget para o Notion

Photo by Sigmund on Unsplash

Notion é uma ferramenta que faz parte do meu dia a dia, toda a minha vida é organizada nele. E algo que sempre me chamou a atenção foram os widgets que podemos adicionar nele. E recentemente eu descobri uma forma de criar os meus e é isso que nós vamos fazer nesse artigo.

Pré-requisitos

• Ter o node.js instalado
• Ter uma conta no github

Setup do projeto

Criar um projeto react

npx create-react-app notion-clock-widget

Instalar a bibioteca react-gh-pages (ela irá agilizar o processo de deploy no Github pages)

npm install gh-pages --save-dev

Criando o componente de relógio

Vamos começar criando a estrutura básica de um function component

//relogio.js

import React from 'react';
function Relogio() 
  return (
    <div>
      <h2>relogio</h2>
    </div>
  );
}

export default Relogio;

E como estamos criando um relógio eu preciso que ele sempre me mostre o horário atualizado. Para isso vamos utilizar dois hooks do react o useState (para armazenar a hora) e o useEffect (para manter a atualização do estado mesmo depois da página ser renderizada).

import React, { useState, useEffect } from 'react';

function Relogio() {
  const [horarioAtual, setHorarioAtual] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => updateTime(), 1000);

    return function cleanup() {
      clearInterval(timerID);   
    };
  }, []);

  function updateTime() {
    setHorarioAtual(new Date());
  }

  return (
    <div className='clock-container'>
      <h2>{horarioAtual.toLocaleTimeString()}</h2>
    </div>
  );
}

export default Relogio;

Como um relógio tem atualizações a cada 1s nós usamos a função setInterval para chamar a função que irá realizar a atualização do estado do relógio.

Fazendo o deploy no Github Pages

Com o código criado vamos fazer a configuração para o deploy. No arquivo package.json logo abaixo de version adicione o nome “homepage” e na URL substitua pelo seu nome de usuário e o nome do repositório criado.

  "name": "my-app",
  "version": "0.1.0",
+ "homepage": "https://{SEU NOME DE USUARIO}.github.io/{NOME DO REPOSITÓRIO}",
  "private": true,

Depois adicione os comandos de deploy e predeploy em “scripts”

"scripts": {
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",

Quando finalizar faça o commit dessas alterações e o push para o repositório remoto.

Configurando o Github pages

No Github abra o seu repositório e vá em settings e depois em pages e em “Build and deployment” altere a branch para “gh-pages” e a pasta para “/root”.

Tela do github para configuração do Github Pages

Importando o widget no Notion

Com a url que foi gerada para o seu site, abra o notion e adicione o bloco “integrar”

tela do notion

E cole o link que foi utilizado na “homepage” do seu package.json, se tudo funcionar você vai ter um relógio parecido com esse

Captura da tela do Notion com o widget

Se você gostou desse artigo e quer utilizar esse widget, você encontra o link para ele e outras coisas mais na minha página

Marcelle Vargas

Fonte

Biblioteca React Gh Pages

GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub…

Imagem do Bulbasauro, por Dhiogo Luis (https://pin.it/2FJguai)