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

refactor: useUploadFile add stage files

Browse Source
This commit is contained in:
zerosoul
2022-05-20 23:57:08 +08:00
parent fd5dd0a83e
commit 7209efa685
5 changed files with 68 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Send/Toolbar.js
+3 -4
View File
@@ -1,12 +1,11 @@
import { useRef } from "react";
import styled from "styled-components";
import { useDispatch } from "react-redux";
import { updateUploadFiles } from "../../../app/slices/ui";
import Tooltip from "../../component/Tooltip";
import AddIcon from "../../../assets/icons/add.solid.svg";
import MarkdownIcon from "../../../assets/icons/markdown.svg";
import FullscreenIcon from "../../../assets/icons/fullscreen.svg";
import ExitFullscreenIcon from "../../../assets/icons/fullscreen.exit.svg";
import useUploadFile from "../../hook/useUploadFile";
const Styled = styled.div`
display: flex;
align-items: center;
@@ -50,7 +49,7 @@ export default function Toolbar({
to,
context,
}) {
const dispatch = useDispatch();
const { addStageFile } = useUploadFile({ context, id: to });
const fileInputRef = useRef(null);
const handleUpload = (evt) => {
const files = [...evt.target.files];
@@ -60,7 +59,7 @@ export default function Toolbar({
const url = URL.createObjectURL(file);
return { size, type, name, url };
});
dispatch(updateUploadFiles({ context, id: to, data: filesData }));
addStageFile(filesData);
fileInputRef.current.value = null;
fileInputRef.current.value = "";
// setFiles([...evt.target.files]);
src/common/component/Send/UploadFileList/index.js
+13 -20
View File
@@ -1,47 +1,40 @@
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Styled from "./styled";
import { useMixedEditor } from "../../MixedInput";
import EditFileDetailsModal from "./EditFileDetails";
import { updateUploadFiles } from "../../../../app/slices/ui";
import { getFileIcon, formatBytes } from "../../../utils";
import useUploadFile from "../../../hook/useUploadFile";
import EditIcon from "../../../../assets/icons/edit.svg";
import DeleteIcon from "../../../../assets/icons/delete.svg";
export default function UploadFileList({ context = "", id = null }) {
const eidtor = useMixedEditor(`${context}_${id}`);
const [editInfo, setEditInfo] = useState(null);
const dispatch = useDispatch();
const files = useSelector(
(store) => store.ui.uploadFiles[`${context}_${id}`] || []
);
const { stageFiles, updateStageFile, removeStageFile } = useUploadFile({
context,
id,
});
const toggleModalVisible = (info) => {
setEditInfo((prev) => (prev ? null : info));
};
const handleOpenEditModal = (idx) => {
const info = files[idx];
const info = stageFiles[idx];
if (!info) return;
toggleModalVisible({ ...info, index: idx });
};
const handleRemove = (idx) => {
dispatch(
updateUploadFiles({ context, id, operation: "remove", index: idx })
);
};
const updateFileName = (name) => {
if (!name) return;
const { index } = editInfo;
dispatch(
updateUploadFiles({ context, id, operation: "update", index, name })
);
updateStageFile(index, { name });
};
useEffect(() => {
eidtor.focus();
}, [files.length]);
}, [stageFiles.length]);
if (!context || !id || !files || files.length == 0) return null;
console.log("upload files", files);
if (!context || !id || !stageFiles || stageFiles.length == 0) return null;
console.log("upload stageFiles", stageFiles);
return (
<>
{editInfo && (
@@ -53,7 +46,7 @@ export default function UploadFileList({ context = "", id = null }) {
)}
<Styled>
{files.map(({ name, url, size, type }, idx) => {
{stageFiles.map(({ name, url, size, type }, idx) => {
return (
<li className="file" key={url}>
<div className="preview">
@@ -75,7 +68,7 @@ export default function UploadFileList({ context = "", id = null }) {
<li
className="opt delete"
data-index={idx}
onClick={handleRemove.bind(null, idx)}
onClick={removeStageFile.bind(null, idx)}
>
<DeleteIcon />
</li>
src/common/component/Send/index.js
+4 -2
View File
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import useSendMessage from "../../hook/useSendMessage";
import useAddLocalFileMessage from "../../hook/useAddLocalFileMessage";
import { updateInputMode, updateUploadFiles } from "../../../app/slices/ui";
import { updateInputMode } from "../../../app/slices/ui";
import { ContentTypes } from "../../../app/config";
import StyledSend from "./styled";
@@ -14,6 +14,7 @@ import EmojiPicker from "./EmojiPicker";
import MarkdownEditor from "../MarkdownEditor";
import MixedInput, { useMixedEditor } from "../MixedInput";
import useDraft from "../../hook/useDraft";
import useUploadFile from "../../hook/useUploadFile";
const Types = {
channel: "#",
user: "@",
@@ -27,6 +28,7 @@ function Send({
context = "channel",
id = "",
}) {
const { resetStageFiles } = useUploadFile({ context, id });
const { getDraft, getUpdateDraft } = useDraft({ context, id });
const editor = useMixedEditor(`${context}_${id}`);
const [markdownEditor, setMarkdownEditor] = useState(null);
@@ -109,7 +111,7 @@ function Send({
};
addLocalFileMesage(tmpMsg);
});
dispatch(updateUploadFiles({ context, id, operation: "reset" }));
resetStageFiles();
}
};
const sendMarkdown = async (content) => {
src/common/hook/useUploadFile.js
+43 -1
View File
@@ -1,12 +1,23 @@
import { useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
// import { ContentTypes } from "../../app/config";
import { updateUploadFiles } from "../../app/slices/ui";
import BASE_URL, { FILE_SLICE_SIZE } from "../../app/config";
import {
usePrepareUploadFileMutation,
useUploadFileMutation,
} from "../../app/services/message";
import toast from "react-hot-toast";
export default function useUploadFile() {
export default function useUploadFile(props = {}) {
const { context = "", id = "" } = props;
const dispatch = useDispatch();
const { stageFiles, replying } = useSelector((store) => {
return {
stageFiles: store.ui.uploadFiles[`${context}_${id}`] || [],
replying: store.message.replying[id],
};
});
const [data, setData] = useState(null);
// const [uploadingFile, setUploadingFile] = useState(false);
const canneledRef = useRef(false);
@@ -108,6 +119,32 @@ export default function useUploadFile() {
const stopUploading = () => {
canneledRef.current = true;
};
const removeStageFile = (idx) => {
dispatch(
updateUploadFiles({ context, id, operation: "remove", index: idx })
);
};
const addStageFile = (fileData = {}) => {
if (replying) {
toast.error("Only text is supported when replying a message");
return;
}
dispatch(updateUploadFiles({ context, id, data: fileData }));
};
const resetStageFiles = () => {
dispatch(updateUploadFiles({ context, id, operation: "reset" }));
};
const updateStageFile = (idx, data = {}) => {
dispatch(
updateUploadFiles({
context,
id,
operation: "update",
index: idx,
...data,
})
);
};
return {
stopUploading,
data,
@@ -118,5 +155,10 @@ export default function useUploadFile() {
uploadFile,
isError: uploadFileError,
isSuccess: !!data,
stageFiles,
addStageFile,
resetStageFiles,
removeStageFile,
updateStageFile,
};
}
src/routes/chat/Layout/index.js
+5 -6
View File
@@ -1,13 +1,13 @@
import { useState, useRef, useEffect } from "react";
import { useDrop } from "react-dnd";
import { useDispatch, useSelector } from "react-redux";
import { useSelector } from "react-redux";
import { NativeTypes } from "react-dnd-html5-backend";
import { updateUploadFiles } from "../../../app/slices/ui";
import ImagePreviewModal from "../../../common/component/ImagePreviewModal";
import Send from "../../../common/component/Send";
import Styled from "./styled";
import Operations from "./Operations";
import useUploadFile from "../../../common/hook/useUploadFile";
export default function Layout({
children,
@@ -18,8 +18,7 @@ export default function Layout({
context = "channel",
to = null,
}) {
const dispatch = useDispatch();
const { addStageFile } = useUploadFile({ context, id: to });
const messagesContainer = useRef(null);
const [previewImage, setPreviewImage] = useState(null);
const selects = useSelector(
@@ -36,7 +35,7 @@ export default function Layout({
const url = URL.createObjectURL(file);
return { size, type, name, url };
});
dispatch(updateUploadFiles({ context, id: to, data: filesData }));
addStageFile(filesData);
}
},
collect: (monitor) => ({
@@ -52,7 +51,7 @@ export default function Layout({
const url = URL.createObjectURL(file);
return { size, type, name, url };
});
dispatch(updateUploadFiles({ context, id: to, data: filesData }));
addStageFile(filesData);
}
}, [dropFiles]);