basic comms working

1 files changed, 13 insertions, 11 deletions

diff --git a/front/src/components/post/Footer.tsx b/front/src/components/post/Footer.tsx
index 3b48241..3e4bbdc 100644
--- a/front/src/components/post/Footer.tsx
+++ b/front/src/components/post/Footer.tsx
@@ -1,7 +1,5 @@
 import type { PostProps } from "./Post";
-import reply from "@/assets/icons/reply.svg";
-import quote from "@/assets/icons/quote.svg";
-import repost from "@/assets/icons/rt.svg";
+import Icon from "@/components/Icon";
 import { useState } from "react";
 import useLocalState from "@/state/state";
 import { useLocation } from "wouter";
@@ -15,7 +13,11 @@ function Footer({ poast, refetch }: PostProps) {
   const [_showMenu, setShowMenu] = useState(false);
   const [location, navigate] = useLocation();
   const [reposting, _setReposting] = useState(false);
-  const { api, setComposerData, setModal } = useLocalState();
+  const { api, setComposerData, setModal } = useLocalState((s) => ({
+    api: s.api,
+    setComposerData: s.setComposerData,
+    setModal: s.setModal,
+  }));
   const our = api!.airlock.our!;
   function doReply(e: React.MouseEvent) {
     e.stopPropagation();
@@ -126,13 +128,13 @@ function Footer({ poast, refetch }: PostProps) {
           <span role="link" onMouseUp={showReplyCount} className="reply-count">
             {displayCount(childrenCount)}
           </span>
-          <img role="link" onMouseUp={doReply} src={reply} alt="" />
+          <Icon name="reply" size={20} onClick={doReply} />
         </div>
         <div className="icon">
           <span role="link" onMouseUp={showQuoteCount} className="quote-count">
             {displayCount(poast.engagement.quoted.length)}
           </span>
-          <img role="link" onMouseUp={doQuote} src={quote} alt="" />
+          <Icon name="quote" size={20} onClick={doQuote} />
         </div>
         <div className="icon">
           <span
@@ -145,15 +147,15 @@ function Footer({ poast, refetch }: PostProps) {
           {reposting ? (
             <p>...</p>
           ) : myRP ? (
-            <img
-              role="link"
+            <Icon
+              name="repost"
+              size={20}
               className="my-rp"
-              onMouseUp={cancelRP}
-              src={repost}
+              onClick={cancelRP}
               title="cancel repost"
             />
           ) : (
-            <img role="link" onMouseUp={sendRP} src={repost} title="repost" />
+            <Icon name="repost" size={20} onClick={sendRP} title="repost" />
           )}
         </div>
         <div className="icon" role="link" onMouseUp={doReact}>