Add Comment function -> Dapp Finished

Author: jasonhtpham

src/App.svelte

@@ -33,6 +33,7 @@
     //convert ipfsHash to bytes32 to fit the SC
 	  const hashToSend = hashToBytes32(ipfsHash);
     etherGram.methods.upload(hashToSend).send({from: '0x519Ff9BEFa4127688900C31922350103aA5495e6'});
+    getPostsFromSC(e);
   }
 
   const clap = (e) => {
@@ -41,6 +42,12 @@
     etherGram.methods.clap(imageHash).send({from: '0x519Ff9BEFa4127688900C31922350103aA5495e6'})
   }
 
+  const comment = (e) => {
+    const commentHash = web3.utils.asciiToHex(e.detail.elements[0].value);
+    const imageHash = hashToBytes32(e.detail.name);
+    etherGram.methods.comment(imageHash, commentHash).send({from: '0x519Ff9BEFa4127688900C31922350103aA5495e6'});
+  }
+
   const getPostsFromSC = async (e) => {
     e.preventDefault()
     const result = await etherGram.methods.getAllPosts().call({from: '0x519Ff9BEFa4127688900C31922350103aA5495e6'});
@@ -50,10 +57,14 @@
       const hex = "1220" + result[i].slice(2);
       const hashBytes = Buffer.from(hex, 'hex');
       const image = bs58.encode(hashBytes);
+
       const clapCounts = await getClapCountFromSC(result[i]);
+      const comments = await getComment(result[i]);
+
       postsFromSC.push({
         image: image,
-        clapCounts: clapCounts
+        clapCounts: clapCounts,
+        comment: comments
       });
     }
     console.log(postsFromSC);
@@ -64,6 +75,15 @@
     return etherGram.methods.getClapCount(imageHash).call({from: '0x519Ff9BEFa4127688900C31922350103aA5495e6'})
   }
 
+  const getComment = async (imageHash) => {
+    const result = await etherGram.methods.getComments(imageHash).call({from: '0x519Ff9BEFa4127688900C31922350103aA5495e6'})
+    var processedComments=[];
+    result.forEach(commentHash => {
+      processedComments.push(web3.utils.toAscii(commentHash));
+    });
+    return processedComments;
+  }
+
   function startApp() {
 	  etherGram = new web3.eth.Contract(ethergramABI,scAddress);
   }
@@ -89,18 +109,22 @@
 <style>
 	h1 {
 		color: rgb(59, 70, 168);
+    font-size: 80px;
+    text-align: center;
+    background-color: azure
 	}
 </style>
 
 <h1>Picture board DApp by Jason</h1>
 
+
 {#if pages.postImage}
 <Upload 
 	on:upload={uploadToSC}
   on:viewImage={getPostsFromSC}
 />
 
 {:else if pages.viewImage}
-<ViewImage on:clap={clap} {postsFromSC} />
+<ViewImage on:clap={clap} on:comment={comment} {postsFromSC} />
 
 {/if}

src/Upload.svelte

@@ -40,11 +40,13 @@
 	
 </script>
 
+<h2>Upload your Images to Picture Board</h2>
+
 <img src={filePreview} alt="filepreview" />
 
 <form on:submit={onSubmit}>
 <input type="file" on:change={fileChange} />
 <input type="submit">
 </form>
 
-<input type="submit" on:click={() => dispatch("viewImage")} value="Uploaded Images" />
+<input type="submit" on:click={() => dispatch("viewImage")} value="View Picture Board" />

src/ViewImage.svelte

@@ -2,24 +2,37 @@
     import {createEventDispatcher} from "svelte";
     export let postsFromSC;
 
-    let comment = "";
     const dispatch = createEventDispatcher();
 
     const clap = (e) => {
         e.preventDefault();
         dispatch("clap",e.target.alt);
     }
+
+    const commentOnPost = (e) => {
+        e.preventDefault();
+        dispatch("comment", e.target);
+    }
 </script>
 
-<p>Images</p>
+<h2>Picture Board</h2>
+
+    <p>Double-click on image to give it a like. <br/>
+    And, feel free to drop your comments and submit them.</p>
+
 
 <ul>
 {#each postsFromSC as post}
 <li>
-    <form on:dblclick={clap}>
+    <form on:dblclick={clap} on:submit={commentOnPost} name={post.image}>
         <img src="https://ipfs.infura.io/ipfs/{post.image}" alt={post.image}/>
+        <input type="text" placeholder="Comment your thoughts about this image" maxlength="32"/> <input type="submit">
     </form>
     <p>{post.clapCounts} Like(s) </p>
+    <p><b>Comments ({post.comment.length})</b></p>
+    {#each post.comment as comment}
+        <p>{comment} <br /> </p>
+    {/each}
 </li>
 {/each}
 </ul>