feat: 🎉 save to flomo

components/ActionsAfterResult.tsx

@@ -1,12 +1,20 @@
+import Image from "next/image";
 import React from "react";
+import { useLocalStorage } from "react-use";
+import { useSaveToFlomo } from "~/hooks/notes/flomo";
 
 export function ActionsAfterResult({
   curVideo,
   onCopy,
+  summaryNote,
 }: {
   curVideo: string;
+  summaryNote: string;
   onCopy: () => void;
 }) {
+  const [flomoWebhook] = useLocalStorage<string>("user-flomo-webhook");
+  const { loading, save } = useSaveToFlomo(summaryNote, flomoWebhook || "");
+
   return (
     <div className="mx-auto mt-7 flex max-w-3xl flex-row-reverse gap-x-4">
       <a
@@ -31,6 +39,18 @@ export function ActionsAfterResult({
       >
         一键复制
       </button>
+      {flomoWebhook && (
+        <button
+          className="flex w-44 cursor-pointer items-center justify-center rounded-lg bg-green-400 px-2 py-1 text-center font-medium text-white hover:bg-green-400/80"
+          onClick={save}
+        >
+          {loading ? (
+            <Image src="/loading.svg" alt="Loading..." width={28} height={28} />
+          ) : (
+            "一键保存到 Flomo"
+          )}
+        </button>
+      )}
     </div>
   );
 }

components/SummaryResult.tsx

@@ -21,17 +21,16 @@ export function SummaryResult({
 }) {
   const { toast } = useToast();
   const { summaryArray, formattedSummary } = formatSummary(summary);
+  const summaryNote =
+    formattedSummary +
+    "\n\n #BibiGPT自动总结 b.jimmylv.cn @吕立青_JimmyLv \nBV1fX4y1Q7Ux";
 
   const handleCopy = () => {
     if (!isSecureContext) {
       toast({ description: "复制错误 ❌" });
       return;
     }
-    // todo: add the youtube video id
-    navigator.clipboard.writeText(
-      formattedSummary +
-        "\n\n #BibiGPT自动总结 b.jimmylv.cn @吕立青_JimmyLv \nBV1fX4y1Q7Ux"
-    );
+    navigator.clipboard.writeText(summaryNote);
     toast({ description: "复制成功 ✂️" });
   };
 
@@ -63,7 +62,11 @@ export function SummaryResult({
           </div>
         ))}
       </div>
-      <ActionsAfterResult curVideo={currentVideoUrl} onCopy={handleCopy} />
+      <ActionsAfterResult
+        curVideo={currentVideoUrl}
+        onCopy={handleCopy}
+        summaryNote={summaryNote}
+      />
     </div>
   );
 }

hooks/notes/flomo.ts

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { useToast } from "~/hooks/use-toast";
+
+export function useSaveToFlomo(note: string, webhook: string) {
+  const [loading, setLoading] = useState(false);
+  const { toast } = useToast();
+
+  const save = async () => {
+    setLoading(true);
+    const response = await fetch(webhook, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        content: note + "#BibiGpt",
+      }),
+    });
+    const json = await response.json();
+    console.log("========response========", json);
+    if (!response.ok || json.code === -1) {
+      console.log("error", response);
+      toast({
+        variant: "destructive",
+        title: response.status.toString(),
+        description: json.message,
+      });
+    } else {
+      toast({
+        title: response.status.toString(),
+        description: "保存成功！快去 Flomo 查看吧。",
+      });
+    }
+    setLoading(false);
+  };
+  return { save, loading };
+}

pages/user/integration.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useLocalStorage } from "react-use";
 import { Sidebar } from "~/components/sidebar";
-import { CHECKOUT_URL } from "~/utils/constants";
+
 export default () => {
   const [flomoWebhook, setFlomoWebhook, remove] =
     useLocalStorage<string>("user-flomo-webhook");