refactor: avatar

src/app/services/auth.js

@@ -1,44 +1,46 @@
-import { createApi } from '@reduxjs/toolkit/query/react';
-import baseQuery from './base.query';
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQuery from "./base.query";
+import BASE_URL from "../config";
 export const authApi = createApi({
- reducerPath: 'auth',
+  reducerPath: "auth",
   baseQuery,
   endpoints: (builder) => ({
     login: builder.mutation({
       query: (credentials) => ({
-    url: 'token/login',
-    method: 'POST',
-    body: { credential: credentials, device: 'web', device_token: 'test' }
-   })
-   // transformResponse: (resp) => {
-   //   console.log("resp", resp);
-   //   if (resp.status == 401) {
-   //     resp.msg = "username or password incorrect";
-   //   }
-   //   return resp;
-   // },
+        url: "token/login",
+        method: "POST",
+        body: { credential: credentials, device: "web", device_token: "test" },
+      }),
+      transformResponse: (data) => {
+        const { avatar_updated_at } = data.user;
+        data.user.avatar =
+          avatar_updated_at == 0
+            ? ""
+            : `${BASE_URL}/resource/avatar?uid=${data.user.uid}`;
+        return data;
+      },
     }),
     checkInviteTokenValid: builder.mutation({
       query: (token) => ({
-    url: 'user/check_invite_magic_token',
-    method: 'POST',
-    body: { magic_token: token }
-   })
+        url: "user/check_invite_magic_token",
+        method: "POST",
+        body: { magic_token: token },
+      }),
     }),
     getMetamaskNonce: builder.query({
       query: (address) => ({
-    url: `/token/metamask/nonce?public_address=${address}`
-   })
+        url: `/token/metamask/nonce?public_address=${address}`,
+      }),
     }),
     logout: builder.query({
-   query: () => ({ url: `token/logout` })
-  })
- })
+      query: () => ({ url: `token/logout` }),
+    }),
+  }),
 });
 
 export const {
   useLazyGetMetamaskNonceQuery,
   useLoginMutation,
   useLazyLogoutQuery,
- useCheckInviteTokenValidMutation
+  useCheckInviteTokenValidMutation,
 } = authApi;

src/app/services/contact.js

@@ -1,10 +1,10 @@
-import { createApi } from '@reduxjs/toolkit/query/react';
-import baseQuery from './base.query';
-import BASE_URL, { ContentTypes } from '../config';
-import { REHYDRATE } from 'redux-persist';
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQuery from "./base.query";
+import BASE_URL, { ContentTypes } from "../config";
+import { REHYDRATE } from "redux-persist";
 
 export const contactApi = createApi({
- reducerPath: 'contact',
+  reducerPath: "contact",
   baseQuery,
   extractRehydrationInfo(action, { reducerPath }) {
     if (action.type === REHYDRATE) {
@@ -16,30 +16,37 @@ export const contactApi = createApi({
       query: () => ({ url: `user` }),
       transformResponse: (data) => {
         return data.map((user) => {
-     const avatar = `${BASE_URL}/resource/avatar?uid=${user.uid}`;
+          const avatar =
+            user.avatar_updated_at == 0
+              ? ""
+              : `${BASE_URL}/resource/avatar?uid=${user.uid}`;
           user.avatar = avatar;
           return user;
         });
-   }
+      },
     }),
     register: builder.mutation({
       query: (data) => ({
         url: `user/register`,
-    method: 'POST',
-    body: data
-   })
+        method: "POST",
+        body: data,
+      }),
     }),
     sendMsg: builder.mutation({
-   query: ({ id, content, type = 'text' }) => ({
+      query: ({ id, content, type = "text" }) => ({
         headers: {
-     'content-type': ContentTypes[type]
+          "content-type": ContentTypes[type],
         },
         url: `user/${id}/send`,
-    method: 'POST',
-    body: content
-   })
-  })
- })
+        method: "POST",
+        body: content,
+      }),
+    }),
+  }),
 });
 
-export const { useGetContactsQuery, useSendMsgMutation, useRegisterMutation } = contactApi;
+export const {
+  useGetContactsQuery,
+  useSendMsgMutation,
+  useRegisterMutation,
+} = contactApi;

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]);
-
-  useEffect(() => {
-    const inter = setTimeout(() => {
-      if (!loaded) {
-        handleError();
+    if (!url) {
+      const tmp = initialAvatar({
+        initials: getInitials(name),
+      });
+      setSrc(tmp);
     }
-    }, 2000);
+  }, [url, name]);
 
-    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;
+      &.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">

src/routes/chat/DMList.js

@@ -31,7 +31,7 @@ const NavItem = ({ data, setFiles }) => {
       className={`session ${isActive ? "drop_over" : ""}`}
       to={`/chat/dm/${uid}`}
     >
-      <Avatar className="avatar" url={user.avatar} id={uid} />
+      <Avatar className="avatar" url={user.avatar} name={user.name} />
       <div className="details">
         <div className="up">
           <span className="name">{user.name}</span>