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.

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

feat(mini-mode): comments input #971

Merged
merged 13 commits into from
Feb 21, 2024
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
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
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
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
18 changes: 17 additions & 1 deletion packages/hooks/useIpfs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ import { useSelector } from "react-redux";
import { parseUserId } from "@/networks";
import { selectNFTStorageAPI } from "@/store/slices/settings";
import { generateIpfsKey } from "@/utils/ipfs";
import { AppMode } from "@/utils/types/app-mode";
import { LocalFileData, RemoteFileData } from "@/utils/types/files";

interface UploadPostFilesToPinataParams {
files: LocalFileData[];
pinataJWTKey: string;
mode?: AppMode;
}

interface IPFSUploadProgress {
Expand All @@ -22,6 +24,7 @@ interface IPFSUploadProgress {
export interface PinataFileProps {
file: LocalFileData;
pinataJWTKey: string;
mode?: AppMode;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand why this hook need to be aware of the app mode

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While uploading file from app instead of converting selected file to File type similar to WEB, I just used file URL to create formData and upload it to pinata. So, just to check if we are uploading from web or app I added that appmode

Copy link
Collaborator

@n0izn0iz n0izn0iz Feb 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay, app mode is not related to mobile or desktop, it's the mode of the ui.
an user could use mini-mode on desktop, btw mini means minimalist, not small screen

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use Platform.OS in here directly if possible and remove the new prop

Copy link

@sachin-55 sachin-55 Feb 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, I didn't know that. Will do

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I replaced app mode check with Platform.OS check

}

export const useIpfs = () => {
Expand All @@ -33,10 +36,20 @@ export const useIpfs = () => {
async ({
file,
pinataJWTKey,
mode,
}: PinataFileProps): Promise<string | undefined> => {
try {
const formData = new FormData();
formData.append("file", file.file);
if (mode === "mini") {
//@ts-expect-error: description instead of adding file when adding url in formdata file upload to pinata
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand the comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I state in above comment, to create formData for app side, I did it in that way.

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 @@ -74,6 +87,7 @@ export const useIpfs = () => {
async ({
files,
pinataJWTKey,
mode = "normal",
}: UploadPostFilesToPinataParams): Promise<RemoteFileData[]> => {
setIpfsUploadProgresses([]);

Expand All @@ -83,7 +97,9 @@ export const useIpfs = () => {
const fileIpfsHash = await pinataPinFileToIPFS({
file,
pinataJWTKey,
mode,
});

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

if (file.thumbnailFileData) {
Expand Down
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>
);
};
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