Created
January 13, 2021 13:43
-
-
Save aleksejkozin/daed6f5b9c206a43f93380baa7790fb5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useEffect, useState } from 'react'; | |
import { FlatList, Text, View, StyleSheet, Modal, TouchableOpacity } from 'react-native'; | |
import AddModal from '../components/AddModal'; | |
import LoadingIndicator from '../components/LoadingIndicator' | |
import BrowserItem from '../components/BrowserItem' | |
import colors from '../config/colors'; | |
function Browsers() { | |
const URL = 'https://google.com/myData.json' | |
// Element of json | |
// {"Browsers":[ | |
// { | |
// "fullname": "Chrome", | |
// "linkToBrowser": "https://google.com", | |
// "image": "https://linktoimage.com/chrome.png", | |
// "minMemory": "1 GB", | |
// "currentVersion": "29.0.1", | |
// "minimumRAM": "2 GB", | |
// "description": "How much RAM do you have? Ha-ha", | |
// "windows": true, | |
// "mac": true, | |
// "linux": true, | |
// "ubuntu": true, | |
// "fedora": false, | |
// "stars": 4, | |
// "id":"chrome" | |
// }, | |
// ... | |
// ] | |
// } | |
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 ( | |
<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 > | |
); | |
}; | |
const styles = StyleSheet.create({ | |
container: { | |
justifyContent: 'center', | |
alignItems: 'center' | |
}, | |
}) | |
export default Browsers; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment