feat(apps/pano): Share comment url (#697)

creating new url generators for sharing url with the click of "Linki
kopyala"

---------

Co-authored-by: Can Sirin <[email protected]>

apps/kampus/app/pano/features/comment-list/CommentMoreOptions.tsx

@@ -22,21 +22,25 @@ import {
   useToast,
 } from "@kampus/ui";
 
+import { getCommentURL } from "~/features/kampus-url/pano";
 import { type CommentMoreOptions_comment$key } from "./__generated__/CommentMoreOptions_comment.graphql";
 import { type CommentMoreOptions_viewer$key } from "./__generated__/CommentMoreOptions_viewer.graphql";
 
 interface Props {
-  comment: CommentMoreOptions_comment$key | null;
-  viewerRef: CommentMoreOptions_viewer$key | null;
+  comment: CommentMoreOptions_comment$key;
+  viewerRef: CommentMoreOptions_viewer$key;
   commentConnectionID?: string;
   setEditOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const useMoreOptionsCommentFragment = (key: CommentMoreOptions_comment$key | null) =>
+const useMoreOptionsCommentFragment = (key: CommentMoreOptions_comment$key) =>
   useFragment(
     graphql`
       fragment CommentMoreOptions_comment on PanoComment {
         id
+        post @required(action: LOG) {
+          id
+        }
         owner {
           displayName
         }
@@ -45,7 +49,7 @@ const useMoreOptionsCommentFragment = (key: CommentMoreOptions_comment$key | nul
     key
   );
 
-const useMoreOptionsViewerFragment = (key: CommentMoreOptions_viewer$key | null) =>
+const useMoreOptionsViewerFragment = (key: CommentMoreOptions_viewer$key) =>
   useFragment(
     graphql`
       fragment CommentMoreOptions_viewer on Viewer {
@@ -89,6 +93,9 @@ export const CommentMoreOptions = (props: Props) => {
   const { toast } = useToast();
   const [removeComment, isRemoving] = useMutation(removeCommentMutation);
 
+  if (!comment) return null;
+  const shareUrl = getCommentURL({ postID: comment.post.id, commentID: comment.id });
+
   const onClick = () => {
     if (!comment) {
       return;
@@ -125,8 +132,10 @@ export const CommentMoreOptions = (props: Props) => {
           )}
           <DropdownMenuItem
             onSelect={() => {
-              toast({
-                description: "Link kopyalandı",
+              void navigator.clipboard?.writeText(shareUrl).then(() => {
+                toast({
+                  description: "Link kopyalandı",
+                });
               });
             }}
           >

apps/kampus/env.ts

@@ -6,13 +6,13 @@ export const env = parseEnv(
     GQL_URL: process.env.NEXT_PUBLIC_GQL_URL,
     RESEND_API_KEY: process.env.RESEND_API_KEY,
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
-    KAMPUS_ENV: process.env.KAMPUS_ENV,
+    KAMPUS_ENV: process.env.KAMPUS_ENV ?? process.env.VERCEL_URL,
   },
   {
     NODE_ENV: z.enum(["development", "test", "production"]),
     GQL_URL: z.string().url().default("http://localhost:4000/graphql"),
     RESEND_API_KEY: z.string().default("default-resend-key"),
     NEXTAUTH_URL: z.string().url().default("http://localhost:3001/auth"),
-    KAMPUS_ENV: z.enum(["development", "test", "production"]).default("development"),
+    KAMPUS_ENV: z.enum(["localhost", "preview", "development", "production"]).default("localhost"),
   }
 );

apps/kampus/features/kampus-url/get-kampus-url.ts

@@ -0,0 +1,19 @@
+import { assertNever } from "@kampus/std";
+
+import { env } from "~/env";
+
+type KampusProduct = "sozluk" | "pano" | "pasaport";
+
+export const getKampusURL = (product: KampusProduct, path: string = "") => {
+  switch (env.KAMPUS_ENV) {
+    case "localhost":
+      return `http://${product}.localhost.kamp.us:3000${path}`;
+    case "preview":
+    case "development":
+      return `https://${product}.dev.kamp.us${path}`;
+    case "production":
+      return `https://${product}.kamp.us${path}`;
+    default:
+      return assertNever(env.KAMPUS_ENV);
+  }
+};

apps/kampus/features/kampus-url/pano.ts

@@ -0,0 +1,24 @@
+import { getKampusURL } from "./get-kampus-url";
+
+export function getPostURL({ postID }: { postID: string }) {
+  return getKampusURL("pano", getPostLink(postID));
+}
+
+export function getCommentURL({ postID, commentID }: { postID: string; commentID: string }) {
+  return getKampusURL("pano", getCommentLink(postID, commentID));
+}
+
+function getPostLink(postID: string) {
+  return `/post/${postID}`;
+}
+
+function getCommentLink(postID: string, commentID: string) {
+  const post = getPostLink(postID);
+  const comment = `#c_${commentID}`;
+
+  return `${post}${comment}`;
+}
+
+function getSitePostsLink(post: { site: string }) {
+  return `/site/${post.site}`;
+}

turbo.json

@@ -46,7 +46,7 @@
       "dependsOn": ["@kampus/prisma#prisma:generate", "@kampus/sozluk-content#build"]
     },
     "@kampus-apps/kampus#*": {
-      "env": ["NODE_ENV", "NEXT_PUBLIC_GQL_URL", "RESEND_API_KEY", "NEXTAUTH_URL", "KAMPUS_ENV"]
+      "env": ["NODE_ENV", "NEXT_PUBLIC_GQL_URL", "RESEND_API_KEY", "NEXTAUTH_URL", "KAMPUS_ENV", "VERCEL_URL"]
     },
     "@kampus-apps/pasaport#*": {
       "env": ["NODE_ENV", "NEXTAUTH_URL", "DATABASE_URL", "KAMPUS_ENV"]