aleksejkozin

import React 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',

aleksejkozin

import React from 'react'
import {BrowsersList} from './components/BrowsersList'
import {useBrowsers} from './hooks/useBrowsers'

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

aleksejkozin

// useBrowsers.js
...
return {
    loading,
    browsers,
    modalVisible,
    descripton,
    changeDescription,
    changeOpacity,
  }

aleksejkozin

export type Browser = {
  fullname: string // we expect "fullname" Browser field to be a string
  image: string
  linkToBrowser: string
  minMemory: string
  currentVersion: string
  minimumRAM: string
  description: string
  windows: boolean
  mac: boolean

aleksejkozin

// ...

export type Browser = {
  fullname: string // we expect "fullname" Browser field to be a string
  image: string
  linkToBrowser: string
  minMemory: string
  currentVersion: string
  minimumRAM: string
  description: string

aleksejkozin

import {useEffect, useState} from 'react'
import {BrowsersListProps} from '../components/BrowsersList'

export function useBrowsers(url: string): BrowsersListProps {
  const [loading, setLoading] = useState(true)
  
 // ...

aleksejkozin

export type BrowsersListProps = {
  loading: boolean
  browsers: Browser[]
  modalVisible: boolean
  description: string
  changeDescription: (description: string) => void
  changeOpacity: () => void
}

aleksejkozin

import React 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',

aleksejkozin

type UIFriendlyListProps<T> = FlatListProps<T> & {loading?: boolean}

aleksejkozin

import React from 'react'
import {FlatList, FlatListProps, Text} from 'react-native'
import LoadingIndicator from './LoadingIndicator'

export type UIFriendlyListProps<T> = FlatListProps<T> & {loading?: boolean}

export function UIFriendlyList<T>(props: UIFriendlyListProps<T>) {
  if (props.loading) {
    return <LoadingIndicator />
  }