Merge pull request #100 from techulus/develop

Fix auth for reactions

Author: arjunkomath

apps/page/components/footer.tsx

@@ -1,6 +1,7 @@
 import { IPageSettings } from "@changes-page/supabase/types/page";
 import Image from "next/image";
 import { useEffect } from "react";
+import { PageRoadmap } from "../lib/data";
 import appStoreBadgeLight from "../public/badges/App_Store_Badge_US-UK_RGB_blk.svg";
 import appStoreBadgeDark from "../public/badges/App_Store_Badge_US-UK_RGB_wht.svg";
 import googlePlayBadge from "../public/badges/google-play-badge.png";
@@ -16,7 +17,13 @@ import {
 } from "./social-icons.component";
 import VisitorStatus from "./visitor-status";
 
-export default function Footer({ settings }: { settings: IPageSettings }) {
+export default function Footer({
+  settings,
+  roadmaps = [],
+}: {
+  settings: IPageSettings;
+  roadmaps?: PageRoadmap[];
+}) {
   useEffect(() => {
     httpPost({
       url: "/api/pa/view",
@@ -26,9 +33,11 @@ export default function Footer({ settings }: { settings: IPageSettings }) {
 
   return (
     <footer>
-      <div className="pt-4 py-2 flex justify-center space-x-6">
-        <VisitorStatus />
-      </div>
+      {(roadmaps ?? []).length ? (
+        <div className="pt-4 py-2 flex justify-center space-x-6">
+          <VisitorStatus />
+        </div>
+      ) : null}
 
       {(settings?.app_store_url || settings?.play_store_url) && (
         <p className="pt-4 py-4 flex justify-center space-x-6">

apps/page/components/reactions.tsx

@@ -3,8 +3,6 @@ import { Transition } from "@headlessui/react";
 import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";
 import { httpGet, httpPost } from "../utils/http";
-import { useVisitorAuth } from "../hooks/useVisitorAuth";
-import VisitorAuthModal from "./visitor-auth-modal";
 
 const ReactionsCounter = ({
   postId,
@@ -13,23 +11,16 @@ const ReactionsCounter = ({
   floating,
   optimisticUpdate,
   setShowPicker,
-  onAuthRequired,
 }: {
   postId: string;
   aggregate: IReactions;
   user: IReactions;
   floating: boolean;
   optimisticUpdate?: (reaction: string, status: boolean) => void;
   setShowPicker?: (v: boolean) => void;
-  onAuthRequired?: () => void;
 }) => {
   const doReact = useCallback(
     (reaction: string) => {
-      if (onAuthRequired) {
-        onAuthRequired();
-        return;
-      }
-
       if (setShowPicker) {
         setShowPicker(false);
       }
@@ -47,7 +38,7 @@ const ReactionsCounter = ({
         },
       });
     },
-    [postId, setShowPicker, user, optimisticUpdate, onAuthRequired]
+    [postId, setShowPicker, user, optimisticUpdate]
   );
 
   return (
@@ -220,9 +211,7 @@ const ReactionsCounter = ({
 
 export default function Reactions(props: any) {
   const { post } = props;
-  const { visitor } = useVisitorAuth();
   const [showPicker, setShowPicker] = useState(false);
-  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
   const [reactions, setReactions] = useState<IReactions>({});
   const [userReaction, setUserReaction] = useState<IReactions>({});
 
@@ -269,20 +258,12 @@ export default function Reactions(props: any) {
     updateReactions();
   }, [updateReactions]);
 
-  const handleReactionClick = useCallback(() => {
-    if (!visitor) {
-      setIsAuthModalOpen(true);
-      return;
-    }
-    setShowPicker((v) => !v);
-  }, [visitor]);
-
   return (
     <div className="flex">
       <div className="relative flex items-center">
         <button
           className="text-sm p-1.5 my-2 border border-gray-300 dark:border-gray-700 rounded-full bg-white dark:bg-gray-800 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200"
-          onClick={handleReactionClick}
+          onClick={() => setShowPicker((v) => !v)}
         >
           <svg
             className=" w-4 h-4"
@@ -332,15 +313,9 @@ export default function Reactions(props: any) {
           user={userReaction}
           optimisticUpdate={optimisticUpdate}
           setShowPicker={setShowPicker}
-          onAuthRequired={!visitor ? () => setIsAuthModalOpen(true) : undefined}
           floating={false}
         />
       ) : null}
-
-      <VisitorAuthModal
-        isOpen={isAuthModalOpen}
-        onClose={() => setIsAuthModalOpen(false)}
-      />
     </div>
   );
 }

apps/page/pages/_sites/[site]/index.tsx

@@ -138,7 +138,7 @@ export default function Index({
           </div>
         </main>
 
-        <Footer settings={settings} />
+        <Footer settings={settings} roadmaps={roadmaps} />
       </div>
     </>
   );

apps/page/pages/_sites/[site]/roadmap/[roadmap_slug].tsx

@@ -327,7 +327,7 @@ export default function RoadmapPage({
           </div>
         </main>
 
-        <Footer settings={settings} />
+        <Footer settings={settings} roadmaps={roadmaps} />
       </div>
 
       {/* Item Details Modal */}

apps/page/pages/api/notifications/subscribe-email.ts

@@ -10,14 +10,14 @@ import inngestClient from "../../../utils/inngest";
 
 async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<{ ok: boolean; message?: string } | null>
+  res: NextApiResponse<{ success: boolean; message?: string } | null>
 ) {
   if (req.method === "POST") {
     const hostname = String(req?.headers?.host);
     const { email } = req.body;
 
     if (!email) {
-      res.status(400).json({ ok: false });
+      res.status(400).json({ success: false });
       return;
     }
 
@@ -53,9 +53,10 @@ async function handler(
           email,
           decision.reason
         );
-        return res
-          .status(400)
-          .json({ ok: false, message: "Please provide a valid email address" });
+        return res.status(400).json({
+          success: false,
+          message: "Please provide a valid email address",
+        });
       }
     }
 
@@ -72,7 +73,7 @@ async function handler(
       const pageUrl = getPageUrl(page, settings);
 
       if (!settings.email_notifications) {
-        return res.status(400).json({ ok: false });
+        return res.status(400).json({ success: false });
       }
 
       const result = await subscribeViaEmail(String(page?.id), String(email));
@@ -100,10 +101,10 @@ async function handler(
         },
       });
 
-      res.status(200).json({ ok: true });
+      res.status(200).json({ success: true });
     } catch (e: Error | any) {
       console.log("notifications/email: [Error]", e);
-      res.status(400).json({ ok: false, message: e.message ?? String(e) });
+      res.status(400).json({ success: false, message: e.message ?? String(e) });
     }
   } else {
     res.setHeader("Allow", "POST");

apps/page/pages/api/pa/view.ts

@@ -1,19 +1,19 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import UAParser from "ua-parser-js";
 import { v4 } from "uuid";
 import {
   fetchRenderData,
   translateHostToPageIdentifier,
 } from "../../../lib/data";
-import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { getVisitorId } from "../../../lib/visitor-auth";
 
 async function pageAnalyticsView(
   req: NextApiRequest,
-  res: NextApiResponse<{ ok: boolean }>
+  res: NextApiResponse<{ success: boolean }>
 ) {
   if (String(req?.headers["user-agent"]).toLowerCase().includes("bot")) {
-    return res.status(200).json({ ok: true });
+    return res.status(200).json({ success: true });
   }
 
   const hostname = String(req?.headers?.host);
@@ -51,10 +51,10 @@ async function pageAnalyticsView(
       console.error("pageAnalyticsView [Error]", error);
     }
 
-    res.status(200).json({ ok: true });
+    res.status(200).json({ success: true });
   } catch (e: Error | any) {
     console.log("pageAnalyticsView [Error]", e);
-    res.status(200).json({ ok: true });
+    res.status(200).json({ success: true });
   }
 }
 

apps/page/pages/api/post/react.ts

@@ -1,11 +1,11 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { v4 } from "uuid";
-import { supabaseAdmin } from "@changes-page/supabase/admin";
 import { getVisitorId } from "../../../lib/visitor-auth";
 
 export default async function reactToPost(
   req: NextApiRequest,
-  res: NextApiResponse<{ ok: boolean }>
+  res: NextApiResponse<{ success: boolean }>
 ) {
   const { post_id, reaction } = req.body;
 
@@ -40,9 +40,9 @@ export default async function reactToPost(
       console.error("reactToPost [Error]", error);
     }
 
-    res.status(200).json({ ok: true });
+    res.status(200).json({ success: true });
   } catch (e: Error | any) {
     console.log("reactToPost [Error]", e);
-    res.status(200).json({ ok: true });
+    res.status(200).json({ success: false });
   }
 }

apps/page/pages/api/post/reactions.ts

@@ -1,10 +1,10 @@
+import { supabaseAdmin } from "@changes-page/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { v4 } from "uuid";
-import { supabaseAdmin } from "@changes-page/supabase/admin";
 
 export default async function getPostReactions(
   req: NextApiRequest,
-  res: NextApiResponse<{ ok: boolean; aggregate: any; user: any }>
+  res: NextApiResponse<{ success: boolean; aggregate: any; user: any }>
 ) {
   let { post_id } = req.query;
   let { cp_pa_vid: visitor_id } = req.cookies;
@@ -41,7 +41,7 @@ export default async function getPostReactions(
     }
 
     res.status(200).json({
-      ok: true,
+      success: true,
       aggregate: aggregate?.length
         ? {
             thumbs_up: aggregate[0].thumbs_up_count,
@@ -55,6 +55,6 @@ export default async function getPostReactions(
     });
   } catch (e: Error | any) {
     console.log("getPostReactions [Error]", e);
-    res.status(200).json({ ok: true, aggregate: null, user: null });
+    res.status(200).json({ success: false, aggregate: null, user: null });
   }
 }