Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(mini-mode): comments input #971

Merged
merged 13 commits into from
Feb 21, 2024
Merged

feat(mini-mode): comments input #971

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bebbf35
WIP: mini comment input component
sachin-into Feb 12, 2024
fe1844e
replaced NewsFeedInput with MiniCommentInout
sachin-into Feb 13, 2024
d488e8b
added select image and video
sachin-into Feb 13, 2024
c497ecd
added style props to comment wrapper component
sachin-into Feb 13, 2024
797e384
added form data for mini mode in useIpfs hooks,
sachin-into Feb 16, 2024
32f03e7
fix mini mode check on useIpfs
sachin-into Feb 16, 2024
e697952
added description after ts-expect-error
sachin-into Feb 16, 2024
55028d3
Merge branch 'main' of github.com:TERITORI/teritori-dapp into feat/mi…
omniwired Feb 19, 2024
c7159e2
merge with upsteram
omniwired Feb 19, 2024
d6bc993
splitted MiniCommentInput into smaller components of CommentTextInput…
sachin-into Feb 19, 2024
6d75f5a
Merge branch 'feat/mini-comments' of https://github.com/TERITORI/teri…
sachin-into Feb 19, 2024
f1437f9
fixed forward ref type
sachin-into Feb 19, 2024
fda7eaa
fix: replaced appmode check with Platform.OS check in useIPFS hooks
sachin-into Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions assets/icons/audio-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@
"expo-document-picker": "~11.10.1",
"expo-file-system": "~16.0.6",
"expo-font": "~11.10.3",
"expo-image-picker": "^14.7.1",
"expo-linear-gradient": "~12.7.2",
"expo-optimize": "^0.2.20",
"expo-secure-store": "~12.8.1",
Expand Down
13 changes: 12 additions & 1 deletion packages/hooks/useIpfs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import axios from "axios";
import { omit } from "lodash";
import { CID } from "multiformats";
import { useCallback, useMemo, useState } from "react";
import { Platform } from "react-native";
import { useSelector } from "react-redux";

import { parseUserId } from "@/networks";
Expand Down Expand Up @@ -36,7 +37,16 @@ export const useIpfs = () => {
}: PinataFileProps): Promise<string | undefined> => {
try {
const formData = new FormData();
formData.append("file", file.file);
if (Platform.OS !== "web") {
//@ts-expect-error: description - instead of converting selected file to File type as of WEB just using url to prepare formdata upload to pinata
formData.append("file", {
uri: file.url,
name: file.fileName,
type: file.mimeType,
});
} else {
formData.append("file", file.file);
}

const responseFile = await axios({
onUploadProgress: (progressEvent) => {
Expand Down Expand Up @@ -84,6 +94,7 @@ export const useIpfs = () => {
file,
pinataJWTKey,
});

const url = !fileIpfsHash ? "" : "ipfs://" + fileIpfsHash;

if (file.thumbnailFileData) {
Expand Down
148 changes: 75 additions & 73 deletions packages/screens/Mini/Feed/components/detailView/MiniArticlePostDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,11 @@ import CustomAppBar from "../../../components/AppBar/CustomAppBar";

import { Post } from "@/api/feed/v1/feed";
import { BrandText } from "@/components/BrandText";
import { KeyboardAvoidingView } from "@/components/KeyboardAvoidingView";
import { OptimizedImage } from "@/components/OptimizedImage";
import { ScreenContainer } from "@/components/ScreenContainer";
import { CommentsContainer } from "@/components/cards/CommentsContainer";
import {
NewsFeedInput,
NewsFeedInputHandle,
} from "@/components/socialFeed/NewsFeed/NewsFeedInput";
import { NewsFeedInputHandle } from "@/components/socialFeed/NewsFeed/NewsFeedInput";
import { RichText } from "@/components/socialFeed/RichText";
import { SocialCardHeader } from "@/components/socialFeed/SocialCard/SocialCardHeader";
import { SocialCardWrapper } from "@/components/socialFeed/SocialCard/SocialCardWrapper";
Expand All @@ -28,6 +26,7 @@ import {
} from "@/hooks/feed/useFetchComments";
import { useNSUserInfo } from "@/hooks/useNSUserInfo";
import { parseUserId } from "@/networks";
import { MiniCommentInput } from "@/screens/Mini/components/MiniCommentInput";
import { zodTryParseJSON } from "@/utils/sanitize";
import { DEFAULT_USERNAME } from "@/utils/social-feed";
import { fontSemibold16 } from "@/utils/style/fonts";
Expand Down Expand Up @@ -144,80 +143,83 @@ export const MiniArticlePostDetails = ({
noScroll
headerMini={<CustomAppBar backEnabled title={`Article by ${username}`} />}
>
<Animated.ScrollView
ref={aref}
onScroll={scrollHandler}
scrollEventThrottle={1}
>
<View style={{ flex: 1, width: windowWidth - 20 }}>
<SocialCardWrapper post={localPost} refetchFeed={refetchPost}>
{!!coverImage && (
<>
<OptimizedImage
width={windowWidth}
height={200}
sourceURI={thumbnailURI}
fallbackURI={defaultThumbnailImage}
style={{
zIndex: -1,
width: windowWidth,
height: 200 - 2,
borderTopRightRadius: 20,
borderBottomRightRadius: 20,
}}
<KeyboardAvoidingView>
<Animated.ScrollView
ref={aref}
onScroll={scrollHandler}
scrollEventThrottle={1}
>
<View style={{ flex: 1, width: windowWidth - 20 }}>
<SocialCardWrapper post={localPost} refetchFeed={refetchPost}>
{!!coverImage && (
<>
<OptimizedImage
width={windowWidth}
height={200}
sourceURI={thumbnailURI}
fallbackURI={defaultThumbnailImage}
style={{
zIndex: -1,
width: windowWidth,
height: 200 - 2,
borderTopRightRadius: 20,
borderBottomRightRadius: 20,
}}
/>
<SpacerColumn size={3} />
</>
)}
{!!metadataToUse?.title && (
<>
<BrandText style={[fontSemibold16]}>
{metadataToUse.title}
</BrandText>
<SpacerColumn size={1.5} />
</>
)}

<SocialCardHeader
authorAddress={authorAddress}
authorId={localPost.authorId}
createdAt={post.createdAt}
authorMetadata={authorNSInfo?.metadata}
/>

{/*========== Article content */}
<View>
<RichText
initialValue={metadataToUse.message}
isPostConsultation
audioFiles={audioFiles}
postId={postId}
authorId={authorId}
/>
<SpacerColumn size={3} />
</>
)}
{!!metadataToUse?.title && (
<>
<BrandText style={[fontSemibold16]}>
{metadataToUse.title}
</BrandText>
<SpacerColumn size={1.5} />
</>
)}

<SocialCardHeader
authorAddress={authorAddress}
authorId={localPost.authorId}
createdAt={post.createdAt}
authorMetadata={authorNSInfo?.metadata}
/>

{/*========== Article content */}
</View>
<SpacerColumn size={1.5} />
</SocialCardWrapper>
<View>
<RichText
initialValue={metadataToUse.message}
isPostConsultation
audioFiles={audioFiles}
postId={postId}
authorId={authorId}
<SpacerColumn size={3} />
<MiniCommentInput
style={{ alignSelf: "center" }}
ref={feedInputRef}
replyTo={replyTo}
parentId={post.identifier}
onSubmitInProgress={handleSubmitInProgress}
onSubmitSuccess={() => {
setReplyTo(undefined);
refetchComments();
}}
/>
<SpacerColumn size={4} />
<CommentsContainer
cardWidth={windowWidth}
comments={comments}
onPressReply={() => {}}
/>
</View>
<SpacerColumn size={1.5} />
</SocialCardWrapper>
<View>
<NewsFeedInput
style={{ alignSelf: "center" }}
ref={feedInputRef}
type="comment"
replyTo={replyTo}
parentId={post.identifier}
onSubmitInProgress={handleSubmitInProgress}
onSubmitSuccess={() => {
setReplyTo(undefined);
refetchComments();
}}
/>
<CommentsContainer
cardWidth={windowWidth}
comments={comments}
onPressReply={() => {}}
/>
</View>
</View>
</Animated.ScrollView>
</Animated.ScrollView>
</KeyboardAvoidingView>
</ScreenContainer>
);
};
79 changes: 41 additions & 38 deletions packages/screens/Mini/Feed/components/detailView/MiniDefaultPostDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@ import Animated, {
import CustomAppBar from "../../../components/AppBar/CustomAppBar";

import { Post } from "@/api/feed/v1/feed";
import { KeyboardAvoidingView } from "@/components/KeyboardAvoidingView";
import { ScreenContainer } from "@/components/ScreenContainer";
import { CommentsContainer } from "@/components/cards/CommentsContainer";
import {
NewsFeedInput,
NewsFeedInputHandle,
} from "@/components/socialFeed/NewsFeed/NewsFeedInput";
import { NewsFeedInputHandle } from "@/components/socialFeed/NewsFeed/NewsFeedInput";
import { SocialThreadCard } from "@/components/socialFeed/SocialCard/cards/SocialThreadCard";
import { SpacerColumn } from "@/components/spacer";
import {
combineFetchCommentPages,
useFetchComments,
} from "@/hooks/feed/useFetchComments";
import { useAppNavigation } from "@/hooks/navigation/useAppNavigation";
import { useNSUserInfo } from "@/hooks/useNSUserInfo";
import { parseUserId } from "@/networks";
import { MiniCommentInput } from "@/screens/Mini/components/MiniCommentInput";
import { DEFAULT_USERNAME } from "@/utils/social-feed";
import { tinyAddress } from "@/utils/text";
import {
Expand Down Expand Up @@ -149,40 +149,43 @@ const MiniDefaultPostDetails = ({
onScroll={scrollHandler}
scrollEventThrottle={1}
>
<View style={{ flex: 1, width: windowWidth - 20 }}>
{!!post && (
<View style={{ width: "100%" }}>
<SocialThreadCard
refetchFeed={refetchPost}
style={{
borderRadius: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
}}
post={localPost}
isPostConsultation
onPressReply={onPressReply}
/>
</View>
)}
<CommentsContainer
cardWidth={windowWidth - 20}
comments={comments}
onPressReply={onPressReply}
/>
<NewsFeedInput
style={{ alignSelf: "center" }}
ref={feedInputRef}
type="comment"
replyTo={replyTo}
parentId={post.identifier}
onSubmitInProgress={handleSubmitInProgress}
onSubmitSuccess={() => {
setReplyTo(undefined);
refetchComments();
}}
/>
</View>
<KeyboardAvoidingView>
<View style={{ flex: 1, width: windowWidth - 20 }}>
{!!post && (
<View style={{ width: "100%" }}>
<SocialThreadCard
refetchFeed={refetchPost}
style={{
borderRadius: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
}}
post={localPost}
isPostConsultation
onPressReply={onPressReply}
/>
</View>
)}
<CommentsContainer
cardWidth={windowWidth - 20}
comments={comments}
onPressReply={onPressReply}
/>
<SpacerColumn size={3} />
<MiniCommentInput
style={{ alignSelf: "center" }}
ref={feedInputRef}
replyTo={replyTo}
parentId={post.identifier}
onSubmitInProgress={handleSubmitInProgress}
onSubmitSuccess={() => {
setReplyTo(undefined);
refetchComments();
}}
/>
<SpacerColumn size={3} />
</View>
</KeyboardAvoidingView>
</Animated.ScrollView>
</ScreenContainer>
);
Expand Down
Loading
Loading