import { useEffect, useState, useCallback, useRef } from "react"; import logo_light from "../assets/logo_light_160.png"; import logo_dark from "../assets/logo_dark_160.png"; import { Banner, Button, Input, Upload, Toast, Spin } from "@douyinfe/semi-ui"; import { IconSun, IconMoon, IconGithubLogo, IconPaperclip, } from "@douyinfe/semi-icons"; import RichEditor from "../components/LexicalEditor/RichEditor"; import { LexicalComposer } from "@lexical/react/LexicalComposer"; import { editorConfig } from "../data/editorConfig"; import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; import { $generateHtmlFromNodes } from "@lexical/html"; import { CLEAR_EDITOR_COMMAND } from "lexical"; import axios from "axios"; import { Link } from "react-router-dom"; function Form({ theme }) { const [editor] = useLexicalComposerContext(); const [data, setData] = useState({ title: "", attachments: [], }); const [loading, setLoading] = useState(false); const uploadRef = useRef(); const resetForm = () => { setData({ title: "", attachments: [], }); setLoading(false); if (uploadRef.current) { uploadRef.current.clear(); } }; const onFileChange = (fileList) => { const attachments = []; const processFile = (index) => { const reader = new FileReader(); reader.onload = (event) => { const dataUri = event.target.result; attachments.push({ path: dataUri, filename: fileList[index].name }); }; reader.readAsDataURL(fileList[index].fileInstance); }; fileList.forEach((_, i) => processFile(i)); setData((prev) => ({ ...prev, attachments: attachments, })); }; const onSubmit = useCallback(() => { setLoading(true); editor.update(() => { const sendMail = async () => { await axios .post(`${import.meta.env.VITE_BACKEND_URL}/send_email`, { subject: `[BUG REPORT]: ${data.title}`, message: $generateHtmlFromNodes(editor), attachments: data.attachments, }) .then(() => { Toast.success("Bug reported!"); editor.dispatchCommand(CLEAR_EDITOR_COMMAND, null); resetForm(); }) .catch(() => { Toast.error("Oops! Something went wrong."); setLoading(false); }); }; sendMail(); }); }, [editor, data]); return (
setData((prev) => ({ ...prev, title: v }))} /> onFileChange(info.fileList)} beforeUpload={({ file }) => { return { autoRemove: false, fileInstance: file.fileInstance, status: "success", shouldUpload: false, }; }} draggable={true} dragMainText="Click to upload the file or drag and drop the file here" dragSubText="Upload up to 3 images" accept="image/*" limit={3} >
Styling with markdown is supported
); } export default function BugReport() { const [theme, setTheme] = useState(""); useEffect(() => { setTheme(localStorage.getItem("theme")); document.title = "Report a bug | drawDB"; document.body.setAttribute("class", "theme"); }, [setTheme]); const changeTheme = () => { const body = document.body; const t = body.getAttribute("theme-mode"); if (t === "dark") { if (body.hasAttribute("theme-mode")) { body.setAttribute("theme-mode", "light"); setTheme("light"); } } else { if (body.hasAttribute("theme-mode")) { body.setAttribute("theme-mode", "dark"); setTheme("dark"); } } }; return ( <>
logo
Report a bug

Describe the bug
Please provide a clear and concise description of what the bug is.
Steps to reproduce the bug
Please provide the steps of how to reproduce the bug.
Expected behaviour
Tell us what you expected to see vs what you saw.
Your browser and device
What web browser and device did you encounter the bug on.
Screenshots
Add any relevant images if possible.

Alternatively

We value your feedback! If you've encountered a bug or issue while using our platform, please help us improve by reporting it. Your input is invaluable in making our service better.
} />

© 2024 drawDB - All right reserved.
); }