# OniMine

Esse documento sevirá como guia para melhorias/correções e novas implementações do aplicativo `OniMine`.

# 1. Ajustes no layout

## 1.1 Substituição e adição de Icones

- [ ] Corrigir icones do aplicativo que estão com qualidade baixa.
- [ ] Inserir icones no menu lateral como na imagem abaixo.

Ja foi disponibilizado pelo designer os icones do app em formato `svg` que garante alta qualidade de imagem.

## 1.2 Substituição dos Botões e correções de cores

Alguns dos botões do app são imagens, o que não garante qualidade de imagem e dificulta a edição.

Exemplo de botões que estão como imagens:


Solução:
- [ ] Trocar todos os botões por emelentos nativos e utilizar `LinearGradient` para o efeito de gradiente.

## 1.3 Menu Pop-up

Alterações necessária no menu pop-up. (Descrito na legenda abaixo da imagem)


Em Vermelho:
- Área clicável do botão está limitada à parte mais "cinza". Se o usuário clicar fora do limite a ação não é executada.

Em Verde:
- Os botões estão sobrepondo o botão `Nova Página` e parte do menu inferior.

Geral:
- Os icones estão com qualidade baixa.

## 1.3 Responsividade

- [ ] Analisar telas/modals/botões/icones/imagens que não estão devidamente posicionadas ou dimencionadas.

# 2. Organização do código

## 2.1 Requisições para API
Todos os links para API estão declarados explicitamente dentro do codigo de cada componente, o que dificulta a manutenção do código. (Exemplo na imagem abaixo)

- [ ] Alterar todos os link para utilizar uma variável global.

## 2.2 In-line Style
Todos os componentes são estilizados explicitamente na declaração do componente. Além de ser utilizado o componente nativo que possui nomeclatura genérica.
Isso dificulta a legibilidade e a manutenibilidade do código, tendo em vista que todos os componentes possuem o mesmo nome.

Exemplo:

O seguinte componente se trata do titulo da página de `Atividades`.


Todos os componentes de `texto` são componentes `<Text>` nativos, fica dificil visualizar qual componente é resposável por cada texto.

Solução/Sugestão:

Utilizar a biblioteca `styled-component` que facilita a estilização dos componentes nativos em um arquivo separado do código (style.js) e possibilita a renomeclatura dos componentes, assim deixando mais explicito a responsabilidade do componente.

Exemplo:

O componente `<Text></Text>` responsável pelo título da página seria reescrito como `<Title></Title>`.

E a estilização que antes era feita como mostra a imagem imediatamente anterior seria escrita em um arquivo separado desta forma:


E no componente ficaria escrito da seguinte forma:


Perceba a diferença na legibilidade desse código com o da primeira imagem do exemplo.

> Como todo o código do aplicativo está escrito desta forma e levaria muito tempo para mudar todo o projeto, essa abordagem será implementada aos poucos de acordo com a necessidade de alteração das funcionalidades.

# 3. Offline-fist (assíncrono)

## Redux

### O que é Redux?
> Redux é um container de estado previsível para aplicações JavaScript.
>
> Ele ajuda a escrever aplicações que se comportam de maneira consistente, rodando em diferentes ambientes e fáceis de testar.
> Fonte: https://rafaelfragoso.com/redux-thunk-vs-redux-saga-what-to-choose-when-starting-a-new-reactjs-project/

O redux ja é utilizado no projeto, so necessita de uma pequena organização.

## Redux-Saga

O redux-saga é um middleware desenvolvido para tratar ações assíncronas.

Atualmente no projeto está implementado o `redux-thunk` que faz praticamente o mesmo trabalho do redux-saga, porém o redux-saga é mais robusto e melhor escalável.

Além disso é a biblioteca que possuo mais familiaridade.

> Se o seu aplicativo já foi projetado para escala média ou grande, ou se você tem planos ambiciosos para escalá-lo, o saga é a escolha certa.
> Fonte: https://rafaelfragoso.com/redux-thunk-vs-redux-saga-what-to-choose-when-starting-a-new-reactjs-project/

Será necessário refazer o código implementado com `redux-thunk`.

## Redux-Persist

Biblioteca utilizada para facilitar o armazenamento dos dados localmente no dispositivo, essa é uma das ferramentas cruciais que irá possibilitar a utilização das funcionalidades Offline.

## Checklist de atividades

- [ ] Reorganizar todo o codigo do redux
- [ ] Substituir redux-thunk por redux-saga
- [ ] Implementar redux-persist
- [ ] Definir funcionalidades que poderão ser utilizadas Offline.
- [ ] Averiguar se é necessário alguma alteração no back-end. (Para cada funcionalidade).