oddbit · muzanella11 · Jul 30, 2024 · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024
diff --git a/hosting/next.config.mjs b/hosting/next.config.mjs
@@ -1,10 +1,10 @@
-import {fileURLToPath} from "url";
 import path from "path";
+import {fileURLToPath} from "url";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ["lh3.googleusercontent.com"],
+    domains: ["lh3.googleusercontent.com", "firebasestorage.googleapis.com"],
   },
   redirects() {
     return [

diff --git a/hosting/src/components/Header/DropdownUser.tsx b/hosting/src/components/Header/DropdownUser.tsx
@@ -1,14 +1,8 @@
-import PlaceholderAvatar from "@/components/UserPicture/PlaceholderAvatar";
-import UserAvatar from "@/components/UserPicture/UserAvatar";
+import UserAvatar from "@/components/UserAvatar";
 import {useAuthentication} from "@/hooks/useAuthentication";
 import {clsx} from "clsx";
 import Link from "next/link";
-import {Suspense, useEffect, useRef, useState} from "react";
-
-interface DropdownUserProps {
-  displayName: string;
-  avatar: string;
-}
+import {useEffect, useRef, useState} from "react";
 
 interface DropdownItemProps {
   href: string;
@@ -30,11 +24,11 @@ function DropdownItem({href, icon, label}: DropdownItemProps) {
   );
 }
 
-export default function DropdownUser({displayName, avatar}: DropdownUserProps) {
+export default function DropdownUser() {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const trigger = useRef<HTMLAnchorElement>(null);
   const dropdown = useRef<HTMLDivElement>(null);
-  const {signout} = useAuthentication();
+  const {authUser, signout} = useAuthentication();
 
   // close on click outside
   useEffect(() => {
@@ -63,13 +57,11 @@ export default function DropdownUser({displayName, avatar}: DropdownUserProps) {
     <div className="relative">
       <Link ref={trigger} onClick={() => setDropdownOpen(!dropdownOpen)} className="flex items-center gap-4" href="#">
         <span className="hidden text-right lg:block">
-          <span className="block text-sm font-medium text-black dark:text-white">{displayName}</span>
+          <span className="block text-sm font-medium text-black dark:text-white">{authUser?.displayName}</span>
         </span>
 
         <span className="rounded-full">
-          <Suspense fallback={<PlaceholderAvatar size={40} />}>
-            <UserAvatar src={avatar} size={40} />
-          </Suspense>
+          <UserAvatar uid={authUser?.uid} size={40} />
         </span>
         <span className="i-ic-round-keyboard-arrow-down w-[24px] h-[24px]" />
       </Link>

diff --git a/hosting/src/components/Header/index.tsx b/hosting/src/components/Header/index.tsx
@@ -1,14 +1,9 @@
 import DarkModeSwitcher from "@/components/Header/DarkModeSwitcher";
 import DropdownUser from "@/components/Header/DropdownUser";
-import {useAuthentication} from "@/hooks/useAuthentication";
-import {useTanamUser} from "@/hooks/useTanamUser";
 import Image from "next/image";
 import Link from "next/link";
 
 const Header = (props: {sidebarOpen: string | boolean | undefined; setSidebarOpen: (arg0: boolean) => void}) => {
-  const {authUser} = useAuthentication();
-  const {data: tanamUser} = useTanamUser(authUser?.uid);
-
   return (
     <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
       <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
@@ -79,7 +74,7 @@ const Header = (props: {sidebarOpen: string | boolean | undefined; setSidebarOpe
           <ul className="flex items-center gap-2 2xsm:gap-4">
             <DarkModeSwitcher />
           </ul>
-          {tanamUser ? <DropdownUser displayName={tanamUser.name ?? ""} avatar={authUser?.photoURL ?? ""} /> : <></>}
+          <DropdownUser />
         </div>
       </div>
     </header>

diff --git a/hosting/src/components/UserAvatar.tsx b/hosting/src/components/UserAvatar.tsx
@@ -0,0 +1,37 @@
+import {useTanamUserImage} from "@/hooks/useTanamUser";
+import Image from "next/image";
+import {Suspense} from "react";
+
+interface UserImageProps {
+  uid?: string;
+  size?: number;
+}
+
+export default function UserAvatar({uid, size = 112}: UserImageProps) {
+  const {imageUrl} = useTanamUserImage(uid);
+
+  return (
+    <Suspense fallback={<PlaceholderAvatar size={size} />}>
+      {imageUrl ? (
+        <Image
+          id={`UserAvatar-${uid}`}
+          width={size}
+          height={size}
+          src={imageUrl}
+          style={{width: "auto", height: "auto"}}
+          alt="User Profile picture"
+        />
+      ) : (
+        <PlaceholderAvatar size={size} />
+      )}
+    </Suspense>
+  );
+}
+
+function PlaceholderAvatar({size}: {size: number}) {
+  return (
+    <div className="flex items-center justify-center">
+      <span className="i-ic-baseline-person" style={{fontSize: size}} />
+    </div>
+  );
+}
diff --git a/hosting/src/components/UserPicture/PlaceholderAvatar.tsx b/hosting/src/components/UserPicture/PlaceholderAvatar.tsx
diff --git a/hosting/src/components/UserPicture/UserAvatar.tsx b/hosting/src/components/UserPicture/UserAvatar.tsx
diff --git a/hosting/src/hooks/useTanamUser.tsx b/hosting/src/hooks/useTanamUser.tsx
@@ -1,6 +1,7 @@
 import {TanamUserClient} from "@/models/TanamUserClient";
 import {UserNotification} from "@/models/UserNotification";
-import {firestore} from "@/plugins/firebase";
+import {firestore, storage} from "@/plugins/firebase";
+import {getDownloadURL, ref} from "@firebase/storage";
 import {doc, onSnapshot} from "firebase/firestore";
 import {useEffect, useState} from "react";
 
@@ -47,3 +48,39 @@ export function useTanamUser(uid?: string): UseTanamDocumentsResult {
 
   return {data, error};
 }
+
+interface UseProfileImageResult {
+  imageUrl: string | null;
+  error: UserNotification | null;
+}
+
+/**
+ * Hook to get a profile image URL from Firebase Cloud Storage
+ *
+ * @param {string?} uid User ID
+ * @return {UseProfileImageResult} Hook for profile image URL
+ */
+export function useTanamUserImage(uid?: string): UseProfileImageResult {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [error, setError] = useState<UserNotification | null>(null);
+
+  useEffect(() => {
+    if (!uid) {
+      setImageUrl(null);
+      return;
+    }
+
+    const imageRef = ref(storage, `tanam-users/${uid}/profile.png`);
+    console.log(`Fetching profile image for user ${uid}: ${imageRef}`);
+
+    getDownloadURL(imageRef)
+      .then((url) => {
+        setImageUrl(url);
+      })
+      .catch((err) => {
+        setError(new UserNotification("error", "Error fetching profile image", err.message));
+      });
+  }, [uid]);
+
+  return {imageUrl, error};
+}
diff --git a/hosting/src/plugins/firebase.ts b/hosting/src/plugins/firebase.ts
@@ -1,6 +1,7 @@
 import {initializeApp} from "firebase/app";
 import {getAuth} from "firebase/auth";
 import {getFirestore} from "firebase/firestore";
+import {getStorage} from "firebase/storage";
 
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -15,3 +16,4 @@ const firebaseConfig = {
 export const firebaseApp = initializeApp(firebaseConfig);
 export const firebaseAuth = getAuth(firebaseApp);
 export const firestore = getFirestore(firebaseApp);
+export const storage = getStorage(firebaseApp);
diff --git a/storage.rules b/storage.rules
@@ -1,12 +1,18 @@
 rules_version = '2';
-
-// Craft rules based on data in your Firestore database
-// allow write: if firestore.get(
-//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
 service firebase.storage {
   match /b/{bucket}/o {
-    match /{allPaths=**} {
-      allow read, write: if false;
+    match /tanam-users/{uid} {
+			match /{allPaths=**} {
+        allow read: if request.auth != null && request.auth.uid == uid;
+      }
+
+			match /profile.png {
+        allow read: if request.auth != null;
+      }
+
+      match /profile-picture-new {
+        allow create: if request.auth != null && request.auth.uid == uid;
+      }
     }
   }
 }