hackernews-expo

Hackernews expo client
git clone http://git.hanabi.in/repos/hackernews-expo.git
Log | Files | Refs | LICENSE

index.js (3082B)

      1 import React, { useEffect, useState } from 'react';
      2 import {
      3   Alert,
      4   TouchableOpacity,
      5   Text,
      6   View,
      7   Linking,
      8   Modal
      9 } from 'react-native';
     10 import moment from 'moment';
     11 import HTML from 'react-native-render-html';
     12 
     13 import fetch from 'node-fetch';
     14 
     15 import {
     16   APIurl,
     17   version
     18 } from '../../../assets/constants/API';
     19 import styles from '../../../assets/styles';
     20 import UserModal from '../userModal';
     21 import StoryModal from '../storyModal';
     22 
     23 function Story({ storyID }) {
     24   const [storyData, setStoryData] = useState(undefined);
     25   const [showUserModal, setShowUserModal] = useState(false);
     26   const [showStoryModal, setShowStoryModal] = useState(
     27     false
     28   );
     29   useEffect(() => {
     30     let isMounted = true;
     31     async function getStoryData() {
     32       if (isMounted) {
     33         const data = await fetch(
     34           `${APIurl}/${version}/item/${storyID}.json`
     35         );
     36         const res = await data.json();
     37         setStoryData(res);
     38       }
     39     }
     40     getStoryData();
     41     return () => {
     42       setStoryData(undefined);
     43       isMounted = false;
     44     };
     45   }, []);
     46   {
     47     return storyData && !storyData.deleted ? (
     48       <View style={styles.storyContainer}>
     49         <Modal
     50           animationType="slide"
     51           transparent={false}
     52           visible={showUserModal}
     53           onRequestClose={() => {
     54             Alert.alert('Modal has been closed.');
     55           }}
     56         >
     57           <UserModal
     58             userID={storyData.by}
     59             setShowUserModal={setShowUserModal}
     60           />
     61         </Modal>
     62         <Modal
     63           animationType="slide"
     64           transparent={false}
     65           visible={showStoryModal}
     66         >
     67           <StoryModal
     68             setShowStoryModal={setShowStoryModal}
     69             storyData={storyData}
     70           />
     71         </Modal>
     72         <TouchableOpacity
     73           onPress={() => setShowUserModal(true)}
     74         >
     75           <Text style={styles.storyUser}>
     76             {storyData.by} • {parseTime(storyData.time)}
     77           </Text>
     78         </TouchableOpacity>
     79         <TouchableOpacity
     80           onPress={() => setShowStoryModal(true)}
     81         >
     82           <Text style={styles.storyTitle}>
     83             {storyData.title}
     84           </Text>
     85 
     86           {storyData.text ? (
     87             <HTML
     88               html={storyData.text}
     89               onLinkPress={(_, href) =>
     90                 Linking.openURL(href)
     91               }
     92             />
     93           ) : (
     94             <></>
     95           )}
     96         </TouchableOpacity>
     97         {storyData.url ? (
     98           <Text
     99             style={styles.storyUrl}
    100             onPress={() => Linking.openURL(storyData.url)}
    101           >
    102             Open URL 🔗
    103           </Text>
    104         ) : (
    105           <></>
    106         )}
    107         <Text>
    108           {storyData.score} upvote
    109           {storyData.score == 1 ? '' : 's'} •{' '}
    110           {storyData.descendants} comment
    111           {storyData.descendants == 1 ? '' : 's'}
    112         </Text>
    113       </View>
    114     ) : (
    115       <Null />
    116     );
    117   }
    118 }
    119 
    120 function Null() {
    121   return <></>;
    122 }
    123 
    124 function parseTime(UNIXtime) {
    125   return moment(UNIXtime * 1000).fromNow();
    126 }
    127 
    128 export default Story;