ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lots updates

Browse Source
This commit is contained in:
zerosoul
2022-02-24 14:50:26 +08:00
parent b1ba2aa523
commit 0394c99292
46 changed files with 1101 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/services/channel.js
+44 -2
View File
@@ -1,8 +1,13 @@
import { createApi } from "@reduxjs/toolkit/query/react";
import baseQuery from "./base.query";
import { REHYDRATE } from "redux-persist";
import toast from "react-hot-toast";
import baseQuery from "./base.query";
import { ContentTypes } from "../config";
import { addChannelMsg } from "../slices/message.channel";
import {
addPendingMessage,
removePendingMessage,
} from "../slices/message.pending";
export const channelApi = createApi({
reducerPath: "channel",
baseQuery,
@@ -23,6 +28,12 @@ export const channelApi = createApi({
body: data,
}),
}),
removeChannel: builder.query({
query: (id) => ({
url: `group/${id}`,
method: "DELETE",
}),
}),
sendChannelMsg: builder.mutation({
query: ({ id, content, type = "text" }) => ({
headers: {
@@ -32,11 +43,42 @@ export const channelApi = createApi({
method: "POST",
body: content,
}),
async onQueryStarted(
{ id, content, type, from_uid },
{ dispatch, queryFulfilled }
) {
// id: who send to ,from_uid: who sent
const mid = new Date().getTime();
const tmpMsg = {
id,
content,
content_type: ContentTypes[type],
created_at: new Date().getTime(),
mid,
from_uid,
unread: false,
};
dispatch(addPendingMessage({ type: "channel", msg: tmpMsg }));
try {
const {
data: { gid, ...rest },
} = await queryFulfilled;
// 此处的id，是指给谁发的
dispatch(addChannelMsg({ id: gid, ...rest, unread: false }));
dispatch(removePendingMessage({ id, mid, type: "channel" }));
} catch {
console.log("channel message send failed");
toast.error("Send Message Failed");
dispatch(removePendingMessage({ id, mid, type: "channel" }));
// patchResult.undo();
}
},
}),
}),
});
export const {
useLazyRemoveChannelQuery,
useGetChannelsQuery,
useCreateChannelMutation,
useSendChannelMsgMutation,
src/app/services/contact.js
+35 -1
View File
@@ -1,7 +1,14 @@
import { createApi } from "@reduxjs/toolkit/query/react";
import { REHYDRATE } from "redux-persist";
import toast from "react-hot-toast";
import baseQuery from "./base.query";
import BASE_URL, { ContentTypes } from "../config";
import { REHYDRATE } from "redux-persist";
import { addUserMsg } from "../slices/message.user";
import {
addPendingMessage,
removePendingMessage,
} from "../slices/message.pending";
export const contactApi = createApi({
reducerPath: "contact",
@@ -41,6 +48,33 @@ export const contactApi = createApi({
method: "POST",
body: content,
}),
async onQueryStarted(
{ id, content, type, from_uid },
{ dispatch, queryFulfilled }
) {
// id: who send to ,from_uid: who sent
const mid = new Date().getTime();
const tmpMsg = {
id,
content,
content_type: ContentTypes[type],
created_at: new Date().getTime(),
mid,
from_uid,
unread: false,
};
dispatch(addPendingMessage({ type: "user", msg: tmpMsg }));
try {
const { data } = await queryFulfilled;
// 此处的id，是指给谁发的
dispatch(addUserMsg({ id, ...data, unread: false }));
dispatch(removePendingMessage({ id, mid, type: "user" }));
} catch {
toast.error("Send Message Failed");
dispatch(removePendingMessage({ id, mid, type: "user" }));
// patchResult.undo();
}
},
}),
}),
});
src/app/slices/message.channel.js
+1 -8
View File
@@ -44,16 +44,10 @@ const channelMsgSlice = createSlice({
clearChannelMsgUnread(state, action) {
const gid = action.payload;
console.log("set channel all unread", gid);
Object.entries(state[gid]).forEach(([key, obj]) => {
Object.entries(state[gid]).forEach(([, obj]) => {
obj.unread = false;
});
},
setLastAccessTime(state, action) {
// let gid = action.payload;
// delete state[gid].lastAccess;
// const gid = action.payload;
// state.accessLogs[gid] = new Date().getTime();
},
addPendingMsg(state, action) {
state.pendingMsgs.push(action.payload);
},
@@ -66,7 +60,6 @@ const channelMsgSlice = createSlice({
},
});
export const {
setLastAccessTime,
clearChannelMsgUnread,
setChannelMsgRead,
addChannelMsg,
src/app/slices/message.pending.js
+29
View File
@@ -0,0 +1,29 @@
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
user: {},
channel: {},
};
const pendingMessageSlice = createSlice({
name: "pendingMessage",
initialState,
reducers: {
addPendingMessage(state, action) {
const { type = "user", msg } = action.payload;
const { id, mid } = msg;
const curr = state[type][id] || {};
curr[mid] = { ...msg, pending: true };
state[type][id] = curr;
},
removePendingMessage(state, action) {
const { id, mid, type = "user" } = action.payload;
console.log("remove msg", type, id, mid);
delete state[type][id][mid];
},
},
});
export const {
addPendingMessage,
removePendingMessage,
} = pendingMessageSlice.actions;
export default pendingMessageSlice.reducer;
src/app/slices/message.user.js
+6 -11
View File
@@ -28,16 +28,6 @@ const userMsgSlice = createSlice({
} else {
state[id][mid] = newMsg;
}
// let replaceIdx = state[id].findIndex((m) => m.mid == mid);
// if (replaceIdx > -1) {
// const copyMsg = { ...state[id][replaceIdx] };
// console.log("current user msg", copyMsg, newMsg);
// if (!isObjectEqual(copyMsg, newMsg)) {
// state[id][replaceIdx] = newMsg;
// }
// } else {
// state[id] = [...state[id], newMsg];
// }
} else {
state[id] = { [mid]: newMsg };
}
@@ -47,7 +37,12 @@ const userMsgSlice = createSlice({
console.log("set unread", id, mid);
state[id][mid].unread = false;
},
removeMsg(state, action) {
const { id, mid } = action.payload;
console.log("remove user msg", id, mid);
delete state[id][mid];
},
},
});
export const { addUserMsg, setUserMsgRead } = userMsgSlice.actions;
export const { addUserMsg, setUserMsgRead, removeMsg } = userMsgSlice.actions;
export default userMsgSlice.reducer;
src/app/slices/ui.js
+20 -1
View File
@@ -2,6 +2,9 @@ import { createSlice } from "@reduxjs/toolkit";
const initialState = {
menuExpand: true,
setting: false,
profileSetting: false,
channelSetting: null,
};
const uiSlice = createSlice({
name: "ui",
@@ -10,7 +13,23 @@ const uiSlice = createSlice({
toggleMenuExpand(state) {
state.menuExpand = !state.menuExpand;
},
toggleSetting(state) {
state.setting = !state.setting;
},
toggleProfileSetting(state) {
state.profileSetting = !state.profileSetting;
},
toggleChannelSetting(state, action) {
console.log("toggle channel setting payload", action);
const id = action.payload;
state.channelSetting = state.channelSetting ? null : id;
},
},
});
export const { toggleMenuExpand } = uiSlice.actions;
export const {
toggleSetting,
toggleMenuExpand,
toggleProfileSetting,
toggleChannelSetting,
} = uiSlice.actions;
export default uiSlice.reducer;
src/app/store.with.persist.js
+2
View File
@@ -14,6 +14,7 @@ import authDataReducer from "./slices/auth.data";
import uiReducer from "./slices/ui";
import channelsReducer from "./slices/channels";
import contactsReducer from "./slices/contacts";
import pendingMsgReducer from "./slices/message.pending";
import channelMsgReducer from "./slices/message.channel";
import userMsgReducer from "./slices/message.user";
import { authApi } from "./services/auth";
@@ -31,6 +32,7 @@ const persistedReducer = persistReducer(
ui: uiReducer,
contacts: contactsReducer,
channels: channelsReducer,
pendingMsg: pendingMsgReducer,
userMsg: userMsgReducer,
channelMsg: channelMsgReducer,
authData: authDataReducer,
src/common/component/ChannelModal/index.js
+6 -5
View File
@@ -3,6 +3,7 @@ import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import Modal from "../Modal";
import Button from "../StyledButton";
import ChannelIcon from "../ChannelIcon";
import Contact from "../Contact";
import StyledWrapper from "./styled";
@@ -151,16 +152,16 @@ export default function ChannelModal({ personal = false, closeModal }) {
</div>
}
<div className="btns">
<button onClick={closeModal} className="btn normal cancel">
<Button onClick={closeModal} className="normal cancel">
Cancel
</button>
<button
</Button>
<Button
disabled={isLoading}
onClick={handleCreate}
className="btn normal create"
className="normal main"
>
Create
</button>
</Button>
</div>
</div>
</StyledWrapper>
src/common/component/ChannelModal/styled.js
-15
View File
@@ -128,21 +128,6 @@ const StyledWrapper = styled.div`
align-items: center;
justify-content: flex-end;
gap: 16px;
.btn {
cursor: pointer;
padding: 8px 16px;
background: none;
border: 1px solid #e5e7eb;
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
border-radius: 4px;
font-weight: 500;
color: #374151;
&.create {
border: none;
background: #1fe1f9;
color: #fff;
}
}
}
.normal {
font-size: 14px;
src/common/component/ChannelSetting/DeleteConfirmModal.js
+73
View File
@@ -0,0 +1,73 @@
// import React from "react";
import { useEffect } from "react";
import styled from "styled-components";
import toast from "react-hot-toast";
import { useNavigate, useMatch } from "react-router-dom";
import { useDispatch } from "react-redux";
import { toggleChannelSetting } from "../../../app/slices/ui";
import { deleteChannel } from "../../../app/slices/channels";
import Modal from "../Modal";
// import BASE_URL from "../../app/config";
import { useLazyRemoveChannelQuery } from "../../../app/services/channel";
import Button from "../StyledButton";
const StyledConfirm = styled.div`
padding: 32px;
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
border-radius: 8px;
background-color: #fff;
.title {
font-weight: 600;
font-size: 20px;
color: #374151;
margin-bottom: 16px;
}
.desc {
font-weight: normal;
font-size: 14px;
line-height: 20px;
color: #6b7280;
margin-bottom: 64px;
}
.btns {
width: 100%;
display: flex;
justify-content: flex-end;
gap: 16px;
align-items: center;
}
`;
export default function DeleteConfirmModal({ id, closeModal }) {
const navigateTo = useNavigate();
const dispatch = useDispatch();
const pathMatched = useMatch(`/chat/channel/${id}`);
const [removeChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
const handleDelete = () => {
removeChannel(id);
};
useEffect(() => {
if (isSuccess) {
toast.success("delete channel successfully!");
dispatch(deleteChannel(id));
dispatch(toggleChannelSetting());
if (pathMatched) {
navigateTo("/chat");
}
}
}, [isSuccess, id, pathMatched]);
if (!id) return null;
return (
<Modal id="modal-modal">
<StyledConfirm className="animate__animated animate__fadeInDown animate__faster">
<h3 className="title">Delete Channel</h3>
<p className="desc">Are you sure want to delete this channel?</p>
<div className="btns">
<Button onClick={closeModal}>Cancel</Button>
<Button onClick={handleDelete} className="danger">
{isLoading ? "Deleting" : `Delete`}
</Button>
</div>
</StyledConfirm>
</Modal>
);
}
src/common/component/ChannelSetting/index.js
+37
View File
@@ -0,0 +1,37 @@
import { useState } from "react";
import { useDispatch } from "react-redux";
import { toggleChannelSetting } from "../../../app/slices/ui";
import StyledSettingContainer from "../StyledSettingContainer";
import DeleteConfirmModal from "./DeleteConfirmModal";
import navs from "./navs";
export default function ChannelSetting({ id = 0 }) {
const [deleteConfirm, setDeleteConfirm] = useState(false);
const dispatch = useDispatch();
const close = () => {
dispatch(toggleChannelSetting());
};
const toggleDeleteConfrim = () => {
setDeleteConfirm((prev) => !prev);
};
if (!id) return null;
return (
<>
<StyledSettingContainer
closeModal={close}
title="Channel Setting"
navs={navs}
dangers={[
{
title: "Delete Channel",
handler: toggleDeleteConfrim,
},
]}
>
right block
</StyledSettingContainer>
{deleteConfirm && (
<DeleteConfirmModal closeModal={toggleDeleteConfrim} id={id} />
)}
</>
);
}
src/common/component/ChannelSetting/navs.js
+25
View File
@@ -0,0 +1,25 @@
const navs = [
{
title: "General",
items: [
{
name: "overview",
title: "Overview",
},
{
name: "permissions",
title: "Permissions",
},
{
name: "invites",
title: "Invites",
},
{
name: "integrations",
title: "Integrations",
},
],
},
];
export default navs;
src/common/component/Contact.js
+10 -2
View File
@@ -14,6 +14,9 @@ const StyledWrapper = styled.div`
padding: 8px;
border-radius: 4px;
user-select: none;
&.compact {
padding: 0;
}
&.interactive {
&:hover,
&.active {
@@ -60,12 +63,17 @@ export default function Contact({
interactive = true,
uid = "",
popover = false,
compact = false,
}) {
const contacts = useSelector((store) => store.contacts);
if (!contacts) return null;
const currUser = contacts.find((c) => c.uid == uid);
return (
<StyledWrapper className={`${interactive ? "interactive" : ""}`}>
<StyledWrapper
className={`${interactive ? "interactive" : ""} ${
compact ? "compact" : ""
}`}
>
<Tippy
inertia={true}
animation="scale"
@@ -82,7 +90,7 @@ export default function Contact({
></div>
</div>
</Tippy>
<span className="name">{currUser?.name}</span>
{!compact && <span className="name">{currUser?.name}</span>}
</StyledWrapper>
);
}
src/common/component/ContextMenu.js
+66
View File
@@ -0,0 +1,66 @@
import { useRef } from "react";
import styled from "styled-components";
import { useOutsideClick } from "rooks";
const StyledWrapper = styled.ul`
z-index: 999;
position: fixed;
left: ${({ x }) => `${x}px`};
top: ${({ y }) => `${y}px`};
display: flex;
flex-direction: column;
padding: 4px 12px;
background-color: #fff;
box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
0px 10px 10px rgba(31, 41, 55, 0.04);
border-radius: 6px;
.item {
padding: 8px 0;
/* margin: 0 12px; */
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #616161;
&.underline {
border-bottom: 1px solid #e5e5e5;
}
&.danger {
color: #a11043;
}
}
`;
export default function ContextMenu({
posX = 0,
posY = 0,
items = [],
hideMenu,
}) {
const wrapperRef = useRef(null);
useOutsideClick(wrapperRef, hideMenu);
return (
<StyledWrapper ref={wrapperRef} x={posX} y={posY}>
{items.map(
({
title,
handler = (evt) => {
evt.preventDefault();
hideMenu();
},
underline = false,
danger = false,
}) => {
return (
<li
className={`item ${underline ? "underline" : ""} ${
danger ? "danger" : ""
}`}
key={title}
onClick={handler}
>
{title}
</li>
);
}
)}
</StyledWrapper>
);
}
src/common/component/CurrentUser.js
+3 -26
View File
@@ -1,11 +1,6 @@
import { useEffect } from "react";
// import { useEffect } from "react";
import styled from "styled-components";
import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { clearAuthData } from "../../app/slices/auth.data";
// import BASE_URL from "../../app/config";
import { useLazyLogoutQuery } from "../../app/services/auth";
import { useSelector } from "react-redux";
import Avatar from "./Avatar";
const StyledWrapper = styled.div`
background-color: #e5e5e5;
@@ -62,32 +57,14 @@ const StyledWrapper = styled.div`
}
`;
export default function CurrentUser({ expand = true }) {
const dispatch = useDispatch();
const navigate = useNavigate();
const [logout, { isSuccess }] = useLazyLogoutQuery();
const { user } = useSelector((store) => store.authData);
const handleLogout = () => {
logout();
};
useEffect(() => {
if (isSuccess) {
dispatch(clearAuthData());
navigate("/login");
}
}, [isSuccess]);
if (!user) return null;
const { uid, name, avatar } = user;
return (
<StyledWrapper>
<div className="profile">
<Avatar
onDoubleClick={handleLogout}
url={avatar}
name={name}
alt="user avatar"
className="avatar"
/>
<Avatar url={avatar} name={name} alt="user avatar" className="avatar" />
<div className="info">
<span className="name">{name}</span>
<span className="id">#{uid}</span>
src/common/component/Modal.js
+19 -18
View File
@@ -1,19 +1,20 @@
import { useEffect } from 'react';
import { createPortal } from 'react-dom';
const modalRoot = document.getElementById('root-modal');
const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
export default function Modal({ children }) {
// let eleRef = useRef(null);
useEffect(() => {
// const wrapper = document.createElement('div');
// eleRef.current = wrapper;
modalRoot.appendChild(wrapper);
return () => {
modalRoot.removeChild(wrapper);
};
}, []);
if (!wrapper) return null;
console.log("create portal");
return createPortal(children, wrapper);
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
export default function Modal({ id = "root-modal", children }) {
const [wrapper, setWrapper] = useState(null);
// let eleRef = useRef(null);
useEffect(() => {
const modalRoot = document.getElementById(id);
const wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
modalRoot.appendChild(wrapper);
setWrapper(wrapper);
return () => {
modalRoot.removeChild(wrapper);
};
}, [id]);
if (!wrapper) return null;
console.log("create portal");
return createPortal(children, wrapper);
}
src/common/component/NotificationHub.js
+51 -10
View File
@@ -2,9 +2,10 @@ import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import BASE_URL from "../../app/config";
import { useRenewMutation } from "../../app/services/auth";
import {
setChannels,
addChannel,
@@ -12,6 +13,7 @@ import {
} from "../../app/slices/channels";
import { updateUsersStatus } from "../../app/slices/contacts";
import {
updateToken,
clearAuthData,
setUsersVersion,
setAfterMid,
@@ -28,9 +30,16 @@ const getQueryString = (params = {}) => {
});
return sp.toString();
};
const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const { token, refreshToken, user: currUser } = useSelector(
(store) => store.authData
);
const [
renewToken,
{ data, isSuccess: refreshTokenSuccess },
] = useRenewMutation();
useEffect(() => {
let sse = null;
if (token) {
@@ -45,7 +54,18 @@ const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
console.info("sse opened");
};
sse.onerror = (err) => {
console.error("sse error", err);
switch (err.eventPhase) {
case EventSource.CLOSED:
case EventSource.CONNECTING:
console.log("sse error renew");
renewToken({ token, refreshToken });
break;
default:
console.error("sse error", err);
// renewToken({ token, refreshToken });
break;
}
};
sse.onmessage = (evt) => {
handleSSEMessage(JSON.parse(evt.data));
@@ -57,7 +77,14 @@ const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
sse.close();
}
};
}, [token, usersVersion, afterMid]);
}, [token, refreshToken, usersVersion, afterMid]);
useEffect(() => {
if (refreshTokenSuccess) {
const { token, refresh_token } = data;
dispatch(updateToken({ token, refresh_token }));
}
}, [refreshTokenSuccess, data]);
const handleSSEMessage = (data) => {
const { type } = data;
@@ -116,10 +143,24 @@ const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
if (data.gid) {
// channel msg
const { gid, ...rest } = data;
dispatch(addChannelMsg({ id: gid, ...rest }));
console.log("compare", rest, currUser, rest.from_uid != currUser.uid);
dispatch(
addChannelMsg({
id: gid,
// 自己发的 就不用标记未读
unread: rest.from_uid != currUser.uid,
...rest,
})
);
} else {
// user msg
dispatch(addUserMsg({ id: data.from_uid, ...data }));
dispatch(
addUserMsg({
id: data.from_uid,
unread: data.from_uid != currUser.uid,
...data,
})
);
}
// 更新after_mid
dispatch(setAfterMid({ mid: data.mid }));
@@ -132,7 +173,7 @@ const NotificationHub = ({ token, usersVersion = 0, afterMid = 0 }) => {
};
return null;
};
function compareToken(prevHub, nextHub) {
return prevHub.token === nextHub.token;
}
export default React.memo(NotificationHub, compareToken);
// function compareToken(prevHub, nextHub) {
// return prevHub.token === nextHub.token;
// }
export default React.memo(NotificationHub);
src/common/component/Search.js
+1 -1
View File
@@ -9,7 +9,7 @@ import ContactsModal from "./ContactsModal";
const StyledWrapper = styled.div`
position: relative;
height: 56px;
min-height: 56px;
padding: 0 10px 0 16px;
display: flex;
align-items: center;
src/common/component/Send/EmojiPicker.js
+30
View File
@@ -0,0 +1,30 @@
import { useState } from "react";
import { Picker } from "emoji-mart";
import "emoji-mart/css/emoji-mart.css";
export default function EmojiPicker({ selectEmoji }) {
const [emojiPickerVisible, setEmojiPickerVisible] = useState(false);
const toggleEmojiPicker = () => {
setEmojiPickerVisible((prev) => !prev);
};
const handleSelect = (emoji) => {
selectEmoji(emoji.native);
setEmojiPickerVisible(false);
};
return (
<>
<button className="toggle" onClick={toggleEmojiPicker}>
😄
</button>
{emojiPickerVisible && (
<div className="picker">
<Picker
onSelect={handleSelect}
showPreview={false}
showSkinTones={false}
/>
</div>
)}
</>
);
}
src/common/component/Send/UploadModal/index.js
+6 -5
View File
@@ -8,6 +8,7 @@ import { useSendMsgMutation } from "../../../../app/services/contact";
import { addChannelMsg } from "../../../../app/slices/message.channel";
import { addUserMsg } from "../../../../app/slices/message.user";
import Modal from "../../Modal";
import Button from "../../StyledButton";
import StyledWrapper from "./styled";
export default function UploadModal({
@@ -102,16 +103,16 @@ export default function UploadModal({
})}
</ul>
<div className="btns">
<button className="btn cancel" onClick={closeModal}>
<Button className="cancel" onClick={closeModal}>
Cancel
</button>
<button
className="btn upload"
</Button>
<Button
className="upload main"
disabled={channelSending || userSending}
onClick={handleUpload}
>
{channelSending || userSending ? "Uploading" : `Upload`}
</button>
</Button>
</div>
</StyledWrapper>
</Modal>
src/common/component/Send/UploadModal/styled.js
-14
View File
@@ -77,20 +77,6 @@ const StyledWrapper = styled.div`
justify-content: flex-end;
gap: 16px;
width: 100%;
.btn {
color: #fff;
padding: 8px 16px;
background: #1fe1f9;
/* shadow-base */
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
border-radius: 4px;
&.cancel {
color: #333;
border: 1px solid #e5e7eb;
background-color: #fff;
}
}
}
`;
export default StyledWrapper;
src/common/component/Send/index.js
+20 -68
View File
@@ -1,16 +1,15 @@
import { useState, useEffect, useRef } from "react";
import { MdAdd } from "react-icons/md";
import TextareaAutosize from "react-textarea-autosize";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { useKey } from "rooks";
import "emoji-mart/css/emoji-mart.css";
import { Picker } from "emoji-mart";
import { useSendChannelMsgMutation } from "../../../app/services/channel";
import { useSendMsgMutation } from "../../../app/services/contact";
import { addChannelMsg } from "../../../app/slices/message.channel";
import { addUserMsg } from "../../../app/slices/message.user";
import StyledSend from "./styled";
import useFiles from "./useFiles";
import UploadModal from "./UploadModal";
import EmojiPicker from "./EmojiPicker";
const Types = {
channel: "#",
@@ -19,38 +18,31 @@ const Types = {
export default function Send({
name,
type = "channel",
// 发给谁，或者是channel，或者是user
id = "",
dragFiles = [],
}) {
const [files, setFiles] = useState([]);
const { files, setFiles, resetFiles } = useFiles([]);
const inputRef = useRef();
const [emojiPicker, setEmojiPicker] = useState(false);
const [shift, setShift] = useState(false);
const [enter, setEnter] = useState(false);
const [msg, setMsg] = useState("");
const dispatch = useDispatch();
console.log("send drag files", dragFiles);
// const dispatch = useDispatch();
// 谁发的
const from_uid = useSelector((store) => store.authData.user.uid);
useEffect(() => {
if (dragFiles.length) {
setFiles((prev) => [...prev, ...dragFiles]);
}
}, [dragFiles]);
const toggleEmojiPicker = () => {
setEmojiPicker((prev) => !prev);
};
const [
sendMsg,
{ isLoading: sending, isSuccess: sendSuccess, data: sendData },
] = useSendMsgMutation();
const [sendMsg, { isLoading: userSending }] = useSendMsgMutation();
const [
sendChannelMsg,
{
isLoading: channelSending,
isSuccess: sendChannelSuccess,
data: sendChannelData,
},
{ isLoading: channelSending },
] = useSendChannelMsgMutation();
const sendMessage = type == "channel" ? sendChannelMsg : sendMsg;
const sendingMessage = userSending || channelSending;
useKey(
"Shift",
(e) => {
@@ -64,54 +56,25 @@ export default function Send({
handleSendMessage();
} else {
setMsg(evt.target.value);
// inputRef.current.focus();
}
};
const handleInputKeydown = (e) => {
console.log("keydown event", e);
setEnter(e.key === "Enter");
};
const handleEmojiSelect = (emoji) => {
console.log(emoji);
setMsg((prev) => `${prev}${emoji.native}`);
// inputRef.current.focus();
toggleEmojiPicker();
const selectEmoji = (emoji) => {
setMsg((prev) => `${prev}${emoji}`);
};
useEffect(() => {
if (sendSuccess) {
dispatch(addUserMsg({ id, ...sendData, unread: false }));
setMsg("");
}
}, [sendSuccess, sendData]);
useEffect(() => {
if (sendChannelSuccess) {
const { gid, ...rest } = sendChannelData;
dispatch(addChannelMsg({ id: gid, ...rest, unread: false }));
setMsg("");
}
}, [sendChannelSuccess, sendChannelData]);
useEffect(() => {
inputRef.current.focus();
}, [msg]);
const handleUpload = (evt) => {
setFiles([...evt.target.files]);
};
const resetFiles = () => {
setFiles([]);
};
const handleSendMessage = () => {
if (!msg || !type || !id) return;
switch (type) {
case "channel":
sendChannelMsg({ id, content: msg });
break;
case "user":
sendMsg({ id, content: msg });
break;
default:
break;
}
if (!msg || !id || sendingMessage) return;
sendMessage({ id, content: msg, from_uid });
setMsg("");
};
return (
<>
@@ -140,18 +103,7 @@ export default function Send({
/>
</div>
<div className="emoji">
<button className="toggle" onClick={toggleEmojiPicker}>
😄
</button>
{emojiPicker && (
<div className="picker">
<Picker
onSelect={handleEmojiSelect}
showPreview={false}
showSkinTones={false}
/>
</div>
)}
<EmojiPicker selectEmoji={selectEmoji} />
</div>
</StyledSend>
{files.length !== 0 && (
src/common/component/Send/styled.js
+1 -1
View File
@@ -5,7 +5,7 @@ const StyledSend = styled.div`
bottom: 15px;
left: 50%;
transform: translateX(-50%);
background: #f5f6f7;
background: #e5e7eb;
border-radius: 8px;
width: calc(100% - 32px);
min-height: 54px;
src/common/component/Send/useFiles.js
+13
View File
@@ -0,0 +1,13 @@
import { useState } from "react";
export default function useFiles(initialFiles = []) {
const [files, setFiles] = useState(initialFiles);
const resetFiles = () => {
setFiles([]);
};
return {
files,
setFiles,
resetFiles,
};
}
src/common/component/Setting/LogoutConfirmModal.js
+67
View File
@@ -0,0 +1,67 @@
// import React from "react";
import { useEffect } from "react";
import styled from "styled-components";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { clearAuthData } from "../../../app/slices/auth.data";
import { toggleSetting } from "../../../app/slices/ui";
// import BASE_URL from "../../app/config";
import { useLazyLogoutQuery } from "../../../app/services/auth";
import Button from "../StyledButton";
const StyledConfirm = styled.div`
padding: 32px;
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
border-radius: 8px;
background-color: #fff;
.title {
font-weight: 600;
font-size: 20px;
color: #374151;
margin-bottom: 16px;
}
.desc {
font-weight: normal;
font-size: 14px;
line-height: 20px;
color: #6b7280;
margin-bottom: 64px;
}
.btns {
width: 100%;
display: flex;
justify-content: flex-end;
gap: 16px;
align-items: center;
}
`;
import Modal from "../Modal";
export default function LogoutConfirmModal({ closeModal }) {
const dispatch = useDispatch();
const navigate = useNavigate();
const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
const handleLogout = () => {
logout();
};
useEffect(() => {
if (isSuccess) {
dispatch(toggleSetting());
dispatch(clearAuthData());
navigate("/login");
}
}, [isSuccess]);
return (
<Modal id="modal-modal">
<StyledConfirm className="animate__animated animate__fadeInDown animate__faster">
<h3 className="title">Log Out</h3>
<p className="desc">Are you sure want to log out this account?</p>
<div className="btns">
<Button onClick={closeModal}>Cancel</Button>
<Button onClick={handleLogout} className="danger">
{isLoading ? "Logouting" : `Log Out`}
</Button>
</div>
</StyledConfirm>
</Modal>
);
}
src/common/component/Setting/MyAccount.js
+5
View File
@@ -0,0 +1,5 @@
import React from "react";
export default function MyAccount() {
return <div>MyAccount</div>;
}
src/common/component/Setting/index.js
+43
View File
@@ -0,0 +1,43 @@
import { useState } from "react";
import { useDispatch } from "react-redux";
import { toggleSetting } from "../../../app/slices/ui";
import StyledSettingContainer from "../StyledSettingContainer";
import navs from "./navs";
import LogoutConfirmModal from "./LogoutConfirmModal";
const flatenNavs = navs
.map(({ items }) => {
return items;
})
.flat();
export default function Setting() {
const [currNav, setCurrNav] = useState(flatenNavs[0]);
const [logoutConfirm, setLogoutConfirm] = useState(false);
const dispatch = useDispatch();
const close = () => {
dispatch(toggleSetting());
};
const toggleLogoutConfrim = () => {
setLogoutConfirm((prev) => !prev);
};
const updateNav = (name) => {
const tmp = flatenNavs.find((n) => n.name == name);
if (tmp) {
setCurrNav(tmp);
}
};
return (
<>
<StyledSettingContainer
updateNav={updateNav}
nav={currNav}
closeModal={close}
title="Setting"
navs={navs}
dangers={[{ title: "Log Out", handler: toggleLogoutConfrim }]}
>
right block
</StyledSettingContainer>
{logoutConfirm && <LogoutConfirmModal closeModal={toggleLogoutConfrim} />}
</>
);
}
src/common/component/Setting/navs.js
+30
View File
@@ -0,0 +1,30 @@
const navs = [
{
title: "User",
items: [
{
name: "my_account",
title: "My Account",
},
{
name: "auth_apps",
title: "Authorized Apps",
},
],
},
{
title: "App",
items: [
{
name: "appearance",
title: "Appearance",
},
{
name: "lang",
title: "Language",
},
],
},
];
export default navs;
src/common/component/StyledButton.js
+23
View File
@@ -0,0 +1,23 @@
import styled from "styled-components";
const StyledButton = styled.button`
cursor: pointer;
padding: 8px 16px;
background: none;
border: 1px solid #e5e7eb;
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
border-radius: 4px;
font-weight: 500;
color: #374151;
&.main {
border: none;
background: #1fe1f9;
color: #fff;
}
&.danger {
border: none;
background: #ef4444;
color: #fff;
}
`;
export default StyledButton;
src/common/component/StyledSettingContainer.js
+130
View File
@@ -0,0 +1,130 @@
// import React from 'react'
import styled from "styled-components";
import Modal from "./Modal";
const StyledWrapper = styled.div`
width: 100%;
height: 100%;
display: flex;
.left {
padding: 32px 16px;
min-width: 212px;
background-color: #f5f6f7;
> .title {
cursor: pointer;
font-weight: bold;
font-size: 16px;
line-height: 24px;
color: #1c1c1e;
margin-bottom: 32px;
padding-left: 24px;
background: url(https://static.nicegoodthings.com/project/rustchat/icon.arrow.left.svg);
background-size: 16px;
background-repeat: no-repeat;
background-position: left;
}
> .items {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 36px;
&:before {
padding-left: 12px;
content: attr(data-title);
font-weight: bold;
font-size: 12px;
line-height: 18px;
color: #6b7280;
margin-bottom: -2px;
}
.item {
cursor: pointer;
padding: 4px 12px;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #44494f;
border-radius: 4px;
&:hover,
&.curr {
background: #e7e5e4;
}
}
&.danger .item {
color: #ef4444;
&:hover {
background: none;
}
}
}
}
.right {
background-color: #fff;
width: 100%;
padding: 32px;
> .title {
font-weight: bold;
font-size: 20px;
line-height: 30px;
color: #374151;
margin-bottom: 32px;
}
}
`;
export default function StyledSettingContainer({
closeModal,
title = "Setting",
navs = [],
dangers = [],
nav,
updateNav,
children,
}) {
const handleNavClick = (name) => {
updateNav(name);
};
return (
<Modal>
<StyledWrapper className="animate__animated animate__fadeInUp animate__faster">
<div className="left">
<h2 onClick={closeModal} className="title">
{title}
</h2>
{navs.map(({ title, items }) => {
return (
<ul key={title} data-title={title} className="items">
{items.map(({ name, title }) => {
return (
<li
key={name}
onClick={handleNavClick.bind(null, name)}
className={`item ${name == nav?.name ? "curr" : ""}`}
>
{title}
</li>
);
})}
</ul>
);
})}
{dangers.length ? (
<ul className="items danger">
{dangers.map((d) => {
const { title, handler } = d;
return (
<li key={title} onClick={handler} className="item">
{title}
</li>
);
})}
</ul>
) : null}
</div>
<div className="right">
{nav && <h4 className="title">{nav.title}</h4>}
{children}
</div>
</StyledWrapper>
</Modal>
);
}
src/common/hook/useContextMenu.js
+22
View File
@@ -0,0 +1,22 @@
import { useState } from "react";
export default function useContextMenu() {
const [visible, setVisible] = useState(false);
const [pos, setPos] = useState({ x: 0, y: 0 });
const handleContextMenuEvent = (evt) => {
console.log("context menu event", evt);
evt.preventDefault();
setVisible(true);
setPos({ x: evt.clientX, y: evt.clientY });
};
const hideContextMenu = () => {
setVisible(false);
};
return {
posX: pos.x,
posY: pos.y,
visible,
hideContextMenu,
handleContextMenuEvent,
};
}
src/routes/chat/ChannelChat/index.js
+37 -36
View File
@@ -6,10 +6,7 @@ import dayjs from "dayjs";
import Message from "../../../common/component/Message";
import ChannelIcon from "../../../common/component/ChannelIcon";
import Send from "../../../common/component/Send";
import {
clearChannelMsgUnread,
setLastAccessTime,
} from "../../../app/slices/message.channel";
import { clearChannelMsgUnread } from "../../../app/slices/message.channel";
import Contact from "../../../common/component/Contact";
import Layout from "../Layout";
import {
@@ -28,8 +25,12 @@ export default function ChannelChat({
// const containerRef = useRef(null);
const [dragFiles, setDragFiles] = useState([]);
const dispatch = useDispatch();
const { msgs, users } = useSelector((store) => {
return { msgs: store.channelMsg[cid] || {}, users: store.contacts };
const { msgs, users, pendingMsgs } = useSelector((store) => {
return {
msgs: store.channelMsg[cid] || {},
users: store.contacts,
pendingMsgs: store.pendingMsg.channel[cid] || {},
};
});
const handleClearUnreads = () => {
dispatch(clearChannelMsgUnread(cid));
@@ -39,12 +40,6 @@ export default function ChannelChat({
setDragFiles(dropFiles);
}
}, [dropFiles]);
useEffect(() => {
console.log({ cid });
return () => {
dispatch(setLastAccessTime(cid));
};
}, [cid]);
const { name, description, is_public, members = [] } = data;
const filteredUsers =
members.length == 0
@@ -88,8 +83,8 @@ export default function ChannelChat({
}
contacts={
<StyledContacts>
{filteredUsers.map(({ name, status, uid }) => {
return <Contact key={name} uid={uid} status={status} popover />;
{filteredUsers.map(({ name, uid }) => {
return <Contact key={name} uid={uid} popover />;
})}
</StyledContacts>
}
@@ -102,28 +97,34 @@ export default function ChannelChat({
{/* <button className="edit">Edit Channel</button> */}
</div>
<div className="chat">
{Object.entries(msgs).map(([mid, msg]) => {
if (!msg) return null;
const {
from_uid,
content,
content_type,
created_at,
unread,
} = msg;
return (
<Message
content_type={content_type}
unread={unread}
gid={cid}
mid={mid}
key={mid}
time={created_at}
fromUid={from_uid}
content={content}
/>
);
})}
{[...Object.entries(msgs), ...Object.entries(pendingMsgs)]
.sort(([, msg1], [, msg2]) => {
return msg1.created_at - msg2.created_at;
})
.map(([mid, msg]) => {
if (!msg) return null;
const {
pending = false,
from_uid,
content,
content_type,
created_at,
unread,
} = msg;
return (
<Message
pending={pending}
content_type={content_type}
unread={unread}
gid={cid}
mid={mid}
key={mid}
time={created_at}
fromUid={from_uid}
content={content}
/>
);
})}
</div>
</div>
src/routes/chat/ChannelChat/styled.js
+1
View File
@@ -81,6 +81,7 @@ export const StyledChannelChat = styled.article`
display: flex;
flex-direction: column;
padding: 0 16px;
padding-bottom: 25px;
height: calc(100vh - 56px - 80px);
overflow-y: scroll;
overflow-x: visible;
src/routes/chat/ChannelList.js
+66 -11
View File
@@ -2,9 +2,20 @@
import { NavLink, useNavigate } from "react-router-dom";
import { useDrop } from "react-dnd";
import { NativeTypes } from "react-dnd-html5-backend";
import { useDispatch } from "react-redux";
import useContextMenu from "../../common/hook/useContextMenu";
import ContextMenu from "../../common/component/ContextMenu";
import { toggleChannelSetting } from "../../app/slices/ui";
import ChannelIcon from "../../common/component/ChannelIcon";
const NavItem = ({ data, setFiles }) => {
const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const handleChannelSetting = (evt) => {
evt.preventDefault();
evt.stopPropagation();
dispatch(toggleChannelSetting(data.id));
};
const [{ isActive }, drop] = useDrop(() => ({
accept: [NativeTypes.FILE],
drop({ dataTransfer }) {
@@ -25,6 +36,7 @@ const NavItem = ({ data, setFiles }) => {
const { id, is_public, name, unreads } = data;
return (
<NavLink
onContextMenu={contextMenuEventHandler}
ref={drop}
key={id}
className={`link ${isActive ? "drop_over" : ""}`}
@@ -35,7 +47,7 @@ const NavItem = ({ data, setFiles }) => {
{name}
</span>
<div className="icons">
<i className="setting"></i>
<i className="setting" onClick={handleChannelSetting}></i>
{unreads > 0 && (
<i className={`badge ${unreads > 99 ? "dot" : ""}`}>
{unreads > 99 ? null : unreads}
@@ -46,13 +58,56 @@ const NavItem = ({ data, setFiles }) => {
);
};
export default function ChannelList({ channels, setDropFiles }) {
return channels.map(({ id, is_public, name, description, unreads }) => {
return (
<NavItem
key={id}
data={{ id, is_public, name, description, unreads }}
setFiles={setDropFiles}
/>
);
});
const {
visible: contextMenuVisible,
posX,
posY,
hideContextMenu,
handleContextMenuEvent,
} = useContextMenu();
return (
<>
{channels.map(({ id, is_public, name, description, unreads }) => {
return (
<NavItem
contextMenuEventHandler={handleContextMenuEvent}
key={id}
data={{ id, is_public, name, description, unreads }}
setFiles={setDropFiles}
/>
);
})}
{contextMenuVisible ? (
<ContextMenu
hideMenu={hideContextMenu}
posX={posX}
posY={posY}
items={[
{
title: "Mark As Read",
underline: true,
},
{
title: "Mute",
},
{
title: "Notification Settings",
underline: true,
},
{
title: "Edit Channel",
underline: true,
},
{
title: "Invite People",
},
{
title: "Delete Channel",
danger: true,
},
]}
/>
) : null}
</>
);
}
src/routes/chat/DMChat/index.js
+34 -19
View File
@@ -11,8 +11,11 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
console.log("dm files", dropFiles);
const [dragFiles, setDragFiles] = useState([]);
const contacts = useSelector((store) => store.contacts);
const msgs = useSelector((store) => {
return store.userMsg[uid] || {};
const { msgs, pendingMsgs } = useSelector((store) => {
return {
msgs: store.userMsg[uid] || {},
pendingMsgs: store.pendingMsg.user[uid] || {},
};
});
const [currUser, setCurrUser] = useState(null);
useEffect(() => {
@@ -66,23 +69,35 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
>
<StyledDMChat>
<div className="chat">
{Object.entries(msgs).map(([mid, msg]) => {
if (!msg) return null;
console.log("user msg", msg);
const { from_uid, content, content_type, created_at, unread } = msg;
return (
<Message
content_type={content_type}
unread={unread}
fromUid={from_uid}
mid={mid}
key={mid}
time={created_at}
uid={uid}
content={content}
/>
);
})}
{[...Object.entries(msgs), ...Object.entries(pendingMsgs)]
.sort(([, msg1], [, msg2]) => {
return msg1.created_at - msg2.created_at;
})
.map(([mid, msg]) => {
if (!msg) return null;
console.log("user msg", msg);
const {
from_uid,
content,
content_type,
created_at,
unread,
pending = false,
} = msg;
return (
<Message
pending={pending}
content_type={content_type}
unread={unread}
fromUid={from_uid}
mid={mid}
key={mid}
time={created_at}
uid={uid}
content={content}
/>
);
})}
</div>
</StyledDMChat>
<div className="placeholder"></div>
src/routes/chat/DMChat/styled.js
+1
View File
@@ -52,6 +52,7 @@ export const StyledDMChat = styled.article`
flex-direction: column;
padding: 0 16px;
padding-top: 10px;
padding-bottom: 25px;
height: calc(100vh - 56px - 80px);
overflow-y: scroll;
overflow-x: visible;
src/routes/chat/DMList.js
+2 -2
View File
@@ -3,7 +3,7 @@ import { NavLink, useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import { useDrop } from "react-dnd";
import { NativeTypes } from "react-dnd-html5-backend";
import Avatar from "../../common/component/Avatar";
import Contact from "../../common/component/Contact";
const NavItem = ({ data, setFiles }) => {
const navigate = useNavigate();
const [{ isActive }, drop] = useDrop(() => ({
@@ -31,7 +31,7 @@ const NavItem = ({ data, setFiles }) => {
className={`session ${isActive ? "drop_over" : ""}`}
to={`/chat/dm/${uid}`}
>
<Avatar className="avatar" url={user.avatar} name={user.name} />
<Contact compact interactive={false} className="avatar" uid={user.uid} />
<div className="details">
<div className="up">
<span className="name">{user.name}</span>
src/routes/chat/index.js
+5 -4
View File
@@ -8,7 +8,7 @@ import { AiOutlineCaretDown } from "react-icons/ai";
import StyledWrapper from "./styled";
import Search from "../../common/component/Search";
import Avatar from "../../common/component/Avatar";
import Contact from "../../common/component/Contact";
import CurrentUser from "../../common/component/CurrentUser";
import ChannelChat from "./ChannelChat";
import DMChat from "./DMChat";
@@ -117,10 +117,11 @@ export default function ChatPage() {
<DMList sessions={sessions} setDropFiles={setUserDropFiles} />
{user_id && !Object.keys(UserMsgData).includes(user_id) && (
<NavLink className="session" to={`/chat/dm/${user_id}`}>
<Avatar
<Contact
compact
interactive={false}
className="avatar"
url={tmpSessionUser.avatar}
name={tmpSessionUser.name}
uid={user_id}
/>
<div className="details">
<div className="up">
src/routes/chat/styled.js
+4 -8
View File
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
position: relative;
display: flex;
flex-direction: column;
width: 260px;
min-width: 260px;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
.list {
margin: 12px 8px;
@@ -40,6 +40,7 @@ const StyledWrapper = styled.div`
text-decoration: none;
}
.link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@@ -52,7 +53,7 @@ const StyledWrapper = styled.div`
> .txt {
display: flex;
align-items: center;
gap: 5px;
gap: 8px;
color: #1c1c1e;
font-weight: 600;
font-size: 14px;
@@ -106,12 +107,7 @@ const StyledWrapper = styled.div`
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
/* img{
width: 100%;
} */
/* todo */
}
.details {
display: flex;
src/routes/contacts/styled.js
+1 -1
View File
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
position: relative;
display: flex;
flex-direction: column;
width: 260px;
min-width: 260px;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
.list {
margin: 12px 8px;
src/routes/home/Menu.js
+7 -1
View File
@@ -1,4 +1,6 @@
// import React from 'react'
import { useDispatch } from "react-redux";
import { toggleSetting } from "../../app/slices/ui";
import styled from "styled-components";
const StyledMenus = styled.ul`
display: flex;
@@ -29,9 +31,13 @@ const StyledMenus = styled.ul`
}
`;
export default function Menu({ toggle, expand = true }) {
const dispatch = useDispatch();
const handleSetting = () => {
dispatch(toggleSetting());
};
return (
<StyledMenus>
<li className="menu">
<li className="menu" onClick={handleSetting}>
<img
src="https://static.nicegoodthings.com/project/rustchat/menu.setting.png"
alt="setting icon"
src/routes/home/ServerDropList.js
+1 -1
View File
@@ -3,7 +3,7 @@ import styled from "styled-components";
// import { HiChevronDoubleLeft } from "react-icons/hi";
const StyledWrapper = styled.div`
height: 56px;
min-height: 56px;
padding: 0 20px;
padding-right: 5px;
display: flex;
src/routes/home/index.js
+17 -13
View File
@@ -3,14 +3,13 @@
import { Outlet, NavLink } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { toggleMenuExpand } from "../../app/slices/ui";
// import { setAuthData } from "../../app/slices/auth.data";
import StyledWrapper from "./styled";
import ServerDropList from "./ServerDropList";
import Tools from "./Tools";
import Menu from "./Menu";
import usePreload from "./usePreload";
// import CurrentUser from "./CurrentUser";
import SettingModal from "../../common/component/Setting";
import ChannelSettingModal from "../../common/component/ChannelSetting";
import ChatIcon from "../../assets/icons/chat.svg";
import ContactIcon from "../../assets/icons/contact.svg";
@@ -19,12 +18,12 @@ import NotificationHub from "../../common/component/NotificationHub";
export default function HomePage() {
const dispatch = useDispatch();
const {
menuExpand,
authData: { token, usersVersion, afterMid },
ui: { menuExpand, setting, channelSetting },
authData: { usersVersion, afterMid },
} = useSelector((store) => {
return {
authData: store.authData,
menuExpand: store.ui.menuExpand,
ui: store.ui,
};
});
const { data, loading, error, success } = usePreload();
@@ -44,21 +43,24 @@ export default function HomePage() {
}
return (
<>
<NotificationHub
token={token}
usersVersion={usersVersion}
afterMid={afterMid}
/>
<NotificationHub usersVersion={usersVersion} afterMid={afterMid} />
<StyledWrapper>
<div className={`col left ${menuExpand ? "expand" : ""}`}>
<ServerDropList data={data?.server} expand={menuExpand} />
<nav className="nav">
<NavLink className="link" to={"/chat"}>
<img src={ChatIcon} alt="chat icon" /> {menuExpand && `Chat`}
<img src={ChatIcon} alt="chat icon" />{" "}
{menuExpand && (
<span className="animate__animated animate__fadeIn">Chat</span>
)}
</NavLink>
<NavLink className="link" to={"/contacts"}>
<img src={ContactIcon} alt="contact icon" />{" "}
{menuExpand && `Contacts`}
{menuExpand && (
<span className="animate__animated animate__fadeIn">
Contacts
</span>
)}
</NavLink>
</nav>
<div className="divider"></div>
@@ -70,6 +72,8 @@ export default function HomePage() {
<Outlet />
</div>
</StyledWrapper>
{setting && <SettingModal />}
{channelSetting && <ChannelSettingModal id={channelSetting} />}
</>
);
}
src/routes/home/styled.js
+1 -1
View File
@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
flex-direction: column;
&.left {
position: relative;
/* background: #0891B2; */
background: #e5e7eb;
width: 64px;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease-in;
src/routes/home/usePreload.js
+1 -7
View File
@@ -30,16 +30,11 @@ export default function usePreload() {
isError: serverError,
data: server,
} = useGetServerQuery(undefined, querySetting);
// const {
// isLoading: groupsLoading,
// isSuccess: groupsSuccess,
// isError: groupsError,
// data: groups,
// } = useGetChannelsQuery(undefined, querySetting);
useEffect(() => {
if (contacts) {
const matchedUser = contacts.find((c) => c.uid == loginedUser.uid);
if (!matchedUser) {
console.log("no matched user, redirect to login");
dispatch(clearAuthData());
navigate("/login");
} else {
@@ -51,7 +46,6 @@ export default function usePreload() {
}
}
}, [contacts]);
return {
loading: contactsLoading || serverLoading || !checked,
error: contactsError && serverError,
src/routes/login/index.js
+105 -105
View File
@@ -1,115 +1,115 @@
/* eslint-disable no-undef */
import { useState, useEffect } from 'react';
import StyledWrapper from './styled';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import toast from 'react-hot-toast';
import { useState, useEffect } from "react";
import StyledWrapper from "./styled";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
// import web3 from "web3";
import MetamaskLoginButton from './MetamaskLoginButton';
import MetamaskLoginButton from "./MetamaskLoginButton";
import GoogleLoginButton from './GoogleLoginButton';
import { useLoginMutation } from '../../app/services/auth';
import { setAuthData } from '../../app/slices/auth.data';
import GoogleLoginButton from "./GoogleLoginButton";
import { useLoginMutation } from "../../app/services/auth";
import { setAuthData } from "../../app/slices/auth.data";
export default function LoginPage() {
const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
// const { token } = useSelector((store) => store.authData);
const navigateTo = useNavigate();
const dispatch = useDispatch();
const [input, setInput] = useState({
email: '',
password: ''
});
useEffect(() => {
if (error) {
console.log(error);
switch (error.status) {
case 'PARSING_ERROR':
toast.error(error.data);
break;
case 401:
toast.error('username or password incorrect');
break;
case 404:
toast.error('account not exsit');
break;
default:
toast.error('something error');
break;
}
return;
}
}, [error]);
useEffect(() => {
if (isSuccess && data) {
// 更新本地认证信息
toast.success('login success');
dispatch(setAuthData(data));
navigateTo('/');
}
}, [isSuccess, data]);
const handleLogin = (evt) => {
evt.preventDefault();
console.log('wtf', input);
login({
...input,
type: 'password'
// const { token } = useSelector((store) => store.authData);
const navigateTo = useNavigate();
const dispatch = useDispatch();
const [input, setInput] = useState({
email: "",
password: "",
});
};
const handleInput = (evt) => {
const { type } = evt.target.dataset;
const { value } = evt.target;
console.log(type, value);
setInput((prev) => {
prev[type] = value;
return { ...prev };
});
};
const { email, password } = input;
return (
<StyledWrapper>
<div className="form">
<div className="tips">
<img
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
alt="logo"
className="logo"
/>
<h2 className="title">Login to Rustchat</h2>
<span className="desc">Please enter your details.</span>
</div>
<form onSubmit={handleLogin}>
<input
name="email"
value={email}
required
placeholder="Enter your email"
data-type="email"
onChange={handleInput}
/>
<input
type="password"
value={password}
name="password"
required
data-type="password"
onChange={handleInput}
placeholder="Enter your password"
/>
<button className="btn" type="submit" disabled={isLoading}>
Sign in
</button>
</form>
<hr className="or" />
<GoogleLoginButton login={login} />
<MetamaskLoginButton login={login} />
</div>
</StyledWrapper>
);
useEffect(() => {
if (error) {
console.log(error);
switch (error.status) {
case "PARSING_ERROR":
toast.error(error.data);
break;
case 401:
toast.error("username or password incorrect");
break;
case 404:
toast.error("account not exsit");
break;
default:
toast.error("something error");
break;
}
return;
}
}, [error]);
useEffect(() => {
if (isSuccess && data) {
// 更新本地认证信息
toast.success("login success");
dispatch(setAuthData(data));
navigateTo("/");
}
}, [isSuccess, data]);
const handleLogin = (evt) => {
evt.preventDefault();
console.log("wtf", input);
login({
...input,
type: "password",
});
};
const handleInput = (evt) => {
const { type } = evt.target.dataset;
const { value } = evt.target;
console.log(type, value);
setInput((prev) => {
prev[type] = value;
return { ...prev };
});
};
const { email, password } = input;
return (
<StyledWrapper>
<div className="form">
<div className="tips">
<img
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
alt="logo"
className="logo"
/>
<h2 className="title">Login to Rustchat</h2>
<span className="desc">Please enter your details.</span>
</div>
<form onSubmit={handleLogin}>
<input
name="email"
value={email}
required
placeholder="Enter your email"
data-type="email"
onChange={handleInput}
/>
<input
type="password"
value={password}
name="password"
required
data-type="password"
onChange={handleInput}
placeholder="Enter your password"
/>
<button className="btn" type="submit" disabled={isLoading}>
{isLoading ? "Signing" : `Sign in`}
</button>
</form>
<hr className="or" />
<GoogleLoginButton login={login} />
<MetamaskLoginButton login={login} />
</div>
</StyledWrapper>
);
}