🏁 Context API

Luana Lessa — Wed, 17 Aug 2022 17:07:42 +0000

Context API é uma maneira super bacana de passar estados pelos componentes sem precisar utilizar props, permitindo a atualização desse estado em qualquer parte da sua aplicação. Claro que em algumas situações é mais adequado o uso das props, mas , à medida que vamos aumentando àrvore de elementos, pode ficar bem chatinho transportar essas informações sem o uso de um gerenciador de estado global. E ~~caso você não tenha notado~~ esse é o trabalho da Context API. 😅

👾 Em resumo, é só imaginar que a Context API é um portal entre os componentes por onde você vai compartilhar as informações, independente se são elementos que se comunicam ao não. Belezinha?

❔ Como utilizar

Criar um diretório próprio para colocar o seu contexto.
Criar um arquivo index.jsx e dentro dele importar o createContext do react.

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

Criar e exportar o seu context (no mesmo arquivo)

export const MovieContext = createContext({});

👾 Detalhe: cada objeto Contexto (context) vem com um bicho chamado Provider e é através dele que você vai conseguir aplicar mudanças no seu context. E isso acontece porque ele aceita uma props ~eu nao disse que nao usaríamos props asuhuahs~ e todos os componentes filhos terão acesso a ela. Então no próximo passo vamos criar um provider chamado de MovieProvider, onde você vai inserir todas os estados que deseja utilizar na sua aplicação.

Criar e exporta o seu provider (no mesmo arquivo)

export const MovieProvider = (props) => {
    const [ movies, setMovies] = useState(()=>{
        api.get('http://localhost:8000/home')
        .then(response => { setMovies(response.data)
        .catch(err => console.log(err))
    });

    const [ genres, setGenres ] = useState(()=>{
        api.get('http://localhost:8000/home/genres')
        .then(response => setGenres(response.data))
        .catch(err => console.log(err))
    });

    const [ selected, setSelected ] = useState();

    return(
        <MovieContext.Provider
            value={{
                movies,
                genres,
                selected,
                setSelected,
            }}
        >
            {props.children}
        </MovieContext.Provider>
    )
}

Importar o provider no app, e utilizá-lo bem no topo da hierarquia de componentes para criar a sua camada de estados.

import React from 'react';
import { MovieProvider } from './providers/index.jsx';
import Routes from './routes/index.jsx'

function App() {
  return (
    <MovieProvider>
      <GlobalStyle />
      <Routes />
    </MovieProvider>

  );
}

export default App;

Agora é só importar o contexto criado para utilizar as informações do seu provider.

import React, { useContext, useState } from 'react'
import { MovieContext } from '../../providers/index.jsx';

import Header from '../../components/Header'
import MovieList from '../../components/MovieList'

const Home = () => {   
    const { movies, genres } = useContext(MovieContext);

    return (
        <>
            <Header page="home" className="clicked" ></Header>            
            { genres ? genres.map(genre => 
                <MovieList title={genre.title} movies={movies}/>
            ) :  null}
        </>
    )
}

export default Home;

Prontinho, passar perrengue com props nunca mais! 😅

🏁 Getting Started with SQL

Luana Lessa — Wed, 17 Aug 2022 17:05:44 +0000

✔️ Installing PostgreSQL

First, update the system software packages using the following command:

sudo apt update

and install the latest version of PostgreSQL from the default repositories.

sudo apt install postgresql

After intallation, you can confirm that PostgreSQL service is ative, running, enabled or ready to accept connections from clients using the following commands

sudo systemctl is-active postgresql  

sudo systemctl is-enabled postgresql 

sudo systemctl status postgresql 

sudo pg_isready

✔️ Installing pgAdmin

pgAdmin is a management tool for PostgreSQL, but it's not available in the Ubuntu repositories, so we need to install it from the pgAdmin4 APT repository, add the public key and create the repository configuration file.

curl https://www.pgadmin.org/static/packages_pgadmin_org.pub

sudo apt-key add

sudo sh -c 'echo "deb https://ftp.postgresql.org/pub/pgadmin/pgadmin4/apt/$(lsb_release -cs) pgadmin4 main" > /etc/apt/sources.list.d/pgadmin4.list && apt update'

Then install,

sudo apt install pgadmin4

✔️ Installing NodeJs and node-postgres

node-postgres is a collection of node.js modules for interfacing with your PostgreSQL database

sudo apt install nodejs

sudo apt install npm  

npm install pg

🔌 Connecting NodeJs with PostgreSQL

const { Pool } = require('pg');

const pool = new Pool({
    user: 'lessa',
    password: '88eb9394',
    host: '/var/run/postgresql',
    port: 5432,
    database: 'service_management',
});

pool.on('error', (err, client) => {
    console.error('Unexpected error on idle client', err)
    process.exit(-1)
})

const startDatabase = (req, res, query, values) => {
    pool.connect()
        .then(client => {
            return client.query(query, values)
                .then(result => {
                    client.release();
                    res.status(200).send(result.rows)
                })
                .catch(err => {
                    client.release();
                    res.sendStatus(500);

                })
        })
}

🔻 Exemple of data manipulation using pg

const getCustomer = (req, res) => {
    const customer = [req.params.name];
    let query = 'SELECT * FROM customer WHERE deleted_date IS NULL'

    if (customer) {
        query += " AND name LIKE '%'||$1||'%'"
    }

    startDatabase(req, res, query, customer)
}