refactor: avatar
This commit is contained in:
zerosoul
+40
-38
@@ -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',
|
||||
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;
|
||||
// },
|
||||
reducerPath: "auth",
|
||||
baseQuery,
|
||||
endpoints: (builder) => ({
|
||||
login: builder.mutation({
|
||||
query: (credentials) => ({
|
||||
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 },
|
||||
}),
|
||||
}),
|
||||
getMetamaskNonce: builder.query({
|
||||
query: (address) => ({
|
||||
url: `/token/metamask/nonce?public_address=${address}`,
|
||||
}),
|
||||
}),
|
||||
logout: builder.query({
|
||||
query: () => ({ url: `token/logout` }),
|
||||
}),
|
||||
}),
|
||||
checkInviteTokenValid: builder.mutation({
|
||||
query: (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}`
|
||||
})
|
||||
}),
|
||||
logout: builder.query({
|
||||
query: () => ({ url: `token/logout` })
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
export const {
|
||||
useLazyGetMetamaskNonceQuery,
|
||||
useLoginMutation,
|
||||
useLazyLogoutQuery,
|
||||
useCheckInviteTokenValidMutation
|
||||
useLazyGetMetamaskNonceQuery,
|
||||
useLoginMutation,
|
||||
useLazyLogoutQuery,
|
||||
useCheckInviteTokenValidMutation,
|
||||
} = authApi;
|
||||
|
||||
+47
-40
@@ -1,45 +1,52 @@
|
||||
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',
|
||||
baseQuery,
|
||||
extractRehydrationInfo(action, { reducerPath }) {
|
||||
if (action.type === REHYDRATE) {
|
||||
return action.payload ? action.payload[reducerPath] : undefined;
|
||||
}
|
||||
},
|
||||
endpoints: (builder) => ({
|
||||
getContacts: builder.query({
|
||||
query: () => ({ url: `user` }),
|
||||
transformResponse: (data) => {
|
||||
return data.map((user) => {
|
||||
const avatar = `${BASE_URL}/resource/avatar?uid=${user.uid}`;
|
||||
user.avatar = avatar;
|
||||
return user;
|
||||
});
|
||||
}
|
||||
reducerPath: "contact",
|
||||
baseQuery,
|
||||
extractRehydrationInfo(action, { reducerPath }) {
|
||||
if (action.type === REHYDRATE) {
|
||||
return action.payload ? action.payload[reducerPath] : undefined;
|
||||
}
|
||||
},
|
||||
endpoints: (builder) => ({
|
||||
getContacts: builder.query({
|
||||
query: () => ({ url: `user` }),
|
||||
transformResponse: (data) => {
|
||||
return data.map((user) => {
|
||||
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,
|
||||
}),
|
||||
}),
|
||||
sendMsg: builder.mutation({
|
||||
query: ({ id, content, type = "text" }) => ({
|
||||
headers: {
|
||||
"content-type": ContentTypes[type],
|
||||
},
|
||||
url: `user/${id}/send`,
|
||||
method: "POST",
|
||||
body: content,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
register: builder.mutation({
|
||||
query: (data) => ({
|
||||
url: `user/register`,
|
||||
method: 'POST',
|
||||
body: data
|
||||
})
|
||||
}),
|
||||
sendMsg: builder.mutation({
|
||||
query: ({ id, content, type = 'text' }) => ({
|
||||
headers: {
|
||||
'content-type': ContentTypes[type]
|
||||
},
|
||||
url: `user/${id}/send`,
|
||||
method: 'POST',
|
||||
body: content
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
export const { useGetContactsQuery, useSendMsgMutation, useRegisterMutation } = contactApi;
|
||||
export const {
|
||||
useGetContactsQuery,
|
||||
useSendMsgMutation,
|
||||
useRegisterMutation,
|
||||
} = contactApi;
|
||||
|
||||
@@ -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} />;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user