feat: translations

src/Element/FollowsYou.tsx

@@ -1,16 +1,21 @@
 import "./FollowsYou.css";
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
+import { useIntl } from "react-intl";
+
 import { HexKey } from "Nostr";
 import { RootState } from "State/Store";
 import useFollowsFeed from "Feed/FollowsFeed";
 import { getFollowers } from "Feed/FollowsFeed";
 
+import messages from "./messages";
+
 export interface FollowsYouProps {
   pubkey: HexKey;
 }
 
 export default function FollowsYou({ pubkey }: FollowsYouProps) {
+  const { formatMessage } = useIntl();
   const feed = useFollowsFeed(pubkey);
   const loginPubKey = useSelector<RootState, HexKey | undefined>(
     (s) => s.login.publicKey
@@ -18,11 +23,11 @@ export default function FollowsYou({ pubkey }: FollowsYouProps) {
 
   const pubkeys = useMemo(() => {
     return getFollowers(feed.store, pubkey);
-  }, [feed]);
+  }, [feed, pubkey]);
 
   const followsMe = pubkeys.includes(loginPubKey!) ?? false;
 
-  return (
-    <>{followsMe ? <span className="follows-you">follows you</span> : null}</>
-  );
+  return followsMe ? (
+    <span className="follows-you">{formatMessage(messages.FollowsYou)}</span>
+  ) : null;
 }