refactor: avatar

src/common/component/Avatar.js

@@ -1,34 +1,59 @@
 import { useState, useEffect } from "react";
-export default function Avatar({ url = "", id = 0, ...rest }) {
+const initialAvatar = ({
+  initials = "UK",
+  initial_size = 0,
+  size = 200,
+  foreground = "#fff",
+  background = "#4c99e9",
+  weight = 400,
+  fontFamily = "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+}) => {
+  const canvas = document.createElement("canvas");
+  const width = size;
+  const height = size;
+  const devicePixelRatio = Math.max(window.devicePixelRatio, 1);
+  canvas.width = width * devicePixelRatio;
+  canvas.height = height * devicePixelRatio;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+
+  const context = canvas.getContext("2d");
+  context.scale(devicePixelRatio, devicePixelRatio);
+  context.rect(0, 0, canvas.width, canvas.height);
+  context.fillStyle = background;
+  context.fill();
+  context.font = `${weight} ${initial_size || height / 2}px ${fontFamily}`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  context.fillStyle = foreground;
+  context.fillText(initials, width / 2, height / 2);
+
+  /* istanbul ignore next */
+  return canvas.toDataURL("image/png");
+};
+const getInitials = (name) => {
+  const arr = name.split(" ").filter((n) => !!n);
+  return arr
+    .map((t) => t[0])
+    .join("")
+    .toUpperCase();
+};
+export default function Avatar({ url, name = "unkonw name", ...rest }) {
   const [src, setSrc] = useState(url);
-  const [loaded, setLoaded] = useState(false);
-
-  const handleLoaded = () => {
-    setLoaded(true);
-  };
   const handleError = () => {
-    if (src.indexOf("avatars.dicebear.com") > -1) return;
-    setSrc(`https://avatars.dicebear.com/api/adventurer-neutral/${id}.svg`);
+    const tmp = initialAvatar({
+      initials: getInitials(name),
+    });
+    setSrc(tmp);
   };
-
   useEffect(() => {
-    setLoaded(false);
-    setSrc(url);
-  }, [url]);
+    if (!url) {
+      const tmp = initialAvatar({
+        initials: getInitials(name),
+      });
+      setSrc(tmp);
+    }
+  }, [url, name]);
 
-  useEffect(() => {
-    const inter = setTimeout(() => {
-      if (!loaded) {
-        handleError();
-      }
-    }, 2000);
-
-    return () => {
-      clearTimeout(inter);
-    };
-  }, [loaded]);
-
-  return (
-    <img onLoad={handleLoaded} src={src} onError={handleError} {...rest} />
-  );
+  return <img src={src} onError={handleError} {...rest} />;
 }

src/common/component/Contact.js

@@ -1,9 +1,10 @@
 // import React from 'react';
 import styled from "styled-components";
-import Avatar from "./Avatar";
+import { useSelector } from "react-redux";
 import Tippy from "@tippyjs/react";
+import "tippy.js/animations/scale-subtle.css";
+import Avatar from "./Avatar";
 import Profile from "./Profile";
-import { useGetContactsQuery } from "../../app/services/contact";
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -37,7 +38,9 @@ const StyledWrapper = styled.div`
       height: 10px;
       border-radius: 50%;
       outline: 2px solid #fff;
-      background-color: #22c55e;
+      &.online {
+        background-color: #22c55e;
+      }
       &.offline {
         background-color: #a1a1aa;
       }
@@ -55,17 +58,17 @@ const StyledWrapper = styled.div`
 `;
 export default function Contact({
   interactive = true,
-  status = "",
   uid = "",
   popover = false,
 }) {
-  const { data: contacts } = useGetContactsQuery();
+  const contacts = useSelector((store) => store.contacts);
   if (!contacts) return null;
   const currUser = contacts.find((c) => c.uid == uid);
   return (
     <StyledWrapper className={`${interactive ? "interactive" : ""}`}>
       <Tippy
-        animation="perspective"
+        inertia={true}
+        animation="scale"
         interactive
         disabled={!popover}
         placement="left"
@@ -73,8 +76,10 @@ export default function Contact({
         content={<Profile data={currUser} type="card" />}
       >
         <div className="avatar">
-          <Avatar url={currUser?.avatar} id={uid} alt="avatar" />
-          <div className={`status ${status}`}></div>
+          <Avatar url={currUser?.avatar} name={currUser?.name} alt="avatar" />
+          <div
+            className={`status ${currUser?.online ? "online" : "offline"}`}
+          ></div>
         </div>
       </Tippy>
       <span className="name">{currUser?.name}</span>

src/common/component/CurrentUser.js

@@ -59,15 +59,15 @@ export default function CurrentUser({ expand = true }) {
   }, [isSuccess]);
 
   if (!user) return null;
-  const { name, uid } = user;
+  const { name, avatar } = user;
   return (
     <StyledWrapper>
       <div className="profile" title={name}>
         <Avatar
           onDoubleClick={handleLogout}
           title={name}
-          url={`${BASE_URL}/resource/avatar?uid=${uid}`}
-          id={uid}
+          url={avatar}
+          name={name}
           alt="user avatar"
           className="avatar"
         />

src/common/component/Profile.js

@@ -67,7 +67,7 @@ export default function Profile({ data = null, type = "embed" }) {
   const { uid, name, email, avatar } = data;
   return (
     <StyledWrapper className={type}>
-      <Avatar className="avatar" url={avatar} id={uid} name={name} />
+      <Avatar className="avatar" url={avatar} name={name} />
       <h2 className="name">{name}</h2>
       <span className="email">{email}</span>
       <ul className="icons">