RenanBorba / react-native-realm

📴 Aplicação Mobile em React Native para busca de respositórios no Github com o Realm (Offline Storage)

Projeto - Aplicação RepOff Mobile React Native com o RealmDB (Offline Storage)

Aplicação Front-end Mobile desenvolvida em React Native, voltada para a busca de respositórios no Github, permitindo, assim, adicionar repositórios ao aplicativo e consultá-los de maneira offline.

🚀 Tecnologias

• Components
• Realm.io
• Axios
• Github API
• FlatList
• useState
• useEffect
• react-native-vector-icons
• react-native-linear-gradient
• styled-components

▶️ Start

• npm install
• npm run start / npm start

👊 Como contribuir

• Dê um fork nesse repositório
• Crie a sua branch com a feature
• git checkout -b my-feature
• Commit a sua contribuição
• git commit -m 'feat: My feature'
• Push a sua branch
• git push origin my-feature

📣 ⬇ Abaixo, as principais estruturas e interface principal:

src/components/Repository/index.js

import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import
  {
    Container,
    Name,
    Description,
    Stats,
    Stat,
    StatCount,
    Refresh,
    RefreshText
  } from './styles';

export default function Repository({ data, onRefresh }) {
  return (
    <Container>
      <Name>{ data.name }</Name>
      <Description>{ data.description }</Description>

      <Stats>
        <Stat>
          <Icon name="star" size={16} color="#333" />
          <StatCount>{ data.stars }</StatCount>
        </Stat>
        <Stat>
          <Icon name="code-fork" size={16} color="#333" />
          <StatCount>{ data.forks }</StatCount>
        </Stat>
      </Stats>

      <Refresh onPress={ onRefresh }>
        <Icon name="refresh" color="#4169E2" size={16} />
        <RefreshText>ATUALIZAR</RefreshText>
      </Refresh>
    </Container>
  );
};

src/schemas/RepositorySchema.js

export default class RepositorySchema {
  static schema = {
    name: 'Repository',
    primaryKey: 'id',
    properties: {
      id: { type: 'int', indexed: true },
      name: 'string',
      fullName: 'string',
      description: 'string',
      stars: 'int',
      forks: 'int'
    },
  };
};

src/pages/Main/index.js

import React, { useState, useEffect } from 'react';
import { Keyboard } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

import api from '~/services/api';
import getRealm from '~/services/realm';
import Repository from '~/components/Repository';
import
  {
    Container,
    Title,
    Form,
    Input,
    Submit,
    List
  } from './styles';

export default function Main() {
  const [input, setInput] = useState('');
  const [error, setError] = useState(false);
  const [repositories, setRepositories] = useState([]);

  useEffect(() => {
    async function loadRepositories() {
      const realm = await getRealm();

      const data =
        // Ordenar por estrelas
        realm.objects('Repository').sorted('stars', true);

      setRepositories(data);
    }

    loadRepositories();
  }, []);

  async function saveRepository(repository) {
    const data = {
      id: repository.id,
      name: repository.name,
      fullName: repository.full_name,
      description: repository.description,
      stars: repository.stargazers_count,
      forks: repository.forks_count
    };

    const realm = await getRealm();

    realm.write(() => {
      realm.create('Repository', data, 'modified');
    });

    return data;
  }

  async function handleAddRepository() {
    //console.tron.log(input);
    try {
      const response = await api.get(`/repos/${input}`);

      await saveRepository(response.data);

      setInput('');
      setError(false);
      Keyboard.dismiss();
    } catch (err) {

      setError(true);
    }
  }

  async function handleRefreshRepository(repository) {
    const response = await api.get(`/repos/${repository.fullName}`);

    const data = await saveRepository(response.data);

    setRepositories(repositories.map(repo => repo.id === data.id ? data : repo))
  }

  return (
    <Container>
      <Title>Repositórios</Title>

      <Form>
        <Input
          value={ input }
          error={ error }
          onChangeText={ setInput }
          autoCapitalize="none"
          autoCorrect={false}
          placeholder="Procurar repositório..."
        />

        <Submit onPress={ handleAddRepository }>
          <Icon name="add" size={22} color="#FFF"/>
        </Submit>
      </Form>

      <List
        // Fecha teclado ao selecionar listagem
        keyboardShouldPersistTaps="handled"
        data={ repositories }
        keyExtractor={item => String(item.id)}
        renderItem={({ item }) => (
          <Repository data={ item }
            onRefresh={() => handleRefreshRepository(item)} />
        )}
      />

    </Container>
  );
};

Interface principal