aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/common/PostCarousel.tsx49
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/taggs/TaggPost.tsx24
-rw-r--r--src/components/taggs/TwitterTaggPost.tsx15
-rw-r--r--src/routes/authentication/AuthProvider.tsx2
-rw-r--r--src/screens/profile/SocialMediaTaggs.tsx5
-rw-r--r--src/services/UserProfileService.ts3
-rw-r--r--src/types/types.ts5
8 files changed, 88 insertions, 16 deletions
diff --git a/src/components/common/PostCarousel.tsx b/src/components/common/PostCarousel.tsx
new file mode 100644
index 00000000..cda9d8db
--- /dev/null
+++ b/src/components/common/PostCarousel.tsx
@@ -0,0 +1,49 @@
+import React, {Fragment, useRef, useState} from 'react';
+import {Image} from 'react-native';
+import Carousel, {Pagination} from 'react-native-snap-carousel';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface PostCarouselProps {
+ data: string[];
+ imageStyles: Object;
+ marginBottom: number;
+}
+
+const PostCarousel: React.FC<PostCarouselProps> = ({
+ data,
+ imageStyles,
+ marginBottom,
+}) => {
+ const carouselRef = useRef(null);
+ const [currentPage, setCurrentPage] = useState(0);
+
+ const renderItem: (item: any) => Object = ({item}) => {
+ if (item === null) {
+ return <Fragment />;
+ } else {
+ return <Image style={imageStyles} source={{uri: item}} />;
+ }
+ };
+
+ return (
+ <>
+ <Carousel
+ ref={carouselRef}
+ data={data}
+ renderItem={renderItem}
+ sliderWidth={SCREEN_WIDTH}
+ itemWidth={SCREEN_WIDTH}
+ onSnapToItem={setCurrentPage}
+ />
+ <Pagination
+ activeDotIndex={currentPage}
+ dotsLength={data.length}
+ containerStyle={{marginBottom: marginBottom}}
+ dotColor={'#6ee7e7'}
+ inactiveDotColor={'#e0e0e0'}
+ />
+ </>
+ );
+};
+
+export default PostCarousel;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 87ebe810..c7ed13cd 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -11,5 +11,6 @@ export {default as LoadingIndicator} from './LoadingIndicator';
export {default as DateLabel} from './DateLabel';
export {default as SocialLinkModal} from './SocialLinkModal';
export {default as ComingSoon} from './ComingSoon';
+export {default as PostCarousel} from './PostCarousel';
export {default as TaggDatePicker} from './TaggDatePicker';
export * from './post';
diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx
index 07efd797..071dbfc4 100644
--- a/src/components/taggs/TaggPost.tsx
+++ b/src/components/taggs/TaggPost.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {SimplePostType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
-import {DateLabel} from '../common';
+import {DateLabel, PostCarousel} from '../common';
import TaggPostFooter from './TaggPostFooter';
import Hyperlink from 'react-native-hyperlink';
@@ -14,11 +14,18 @@ const TaggPost: React.FC<TaggPostProps> = ({post}) => {
// Post with image and footer that shows caption
return (
<View style={styles.photoContainer}>
- <View style={styles.image}>
- {post && (
- <Image style={styles.image} source={{uri: post.media_url}} />
- )}
- </View>
+ {post.media_url.length === 1 && post.media_url[0] !== null ? (
+ <Image
+ style={styles.imageWithMargin}
+ source={{uri: post.media_url[0]}}
+ />
+ ) : (
+ <PostCarousel
+ data={post.media_url}
+ imageStyles={styles.image}
+ marginBottom={30}
+ />
+ )}
<TaggPostFooter
// we currently don't have a way to retreive num of likes information
likes={undefined}
@@ -49,6 +56,11 @@ const styles = StyleSheet.create({
width: SCREEN_WIDTH,
height: SCREEN_WIDTH,
backgroundColor: '#eee',
+ },
+ imageWithMargin: {
+ width: SCREEN_WIDTH,
+ height: SCREEN_WIDTH,
+ backgroundColor: '#eee',
marginBottom: 30,
},
textContianer: {marginBottom: 50, paddingHorizontal: 10},
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index c72b4fa8..d0d066c6 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -6,7 +6,7 @@ import LinearGradient from 'react-native-linear-gradient';
import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants';
import {TwitterPostType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
-import {DateLabel} from '../common';
+import {DateLabel, PostCarousel} from '../common';
interface TwitterTaggPostProps {
ownerHandle: string;
@@ -56,9 +56,17 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
<React.Fragment />
)}
{/* Second part of content is an image or empty */}
- {post.media_url ? (
+ {post.media_url.length !== 0 ? (
<View style={styles.imageContainer}>
- <Image style={styles.image} source={{uri: post.media_url}} />
+ {post.media_url.length === 1 && post.media_url[0] !== null ? (
+ <Image style={styles.image} source={{uri: post.media_url[0]}} />
+ ) : (
+ <PostCarousel
+ data={post.media_url}
+ imageStyles={styles.image}
+ marginBottom={0}
+ />
+ )}
</View>
) : (
<React.Fragment />
@@ -89,6 +97,7 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
}>
@{post.in_reply_to.handle}
</Text>
+ {/* We're not displaying any images here in the container */}
<DateLabel
timestamp={post.in_reply_to.timestamp}
type={'short'}
diff --git a/src/routes/authentication/AuthProvider.tsx b/src/routes/authentication/AuthProvider.tsx
index 68182ee3..55a6f3ad 100644
--- a/src/routes/authentication/AuthProvider.tsx
+++ b/src/routes/authentication/AuthProvider.tsx
@@ -169,7 +169,7 @@ const AuthProvider: React.FC = ({children}) => {
loadSocialPosts(userId, social).then((accountData) => {
socialAccounts[social] = accountData;
setSocialAccounts(socialAccounts);
- console.log('Updated posts data', social);
+ console.log('Refreshed posts data:', social);
});
}
setSocialsNeedUpdate([]);
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 2a319326..4b63b843 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -1,5 +1,5 @@
import {RouteProp} from '@react-navigation/native';
-import React, {useEffect, useState} from 'react';
+import React from 'react';
import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
@@ -10,8 +10,7 @@ import {
} from '../../components';
import {AVATAR_GRADIENT} from '../../constants';
import {AuthContext, ProfileContext, ProfileStackParams} from '../../routes';
-import {loadSocialPosts} from '../../services';
-import {SimplePostType, SocialAccountType, TwitterPostType} from '../../types';
+import {SimplePostType, TwitterPostType} from '../../types';
import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';
type SocialMediaTaggsRouteProp = RouteProp<
diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts
index a2d53dbb..6e1d1ef5 100644
--- a/src/services/UserProfileService.ts
+++ b/src/services/UserProfileService.ts
@@ -99,6 +99,7 @@ export const loadSocialPosts: (
const token = await AsyncStorage.getItem('token');
const endpoint = integratedSocialPostsEndpoints[socialType];
const accountData: SocialAccountType = {};
+ accountData.posts = [];
try {
const response = await fetch(endpoint + `${userId}/`, {
method: 'GET',
@@ -115,7 +116,7 @@ export const loadSocialPosts: (
throw 'Unable to fetch posts data from ' + socialType;
}
} catch (error) {
- console.warn(error);
+ console.log(error);
}
return accountData;
};
diff --git a/src/types/types.ts b/src/types/types.ts
index f9929017..97c8ef64 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -30,6 +30,7 @@ interface TwitterReplyType {
handle: string;
profile_pic: string;
text: string;
+ // Not going to display any images here
timestamp: string;
permalink: string;
}
@@ -40,7 +41,7 @@ export interface TwitterPostType {
profile_pic: string;
text: string;
timestamp: string;
- media_url: string;
+ media_url: string[];
permalink: string;
in_reply_to?: TwitterReplyType;
}
@@ -49,7 +50,7 @@ export interface SimplePostType {
post_id: string;
username: string;
profile_pic: string;
- media_url: string;
+ media_url: string[];
media_type: 'text' | 'photo';
caption: string;
timestamp: string;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 14:22:21 +0000