Merge pull request #16 from CleanifyOrg/fix-report-modal

Fix report modal

src/components/MapComponent/ReportModal.tsx

@@ -27,6 +27,9 @@ export const ReportModal = ({
   report: Report;
   onClose: () => void;
 }) => {
+
+  console.log(report)
+
   return (
     <Modal isOpen={true} onClose={onClose}>
       <ModalOverlay />
@@ -35,7 +38,7 @@ export const ReportModal = ({
         <Link to={`/report/${report.id}`} state={{ report }}>
           <ModalBody p={0}>
             <Flex direction="column" justify="center">
-              <Image src={report.metadata.image} borderTopRadius={"2xl"} />
+              <Image src={report.metadata.images[0]} borderTopRadius={"2xl"} />
               <Box px={4} py={2}>
                 <Text fontSize="lg" fontWeight={"bold"}>
                   {report.metadata.name}
@@ -49,7 +52,7 @@ export const ReportModal = ({
                   textOverflow={"ellipses"}
                   whiteSpace={"normal"}
                 >
-                  {formatDescription(report.metadata.description)}
+                  {formatDescription(report.metadata.analysis.description ?? "")}
                 </Text>
               </Box>
             </Flex>

src/components/NewReportModal/NewReportModalStepsContent/ConfirmStep.tsx

@@ -33,12 +33,11 @@ export const ConfirmDetailsStep: React.FC<Props> = ({
 
   const processReport = async () => {
     const report: ReportMetadata = {
-      ...data,
       name: "Hello Word",
       images: uploadedImages.map((image) => image.image),
-      location: { lat: 41.0263678, lng: 28.9363605 },
+      location: { lat: 41.012742, lng: 28.973443 },
       analysis: data,
-    };
+    }
 
     const tx = await createReport(report);
     console.log({ tx });

src/hooks/useReportById.ts

@@ -0,0 +1,32 @@
+import {useReportMetadata} from "@hooks/useReportMetadata.ts"
+import {BaseReport} from "@models/report.ts"
+import {useEffect, useState} from "react"
+import {useTrashifyContract} from "@hooks/useTrashifyContract.ts"
+
+export const useReportById = (id: number) => {
+
+  const {contract} = useTrashifyContract()
+
+  const [baseReport, setBaseReport] = useState<BaseReport>()
+
+  const {report} = useReportMetadata(baseReport)
+
+  useEffect(() => {
+    if (contract) {
+      contract.reports(id).then((baseReport) => {
+        setBaseReport({
+          id: baseReport.id.toNumber(),
+          creator: baseReport.creator,
+          metadata: baseReport.metadata,
+          totalRewards: baseReport.totalRewards.toNumber(),
+          state: baseReport.state,
+        })
+      })
+    }
+  }, [id])
+
+  return {
+    report,
+  }
+
+}

src/hooks/useReportMetadata.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { getFromIPFS } from "@/utils";
 import { BaseReport, ReportMetadata, Report } from "@models/report.ts";
 
-export const useReportMetadata = (baseReport: BaseReport) => {
+export const useReportMetadata = (baseReport?: BaseReport) => {
   const [report, setReport] = useState<Report>();
 
   const fetchMetadata = useCallback(async (baseReport: BaseReport) => {
@@ -25,6 +25,9 @@ export const useReportMetadata = (baseReport: BaseReport) => {
   }, []);
 
   useEffect(() => {
+
+    if (baseReport)
+
     fetchMetadata(baseReport).catch((e) => {
       console.error("Error fetching metadata:", e);
     });

src/screens/Report.tsx

@@ -2,18 +2,22 @@ import { MapComponent } from "@/components";
 import { Routes } from "@/router";
 import { Box, Button, HStack, Image, Text } from "@chakra-ui/react";
 import { useParams } from "react-router-dom";
+import {useReportById} from "@hooks/useReportById.ts"
 
 export const Report = () => {
   const params = useParams();
 
 
+  const { report }= useReportById(Number(params.id))
+
+  console.log(params)
 
 
   if (!report) return null;
   return (
     <HStack w={"full"} h={"full"}>
       <Box h={"full"} w={"50%"} overflow={"auto"} pr={4}>
-        <Image src={report.metadata.image} w={"full"} />
+        <Image src={report.metadata.images[0]} w={"full"} />
         <Box py={4}>
           <Box pb={2}>
             <Text fontSize="lg" fontWeight={"bold"}>
@@ -22,7 +26,7 @@ export const Report = () => {
           </Box>
           <Box pb={6}>
             <Text fontSize="md" textAlign={"justify"}>
-              {report.metadata.description}
+              {report.metadata.analysis.description}
             </Text>
           </Box>
           <Box pb={4} justifyContent={"center"} display={"flex"}>