Browsers_splitted.js

import React, {useEffect, useState} from 'react'
import {FlatList, StyleSheet, View} from 'react-native'

import AddModal from '../components/AddModal'
import LoadingIndicator from '../components/LoadingIndicator'
import BrowserItem from '../components/BrowserItem'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
})

function useBrowsers(url) {
  const [loading, setLoading] = useState(true)
  const [browsers, setBrowsers] = useState([])

  const [modalVisible, setModalVisible] = useState(false)
  const [description, setDescription] = useState('')

  const changeDescription = (description) => {
    setDescription(description)
    setModalVisible(!modalVisible)
  }

  const changeOpacity = () => {
    setModalVisible(!modalVisible)
    console.log('changeOpacity')
  }

  useEffect(() => {
    fetch(URL)
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.Browsers
      })
      .then((browsers) => {
        setBrowsers(browsers)
        // console.log(browsers)
        setLoading(false)
      })
      .catch((error) => {
        console.log(error)
      })
      .finally(() => setLoading(false))
  }, [])

  return {
    loading,
    browsers,
    modalVisible,
    description,
    changeDescription,
    changeOpacity,
  }
}

function BrowsersList({
  loading,
  browsers,
  modalVisible,
  description,
  changeDescription,
  changeOpacity,
}) {
  return (
    <View style={styles.container}>
      {loading ? (
        <LoadingIndicator />
      ) : (
        <View>
          <AddModal
            modalVisible={modalVisible}
            changeOpacity={() => changeOpacity()}
            description={description}
          />
          <FlatList
            data={browsers}
            keyExtractor={(browser) => browser.fullname}
            renderItem={({item}) => (
              <BrowserItem
                fullname={item.fullname}
                image={item.image}
                linkToBrowser={item.linkToBrowser}
                minMemory={item.minMemory}
                currentVersion={item.currentVersion}
                minimumRAM={item.minimumRAM}
                description={item.description}
                windows={item.windows}
                mac={item.mac}
                linux={item.linux}
                ubuntu={item.ubuntu}
                fedora={item.fedora}
                stars={item.stars}
                changeDescription={() => changeDescription(item.description)}
              />
            )}
          />
        </View>
      )}
    </View>
  )
}

function Browsers() {
  return <BrowsersList {...useBrowsers('https://google.com/myData.json')} />
}

export default Browsers