update discover

all-in-aigc · Apr 6, 2024 · c6db6cd · c6db6cd
1 parent 0b37651
commit c6db6cd
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 7 deletions.
diff --git a/app/[locale]/(default)/_components/song/list.tsx b/app/[locale]/(default)/_components/song/list.tsx
@@ -11,8 +11,6 @@ export default function ({ songs }: { songs: Song[] }) {
   const router = useRouter();
   return (
     <div>
-      <h2 className="text-lg font-medium">{t("roaming")}</h2>
-
       {songs.map((song: Song) => {
         return (
           <div

diff --git a/app/[locale]/(default)/discover/page.tsx b/app/[locale]/(default)/discover/page.tsx
@@ -1,20 +1,68 @@
-import * as React from "react";
+"use client";
 
 import { MdLocalFireDepartment, MdOutlineRssFeed } from "react-icons/md";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { getLatestSongs, getTrendingSongs } from "@/models/song";
+import { useEffect, useState } from "react";
 
 import Image from "next/image";
 import List from "../_components/song/list";
 import { PiPlaylistDuotone } from "react-icons/pi";
 import { Song } from "@/types/song";
 import { getTranslations } from "next-intl/server";
+import { useTranslations } from "next-intl";
 
-export default async function () {
-  const t = await getTranslations("nav");
+export default function () {
+  const t = useTranslations("nav");
+  const [trendingSongs, setTrendingSongs] = useState<Song[] | null>(null);
+  const [latestSongs, setLatestSongs] = useState<Song[] | null>(null);
 
-  const trendingSongs = await getTrendingSongs(1, 50);
-  const latestSongs = await getLatestSongs(1, 50);
+  const fetchTrendingSongs = async function (page: number, limit: number) {
+    try {
+      const uri = `/api/get-trending-songs`;
+      const params = {
+        page,
+        limit,
+      };
+      const resp = await fetch(uri, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(params),
+      });
+      const { data } = await resp.json();
+      setTrendingSongs(data || []);
+    } catch (e) {
+      console.log("fetch trending songs failed:");
+    }
+  };
+
+  const fetchLatestSongs = async function (page: number, limit: number) {
+    try {
+      const uri = `/api/get-latest-songs`;
+      const params = {
+        page,
+        limit,
+      };
+      const resp = await fetch(uri, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(params),
+      });
+      const { data } = await resp.json();
+      setLatestSongs(data || []);
+    } catch (e) {
+      console.log("fetch trending songs failed:");
+    }
+  };
+
+  useEffect(() => {
+    fetchTrendingSongs(1, 50);
+    fetchLatestSongs(1, 50);
+  }, []);
 
   return (
     <div className="w-full md:max-w-6xl mx-auto">

diff --git a/app/[locale]/(default)/song/[uuid]/page.tsx b/app/[locale]/(default)/song/[uuid]/page.tsx
@@ -3,8 +3,10 @@ import { findByUuid, getRandomSongs } from "@/models/song";
 import Header from "../../_components/song/header";
 import List from "../../_components/song/list";
 import Lyrics from "../../_components/song/lyrics";
+import { getTranslations } from "next-intl/server";
 
 export default async function ({ params }: { params: { uuid: string } }) {
+  const t = await getTranslations("nav");
   const song = await findByUuid(params.uuid);
   const randomSongs = await getRandomSongs(1, 10);
 
@@ -19,6 +21,8 @@ export default async function ({ params }: { params: { uuid: string } }) {
             </div>
             <div className="md:w-96 mx-8 border-l border-base-200 px-8">
               <div className="mt-4">
+                <h2 className="text-lg mb-4 font-medium">{t("roaming")}</h2>
+
                 {randomSongs && <List songs={randomSongs} />}
               </div>
             </div>

diff --git a/vercel.json b/vercel.json
@@ -0,0 +1,7 @@
+{
+  "functions": {
+    "app/api/**/*": {
+      "maxDuration": 120
+    }
+  }
+}