diff --git a/src/components/pages/feed.js b/src/components/pages/feed.js
index ac9b3e0..db6941c 100644
--- a/src/components/pages/feed.js
+++ b/src/components/pages/feed.js
@@ -18,7 +18,7 @@ const TEST_POSTS = [
content: "Also learning Claire de Lune feels a lot like reading the communist manifesto",
timestamp: 1596745156000,
media_attachments: [
- {preview_url: TEST_IMAGE}
+ {url: TEST_IMAGE}
]
},
{
@@ -31,7 +31,9 @@ const TEST_POSTS = [
content: "Also learning Claire de Lune feels a lot like reading the communist manifesto",
timestamp: 1596745156000,
media_attachments: [
- {preview_url: TEST_IMAGE}
+ { url: "https://college.mayo.edu/media/mccms/content-assets/campus-amp-community/arizona/mayo-clinic-phoenix-arizona-is453080663-hero-mobile.jpg" },
+ { url: TEST_IMAGE },
+ { url: TEST_IMAGE }
]
}
];
diff --git a/src/components/posts/post.js b/src/components/posts/post.js
index 2a9905f..5767612 100644
--- a/src/components/posts/post.js
+++ b/src/components/posts/post.js
@@ -1,5 +1,12 @@
import React, { useEffect, useState } from "react";
-import { Image, View, Text, Dimensions, TouchableWithoutFeedback } from "react-native";
+import {
+ Image,
+ View,
+ Text,
+ Dimensions,
+ TouchableWithoutFeedback,
+ ScrollView
+} from "react-native";
import {
Menu,
@@ -9,6 +16,7 @@ import {
renderers
} from "react-native-popup-menu";
+
import { pluralize, timeToAge } from "src/interface/rendering"
import PostActionBarJsx from "src/components/posts/post-action-bar";
@@ -39,6 +47,29 @@ function getAutoHeight(w1, h1, w2) {
return w2 * (h1 / w1)
}
+function getDimensionsPromises(uris) {
+ return uris.map(attachment => new Promise(resolve => {
+ Image.getSize(attachment.url, (width, height) => {
+ const autoHeight = getAutoHeight(width, height, SCREEN_WIDTH)
+
+ resolve([SCREEN_WIDTH, autoHeight]);
+ });
+ }));
+}
+
+const PostImageJsx = (props) => {
+ return
+};
+
export const RawPostJsx = (props) => {
const repliesCount = props.data.replies_count;
@@ -74,17 +105,33 @@ export const RawPostJsx = (props) => {
- { /* TODO: support for more than one image per post */ }
-
+ {
+ props.data.media_attachments.length > 1 ?
+
+ {
+ props.data.media_attachments
+ .map((attachment, i) => {
+ return ();
+ })
+ }
+
+ :
+ }
+ reblogged = { props.data.reblogged } />
{ props.data.username } { props.data.content }
@@ -116,18 +163,15 @@ export const PostByDataJsx = (props) => {
*/
let [state, setState] = useState({
- width: 0,
- height: 0,
- loaded: false
+ loaded: false,
+ dimensions: []
});
useEffect(() => {
- Image.getSize(TEST_IMAGE, (width, height) => {
- const newHeight = getAutoHeight(width, height, SCREEN_WIDTH)
-
+ Promise.all(getDimensionsPromises(props.data.media_attachments))
+ .then(dimensions => {
setState({
- width: SCREEN_WIDTH,
- height: newHeight,
+ dimensions: dimensions,
loaded: true
});
});
@@ -138,8 +182,7 @@ export const PostByDataJsx = (props) => {
{ state.loaded ?
: }
@@ -159,37 +202,36 @@ export const PostByIdJsx = (props) => {
reblogged: false,
content: "",
timestamp: 0,
+ loaded: false,
+ dimensions: []
});
useEffect(() => {
// TODO: Make API request using props.id, set it as the state
- ((/* This would be the data retrieved */) => {
- Image.getSize(TEST_IMAGE, (width, height) => {
- const newHeight = getAutoHeight(width, height, SCREEN_WIDTH)
-
+ (() => {
+ Promise.all(getDimensionsPromises([{ url: TEST_IMAGE }]))
+ .then(dimensions => {
setState({
avatar: TEST_IMAGE,
username: "njms",
- media_attachments: [TEST_IMAGE],
+ media_attachments: [{ url: TEST_IMAGE }],
favourited: false,
reblogged: false,
content: "Also learning Claire de Lune feels a lot like reading the communist manifesto",
timestamp: 1596745156000,
- width: SCREEN_WIDTH,
- height: newHeight,
- loaded: true
+ loaded: true,
+ dimensions: dimensions
});
});
})();
- }, []);
+ });
return (
{ state.loaded ?
:
}
@@ -229,7 +271,14 @@ const styles = {
photo: {
flex: 1,
},
-
+ carousel: {
+ width: SCREEN_WIDTH,
+ height: SCREEN_WIDTH,
+ },
+ carouselContainer: {
+ display: "flex",
+ alignItems: "center"
+ },
caption: {
padding: SCREEN_WIDTH / 24,
},