add: react to all bereals

islands/Me.tsx

@@ -6,11 +6,15 @@ import { fetchFriends, friends } from "~/state/friends.ts";
 import Post from "~/islands/Post.tsx";
 import IconArrowBigLeft from "icons/arrow-big-left.tsx";
 import IconArrowBigRight from "icons/arrow-big-right.tsx";
+import IconCircleCheck from "icons/circle-check.tsx";
 import { type SelfPost } from "~/types.ts";
+import { getAuth } from "~/state/auth.ts";
 
 export default function Me() {
   const [index, setIndex] = useState<number>(0);
   const [post, setPost] = useState<SelfPost | null>(null);
+  const [active, setActive] = useState<boolean>(false);
+  const [reactionId, setReactionId] = useState<string>("");
 
   const user = me.value;
   const feedList = feed.value;
@@ -122,12 +126,39 @@ export default function Me() {
             ) => (
               <div
                 key={realmoji.id}
-                className="p-2 rounded-lg bg-white dark:bg-gray-800"
+                onClick={() => {
+                  if (active) {
+                    setActive(false);
+                    setReactionId(realmoji.id);
+                    fetch("/api/reactAll", {
+                      method: "POST",
+                      headers: {
+                        "Content-Type": "application/json",
+                      },
+                      body: JSON.stringify({
+                        emoji: realmoji.emoji,
+                        access_token: getAuth()?.access_token,
+                      }),
+                    });
+                  }
+                }}
+                className={`p-2 rounded-lg bg-white dark:bg-gray-800 relative ${
+                  active ? "hover:bg-gray-800 hover:dark:bg-white" : ""
+                }`}
               >
+                <div
+                  className={`${
+                    reactionId === realmoji.id ? "opacity-100" : "opacity-0"
+                  } absolute right-0 mt-2 mr-4 dark:bg-gray-800 bg-white rounded-md p-1 dark:text-white text-gray-800`}
+                >
+                  <IconCircleCheck />
+                </div>
                 <img
                   src={realmoji.media.url}
                   alt="Realmoji"
-                  className="w-full h-auto rounded-lg"
+                  className={`w-full h-auto rounded-lg ${
+                    active ? "cursor-pointer" : ""
+                  }`}
                   onError={(d) => {
                     (d.target as HTMLImageElement).src = "/raven.png";
                   }}
@@ -136,6 +167,18 @@ export default function Me() {
               </div>
             ))}
           </div>
+          <div className="mt-4 flex">
+            <button
+              className={`w-full py-3 rounded-md ${
+                active
+                  ? "border bg-red-500 border-red-500 text-white"
+                  : "bg-white text-black dark:bg-black border border-white dark:border-white dark:bg-white dark:border-black dark:text-black"
+              } font-xl ${reactionId && "opacity-50 cursor-not-allowed"}`}
+              onClick={() => !reactionId && setActive((a) => !a)}
+            >
+              {active ? "Cancel" : "React to all BeReals"}
+            </button>
+          </div>
         </div>
       )}
     </div>

routes/api/react.ts

@@ -0,0 +1,60 @@
+import { FreshContext } from "$fresh/server.ts";
+
+export const handler = async (
+  req: Request,
+  _ctx: FreshContext,
+): Promise<Response> => {
+  if (req.method !== "POST") {
+    return new Response(null, { status: 405 });
+  }
+
+  const { emoji, access_token, postId, postUserId } = await req.json() as {
+    emoji?: string;
+    access_token?: string;
+    postId?: string;
+    postUserId?: string;
+  };
+
+  if (!emoji || !access_token || !postId || !postUserId) {
+    return new Response(null, { status: 400 });
+  }
+
+  const reactResponse = await fetch(
+    `https://mobile.bereal.com/api/content/realmojis?postId=${postId}&postUserId=${postUserId}`,
+    {
+      headers: {
+        authorization: `Bearer ${access_token}`,
+      },
+      method: "POST",
+      body: JSON.stringify({
+        emoji,
+      }),
+    },
+  );
+
+  if (!reactResponse.ok) {
+    return new Response(
+      JSON.stringify(
+        await reactResponse.json(),
+      ),
+      {
+        status: 400,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+  }
+
+  return new Response(
+    JSON.stringify(
+      await reactResponse.json(),
+    ),
+    {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+};

routes/api/reactAll.ts

@@ -0,0 +1,77 @@
+import { FreshContext } from "$fresh/server.ts";
+import { FeedResp } from "~/types.ts";
+
+export const handler = async (
+  req: Request,
+  _ctx: FreshContext,
+): Promise<Response> => {
+  if (req.method !== "POST") {
+    return new Response(null, { status: 405 });
+  }
+
+  const { access_token, emoji } = await req.json() as {
+    access_token?: string;
+    emoji?: string;
+  };
+
+  if (!access_token || !emoji) {
+    return new Response(null, { status: 400 });
+  }
+
+  const initialFeedResponse = await fetch(
+    "https://mobile.bereal.com/api/feeds/friends-v1",
+    {
+      headers: {
+        authorization: `Bearer ${access_token}`,
+      },
+    },
+  );
+
+  if (!initialFeedResponse.ok) {
+    return new Response(
+      JSON.stringify(
+        await initialFeedResponse.json(),
+      ),
+      {
+        status: 400,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+  }
+
+  const feed: FeedResp = await initialFeedResponse.json() as FeedResp;
+
+  feed.friendsPosts.reduce(async (prms, batch) => {
+    await prms;
+    await batch.posts.reduce(async (prms, post) => {
+      await prms;
+      await fetch(
+        `https://mobile.bereal.com/api/content/realmojis?postId=${post.id}&postUserId=${batch.user.id}`,
+        {
+          headers: {
+            authorization: `Bearer ${access_token}`,
+            "content-type": "application/json",
+            "accept": "application/json",
+          },
+          method: "PUT",
+          body: JSON.stringify({ emoji: `${emoji}` }),
+        },
+      );
+      await new Promise((resolve) => setTimeout(resolve, 300));
+    }, Promise.resolve());
+  }, Promise.resolve());
+
+  return new Response(
+    JSON.stringify(
+      { success: true },
+    ),
+    {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+};