Skip to content

Commit

Permalink
Merge branch 'main' into tests
Browse files Browse the repository at this point in the history
  • Loading branch information
2002Bishwajeet committed Oct 1, 2024
2 parents 3572121 + ad071f9 commit be576c7
Show file tree
Hide file tree
Showing 21 changed files with 1,052 additions and 526 deletions.
24 changes: 22 additions & 2 deletions packages/mobile/src/app/FeedStack.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import { EmbeddedThumb, PayloadDescriptor, TargetDrive } from '@homebase-id/js-lib/core';
import {
EmbeddedThumb,
HomebaseFile,
NewHomebaseFile,
PayloadDescriptor,
TargetDrive,
} from '@homebase-id/js-lib/core';
import {
createNativeStackNavigator,
NativeStackNavigationOptions,
Expand All @@ -12,11 +18,17 @@ import { Colors } from './Colors';
import { FeedPage } from '../pages/feed/feed-page';
import { PreviewMedia } from '../pages/media-preview-page';
import { PostComposer } from '../pages/feed/post-composer';
import { PostDetailPage } from '../pages/feed/post-detail-page';
import { ChannelDefinition, PostContent } from '@homebase-id/js-lib/public';

export type FeedStackParamList = {
Home: undefined;
Post: {
postId: string;
postKey: string;
channelKey: string;
odinId: string;
postFile?: HomebaseFile<PostContent>;
channel?: HomebaseFile<ChannelDefinition> | NewHomebaseFile<ChannelDefinition>;
};
Compose: undefined;
PreviewMedia: {
Expand Down Expand Up @@ -73,6 +85,14 @@ export const FeedStack = (_props: NativeStackScreenProps<TabStackParamList, 'Fee
animation: 'slide_from_bottom',
}}
/>
<StackFeed.Screen
name="Post"
component={PostDetailPage}
options={{
headerShown: true,
animation: 'slide_from_right',
}}
/>
</StackFeed.Navigator>
);
};
2 changes: 1 addition & 1 deletion packages/mobile/src/app/OdinQueryClient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
getAddReactionMutationOptions,
getRemoveReactionMutationOptions,
} from '../hooks/chat/useChatReaction';
import { getSavePostMutationOptions } from '../hooks/feed/post/usePost';
import { getSavePostMutationOptions } from '../hooks/feed/post/useManagePost';

const queryClient = new QueryClient({
defaultOptions: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,8 @@ import { openURL } from '../../utils/utils';
import { Text } from '../ui/Text/Text';
import Toast from 'react-native-toast-message';
import Clipboard from '@react-native-clipboard/clipboard';

import { TabStackParamList } from '../../app/App';
import { Avatar } from '../ui/Avatars/Avatar';
import { FeedStackParamList } from '../../app/FeedStack';

export const NotificationDay = memo(
({ day, notifications }: { day: Date; notifications: PushNotification[] }) => {
Expand Down Expand Up @@ -117,7 +116,7 @@ const NotificationGroup = ({

const identity = useDotYouClientContext().getIdentity();
const chatNavigator = useNavigation<NavigationProp<ChatStackParamList>>();
const feedNavigator = useNavigation<NavigationProp<TabStackParamList>>();
const feedNavigator = useNavigation<NavigationProp<FeedStackParamList>>();

return (
<View
Expand Down Expand Up @@ -328,7 +327,7 @@ export const navigateOnNotification = (
notification: PushNotification,
identity: string,
chatNavigator: NavigationProp<ChatStackParamList>,
feedNavigator: NavigationProp<TabStackParamList>
feedNavigator: NavigationProp<FeedStackParamList>
) => {
if (notification.options.appId === OWNER_APP_ID) {
// Based on type, we show different messages
Expand All @@ -347,7 +346,10 @@ export const navigateOnNotification = (
// Navigate to owner console:
openURL(`https://${identity}/apps/mail/inbox/${notification.options.typeId}`);
} else if (notification.options.appId === FEED_APP_ID) {
feedNavigator.navigate('Feed');
// if([FEED_NEW_COMMENT_TYPE_ID,FEED_NEW_REACTION_TYPE_ID].includes(notification.options.typeId)){
// feedNavigator.navigate('Post', { postGlobalTransitId : notification.options. });
// }
feedNavigator.navigate('Home');
} else if (notification.options.appId === COMMUNITY_APP_ID) {
openURL(`https://${identity}/apps/community/${notification.options.typeId}`);
} else {
Expand Down
4 changes: 2 additions & 2 deletions packages/mobile/src/components/Feed/Body/PostMedia.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { HomebaseFile } from '@homebase-id/js-lib/core';
import { DEFAULT_PAYLOAD_KEY, HomebaseFile } from '@homebase-id/js-lib/core';
import { getChannelDrive, PostContent } from '@homebase-id/js-lib/public';
import { memo } from 'react';
import { calculateScaledDimensions } from '../../../utils/utils';
Expand All @@ -14,7 +14,7 @@ type PostMediaProps = {
};

export const PostMedia = memo(({ post, doubleTapRef }: PostMediaProps) => {
const payloads = post.fileMetadata.payloads;
const payloads = post?.fileMetadata.payloads?.filter((p) => p.key !== DEFAULT_PAYLOAD_KEY);
const fileId = post.fileId;
const previewThumbnail = post.fileMetadata.appData.previewThumbnail;
const odinId = post.fileMetadata.senderOdinId;
Expand Down
136 changes: 136 additions & 0 deletions packages/mobile/src/components/Feed/Detail/PostDetailCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import { HomebaseFile, NewHomebaseFile, SecurityGroupType } from '@homebase-id/js-lib/core';
import { ChannelDefinition, PostContent, ReactionContext } from '@homebase-id/js-lib/public';
import { memo, useRef } from 'react';
import { ActivityIndicator, Animated, View } from 'react-native';
import { GestureType } from 'react-native-gesture-handler';
import { useDarkMode } from '../../../hooks/useDarkMode';
import { IconButton } from '../../ui/Buttons';
import { DoubleTapHeart } from '../../ui/DoubleTapHeart';
import { Ellipsis } from '../../ui/Icons/icons';
import { AuthorName } from '../../ui/Name';
import { Text } from '../../ui/Text/Text';
import { PostBody } from '../Body/PostBody';
import { PostMedia } from '../Body/PostMedia';
import { PostInteracts } from '../Interacts/PostInteracts';
import { ShareContext } from '../Interacts/Share/ShareModal';
import { PostMeta, ToGroupBlock } from '../Meta/Meta';
import { postTeaserCardStyle } from '../PostTeaserCard';
import { Colors } from '../../../app/Colors';
import { Avatar } from '../../ui/Avatars/Avatar';
import { PostActionProps } from '../Interacts/PostActionModal';
import { useDotYouClientContext } from 'feed-app-common';

export const PostDetailCard = memo(
({
odinId,
channel,
postFile,
onReactionPress,
onSharePress,
onMorePress,
onEmojiModalOpen,
}: {
odinId?: string;
channel?: HomebaseFile<ChannelDefinition> | NewHomebaseFile<ChannelDefinition>;
postFile?: HomebaseFile<PostContent>;
onReactionPress: (context: ReactionContext) => void;
onSharePress: (context: ShareContext) => void;
onMorePress: (context: PostActionProps) => void;
onEmojiModalOpen: (context: ReactionContext) => void;
}) => {
const { isDarkMode } = useDarkMode();
const doubleTapRef = useRef<GestureType>();
const identity = useDotYouClientContext().getIdentity();

if (!postFile) return <ActivityIndicator />;
const post = postFile.fileMetadata.appData.content;
const authorOdinId = post.authorOdinId || odinId;
const isPublic =
channel?.serverMetadata?.accessControlList?.requiredSecurityGroup ===
SecurityGroupType.Anonymous ||
channel?.serverMetadata?.accessControlList?.requiredSecurityGroup ===
SecurityGroupType.Authenticated;
const groupPost = authorOdinId !== (odinId || identity) && (odinId || identity) && authorOdinId;

const onPostActionPress = () => {
onMorePress?.({
odinId: odinId || postFile.fileMetadata.senderOdinId,
postFile,
channel,
isGroupPost: !!groupPost,
isAuthor: authorOdinId === identity,
});
};

return (
<Animated.View
style={{
padding: 10,
elevation: 5,
backgroundColor: isDarkMode ? Colors.black : Colors.white,
borderRadius: 5,
flexDirection: 'column',
}}
>
<View style={postTeaserCardStyle.header}>
<Avatar
odinId={authorOdinId || ''}
imageSize={postTeaserCardStyle.imageSize}
style={postTeaserCardStyle.imageSize}
/>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row' }}>
<Text
style={{
fontSize: 17,
fontWeight: '400',
opacity: 0.7,
color: isDarkMode ? Colors.slate[50] : Colors.slate[900],
}}
>
<AuthorName odinId={post.authorOdinId} />
</Text>
<ToGroupBlock
odinId={odinId}
authorOdinId={authorOdinId}
channel={channel || undefined}
/>
</View>
<PostMeta
postFile={postFile}
channel={channel || undefined}
odinId={odinId}
authorOdinId={authorOdinId}
/>
</View>
<IconButton icon={<Ellipsis />} onPress={onPostActionPress} />
</View>
<PostBody
post={post}
odinId={postFile.fileMetadata.senderOdinId}
fileId={postFile.fileId}
globalTransitId={postFile.fileMetadata.globalTransitId}
lastModified={postFile.fileMetadata.updated}
payloads={postFile.fileMetadata.payloads}
/>
<DoubleTapHeart
doubleTapRef={doubleTapRef}
postFile={postFile}
odinId={postFile.fileMetadata.senderOdinId}
>
<PostMedia post={postFile} doubleTapRef={doubleTapRef} />
</DoubleTapHeart>
<PostInteracts
postFile={postFile}
// onCommentPress={onCommentPress}
onReactionPress={onReactionPress}
onSharePress={onSharePress}
onEmojiModalOpen={onEmojiModalOpen}
isPublic={isPublic}
showCommentPreview={false}
showSummary
/>
</Animated.View>
);
}
);
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Asset, launchImageLibrary } from 'react-native-image-picker';
import { IconButton } from '../../../ui/Buttons';
import { FileOverview } from '../../../Files/FileOverview';
import TextButton from '../../../ui/Text/Text-Button';
import { TextInput } from 'react-native-gesture-handler';

export const CommentComposer = memo(
({
Expand All @@ -27,12 +28,14 @@ export const CommentComposer = memo(
canReact,
onReplyCancel,
replyOdinId,
isBottomSheet = true,
}: {
context: ReactionContext;
replyThreadId?: string;
canReact?: CanReactInfo;
onReplyCancel?: () => void;
replyOdinId?: string;
isBottomSheet?: boolean;
}) => {
const {
mutateAsync: postComment,
Expand Down Expand Up @@ -171,20 +174,37 @@ export const CommentComposer = memo(
alignItems: 'center',
}}
>
<BottomSheetTextInput
value={comment}
onChangeText={setComment}
placeholder={t('Add a comment...')}
style={{
flex: 1,
maxHeight: 80,
paddingVertical: 8,
color: isDarkMode ? Colors.white : Colors.black,
}}
multiline
textAlignVertical="center" // Android only
autoCapitalize="sentences"
/>
{isBottomSheet ? (
<BottomSheetTextInput
value={comment}
onChangeText={setComment}
placeholder={t('Add a comment...')}
style={{
flex: 1,
maxHeight: 80,
paddingVertical: 8,
color: isDarkMode ? Colors.white : Colors.black,
}}
multiline
textAlignVertical="center" // Android only
autoCapitalize="sentences"
/>
) : (
<TextInput
value={comment}
onChangeText={setComment}
placeholder={t('Add a comment...')}
style={{
flex: 1,
maxHeight: 80,
paddingVertical: 8,
color: isDarkMode ? Colors.white : Colors.black,
}}
multiline
textAlignVertical="center" // Android only
autoCapitalize="sentences"
/>
)}
<IconButton icon={<Images />} onPress={handleImageIconPress} />
</View>
</Animated.View>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
BottomSheetFooter,
BottomSheetFooterProps,
BottomSheetModal,
BottomSheetView,
} from '@gorhom/bottom-sheet';
import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
import {
Expand All @@ -29,8 +28,10 @@ import { CommentComposer } from './CommentComposer';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { HomebaseFile, ReactionFile } from '@homebase-id/js-lib/core';
import { t } from 'feed-app-common';
import { EmptyComment } from './EmptyComment';
import { useBottomSheetBackHandler } from '../../../../hooks/useBottomSheetBackHandler';


export interface CommentModalMethods {
setContext: (context: ReactionContext & CanReactInfo) => void;
dismiss: () => void;
Expand Down Expand Up @@ -166,7 +167,7 @@ export const CommentsModal = memo(
fetchNextPage();
}
}}
ListEmptyComponent={EmptyComponent}
ListEmptyComponent={EmptyComment}
onEndReachedThreshold={0.3}
renderItem={renderItem}
ListFooterComponent={listFooter}
Expand All @@ -178,41 +179,15 @@ export const CommentsModal = memo(
})
);

const EmptyComponent = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text
style={{
fontSize: 18,
fontWeight: '600',
marginBottom: 16,
textAlign: 'center',
}}
>
{t('No Comments yet')}
</Text>
<Text
style={{
fontSize: 14,
fontWeight: '400',
color: Colors.gray[500],
}}
>
Be the first to comment on this post.
</Text>
</View>
);
};

const CommentsLoader = () => {
export const CommentsLoader = () => {
const { isDarkMode } = useDarkMode();
return (
<BottomSheetView style={styles.container}>
<View style={styles.container}>
<ActivityIndicator
size="large"
color={isDarkMode ? Colors.indigo[400] : Colors.indigo[700]}
/>
</BottomSheetView>
</View>
);
};

Expand Down
Loading

0 comments on commit be576c7

Please sign in to comment.