fix: Image upload

TERITORI · Jul 19, 2023 · a0d6e3f · a0d6e3f
1 parent a285e7e
commit a0d6e3f
Show file tree

Hide file tree

Showing 20 changed files with 299 additions and 248 deletions.
diff --git a/packages/components/FilePreview/AudioView.tsx b/packages/components/FilePreview/AudioView.tsx
@@ -4,11 +4,11 @@ import { View, Image, TouchableOpacity } from "react-native";
 import { ActivityIndicator } from "react-native-paper";
 
 import { AudioWaveform } from "./AudioWaveform";
-import { ipfsURLToHTTPURL } from "./ipfs";
 import pauseSVG from "../../../assets/icons/pause.svg";
 import playSVG from "../../../assets/icons/play.svg";
 import { useMaxResolution } from "../../hooks/useMaxResolution";
 import { getAudioDuration } from "../../utils/audio";
+import { ipfsURLToHTTPURL } from "../../utils/ipfs";
 import {
   errorColor,
   neutral00,

diff --git a/packages/components/FilePreview/ImagesFullViewModal.tsx b/packages/components/FilePreview/ImagesFullViewModal.tsx
@@ -7,9 +7,9 @@ import {
 } from "react-native";
 import { SvgProps } from "react-native-svg";
 
-import { ipfsURLToHTTPURL } from "./ipfs";
 import chevronLeft from "../../../assets/icons/chevron-left.svg";
 import chevronRight from "../../../assets/icons/chevron-right.svg";
+import { ipfsURLToHTTPURL } from "../../utils/ipfs";
 import { neutral22, neutral33 } from "../../utils/style/colors";
 import { SVG } from "../SVG";
 import ModalBase from "../modals/ModalBase";

diff --git a/packages/components/FilePreview/ImagesViews.tsx b/packages/components/FilePreview/ImagesViews.tsx
@@ -3,7 +3,7 @@ import { Image, TouchableOpacity, View } from "react-native";
 
 import { DeleteButton } from "./DeleteButton";
 import { ImagesFullViewModal } from "./ImagesFullViewModal";
-import { ipfsURLToHTTPURL } from "./ipfs";
+import { ipfsURLToHTTPURL } from "../../utils/ipfs";
 import { errorColor } from "../../utils/style/colors";
 import { fontSemibold13 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";

diff --git a/packages/components/FilePreview/VideoView.tsx b/packages/components/FilePreview/VideoView.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { View } from "react-native";
 
 import { DeleteButton } from "./DeleteButton";
-import { ipfsURLToHTTPURL } from "./ipfs";
+import { ipfsURLToHTTPURL } from "../../utils/ipfs";
 import { errorColor } from "../../utils/style/colors";
 import { fontSemibold13 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";

diff --git a/packages/components/FilePreview/ipfs.ts b/packages/components/FilePreview/ipfs.ts
diff --git a/packages/components/freelanceServices/Cards/ServiceCard.tsx b/packages/components/freelanceServices/Cards/ServiceCard.tsx
@@ -10,7 +10,7 @@ import {
 import dotsCircle from "../../../../assets/icons/dots-circle.svg";
 import star from "../../../../assets/icons/yellow-star.svg";
 import { GigData } from "../../../screens/FreelanceServices/types/fields";
-import { ipfsPinataUrl } from "../../../utils/ipfs";
+import { ipfsURLToHTTPURL } from "../../../utils/ipfs";
 import { neutral77, yellowDefault } from "../../../utils/style/colors";
 import {
   fontMedium10,
@@ -57,7 +57,7 @@ export const ServiceCard: React.FC<{
       >
         <View style={{ flexDirection: "row" }}>
           <Image
-            source={{ uri: ipfsPinataUrl(gigData.sellerUser.profilePic) }}
+            source={{ uri: ipfsURLToHTTPURL(gigData.sellerUser.profilePic) }}
             style={{ width: 32, height: 32, marginRight: 4 }}
           />
           <View style={{ flexDirection: "column" }}>

diff --git a/packages/components/freelanceServices/FreelanceServicesScreen/FreelanceServicesHeader.tsx b/packages/components/freelanceServices/FreelanceServicesScreen/FreelanceServicesHeader.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { useWindowDimensions, View } from "react-native";
 
 import searchSVG from "../../../../assets/icons/search.svg";
+import { fontSemibold28 } from "../../../utils/style/fonts";
+import { layout } from "../../../utils/style/layout";
 import { BrandText } from "../../BrandText";
 import { SVG } from "../../SVG";
 import { Separator } from "../../Separator";
@@ -12,15 +14,17 @@ export const FreelanceServicesHeader: React.FC = () => {
 
   return (
     <View>
-      <BrandText style={{ fontSize: 28, alignSelf: "center", marginTop: 50 }}>
+      <BrandText
+        style={[fontSemibold28, { alignSelf: "center", marginTop: 48 }]}
+      >
         Find the Perfect Freelance Services for your Business
       </BrandText>
       <TextInputCustom<{ Search: string }>
         label=""
         name="Search"
         width={width > 1024 ? 480 : 300}
         placeHolder="Search..."
-        style={{ alignSelf: "center", marginTop: 30 }}
+        style={{ alignSelf: "center", marginTop: layout.padding_x3_5 }}
       >
         <SVG
           source={searchSVG}
@@ -29,7 +33,7 @@ export const FreelanceServicesHeader: React.FC = () => {
           style={{ marginRight: 12 }}
         />
       </TextInputCustom>
-      <Separator style={{ width: 360, alignSelf: "center", marginTop: 50 }} />
+      <Separator style={{ width: 360, alignSelf: "center", marginTop: 42 }} />
     </View>
   );
 };
diff --git a/...es/components/freelanceServices/FreelanceServicesScreen/FreelanceServicesSellerHeader.tsx b/...es/components/freelanceServices/FreelanceServicesScreen/FreelanceServicesSellerHeader.tsx
@@ -9,51 +9,57 @@ import {
   mustGetCosmosNetwork,
 } from "../../../networks";
 import { useAppNavigation } from "../../../utils/navigation";
+import { fontSemibold28 } from "../../../utils/style/fonts";
+import { layout } from "../../../utils/style/layout";
 import { BrandText } from "../../BrandText";
 import { Separator } from "../../Separator";
 import { SecondaryButton } from "../../buttons/SecondaryButton";
 
 export const FreelanceServicesSellerHeader: React.FC = () => {
   const navigation = useAppNavigation();
   const selectedWallet = useSelectedWallet();
-  const [isSeller, setIsSeller] = useState<boolean>(true);
-  // const [canCreateGig, setCanCreateGig] = useState<boolean>(false);
+  const [isSeller, setIsSeller] = useState(true);
   const networkId = useSelectedNetworkId();
 
   useEffect(() => {
     const checkIsSeller = async () => {
-      const cosmwasmClient = await mustGetNonSigningCosmWasmClient(networkId);
-      const network = mustGetCosmosNetwork(networkId);
-      const sellerQueryClient = new TeritoriSellerQueryClient(
-        cosmwasmClient,
-        network.freelanceSellerAddress!
-      );
-      const profileHash = await sellerQueryClient.getSellerProfile(
-        selectedWallet?.address!
-      );
-      setIsSeller(!!profileHash);
+      try {
+        const cosmwasmClient = await mustGetNonSigningCosmWasmClient(networkId);
+        const network = mustGetCosmosNetwork(networkId);
+        const sellerQueryClient = new TeritoriSellerQueryClient(
+          cosmwasmClient,
+          network.freelanceSellerAddress!
+        );
+        const profileHash = await sellerQueryClient.getSellerProfile(
+          selectedWallet?.address!
+        );
+        setIsSeller(!!profileHash);
+      } catch (e) {
+        console.error("Fail checking isSeller:", e);
+        setIsSeller(false);
+      }
     };
     checkIsSeller();
   }, [networkId, selectedWallet]);
 
   return (
     <View style={{ alignItems: "center" }}>
-      <BrandText style={{ fontSize: 28, alignSelf: "center", marginTop: 50 }}>
+      <BrandText
+        style={[fontSemibold28, { alignSelf: "center", marginTop: 48 }]}
+      >
         Progress through your Efforts
       </BrandText>
-      <View style={{ flexDirection: "row" }}>
-        {!isSeller && (
-          <SecondaryButton
-            style={{ marginTop: 20, marginLeft: 20 }}
-            size="SM"
-            text="Become a Seller"
-            onPress={() => {
-              navigation.navigate("FreelanceServicesProfileSeller");
-            }}
-          />
-        )}
-      </View>
-      <Separator style={{ width: 360, alignSelf: "center", marginTop: 50 }} />
+      {!isSeller && (
+        <SecondaryButton
+          style={{ marginTop: layout.padding_x3_5 }}
+          size="SM"
+          text="Become a Seller"
+          onPress={() => {
+            navigation.navigate("FreelanceServicesProfileSeller");
+          }}
+        />
+      )}
+      <Separator style={{ width: 360, alignSelf: "center", marginTop: 42 }} />
     </View>
   );
 };
diff --git a/packages/components/freelanceServices/GigCreation/GigCreationGallery.tsx b/packages/components/freelanceServices/GigCreation/GigCreationGallery.tsx
@@ -5,8 +5,12 @@ import PdfIcon from "../../../../assets/icons/pdf.svg";
 import PicIcon from "../../../../assets/icons/pic.svg";
 import VideoIcon from "../../../../assets/icons/video.svg";
 import WarningIcon from "../../../../assets/icons/warning.svg";
+import { useFeedbacks } from "../../../context/FeedbacksProvider";
+import { useSelectedNetworkId } from "../../../hooks/useSelectedNetwork";
+import useSelectedWallet from "../../../hooks/useSelectedWallet";
+import { getUserId } from "../../../networks";
 import { GigInfo } from "../../../screens/FreelanceServices/types/fields";
-import { ipfsPinataUrl, uploadFileToIPFS } from "../../../utils/ipfs";
+import { ipfsURLToHTTPURL, uploadFileToIPFS } from "../../../utils/ipfs";
 import {
   neutralA3,
   neutral33,
@@ -21,6 +25,7 @@ import {
   fontSemibold14,
 } from "../../../utils/style/fonts";
 import { layout } from "../../../utils/style/layout";
+import { LocalFileData } from "../../../utils/types/feed";
 import { BrandText } from "../../BrandText";
 import { SVG } from "../../SVG";
 import { CheckBox } from "../../checkbox/CheckBox";
@@ -34,20 +39,47 @@ export const GigCreationGallery: React.FC<{
   gigInfo: GigInfo;
   setGig: React.Dispatch<React.SetStateAction<GigInfo>>;
 }> = ({ gigInfo, setGig }) => {
-  const uploadImageFile = async (file: File) => {
+  const selectedNetworkId = useSelectedNetworkId();
+  const selectedWallet = useSelectedWallet();
+  const userId = getUserId(selectedNetworkId, selectedWallet?.address);
+  const { setToastError } = useFeedbacks();
+
+  const uploadImageFile = async (file: LocalFileData) => {
     if (file) {
-      const ipfsHash = await uploadFileToIPFS(file);
+      const uploadedFile = await uploadFileToIPFS(
+        file,
+        selectedNetworkId,
+        userId
+      );
+      if (!uploadedFile) {
+        setToastError({
+          title: "File upload failed",
+          message: "Fail to pin to IPFS, please try to Publish again",
+        });
+        return;
+      }
       const images = gigInfo.images;
-      images.push(ipfsHash);
+      images.push(uploadedFile?.url || "");
       setGig({ ...gigInfo, images });
     }
   };
 
-  const uploadPdfFile = async (file: File) => {
+  const uploadPdfFile = async (file: LocalFileData) => {
     if (file) {
-      const ipfsHash = await uploadFileToIPFS(file);
+      const uploadedFile = await uploadFileToIPFS(
+        file,
+        selectedNetworkId,
+        userId
+      );
+      if (!uploadedFile) {
+        setToastError({
+          title: "File upload failed",
+          message: "Fail to pin to IPFS, please try to Publish again",
+        });
+        return;
+      }
       const documents = gigInfo.documents;
-      documents.push(ipfsHash);
+      documents.push(uploadedFile?.url || "");
       setGig({ ...gigInfo, documents });
     }
   };
@@ -70,7 +102,9 @@ export const GigCreationGallery: React.FC<{
         <DragDropFile
           setFile={uploadImageFile}
           url={
-            gigInfo.images.length >= 1 ? ipfsPinataUrl(gigInfo.images[0]) : ""
+            gigInfo.images.length >= 1
+              ? ipfsURLToHTTPURL(gigInfo.images[0])
+              : ""
           }
         >
           <SVG source={PicIcon} width={32} height={32} />
@@ -79,7 +113,9 @@ export const GigCreationGallery: React.FC<{
         <DragDropFile
           setFile={uploadImageFile}
           url={
-            gigInfo.images.length >= 2 ? ipfsPinataUrl(gigInfo.images[1]) : ""
+            gigInfo.images.length >= 2
+              ? ipfsURLToHTTPURL(gigInfo.images[1])
+              : ""
           }
         >
           <SVG source={PicIcon} width={32} height={32} />
@@ -88,7 +124,9 @@ export const GigCreationGallery: React.FC<{
         <DragDropFile
           setFile={uploadImageFile}
           url={
-            gigInfo.images.length >= 3 ? ipfsPinataUrl(gigInfo.images[2]) : ""
+            gigInfo.images.length >= 3
+              ? ipfsURLToHTTPURL(gigInfo.images[2])
+              : ""
           }
         >
           <SVG source={PicIcon} width={32} height={32} />
@@ -108,7 +146,7 @@ export const GigCreationGallery: React.FC<{
         accept={"video/*"}
         url={
           gigInfo.documents.length >= 1
-            ? ipfsPinataUrl(gigInfo.documents[0])
+            ? ipfsURLToHTTPURL(gigInfo.documents[0])
             : ""
         }
         fileType={GigUploadFileType.PDF}
@@ -126,7 +164,7 @@ export const GigCreationGallery: React.FC<{
           accept="application/pdf"
           url={
             gigInfo.documents.length >= 1
-              ? ipfsPinataUrl(gigInfo.documents[0])
+              ? ipfsURLToHTTPURL(gigInfo.documents[0])
               : ""
           }
           fileType={GigUploadFileType.PDF}
@@ -139,7 +177,7 @@ export const GigCreationGallery: React.FC<{
           accept="application/pdf"
           url={
             gigInfo.documents.length >= 2
-              ? ipfsPinataUrl(gigInfo.documents[1])
+              ? ipfsURLToHTTPURL(gigInfo.documents[1])
               : ""
           }
           fileType={GigUploadFileType.PDF}