From 1d9208fb61726bee178b109624d1e892174008c9 Mon Sep 17 00:00:00 2001 From: zerosoul Date: Fri, 15 Apr 2022 22:11:34 +0800 Subject: [PATCH] feat: update channel icon --- src/app/services/channel.js | 26 +++++++++++++++++++++++++- src/app/slices/channels.js | 9 +++++++-- src/common/component/Avatar.js | 11 +++++++++-- src/common/component/AvatarUploader.js | 17 ++++------------- src/routes/settingChannel/Overview.js | 14 +++++++++++++- 5 files changed, 58 insertions(+), 19 deletions(-) diff --git a/src/app/services/channel.js b/src/app/services/channel.js index 5d05671e..027895fb 100644 --- a/src/app/services/channel.js +++ b/src/app/services/channel.js @@ -1,7 +1,7 @@ import { createApi } from "@reduxjs/toolkit/query/react"; // import toast from "react-hot-toast"; import baseQuery from "./base.query"; -import { ContentTypes } from "../config"; +import BASE_URL, { ContentTypes } from "../config"; import { updateChannel, removeChannel } from "../slices/channels"; import { removeMessage } from "../slices/message"; import { removeChannelSession } from "../slices/message.channel"; @@ -137,6 +137,29 @@ export const channelApi = createApi({ body: members, }), }), + updateIcon: builder.mutation({ + query: ({ gid, image }) => ({ + headers: { + "content-type": "image/png", + }, + url: `/group/${gid}/avatar`, + method: "POST", + body: image, + }), + async onQueryStarted({ gid }, { dispatch, queryFulfilled }) { + try { + await queryFulfilled; + dispatch( + updateChannel({ + id: gid, + icon: `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${new Date().getTime()}`, + }) + ); + } catch (error) { + console.log("err", error); + } + }, + }), }), }); @@ -152,4 +175,5 @@ export const { useSendChannelMsgMutation, useAddMembersMutation, useRemoveMembersMutation, + useUpdateIconMutation, } = channelApi; diff --git a/src/app/slices/channels.js b/src/app/slices/channels.js index e62a60f3..f4de6db7 100644 --- a/src/app/slices/channels.js +++ b/src/app/slices/channels.js @@ -1,4 +1,5 @@ import { createSlice } from "@reduxjs/toolkit"; +import BASE_URL from "../config"; const initialState = { ids: [], byId: {}, @@ -17,6 +18,7 @@ const channelsSlice = createSlice({ state.byId = Object.fromEntries( chs.map((c) => { const { gid } = c; + c.icon = `${BASE_URL}/resource/group_avatar?gid=${gid}`; return [gid, c]; }) ); @@ -26,7 +28,10 @@ const channelsSlice = createSlice({ const ch = action.payload; const { gid, ...rest } = ch; state.ids.push(gid); - state.byId[gid] = rest; + state.byId[gid] = { + ...rest, + icon: `${BASE_URL}/resource/group_avatar?gid=${gid}`, + }; }, updateChannel(state, action) { const ignoreInPublic = ["add_member", "remove_member"]; @@ -65,7 +70,7 @@ const channelsSlice = createSlice({ break; default: - state.byId[id] = { ...state.byId[id], members, ...rest }; + state.byId[id] = { ...state.byId[id], ...rest }; break; } }, diff --git a/src/common/component/Avatar.js b/src/common/component/Avatar.js index 730881c5..806b1808 100644 --- a/src/common/component/Avatar.js +++ b/src/common/component/Avatar.js @@ -1,7 +1,12 @@ import { useState, useEffect } from "react"; import { getInitials, getInitialsAvatar } from "../utils"; -export default function Avatar({ url = "", name = "unkonw name", ...rest }) { - // console.log("avatar url", url); +export default function Avatar({ + url = "", + name = "unkonw name", + type = "user", + ...rest +}) { + console.log("avatar url", url); const [src, setSrc] = useState(""); const handleError = (err) => { if (url) { @@ -9,6 +14,7 @@ export default function Avatar({ url = "", name = "unkonw name", ...rest }) { } const tmp = getInitialsAvatar({ initials: getInitials(name), + background: type == "channel" ? "#4ea758" : undefined, }); setSrc(tmp); }; @@ -16,6 +22,7 @@ export default function Avatar({ url = "", name = "unkonw name", ...rest }) { if (!url) { const tmp = getInitialsAvatar({ initials: getInitials(name), + background: type == "channel" ? "#4ea758" : undefined, }); setSrc(tmp); } else { diff --git a/src/common/component/AvatarUploader.js b/src/common/component/AvatarUploader.js index ac023d6b..b738b9dd 100644 --- a/src/common/component/AvatarUploader.js +++ b/src/common/component/AvatarUploader.js @@ -1,7 +1,7 @@ -import { useState, useEffect } from "react"; +import { useState } from "react"; import styled from "styled-components"; +import Avatar from "../component/Avatar"; import uploadIcon from "../../assets/icons/upload.image.svg?url"; -import { getInitials, getInitialsAvatar } from "../utils"; const StyledWrapper = styled.div` width: 96px; height: 96px; @@ -61,19 +61,11 @@ const StyledWrapper = styled.div` export default function AvatarUploader({ url = "", name = "", + type = "user", uploadImage, disabled = false, }) { const [uploading, setUploading] = useState(false); - const [currSrc, setCurrSrc] = useState(""); - useEffect(() => { - if (!url) { - const initialsSrc = getInitialsAvatar({ initials: getInitials(name) }); - setCurrSrc(initialsSrc); - } else { - setCurrSrc(url); - } - }, [url, name]); const handleUpload = async (evt) => { if (uploading) return; const [file] = evt.target.files; @@ -81,11 +73,10 @@ export default function AvatarUploader({ await uploadImage(file); setUploading(false); }; - if (!currSrc) return null; return (
- avatar + {!disabled && ( <>
diff --git a/src/routes/settingChannel/Overview.js b/src/routes/settingChannel/Overview.js index 2fc71521..f61d44b5 100644 --- a/src/routes/settingChannel/Overview.js +++ b/src/routes/settingChannel/Overview.js @@ -4,7 +4,9 @@ import toast from "react-hot-toast"; import { useGetChannelQuery, useUpdateChannelMutation, + useUpdateIconMutation, } from "../../app/services/channel"; +import AvatarUploader from "../../common/component/AvatarUploader"; import Input from "../../common/component/styled/Input"; import Label from "../../common/component/styled/Label"; import Textarea from "../../common/component/styled/Textarea"; @@ -50,6 +52,7 @@ export default function Overview({ id = 0 }) { const { data, refetch } = useGetChannelQuery(id); const [changed, setChanged] = useState(false); const [values, setValues] = useState(null); + const [updateChannelIcon] = useUpdateIconMutation(); const [updateChannel, { isSuccess: updated }] = useUpdateChannelMutation(); const handleUpdate = () => { const { name, description } = values; @@ -62,6 +65,9 @@ export default function Overview({ id = 0 }) { return { ...prev, [type]: newValue }; }); }; + const updateIcon = (image) => { + updateChannelIcon({ gid: id, image }); + }; const handleReset = () => { console.log("reset", data); setValues(data); @@ -93,9 +99,15 @@ export default function Overview({ id = 0 }) { if (!values || !id) return null; const { name, description } = values; const readOnly = !loginUser?.is_admin && channel?.owner != loginUser?.uid; - + console.log("channel icon", channel); return ( +