From 302f976d66ae2ff9b7f88dadfd949cc8a9da97b2 Mon Sep 17 00:00:00 2001 From: dotslashf <38921923+dotslashf@users.noreply.github.com> Date: Thu, 3 Oct 2024 22:11:54 +0700 Subject: [PATCH 1/2] feat: include tweet preview in single copy pasta --- src/app/_components/CopyPastaByIdPage.tsx | 18 +++++++++++++----- src/app/_components/TweetPage.tsx | 11 ++++++----- src/components/Tweet/CustomTweet.tsx | 3 ++- src/lib/utils.ts | 2 +- 4 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/app/_components/CopyPastaByIdPage.tsx b/src/app/_components/CopyPastaByIdPage.tsx index 5f8c9a8..3b49d2b 100644 --- a/src/app/_components/CopyPastaByIdPage.tsx +++ b/src/app/_components/CopyPastaByIdPage.tsx @@ -5,8 +5,10 @@ import BreadCrumbs from "~/components/BreadCrumbs"; import CardById from "~/components/CopyPasta/CardById"; import CardRelated from "~/components/CopyPasta/CardRelated"; import SkeletonCopyPasta from "~/components/Skeleton/CopyPasta"; -import { getBreadcrumbs, trimContent } from "~/lib/utils"; +import CustomTweet from "~/components/Tweet/CustomTweet"; +import { getBreadcrumbs, getTweetId, trimContent } from "~/lib/utils"; import { api } from "~/trpc/react"; +import TweetPage from "./TweetPage"; interface CopyPastaByIdProps { id: string; @@ -44,14 +46,20 @@ export default function CopyPastaById({ id }: CopyPastaByIdProps) { }); return ( -
+
{copyPasta && } -
-
+
+
Tweet Preview:
+ {copyPasta.source === "Twitter" && copyPasta.sourceUrl && ( + + )} +
+
+
Template Dengan Tag Yang Sama:
-
+
{related && !isLoading ? related.map((copy) => { return ; diff --git a/src/app/_components/TweetPage.tsx b/src/app/_components/TweetPage.tsx index 5592b7b..c84fefe 100644 --- a/src/app/_components/TweetPage.tsx +++ b/src/app/_components/TweetPage.tsx @@ -10,7 +10,7 @@ import { sanitizeTweetEnrich } from "~/lib/utils"; interface TweetPageProps { id: string; - onTweetLoaded: ({ + onTweetLoaded?: ({ content, postedAt, }: { @@ -35,10 +35,11 @@ export default function TweetPage({ id, onTweetLoaded }: TweetPageProps) { const { tweet }: { tweet: Tweet } = await response.json(); setTweet(tweet); const enrich = enrichTweet(tweet); - onTweetLoaded({ - content: sanitizeTweetEnrich(enrich), - postedAt: parseISO(tweet.created_at), - }); + onTweetLoaded && + onTweetLoaded({ + content: sanitizeTweetEnrich(enrich), + postedAt: parseISO(tweet.created_at), + }); } catch (err) { console.error(err); setError(err instanceof Error ? err : new Error("An error occurred")); diff --git a/src/components/Tweet/CustomTweet.tsx b/src/components/Tweet/CustomTweet.tsx index c0e4a5d..8a2a59d 100644 --- a/src/components/Tweet/CustomTweet.tsx +++ b/src/components/Tweet/CustomTweet.tsx @@ -41,7 +41,7 @@ export default function CustomTweet({ tweet: t }: CustomTweetProps) {

{sanitizeTweet(tweet.parent.text)}

-
+
@@ -120,6 +120,7 @@ export default function CustomTweet({ tweet: t }: CustomTweetProps) { href={`https://x.com/${tweet.user.screen_name}/status/${tweet.id_str}`} className={cn(buttonVariants({ variant: "secondary", size: "sm" }))} prefetch={false} + target="__blank" > Cek Tweet diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 7c12770..3aaecc3 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -77,7 +77,7 @@ export function trimContent(content: string, length = 255) { export function getTweetId(tweetUrl: string) { const match = tweetUrl.match(/\/status\/(\d+)/); - return match ? match[1] : null; + return match ? match[1] : undefined; } export function getRandomElement(array: string[]) { From 88242b3af6c029018bb27e0e7564b5a8c1ef1f7b Mon Sep 17 00:00:00 2001 From: dotslashf <38921923+dotslashf@users.noreply.github.com> Date: Thu, 3 Oct 2024 22:13:12 +0700 Subject: [PATCH 2/2] fix: missing package --- package-lock.json | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/package-lock.json b/package-lock.json index 4cabe98..17dd2ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@next/third-parties": "^14.2.5", "@prisma/client": "^5.14.0", "@radix-ui/react-accordion": "^1.2.0", + "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", @@ -1380,6 +1381,45 @@ } } }, + "node_modules/@radix-ui/react-avatar": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.1.tgz", + "integrity": "sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==", + "dependencies": { + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-checkbox": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz",