Merge branch 'preview'

pdelfan · Feb 13, 2024 · 380423d · 380423d
2 parents d728309 + 4d8d23b
commit 380423d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 27 deletions.
diff --git a/src/components/dataDisplay/postActions/PostActions.tsx b/src/components/dataDisplay/postActions/PostActions.tsx
@@ -30,6 +30,9 @@ import {
   BiSolidQuoteAltRight,
   BiSolidTrash,
 } from "react-icons/bi";
+import { useRouter } from "next/navigation";
+import { getTranslateLink } from "@/lib/utils/text";
+import { MdOutlineTranslate } from "react-icons/md";
 
 interface Props {
   post: AppBskyFeedDefs.PostView;
@@ -38,7 +41,9 @@ interface Props {
 
 export default function PostActions(props: Props) {
   const { post, mode = "feed" } = props;
+  const text = AppBskyFeedPost.isRecord(post.record) && post.record.text;
   const { data: session } = useSession();
+  const router = useRouter();
   const { deletePost } = useDeletePost({ post: post });
   const { liked, toggleLike, likeCount } = useLike({ post: post });
   const { reposted, toggleRepost, repostCount } = useRepost({ post: post });
@@ -54,12 +59,16 @@ export default function PostActions(props: Props) {
   }, [clipboard, post.uri, post.author.handle]);
 
   const handleCopyPostText = useCallback(() => {
-    const record = post.record as AppBskyEmbedRecord.View["record"];
-    const text = record.text || "";
     toast.success("Post text copied to clipboard");
     clipboard.copy(text);
   }, [clipboard, post.record]);
 
+  const handleTranslation = useCallback(() => {
+    if (text) {
+      window.open(getTranslateLink(text), "_blank");
+    }
+  }, [text]);
+
   if (!session) return null;
 
   if (mode === "thread") {
@@ -100,9 +109,6 @@ export default function PostActions(props: Props) {
             disabled={post.viewer?.replyDisabled}
             onClick={(e) => {
               e.stopPropagation();
-              const text =
-                AppBskyFeedPost.isRecord(post.record) && post.record.text;
-
               openComposer({
                 replyTo: {
                   uri: post.uri,
@@ -146,9 +152,6 @@ export default function PostActions(props: Props) {
               />
               <Dropdown.MenuItem
                 onSelect={() => {
-                  const text =
-                    AppBskyFeedPost.isRecord(post.record) && post.record.text;
-
                   openComposer({
                     quote: {
                       uri: post.uri,
@@ -198,16 +201,25 @@ export default function PostActions(props: Props) {
               </Button>
             </Dropdown.Trigger>
             <Dropdown.Menu>
+              {text && (
+                <Dropdown.MenuItem
+                  onSelect={handleTranslation}
+                  text="Translate"
+                  icon={<MdOutlineTranslate />}
+                />
+              )}
               <Dropdown.MenuItem
                 onSelect={handleShare}
                 text="Copy Link to Post"
                 icon={<BiLink />}
               />
-              <Dropdown.MenuItem
-                onSelect={handleCopyPostText}
-                text="Copy Post Text"
-                icon={<BiSolidCopy />}
-              />
+              {text && (
+                <Dropdown.MenuItem
+                  onSelect={handleCopyPostText}
+                  text="Copy Post Text"
+                  icon={<BiSolidCopy />}
+                />
+              )}
               {session.user?.handle !== post.author.handle && (
                 <Dropdown.MenuItem
                   onSelect={() => {
@@ -239,10 +251,6 @@ export default function PostActions(props: Props) {
         disabled={post.viewer?.replyDisabled}
         onClick={(e) => {
           e.stopPropagation();
-
-          const text =
-            AppBskyFeedPost.isRecord(post.record) && post.record.text;
-
           openComposer({
             replyTo: {
               uri: post.uri,
@@ -290,9 +298,6 @@ export default function PostActions(props: Props) {
           />
           <Dropdown.MenuItem
             onSelect={() => {
-              const text =
-                AppBskyFeedPost.isRecord(post.record) && post.record.text;
-
               openComposer({
                 quote: {
                   uri: post.uri,
@@ -344,16 +349,25 @@ export default function PostActions(props: Props) {
           </Button>
         </Dropdown.Trigger>
         <Dropdown.Menu>
+          {text && (
+            <Dropdown.MenuItem
+              onSelect={handleTranslation}
+              text="Translate"
+              icon={<MdOutlineTranslate />}
+            />
+          )}
           <Dropdown.MenuItem
             onSelect={handleShare}
             text="Copy Link to Post"
             icon={<BiLink />}
           />
-          <Dropdown.MenuItem
-            onSelect={handleCopyPostText}
-            text="Copy Post Text"
-            icon={<BiSolidCopy />}
-          />
+          {text && (
+            <Dropdown.MenuItem
+              onSelect={handleCopyPostText}
+              text="Copy Post Text"
+              icon={<BiSolidCopy />}
+            />
+          )}
           {session.user?.handle !== post.author.handle && (
             <Dropdown.MenuItem
               onSelect={() => {

diff --git a/src/components/navigational/tabs/TabItem.tsx b/src/components/navigational/tabs/TabItem.tsx
@@ -17,7 +17,7 @@ export default function TabItem(props: Props) {
       <button
         onClick={onClick}
         role="tab"
-        aria-aria-selected={isActive}
+        aria-selected={isActive}
         className={`border-b-3 hover:text-primary inline-block shrink-0 p-3 font-semibold first:ml-3 last:mr-3 ${
           isActive
             ? "border-primary-600 text-primary border-primary"
@@ -33,7 +33,7 @@ export default function TabItem(props: Props) {
     <Link
       href={path ?? ""}
       role="tab"
-      aria-aria-selected={isActive}
+      aria-selected={isActive}
       className={`border-b-3 hover:text-primary inline-block shrink-0 p-3 font-semibold first:ml-3 last:mr-3 ${
         isActive
           ? "border-primary-600 text-primary border-primary"

diff --git a/src/lib/utils/text.ts b/src/lib/utils/text.ts
@@ -92,3 +92,11 @@ export async function detectLanguage(text: string) {
   const detectedLanguage: string = await res.json();
   return [detectedLanguage.trim()];
 }
+
+// TODO: add language prefs to localStorage to use for lang
+// the default is English for now
+export function getTranslateLink(text: string, lang: string = "en"): string {
+  return `https://translate.google.com/?sl=auto&tl=${lang}&text=${encodeURIComponent(
+    text,
+  )}`;
+}