lil-lab · swh00tw · Feb 21, 2024 · Feb 18, 2024 · Feb 18, 2024 · Feb 18, 2024
diff --git a/apps/recnet/emails/WeeklyDigest.tsx b/apps/recnet/emails/WeeklyDigest.tsx
@@ -0,0 +1,188 @@
+import {
+  Button,
+  Html,
+  Tailwind,
+  Preview,
+  Head,
+  Body,
+  Text,
+  Container,
+  Font,
+  Section,
+  Hr,
+  Link,
+  Img,
+} from "@react-email/components";
+import * as React from "react";
+import { CalendarIcon } from "@radix-ui/react-icons";
+import type { RecWithUser } from "@/types/rec";
+
+interface EmailRecCardProps {
+  recsWithUsers: RecWithUser[];
+}
+
+function EmailRecCard(props: EmailRecCardProps) {
+  const { recsWithUsers } = props;
+  if (recsWithUsers.length === 0) {
+    return null;
+  }
+  const rec = recsWithUsers[0];
+  return (
+    <Container className="p-2">
+      <Container className="p-3 bg-[#F1F1F1] rounded-md mb-2">
+        <Link href={rec.link} className="text-brand">
+          <Text className="text-[18px]">{rec.title}</Text>
+        </Link>
+        <Text>{rec.author}</Text>
+        <div className="flex flex-row items-center text-[14px] gap-x-2">
+          <CalendarIcon className="w-4 h-4" />
+          <div>{rec.year}</div>
+        </div>
+      </Container>
+      {recsWithUsers.map((recWithUser, idx) => {
+        return (
+          <Container key={idx} className="px-4 pt-1">
+            <div className="flex flex-row items-center gap-x-4">
+              <Img
+                src={recWithUser.user.photoURL}
+                alt="avatar"
+                className="w-[40px] aspect-square rounded-[999px] object-cover"
+              />
+              <Text>{recWithUser.user.displayName}</Text>
+            </div>
+            <Text>{recWithUser.description}</Text>
+          </Container>
+        );
+      })}
+    </Container>
+  );
+}
+
+function MockEmailRecCard() {
+  return (
+    <div className="p-2 border border-2 border-[#646464]">
+      <div className="p-3 bg-[#F1F1F1] rounded-md mb-2">
+        <Link href={"https://google.com"} className="text-brand">
+          <Text className="text-[18px]">{"I am paper's title"}</Text>
+        </Link>
+        <Text>{"Author 1, Author 2, Author 3"}</Text>
+        <div className="flex flex-row items-center text-[14px] gap-x-2">
+          <CalendarIcon className="w-4 h-4" />
+          <div>{2024}</div>
+        </div>
+      </div>
+      <div className="px-4 pt-1">
+        <div className="flex flex-row items-center gap-x-4">
+          <Img
+            src={
+              "https://lh3.googleusercontent.com/a/ACg8ocL6DSnMAUCuiMFjcvW477_gHLTaBDOUP5vgv5mSVO5fJs8=s96-c"
+            }
+            alt="avatar"
+            className="w-[40px] aspect-square rounded-[999px] object-cover"
+          />
+          <Text>{"Mock user"}</Text>
+        </div>
+        <Text>
+          {
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus."
+          }
+        </Text>
+      </div>
+    </div>
+  );
+}
+
+const WeeklyDigest = (props: { recsDict?: Record<string, RecWithUser[]> }) => {
+  const { recsDict = {} } = props;
+  const recsCount = Object.keys(recsDict).length;
+  return (
+    <Html>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: {
+                brand: "#3591FF",
+                text: "#60646C",
+              },
+            },
+          },
+        }}
+      >
+        <Preview>📬 Your RecNet weekly digest is here!</Preview>
+        <Head>
+          <Font
+            fontFamily="Roboto"
+            fallbackFontFamily="Verdana"
+            webFont={{
+              url: "https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2",
+              format: "woff2",
+            }}
+            fontWeight={400}
+            fontStyle="normal"
+          />
+        </Head>
+        <Body className="bg-white text-text">
+          <Container>
+            <Text className="w-full text-center text-[28px] font-bold text-brand">
+              RecNet
+            </Text>
+            <Hr />
+            <Section className="p-2 flex flex-col items-center">
+              <Text className="text-[18px]">
+                📬 Your Weekly Recommended Papers
+              </Text>
+              <Text className="text-[16px]">{`You have ${recsCount} recommendations this week!`}</Text>
+              <Text>
+                {recsCount > 0 ? (
+                  `Check out these rec'd paper for you from your network!`
+                ) : (
+                  <span>
+                    Visit{" "}
+                    <a
+                      className="text-brand"
+                      href="https://recnet.io"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      RecNet
+                    </a>{" "}
+                    to find more papers!
+                  </span>
+                )}
+              </Text>
+            </Section>
+            {Object.keys(recsDict).map((key, i) => {
+              const recsWithUsers = recsDict[key];
+              return (
+                <React.Fragment key={i}>
+                  <Hr />
+                  <EmailRecCard recsWithUsers={recsWithUsers} />
+                </React.Fragment>
+              );
+            })}
+            <Hr />
+            <Section className="px-2">
+              <Text className="text-[16px]">
+                Any interesting read this week? 👀
+              </Text>
+              <div className="w-full flex justify-center">
+                <Button
+                  href="https://recnet.io"
+                  className="bg-brand w-full text-center text-white rounded-md p-2"
+                >
+                  Share it with your network!
+                </Button>
+              </div>
+            </Section>
+            <Text className="text-text opacity-[40%] p-2 text-[12px]">
+              Please reply directly if you find any error. Thank you!
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default WeeklyDigest;
diff --git a/apps/recnet/project.json b/apps/recnet/project.json
@@ -11,6 +11,14 @@
         "cwd": "apps/recnet",
         "forwardAllArgs": false
       }
+    },
+    "email:dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["email dev"],
+        "cwd": "apps/recnet",
+        "forwardAllArgs": false
+      }
     }
   },
   "tags": []

diff --git a/apps/recnet/src/app/api/sendDigest/route.ts b/apps/recnet/src/app/api/sendDigest/route.ts
@@ -0,0 +1,73 @@
+import { db } from "@/firebase/admin";
+import { UserSchema } from "@/types/user";
+import { formatDate, getLatestCutOff } from "@/utils/date";
+import { getFeedsRecs, getRecsWithUsers } from "@/server/rec";
+import groupBy from "lodash.groupby";
+import { notEmpty } from "@/utils/notEmpty";
+import WeeklyDigest from "../../../../emails/WeeklyDigest";
+import { render } from "@react-email/render";
+import { NextRequest, NextResponse } from "next/server";
+
+const TEST_USER_IDS = ["GoXnHBhgK8QhcZpki0la"];
+
+export async function GET(request: NextRequest) {
+  if (
+    request.headers.get("Authorization") !== `Bearer ${process.env.CRON_SECRET}`
+  ) {
+    return NextResponse.json({ ok: false });
+  }
+  try {
+    // map over users
+    // for each user, get the feeds this cycle
+    // and get recsWithUsers, and groupBy title
+    // push an email to collection "mails"
+
+    const userDocs = await db.collection("users").get();
+    await Promise.all(
+      userDocs.docs.map(async (userDoc) => {
+        const userData = userDoc.data();
+
+        // parse with UserSchema
+        const res = UserSchema.safeParse({
+          ...userData,
+          id: userDoc.id,
+        });
+        if (!res.success) {
+          console.error("Error parsing user", res.error);
+          return;
+        }
+        const user = res.data;
+
+        // test within certain user ids
+        if (!TEST_USER_IDS.includes(user.id)) {
+          return;
+        }
+
+        const recs = await getFeedsRecs(user?.id, getLatestCutOff().getTime());
+        const recsWithUsers = await getRecsWithUsers(recs);
+        const recsGroupByTitle = groupBy(recsWithUsers, (recWithUser) => {
+          const titleLowercase = recWithUser.title.toLowerCase();
+          const words = titleLowercase
+            .split(" ")
+            .filter((w) => w.length > 0)
+            .filter(notEmpty);
+          return words.join("");
+        });
+
+        const digest = {
+          to: user.email,
+          message: {
+            subject: `[Recnet] Your Weekly Digest for ${formatDate(getLatestCutOff())}`,
+            html: render(WeeklyDigest({ recsDict: recsGroupByTitle })),
+          },
+        };
+
+        await db.collection("mails").add(digest);
+      })
+    );
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    console.error("Error:", error);
+    return NextResponse.json({ ok: false });
+  }
+}
diff --git a/apps/recnet/vercel.json b/apps/recnet/vercel.json
@@ -0,0 +1,8 @@
+{
+  "crons": [
+    {
+      "path": "/api/sendDigest",
+      "schedule": "1 0 ? * FRI"
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -2,15 +2,15 @@
   "name": "@recnet/source",
   "version": "0.0.0",
   "license": "MIT",
-  "scripts": {
-    "prepare": "npx husky init"
-  },
+  "scripts": {},
   "private": true,
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/themes": "^2.0.3",
+    "@react-email/components": "0.0.14",
+    "@react-email/render": "^0.0.12",
     "chance": "^1.1.11",
     "clsx": "^2.1.0",
     "firebase": "^10.7.2",
@@ -24,6 +24,7 @@
     "radix-themes-tw": "^0.1.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-email": "2.0.0",
     "react-hook-form": "^7.50.0",
     "react-loader-spinner": "^6.1.6",
     "server-only": "^0.0.1",