From b42ae421f5f9dbb59c767ee0373a1c0e7d5682ab Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 30 Jul 2019 13:59:28 +0200 Subject: [PATCH] Clickable links and images in home feed --- components/FetchedDataSectionList.js | 1 - package-lock.json | 75 ++++++++++++++++++++++++++++ package.json | 5 ++ screens/HomeScreen.js | 33 ++++++++---- 4 files changed, 103 insertions(+), 11 deletions(-) diff --git a/components/FetchedDataSectionList.js b/components/FetchedDataSectionList.js index b42a31a..c8d4cdf 100644 --- a/components/FetchedDataSectionList.js +++ b/components/FetchedDataSectionList.js @@ -5,7 +5,6 @@ import WebDataManager from "../utils/WebDataManager"; import {Container, Content, Tab, TabHeading, Tabs, Text} from "native-base"; import CustomHeader from "./CustomHeader"; import {RefreshControl, SectionList, View} from "react-native"; -import i18n from "i18n-js"; import CustomMaterialIcon from "./CustomMaterialIcon"; type Props = { diff --git a/package-lock.json b/package-lock.json index 42a7c39..294e72a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1609,6 +1609,14 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, + "autolinker": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.1.0.tgz", + "integrity": "sha512-FLPmzHwLqTUZlTwXTGSM1wOcu5TrsZcOc6YPq/Kdpzp+CBNPjUzKfPvHnFx+xuPZEerY1hRY96ISAm4S1A6MTw==", + "requires": { + "tslib": "^1.9.3" + } + }, "babel-plugin-module-resolver": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.2.0.tgz", @@ -4276,6 +4284,14 @@ "invert-kv": "^1.0.0" } }, + "linkify-it": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-1.2.4.tgz", + "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=", + "requires": { + "uc.micro": "^1.0.1" + } + }, "load-json-file": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", @@ -4424,6 +4440,11 @@ "buffer-alloc": "^1.1.0" } }, + "mdurl": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", + "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=" + }, "mem": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz", @@ -5914,6 +5935,15 @@ } } }, + "react-native-autolink": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/react-native-autolink/-/react-native-autolink-1.8.1.tgz", + "integrity": "sha512-S/Zr4+xS2tR1zsskN0JnuGQ1JuXOjzfTCD/ihAGSk6Nsaepf1UKFspii2zjPq8vLSq36ivUPhT4Lr4H2l6eCJg==", + "requires": { + "autolinker": "^3.0.3", + "prop-types": "^15.7.2" + } + }, "react-native-branch": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-2.2.5.tgz", @@ -5946,6 +5976,28 @@ "prop-types": "^15.5.10" } }, + "react-native-hyperlink": { + "version": "0.0.14", + "resolved": "https://registry.npmjs.org/react-native-hyperlink/-/react-native-hyperlink-0.0.14.tgz", + "integrity": "sha1-E4u/5bQQZn0eN/BKK0cTFjqw7YE=", + "requires": { + "linkify-it": "^1.2.0", + "mdurl": "^1.0.0" + } + }, + "react-native-image-pan-zoom": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.11.tgz", + "integrity": "sha512-ZCisGUFpPchHXsjT7ZI0anlSLPgcTmjRKXqpVnPu3RDWFXfKjuL4zpY57DX4Y8YgGZCpbf9fApN7KjVYody2Mw==" + }, + "react-native-image-zoom-viewer": { + "version": "2.2.26", + "resolved": "https://registry.npmjs.org/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-2.2.26.tgz", + "integrity": "sha512-Mh4+CJQCDcAumLFXLlDk8nQ5iMxNnupc9HwktsZ3I/v4HULcFPmTLDQ0HGAxjLa5foZRPnKDN06iKGsEb9raoA==", + "requires": { + "react-native-image-pan-zoom": "^2.1.9" + } + }, "react-native-iphone-x-helper": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz", @@ -5960,6 +6012,14 @@ "react-native-iphone-x-helper": "^1.0.3" } }, + "react-native-lightbox": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/react-native-lightbox/-/react-native-lightbox-0.8.0.tgz", + "integrity": "sha512-qiPx8ordPiDuyBNIfR0pxxNERSIeOSU0P40bpPSEMyuQ6xsI4JDghyuRFD+onRjIpNnuOolsLCbsTTjeVwAB5g==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-native-maps": { "version": "0.24.2", "resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.24.2.tgz", @@ -5992,6 +6052,11 @@ "dedent": "^0.6.0" } }, + "react-native-scalable-image": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/react-native-scalable-image/-/react-native-scalable-image-0.5.1.tgz", + "integrity": "sha512-bUphGBuRdet6Tx2lkgD9goa6UDcQNV9piiUUWxN59cg5BY7B1OFfkcM+9gAELCBPWqYGEoADEk6MtY35b1Rbpg==" + }, "react-native-screens": { "version": "1.0.0-alpha.22", "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz", @@ -7301,6 +7366,11 @@ "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=" }, + "tslib": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", + "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" + }, "tween-functions": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz", @@ -7321,6 +7391,11 @@ "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" }, + "uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "uglify-es": { "version": "3.3.9", "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz", diff --git a/package.json b/package.json index ba42e57..735753a 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,12 @@ "react-dom": "^16.8.6", "react-i18next": "latest", "react-native": "^0.59.9", + "react-native-autolink": "^1.8.1", + "react-native-hyperlink": "0.0.14", + "react-native-image-zoom-viewer": "^2.2.26", + "react-native-lightbox": "^0.8.0", "react-native-platform-touchable": "^1.1.1", + "react-native-scalable-image": "^0.5.1", "react-native-status-bar-height": "^2.3.1", "react-native-web": "^0.11.4", "react-navigation": "^3.11.0" diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index b699c4f..a68a54c 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -1,15 +1,16 @@ // @flow import * as React from 'react'; -import {Image, Linking} from 'react-native'; -import {Text, Button, Card, CardItem, Left, Body, Thumbnail} from 'native-base'; +import {Image, Linking, TouchableOpacity, View} from 'react-native'; +import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base'; import i18n from "i18n-js"; import CustomMaterialIcon from '../components/CustomMaterialIcon'; import FetchedDataSectionList from "../components/FetchedDataSectionList"; +import Autolink from 'react-native-autolink'; const ICON_AMICALE = require('../assets/amicale.png'); const NAME_AMICALE = 'Amicale INSA Toulouse'; -const FB_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/facebook_data.json"; +const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/facebook_data.json"; /** @@ -33,11 +34,11 @@ export default class HomeScreen extends FetchedDataSectionList { return false; } - getKeyExtractor(item : Object) { + getKeyExtractor(item: Object) { return item !== undefined ? item.id : undefined; } - createDataset(fetchedData : Object) { + createDataset(fetchedData: Object) { let data = []; if (fetchedData.data !== undefined) data = fetchedData.data; @@ -51,7 +52,7 @@ export default class HomeScreen extends FetchedDataSectionList { } getFetchUrl() { - return FB_URL; + return DATA_URL; } /** @@ -64,7 +65,7 @@ export default class HomeScreen extends FetchedDataSectionList { return date.toLocaleString(); } - getRenderItem(item: Object, section : Object, data : Object) { + getRenderItem(item: Object, section: Object, data: Object) { return ( @@ -78,9 +79,21 @@ export default class HomeScreen extends FetchedDataSectionList { - - {item.message} + {item.full_picture !== '' && item.full_picture !== undefined ? + openWebLink(item.full_picture)} + style={{width: '100%', height: 250}}> + + + : } + {item.message !== undefined ? + : + }