profile.js

import { doc, getDoc } from "firebase/firestore";
import { auth, db } from "./firebase-config.js";

document.addEventListener("DOMContentLoaded", async function () {

    const name = localStorage.getItem("name") || "";
    const role = localStorage.getItem("role") || "";

    const bio =
        localStorage.getItem("bio") ;

    const skill =
        localStorage.getItem("skill") ;

    const institution =
        localStorage.getItem("institution") ;

    let photoURL =
        localStorage.getItem("photoURL");

    // =========================
    // GET UID
    // =========================

    const uid = localStorage.getItem("uid");

    // =========================
    // GET PHOTO FROM FIREBASE
    // =========================

    if (uid) {

        try {

            // Firebase Auth
            if (auth.currentUser && auth.currentUser.photoURL) {
                photoURL = auth.currentUser.photoURL;
            }

            // Firestore
            const userSnap =
                await getDoc(doc(db, "users", uid));

            if (userSnap.exists()) {

                const userData = userSnap.data();

                if (userData.photoURL) {
                    photoURL = userData.photoURL;
                }
            }

            // Save it
            if (photoURL) {
                localStorage.setItem(
                    "photoURL",
                    photoURL
                );
            }

        } catch (error) {

            console.error(
                "Error loading profile:",
                error
            );

        }
    }

    // =========================
    // PROFILE TEXT
    // =========================

    const profileName =
        document.getElementById("profile-name");

    const profileRole =
        document.getElementById("profile-role");

    const profileInstitution =
        document.getElementById(
            "profile-institution-display"
        );

    const profileBio =
        document.getElementById(
            "profile-bio-display"
        );

    const profileSkills =
        document.getElementById(
            "profile-skills-display"
        );

    if (profileName)
        profileName.textContent = name;

    if (profileRole)
        profileRole.textContent = role;

    if (profileInstitution)
        profileInstitution.textContent = institution;

    if (profileBio)
        profileBio.textContent = bio;

    if (profileSkills)
        profileSkills.textContent = skill;

    // =========================
    // PROFILE PHOTO
    // =========================

    const photo =
        document.getElementById("profilePhoto");

    if (photoURL && photo) {

        photo.src = photoURL;

        photo.alt = name || "Profile";

        photo.referrerPolicy = "no-referrer";

    }

    // =========================
    // POSTS
    // =========================

    loadProfilePosts();

});


// =========================
// LOAD POSTS
// =========================

function loadProfilePosts() {

    const name =
        localStorage.getItem("name") || "";

    const posts =
        JSON.parse(
            localStorage.getItem("posts") || "[]"
        );

    const myPosts =
        posts.filter(
            post => post.name === name
        );

    const container =
        document.querySelector(".profile-posts");

    if (!container) return;

    if (myPosts.length === 0) {

        container.innerHTML = `
            <h3>Posts</h3>

            <div class="empty-state">
                <p>Make your first post</p>
            </div>
        `;

        return;
    }

    container.innerHTML =
        `<h3>Posts</h3>` +

        myPosts.map(post => `

            <div class="post-card"
                 style="margin-bottom:16px;">

                <p class="post-text">
                    ${post.text}
                </p>

                ${
                    post.image
                    ? `<img src="${post.image}"
                            class="post-image">`
                    : ""
                }

                <p style="
                    font-size:11px;
                    margin-top:8px;
                ">
                    ${post.time}
                </p>

            </div>

        `).join("");
}