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-03-10 10:30:38 +08:00
parent e6f5b6e428
commit d497e7df4f
22 changed files with 415 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/ImagePreviewModal.js
+64
View File
@@ -0,0 +1,64 @@
import { useRef } from "react";
import styled, { keyframes } from "styled-components";
import { useOutsideClick } from "rooks";
import Modal from "./Modal";
const AniFadeIn = keyframes`
from{
background: transparent;
}
to{
background: rgba(1, 1, 1, 0.9);
}
`;
const StyledWrapper = styled.div`
/* todo */
transition: all 0.5s ease;
width: 100vw;
height: 100vh;
/* background-color: rgba(1, 1, 1, 0.9); */
animation: ${AniFadeIn} 0.3s ease-in-out forwards;
display: flex;
align-items: center;
justify-content: center;
.box {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 10px;
img {
max-width: 70vw;
max-height: 70vw;
}
.origin {
font-weight: bold;
font-size: 14px;
color: #aaa;
&:hover {
text-decoration: underline;
color: #fff;
}
}
}
`;
export default function ImagePreviewModal({ image = null, closeModal }) {
const wrapperRef = useRef();
useOutsideClick(wrapperRef, closeModal);
if (!image) return null;
return (
<Modal>
<StyledWrapper>
<div className="box" ref={wrapperRef}>
<img
src={image}
alt="preview image"
className="animate__animated animate__fadeIn animate__faster"
/>
<a className="origin" href={image} target="_blank" rel="noreferrer">
Download original
</a>
</div>
</StyledWrapper>
</Modal>
);
}
src/common/component/Message/index.js
+10 -3
View File
@@ -1,8 +1,9 @@
import { useEffect, useRef, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import dayjs from "dayjs";
import { useDispatch, useSelector } from "react-redux";
import { useInViewRef } from "rooks";
import Tippy from "@tippyjs/react";
import Profile from "../Profile";
import Avatar from "../Avatar";
import { setChannelMsgRead } from "../../../app/slices/message.channel";
@@ -12,7 +13,7 @@ import Commands from "./Commands";
import { emojis } from "./EmojiPicker";
import EditMessage from "./EditMessage";
import renderContent from "./renderContent";
export default function Message({
function Message({
reply = null,
gid = "",
mid = "",
@@ -68,7 +69,10 @@ export default function Message({
return removed ? (
"removed"
) : (
<StyledWrapper ref={myRef} className={`${menuVisible ? "menu" : ""}`}>
<StyledWrapper
ref={myRef}
className={`${menuVisible ? "menu" : ""} ${inView ? "in_view" : ""}`}
>
<Tippy
interactive
placement="left"
@@ -143,3 +147,6 @@ export default function Message({
</StyledWrapper>
);
}
export default React.memo(Message, (prevs, nexts) => {
return prevs.mid == nexts.mid;
});
src/common/component/Message/renderContent.js
+7 -2
View File
@@ -27,11 +27,16 @@ const renderContent = (type, content, edited = false) => {
</>
);
break;
case "image/png":
case "image/jpeg":
ctn = (
<img
className="img"
src={`${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`}
className="img preview"
src={
content.startsWith("blob")
? content
: `${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`
}
/>
);
break;
src/common/component/Message/styled.js
+6
View File
@@ -7,6 +7,11 @@ const StyledMsg = styled.div`
padding: 4px;
margin: 8px 0;
border-radius: 8px;
content-visibility: auto;
contain-intrinsic-size: auto 150px;
&.in_view {
content-visibility: visible;
}
&:hover,
&.preview {
background: #f5f6f7;
@@ -95,6 +100,7 @@ const StyledMsg = styled.div`
}
.img {
max-width: 400px;
cursor: pointer;
}
a {
border-radius: 2px;
src/common/component/Send/UploadModal/index.js
+10 -37
View File
@@ -1,12 +1,12 @@
import { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
// import toast from "react-hot-toast";
// import { useNavigate } from "react-router-dom";
// import { useSelector, useDispatch } from "react-redux";
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 { addChannelMsg } from "../../../../app/slices/message.channel";
// import { addUserMsg } from "../../../../app/slices/message.user";
import Modal from "../../Modal";
import Button from "../../styled/Button";
@@ -18,25 +18,13 @@ export default function UploadModal({
files = [],
closeModal,
}) {
const dispatch = useDispatch();
// const dispatch = useDispatch();
const from_uid = useSelector((store) => store.authData.user.uid);
const [
sendChannelMsg,
{
error: sendChannelError,
isLoading: channelSending,
isSuccess: sendChannelSuccess,
data: sendChannelData,
},
{ isLoading: channelSending },
] = useSendChannelMsgMutation();
const [
sendUserMsg,
{
error: sendUserError,
isLoading: userSending,
isSuccess: sendUserSuccess,
data: sendUserData,
},
] = useSendMsgMutation();
const [sendUserMsg, { isLoading: userSending }] = useSendMsgMutation();
const [blobs, setBlobs] = useState([]);
useEffect(() => {
files.forEach((file) => {
@@ -57,22 +45,9 @@ export default function UploadModal({
}, [files]);
const handleUpload = () => {
const uploadFn = type == "user" ? sendUserMsg : sendChannelMsg;
uploadFn({ id: sendTo, content: files[0], type: "image" });
uploadFn({ id: sendTo, content: files[0], type: "image", from_uid });
closeModal();
};
useEffect(() => {
if (sendUserSuccess) {
dispatch(addUserMsg({ id: sendTo, ...sendUserData, unread: false }));
closeModal();
}
}, [sendUserSuccess, sendUserData]);
useEffect(() => {
if (sendChannelSuccess) {
const { gid, ...rest } = sendChannelData;
dispatch(addChannelMsg({ id: gid, ...rest, unread: false }));
closeModal();
}
}, [sendChannelSuccess, sendChannelData]);
if (!sendTo) return null;
return (
<Modal>
@@ -108,9 +83,7 @@ export default function UploadModal({
/>
<div className="right">
<div className="name">
<span contentEditable className="input">
{b.name}
</span>
<span className="input">{b.name}</span>
<i className="tip">(click title to change name)</i>
</div>
<i className="size">{`${Math.floor(b.size / 1000)}KB`}</i>
src/common/component/Setting/LogoutConfirmModal.js
+8 -23
View File
@@ -2,20 +2,13 @@
import { useEffect, useState } from "react";
import styled from "styled-components";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { toggleSetting } from "../../../app/slices/ui";
import { clearAuthData } from "../../../app/slices/auth.data";
import { clearMark } from "../../../app/slices/visit.mark";
import { clearChannels } from "../../../app/slices/channels";
import { clearContacts } from "../../../app/slices/contacts";
import { clearChannelMsg } from "../../../app/slices/message.channel";
import { clearUserMsg } from "../../../app/slices/message.user";
import { clearPendingMsg } from "../../../app/slices/message.pending";
// import BASE_URL from "../../app/config";
import { useLazyLogoutQuery } from "../../../app/services/auth";
import StyledModal from "../styled/Modal";
import Button from "../styled/Button";
import Checkbox from "../styled/Checkbox";
import useLogout from "../../hook/useLogout";
const StyledConfirm = styled(StyledModal)`
.clear {
font-weight: normal;
@@ -37,10 +30,9 @@ const StyledConfirm = styled(StyledModal)`
`;
import Modal from "../Modal";
export default function LogoutConfirmModal({ closeModal }) {
const [clearLocal, setClearLocal] = useState(false);
const dispatch = useDispatch();
const navigate = useNavigate();
const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
const [clearLocal, setClearLocal] = useState(false);
const { logout, exited, exiting, clearLocalData } = useLogout();
const handleLogout = () => {
logout();
};
@@ -48,22 +40,15 @@ export default function LogoutConfirmModal({ closeModal }) {
setClearLocal(evt.target.checked);
};
useEffect(() => {
if (isSuccess) {
if (exited) {
if (clearLocal) {
console.log("clear all store");
dispatch(clearMark());
dispatch(clearChannelMsg());
dispatch(clearUserMsg());
dispatch(clearChannels());
dispatch(clearContacts());
dispatch(clearPendingMsg());
clearLocalData();
}
dispatch(clearAuthData());
// closeModal();
dispatch(toggleSetting());
navigate("/login");
}
}, [isSuccess, clearLocal]);
}, [exited, clearLocal]);
return (
<Modal id="modal-modal">
<StyledConfirm
@@ -74,7 +59,7 @@ export default function LogoutConfirmModal({ closeModal }) {
{" "}
<Button onClick={closeModal}>Cancel</Button>
<Button onClick={handleLogout} className="danger">
{isLoading ? "Logging out" : `Log Out`}
{exiting ? "Logging out" : `Log Out`}
</Button>
</>
}
src/common/component/Setting/config/Firebase.js
+3 -1
View File
@@ -2,6 +2,7 @@
import StyledContainer from "./StyledContainer";
// import { useSelector } from "react-redux";
import Input from "../../styled/Input";
import Textarea from "../../styled/Textarea";
import Toggle from "../../styled/Toggle";
import Label from "../../styled/Label";
import SaveTip from "../../SaveTip";
@@ -62,7 +63,8 @@ export default function ConfigFirebase() {
</div>
<div className="input">
<Label htmlFor="desc">Private Key</Label>
<Input
<Textarea
rows={15}
disabled={!enabled}
data-type="private_key"
onChange={handleChange}
src/common/hook/useLogout.js
+33
View File
@@ -0,0 +1,33 @@
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { clearAuthData } from "../../app/slices/auth.data";
import { clearMark } from "../../app/slices/visit.mark";
import { clearChannels } from "../../app/slices/channels";
import { clearContacts } from "../../app/slices/contacts";
import { clearChannelMsg } from "../../app/slices/message.channel";
import { clearUserMsg } from "../../app/slices/message.user";
import { clearPendingMsg } from "../../app/slices/message.pending";
import { useLazyLogoutQuery } from "../../app/services/auth";
export default function useLogout() {
const dispatch = useDispatch();
const navigate = useNavigate();
const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
const clearLocalData = () => {
dispatch(clearMark());
dispatch(clearChannelMsg());
dispatch(clearUserMsg());
dispatch(clearChannels());
dispatch(clearContacts());
dispatch(clearPendingMsg());
};
useEffect(() => {
if (isSuccess) {
dispatch(clearAuthData());
navigate("/login");
}
}, [isSuccess]);
return { clearLocalData, logout, exited: isSuccess, exiting: isLoading };
}