Tabs progress

src/pages/ProfilePage.js

@@ -1,7 +1,7 @@
 import "./ProfilePage.css";
 import Nostrich from "../nostrich.jpg";
 
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faQrcode, faGear } from "@fortawesome/free-solid-svg-icons";
@@ -15,15 +15,30 @@ import { extractLinks } from '../Text'
 import LNURLTip from "../element/LNURLTip";
 import Nip05 from "../element/Nip05";
 import Copy from "../element/Copy";
+import ProfilePreview from "../element/ProfilePreview";
+import FollowersList from "../element/FollowersList";
+
+const ProfileTab = {
+    Notes: 0,
+    Reactions: 1,
+    Followers: 2,
+    Follows: 3
+};
 
 export default function ProfilePage() {
     const params = useParams();
     const navigate = useNavigate();
-    const id = parseId(params.id);
+    const id = useMemo(() => parseId(params.id), [params]);
     const user = useProfile(id);
     const loginPubKey = useSelector(s => s.login.publicKey);
+    const follows = useSelector(s => s.login.follows);
     const isMe = loginPubKey === id;
     const [showLnQr, setShowLnQr] = useState(false);
+    const [tab, setTab] = useState(ProfileTab.Notes);
+
+    useEffect(() => {
+        setTab(ProfileTab.Notes);
+    }, [params]);
 
     function details() {
         const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
@@ -63,6 +78,21 @@ export default function ProfilePage() {
         )
     }
 
+    function tabContent() {
+        switch (tab) {
+            case ProfileTab.Notes: return <Timeline pubkeys={id} />;
+            case ProfileTab.Follows: {
+                if (isMe) {
+                    return follows.map(a => <ProfilePreview key={a} pubkey={a.toLowerCase()} options={{ about: false }} />)
+                }
+            }
+            case ProfileTab.Followers: {
+                return <FollowersList pubkey={id} />
+            }
+        }
+        return null;
+    }
+
     return (
         <>
             <div className="profile flex">
@@ -75,12 +105,14 @@ export default function ProfilePage() {
                 </div>
             </div>
             <div className="tabs">
-                <div className="tab f-1 active">Notes</div>
-                <div className="tab f-1">Reactions</div>
-                <div className="tab f-1">Followers</div>
-                <div className="tab f-1">Follows</div>
+                {
+                    Object.entries(ProfileTab).map(([k, v]) => {
+                        return <div className={`tab f-1${tab === v ? " active" : ""}`} key={k} onClick={() => setTab(v)}>{k}</div>
+                    }
+                    )
+                }
             </div>
-            <Timeline pubkeys={id} />
+            {tabContent()}
         </>
     )
 }