Skip to content

Commit a8baa2e

Browse files
atharva20-coderatharva20-coder
committed
Redesigned post node
1 parent 5606aae commit a8baa2e

File tree

3 files changed

+103
-24
lines changed

3 files changed

+103
-24
lines changed

‎src/actions/webhook/queries.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use server"
2+
13
import { client } from "@/lib/prisma";
24

35
export const matchKeyword = async (keyword: string) => {
@@ -125,3 +127,61 @@ export const getChatHistory = async (sender: string, reciever: string) => {
125127
automationId: history[history.length - 1].automationId,
126128
};
127129
};
130+
131+
export const replyToComment = async (automationId: string, commentId: string) => {
132+
const automation = await client.automation.findUnique({
133+
where: { id: automationId },
134+
include: {
135+
listener: true,
136+
User: {
137+
select: {
138+
integrations: {
139+
where: { name: "INSTAGRAM" },
140+
select: {
141+
token: true,
142+
},
143+
},
144+
},
145+
},
146+
},
147+
});
148+
149+
if (!automation?.listener?.commentReply || !automation.User?.integrations[0]?.token) {
150+
throw new Error("No comment reply template or Instagram token found");
151+
}
152+
153+
try {
154+
// Make Instagram API call to reply to the comment
155+
const response = await fetch(
156+
`${process.env.INSTAGRAM_BASE_URL}/${commentId}/replies?access_token=${automation.User.integrations[0].token}`,
157+
{
158+
method: "POST",
159+
headers: {
160+
"Content-Type": "application/json",
161+
},
162+
body: JSON.stringify({
163+
message: automation.listener.commentReply,
164+
}),
165+
}
166+
);
167+
168+
if (!response.ok) {
169+
throw new Error("Failed to reply to comment");
170+
}
171+
172+
// Track the response
173+
await client.listener.update({
174+
where: { automationId },
175+
data: {
176+
commentCount: {
177+
increment: 1,
178+
},
179+
},
180+
});
181+
182+
return { success: true };
183+
} catch (error) {
184+
console.error("Error replying to comment:", error);
185+
throw error;
186+
}
187+
};

‎src/components/global/automations/post/index.tsx

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useQueryAutomationPosts } from "@/hooks/user-queries";
33
import React from "react";
44
import TriggerButton from "../trigger-button";
55
import { InstagramPostProps } from "@/types/posts.type";
6-
import { CheckCircle } from "lucide-react";
6+
import { CheckCircle, ImageIcon, Film } from "lucide-react";
77
import Image from "next/image";
88
import { cn } from "@/lib/utils";
99
import { Button } from "@/components/ui/button";
@@ -20,11 +20,11 @@ const PostButton = ({ id }: Props) => {
2020
return (
2121
<TriggerButton label="Attach a post">
2222
{data?.status === 200 && data?.data?.data?.length > 0 ? (
23-
<div className="flex flex-col gap-y-3 w-full">
24-
<div className="flex flex-wrap w-full gap-3">
23+
<div className="flex flex-col gap-y-4 w-full max-h-[70vh] overflow-y-auto p-2">
24+
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 w-full">
2525
{data?.data?.data?.map((post: InstagramPostProps) => (
2626
<div
27-
className="relative w-4/12 aspect-square rounded-lg cursor-pointer overflow-hidden"
27+
className="relative aspect-square rounded-xl cursor-pointer overflow-hidden bg-gray-100 group"
2828
key={post.id}
2929
onClick={() =>
3030
onSelectPost({
@@ -35,36 +35,55 @@ const PostButton = ({ id }: Props) => {
3535
})
3636
}
3737
>
38+
{post.media_type === "VIDEO" ? (
39+
<div className="w-full h-full">
40+
<video
41+
src={post.media_url}
42+
className="w-full h-full object-cover"
43+
muted
44+
playsInline
45+
/>
46+
<Film className="absolute top-2 right-2 text-white z-10" size={20} />
47+
</div>
48+
) : (
49+
<div className="w-full h-full">
50+
<Image
51+
fill
52+
src={post.media_url}
53+
alt={post.caption || "Instagram post"}
54+
className="object-cover transition-all duration-200 group-hover:scale-105"
55+
sizes="(max-width: 640px) 50vw, 33vw"
56+
priority
57+
/>
58+
{post.media_type === "CAROSEL_ALBUM" && (
59+
<ImageIcon className="absolute top-2 right-2 text-white z-10" size={20} />
60+
)}
61+
</div>
62+
)}
3863
{posts.find((p) => p.postid === post.id) && (
39-
<CheckCircle
40-
fill="white"
41-
stroke="black"
42-
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50"
43-
/>
64+
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
65+
<CheckCircle
66+
className="text-white"
67+
size={24}
68+
/>
69+
</div>
4470
)}
45-
<Image
46-
fill
47-
sizes="100vw"
48-
src={post.media_url}
49-
alt="post image"
50-
className={cn(
51-
"hover:opacity-75 transition duration-100",
52-
posts.find((p) => p.postid === post.id) && "opacity-75"
53-
)}
54-
/>
5571
</div>
5672
))}
5773
</div>
5874
<Button
5975
onClick={mutate}
6076
disabled={posts.length === 0}
61-
className="bg-gradient-to-br w-full from-[#3352CC] font-medium text-white to-[#1C2D70]"
77+
className="bg-gradient-to-br w-full from-[#3352CC] font-medium text-white to-[#1C2D70] hover:opacity-90 transition-opacity"
6278
>
63-
<Loader state={isPending}>Attach Post</Loader>
79+
<Loader state={isPending}>Attach {posts.length} Post{posts.length !== 1 ? 's' : ''}</Loader>
6480
</Button>
6581
</div>
6682
) : (
67-
<p className="text-text-secondary text-center">No posts found!</p>
83+
<div className="p-8 text-center">
84+
<p className="text-gray-500">No Instagram posts found</p>
85+
<p className="text-sm text-gray-400 mt-1">Connect your Instagram account to see your posts</p>
86+
</div>
6887
)}
6988
</TriggerButton>
7089
);

‎src/components/global/automations/post/node.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ const PostNode = ({ id }: Props) => {
2626
</div>
2727
<div className="flex gap-x-2">
2828
<Warning />
29-
If they comment on...
29+
<p className="font-bold text-lg">If they comment on...</p>
3030
</div>
3131
<div className="bg-[#ededef] p-3 rounded-xl flex flex-col gap-y-2">
3232
<div className="flex gap-x-2 items-center">
3333
<InstagramBlue />
34-
<p className="font-bold text-lg">These posts</p>
34+
<p>These posts</p>
3535
</div>
3636
<div className="flex gap-x-2 flex-wrap mt-3">
3737
{data.data.posts.map((post) => (

0 commit comments

Comments
 (0)