Allow users to set profile pictures

src/Common/hooks/useAuthUser.ts

@@ -9,6 +9,7 @@ type AuthContextType = {
   user: UserModel | undefined;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
+  refetchUser: () => Promise<RequestResult<UserModel>>;
 };
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);

src/Components/Common/Avatar.tsx

@@ -1,5 +1,7 @@
+import CareIcon from "@/CAREUI/icons/CareIcon";
 import { cn } from "@/lib/utils";
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
+import { useTranslation } from "react-i18next";
 
 const colors: string[] = [
   "#E6F3FF", // Light Blue
@@ -43,57 +45,109 @@ const initials = (name: string): string => {
 };
 
 interface AvatarProps {
+  id?: string;
   colors?: [string, string];
   name: string;
   imageUrl?: string;
   className?: string;
 }
 
+interface EditableAvatarProps extends AvatarProps {
+  editable?: boolean;
+  onClick?: () => void;
+}
+
 const Avatar: React.FC<AvatarProps> = ({
+  id,
   colors: propColors,
   name,
   imageUrl,
   className,
 }) => {
   const [bgColor] = propColors || toColor(name);
-  const [width, setWidth] = useState(0);
-  const avatarRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const updateWidth = () => {
-      const avatarRect = avatarRef.current?.getBoundingClientRect();
-      const width = avatarRect?.width || 0;
-      setWidth(width);
-    };
-    updateWidth();
-    document.addEventListener("resize", updateWidth);
-    return () => document.removeEventListener("resize", updateWidth);
-  }, []);
-
   return (
     <div
-      ref={avatarRef}
+      id={id}
       className={cn(
-        `flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10 font-black text-black/10`,
+        `flex aspect-square w-full items-center justify-center overflow-hidden border border-black/10`,
         className,
       )}
       style={{
         background: bgColor,
-        borderRadius: width / 15 + "px",
-        fontSize: width / 2.5 + "px",
+        borderRadius: "calc(100% / 15)",
       }}
     >
       {imageUrl ? (
         <img
           src={imageUrl}
           alt={name}
-          className="aspect-square w-full object-cover"
+          className="aspect-square h-full w-full object-cover"
         />
       ) : (
-        <div>{initials(name)}</div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          viewBox="0 0 100 100"
+        >
+          <text
+            fill="black"
+            fillOpacity="0.1"
+            fontSize="40"
+            fontWeight="900"
+            x="50"
+            y="54"
+            textAnchor="middle"
+            dominantBaseline="middle"
+            alignmentBaseline="middle"
+          >
+            {initials(name)}
+          </text>
+        </svg>
+      )}
+    </div>
+  );
+};
+
+const EditableAvatar: React.FC<EditableAvatarProps> = ({
+  id,
+  colors: propColors,
+  name,
+  imageUrl,
+  className,
+  editable = true,
+  onClick,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div
+      id={id}
+      className={cn(
+        `group grid aspect-square h-full w-full place-items-center text-clip transition-all duration-200 ease-in-out [grid-template-areas:'stack']`,
+        editable && "cursor-pointer",
+        className,
+      )}
+    >
+      <Avatar
+        imageUrl={imageUrl}
+        name={name}
+        colors={propColors}
+        className="flex h-full w-full [grid-area:stack]"
+      />
+
+      {editable && (
+        <div
+          className={
+            "flex h-full w-full cursor-pointer flex-col items-center justify-center bg-black text-sm text-secondary-300 opacity-0 transition-opacity [grid-area:stack] hover:opacity-60"
+          }
+          style={{ borderRadius: "calc(100% / 15)" }}
+          onClick={onClick}
+        >
+          <CareIcon icon="l-pen" className="text-lg" />
+          <span className="mt-2">{t(imageUrl ? "edit" : "upload")}</span>
+        </div>
       )}
     </div>
   );
 };
 
-export { Avatar };
+export { Avatar, EditableAvatar };