added friends

personafm · Jul 9, 2024 · a65d8af · a65d8af
1 parent de84c5b
commit a65d8af
Show file tree

Hide file tree

Showing 12 changed files with 376 additions and 202 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "prettier"]
 }
diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml
@@ -1,6 +1,6 @@
 name: "Pull Request Labeler"
 on:
-- pull_request_target
+  - pull_request_target
 
 jobs:
   labeler:
@@ -9,4 +9,4 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/labeler@v5
+      - uses: actions/labeler@v5
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/app/api/lib/lastfm/user.ts b/app/api/lib/lastfm/user.ts
@@ -66,4 +66,25 @@ function getTopItems(
     });
 }
 
-export { getRecentTracks, getOverallCount, getTopItems };
+function getFriends(user: string, api_key: string, limit:number, page:number) {
+  return axios
+    .get("https://ws.audioscrobbler.com/2.0/", {
+      params: {
+        method: "user.getFriends",
+        user: user,
+        api_key: api_key,
+        limit: limit,
+        page: page,
+        recenttracks: true,
+        format: "json",
+      },
+    })
+    .then((response) => {
+      return response.data.friends;
+    })
+    .catch((error) => {
+      return error;
+    });
+}
+
+export { getRecentTracks, getOverallCount, getTopItems, getFriends };
diff --git a/app/components/friends.tsx b/app/components/friends.tsx
@@ -0,0 +1,36 @@
+import Image from "next/image";
+
+export default function Friends(props:any) {
+    return (
+        <div className="overflow-x-auto w-full">
+        <table className="table">
+          <tbody>
+            {props.data.map((user: any, index: any) => (
+              <tr
+                key={index}
+                className="hover:text-secondary cursor-pointer border-0"
+                //onClick={() => redirect(track.url)}
+              >
+                <td style={{ width: "0" }} className="px-0 py-2">
+                  <div className="avatar">
+                    <div className="w-12">
+                      <Image unoptimized
+                        alt="album cover"
+                        src={user.image[3]["#text"] ? user.image[3]["#text"] : "/images/image.png"}
+                        width={64}
+                        height={64}
+                      />
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <p className="font-bold text-md">{user.name}</p>
+                  <p>{user.realname}</p>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    )
+}
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
@@ -0,0 +1,14 @@
+import { logout } from "../api/lib/lastfm/auth";
+
+export default function Settings() {
+  return (
+    <div>
+      <button
+        className="btn btn-block btn-error"
+        onClick={() => logout(process.env.NEXT_PUBLIC_CALLBACK_URL || "")}
+      >
+        Log Out
+      </button>
+    </div>
+  );
+}
diff --git a/app/components/tabs.tsx b/app/components/tabs.tsx
@@ -41,40 +41,92 @@ export default function Tabs() {
           className={`tab hover:tab-active ${active.includes("overview") ? "tab-active" : ""}`}
           onClick={() => switchTab("overview/recents")}
         >
-          Overview
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className="bi bi-music-note-list"
+            viewBox="0 0 16 16"
+          >
+            <path d="M12 13c0 1.105-1.12 2-2.5 2S7 14.105 7 13s1.12-2 2.5-2 2.5.895 2.5 2" />
+            <path fillRule="evenodd" d="M12 3v10h-1V3z" />
+            <path d="M11 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 16 2.22V4l-5 1z" />
+            <path
+              fillRule="evenodd"
+              d="M0 11.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m0-4A.5.5 0 0 1 .5 7H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m0-4A.5.5 0 0 1 .5 3H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5"
+            />
+          </svg>
         </a>
         <a
           role="tab"
-          className={`tab hover:tab-active ${active.includes("social") ? "tab-active" : ""}`}
-          onClick={() => switchTab("social/followers")}
+          className={`tab hover:tab-active ${active.includes("friends") ? "tab-active" : ""}`}
+          onClick={() => switchTab("friends")}
         >
-          Social
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className="bi bi-person-fill"
+            viewBox="0 0 16 16"
+          >
+            <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
+          </svg>
         </a>
         <a
           role="tab"
           className={`tab hover:tab-active ${active.includes("search") ? "tab-active" : ""}`}
           onClick={() => switchTab("search/tracks")}
         >
-          Search
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className="bi bi-search"
+            viewBox="0 0 16 16"
+          >
+            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
+          </svg>
         </a>
         <a
           role="tab"
           className={`tab hover:tab-active ${active.includes("scrobble") ? "tab-active" : ""}`}
           onClick={() => switchTab("scrobble/manual")}
         >
-          Scrobble
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className="bi bi-music-player-fill"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2" />
+            <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm1 2h6a1 1 0 0 1 1 1v2.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1m3 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6" />
+          </svg>{" "}
         </a>
         <a
           role="tab"
           className={`tab hover:tab-active ${active.includes("tools") ? "tab-active" : ""}`}
           onClick={() => switchTab("tools/settings")}
         >
-          Tools
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className="bi bi-tools"
+            viewBox="0 0 16 16"
+          >
+            <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z" />
+          </svg>
         </a>
       </div>
-      <br />
+      {(active.includes("overview") || active.includes("search") || active.includes("scrobble") || active.includes("tools")) && <br />}
       {active.includes("overview") && (
-        <div role="tablist" className="tabs tabs-bordered">
+        <div role="tablist" className="tabs tabs-bordered tabs-sm">
           <a
             role="tab"
             className={`tab hover:tab-active ${active.includes("overview/recents") ? "tab-active" : ""}`}
@@ -105,26 +157,8 @@ export default function Tabs() {
           </a>
         </div>
       )}
-      {active.includes("social") && (
-        <div role="tablist" className="tabs tabs-bordered">
-          <a
-            role="tab"
-            className={`tab hover:tab-active ${active.includes("social/followers") ? "tab-active" : ""}`}
-            onClick={() => switchTab("social/followers")}
-          >
-            Recents
-          </a>
-          <a
-            role="tab"
-            className={`tab hover:tab-active ${active.includes("social/following") ? "tab-active" : ""}`}
-            onClick={() => switchTab("social/following")}
-          >
-            Tracks
-          </a>
-        </div>
-      )}
       {active.includes("search") && (
-        <div role="tablist" className="tabs tabs-bordered">
+        <div role="tablist" className="tabs tabs-bordered tabs-sm">
           <a
             role="tab"
             className={`tab hover:tab-active ${active.includes("search/tracks") ? "tab-active" : ""}`}
@@ -149,7 +183,7 @@ export default function Tabs() {
         </div>
       )}
       {active.includes("scrobble") && (
-        <div role="tablist" className="tabs tabs-bordered">
+        <div role="tablist" className="tabs tabs-bordered tabs-sm">
           <a
             role="tab"
             className={`tab hover:tab-active ${active.includes("scrobble/manual") ? "tab-active" : ""}`}
@@ -160,7 +194,7 @@ export default function Tabs() {
         </div>
       )}
       {active.includes("tools") && (
-        <div role="tablist" className="tabs tabs-bordered">
+        <div role="tablist" className="tabs tabs-bordered tabs-sm">
           <a
             role="tab"
             className={`tab hover:tab-active ${active.includes("tools/settings") ? "tab-active" : ""}`}

diff --git a/app/home/layout.tsx b/app/home/layout.tsx
@@ -9,11 +9,10 @@ export default function HomeLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-
   useEffect(() => {
     const cookieList = getCookies("nextjs");
     if (cookieList != undefined) {
-      return
+      return;
     } else {
       window.location.href = `${process.env.NEXT_PUBLIC_CALLBACK_URL}`;
     }
@@ -22,7 +21,7 @@ export default function HomeLayout({
   return (
     <html lang="en">
       <body suppressHydrationWarning>
-        <div className="container mx-auto px-4">
+        <div className="container mx-auto px-2">
           <Tabs />
           <br />
           {children}

diff --git a/app/home/page.tsx b/app/home/page.tsx
@@ -4,14 +4,18 @@ import { useEffect, useState } from "react";
 import Recents from "../components/recents";
 import Loading from "../components/loading";
 import Search from "../components/search";
-import { getRecentTracks } from "../api/lib/lastfm/user";
+import { getFriends, getRecentTracks } from "../api/lib/lastfm/user";
 import { getCookies } from "../api/lib/lastfm/auth";
 import { comparePath } from "../api/lib/paths";
+import Settings from "../components/settings";
+import Friends from "../components/friends";
 
 export default function Page() {
   const [recentTracks, setRecentTracks] = useState<any[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
+  const [username, setUsername] = useState("");
   const [active, setActive] = useState("");
+  const [friends, setFriends] = useState<any[]>([]);
 
   useEffect(() => {
     const handleHashChange = () => {
@@ -21,6 +25,7 @@ export default function Page() {
 
     const cookieList = getCookies("nextjs");
     if (cookieList != undefined) {
+      setUsername(cookieList[1] || "")
       //@ts-expect-error
       getRecentTracks(cookieList[1] || "", process.env.NEXT_PUBLIC_API_KEY)
         .then((response: any) => {
@@ -38,13 +43,29 @@ export default function Page() {
     }
   }, []);
 
+  useEffect(() => {
+    if (active.includes("friends") && friends.length === 0) {
+      getFriends(
+        username,
+        process.env.NEXT_PUBLIC_API_KEY || "",
+        50,
+        1
+      ).then((response: any) => {
+        setFriends(response.user)
+        console.log(response)
+      });
+    }
+  }, [active]);
+
   return (
     <div className="container mx-auto">
       {loading && <Loading />}
       {active.includes("overview") && active === "overview/recents" && (
         <Recents recentTracks={recentTracks} />
       )}
+      {active.includes("friends") && <Friends data={friends}/>}
       {active.includes("search") && <Search active={active} />}
+      {active.includes("tools") && active === "tools/settings" && <Settings />}
     </div>
   );
 }