remove survey and clean up

public/robots.txt

@@ -4,4 +4,3 @@ Allow: /
 Allow: /editor
 Allow: /templates
 Disallow: /bug-report
-Disallow: /survey

src/App.jsx

@@ -1,7 +1,6 @@
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { useLayoutEffect } from "react";
 import Editor from "./pages/Editor";
-import Survey from "./pages/Survey";
 import BugReport from "./pages/BugReport";
 import Templates from "./pages/Templates";
 import LandingPage from "./pages/LandingPage";
@@ -24,14 +23,6 @@ export default function App() {
               </ThemedPage>
             }
           />
-          <Route
-            path="/survey"
-            element={
-              <ThemedPage>
-                <Survey />
-              </ThemedPage>
-            }
-          />
           <Route
             path="/bug-report"
             element={

src/components/EditorHeader/ControlPanel.jsx

@@ -1454,9 +1454,6 @@ export default function ControlPanel({
       report_bug: {
         function: () => window.open("/bug-report", "_blank"),
       },
-      feedback: {
-        function: () => window.open("/survey", "_blank"),
-      },
     },
   };
 

src/pages/BugReport.jsx

@@ -2,12 +2,7 @@ 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 { IconGithubLogo, IconPaperclip } from "@douyinfe/semi-icons";
 import RichEditor from "../components/LexicalEditor/RichEditor";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { editorConfig } from "../data/editorConfig";
@@ -108,12 +103,8 @@ function Form({ theme }) {
         dragSubText="Upload up to 3 images"
         accept="image/*"
         limit={3}
-      ></Upload>
-      <div className="pt-4 flex justify-between items-center">
-        <div className="text-sm opacity-80">
-          <i className="fa-brands fa-markdown me-1"></i>Styling with markdown is
-          supported
-        </div>
+      />
+      <div className="pt-4 flex justify-end items-center">
         <div className="flex items-center">
           <Button
             onClick={onSubmit}
@@ -140,22 +131,6 @@ export default function BugReport() {
     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 (
     <>
       <div className="sm:py-3 py-5 px-20 sm:px-6 flex justify-between items-center">
@@ -164,26 +139,13 @@ export default function BugReport() {
             <img
               src={theme === "dark" ? logo_dark : logo_light}
               alt="logo"
-              className="me-2 sm:h-[28px] md:h-[46px] h-[48px]"
+              className="me-2 sm:h-[28px] h-[42px]"
             />
           </Link>
           <div className="ms-4 sm:text-sm xl:text-lg font-semibold">
             Report a bug
           </div>
         </div>
-        <div className="flex items-center">
-          <Button
-            icon={
-              theme === "dark" ? (
-                <IconSun size="extra-large" />
-              ) : (
-                <IconMoon size="extra-large" />
-              )
-            }
-            theme="borderless"
-            onClick={changeTheme}
-          />
-        </div>
       </div>
       <hr
         className={`${

src/pages/LandingPage.jsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { IconCrossStroked } from "@douyinfe/semi-icons";
 import SimpleCanvas from "../components/SimpleCanvas";
 import Navbar from "../components/Navbar";
 import { diagram } from "../data/heroDiagram";
@@ -27,7 +26,6 @@ function shortenNumber(number) {
 }
 
 export default function LandingPage() {
-  const [showSurvey, setShowSurvey] = useState(true);
   const [stats, setStats] = useState({ stars: 18000, forks: 1200 });
 
   useEffect(() => {
@@ -47,18 +45,8 @@ export default function LandingPage() {
   return (
     <div>
       <div className="flex flex-col h-screen bg-zinc-100">
-        {showSurvey && (
-          <div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-linear-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e]">
-            <Link to="/survey" className="hover:underline">
-              Help us improve! Share your feedback.
-            </Link>
-            <div className="float-right">
-              <button onClick={() => setShowSurvey(false)}>
-                <IconCrossStroked size="small" />
-              </button>
-            </div>
-          </div>
-        )}
+        <div className="text-white font-semibold py-1 text-sm text-center bg-linear-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e]" />
+
         <FadeIn duration={0.6}>
           <Navbar />
         </FadeIn>
@@ -338,7 +326,8 @@ const features = [
     title: "Keyboard shortcuts",
     content: (
       <div>
-        Speed up development with keyboard shortcuts. See all available shortcuts
+        Speed up development with keyboard shortcuts. See all available
+        shortcuts
         <Link
           to={`${socials.docs}/shortcuts`}
           className="ms-1.5 text-blue-500 hover:underline"

src/pages/Survey.jsx

@@ -1,307 +0,0 @@
-import { useEffect, useState, useCallback } from "react";
-import logo_light from "../assets/logo_light_160.png";
-import logo_dark from "../assets/logo_dark_160.png";
-import {
-  Banner,
-  Button,
-  Toast,
-  Spin,
-  Slider,
-  Radio,
-  RadioGroup,
-  Select,
-  TextArea,
-} from "@douyinfe/semi-ui";
-import { IconSun, IconMoon } from "@douyinfe/semi-icons";
-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 { Link } from "react-router-dom";
-import RichEditor from "../components/LexicalEditor/RichEditor";
-import { questions } from "../data/surveyQuestions";
-import { api } from "../api";
-
-function SurveyForm({ theme }) {
-  const [editor] = useLexicalComposerContext();
-  const [form, setForm] = useState({
-    satisfaction: 5,
-    ease: 5,
-    wouldRecommend: 5,
-    hadDifficulty: "",
-    difficulty: "",
-    triedOtherApps: "",
-    comparison: "",
-    occupation: "",
-  });
-  const [loading, setLoading] = useState(false);
-
-  const resetForm = () => {
-    setForm({
-      satisfaction: 5,
-      ease: 5,
-      wouldRecommend: 5,
-      hadDifficulty: "",
-      difficulty: "",
-      triedOtherApps: "",
-      comparison: "",
-      occupation: "",
-    });
-    setLoading(false);
-  };
-
-  const onSubmit = useCallback(() => {
-    setLoading(true);
-    editor.update(() => {
-      const sendMail = async () => {
-        try {
-          await api.email.send(
-            `[SURVEY]: ${new Date().toDateString()}`,
-            `${Object.keys(form)
-              .map((k) => `<div>${questions[k]}</div><div>${form[k]}</div>`)
-              .join("\n\n")}<br/>${$generateHtmlFromNodes(editor)}`,
-          );
-          Toast.success("Thanks for the feedback!");
-          editor.dispatchCommand(CLEAR_EDITOR_COMMAND, null);
-          resetForm();
-        } catch {
-          Toast.error("Oops! Something went wrong.");
-          setLoading(false);
-        }
-      };
-      sendMail();
-    });
-  }, [editor, form]);
-
-  return (
-    <div className="py-5 px-8 mt-6 card-theme rounded-md">
-      <div className="my-3">
-        <div className="font-semibold ms-1 mb-2">{questions.satisfaction}</div>
-        <Slider
-          field="satisfaction"
-          min={0}
-          max={10}
-          value={form.satisfaction}
-          onChange={(v) => {
-            setForm((prev) => ({ ...prev, satisfaction: v }));
-          }}
-        />
-        <div className="text-sm flex justify-between opacity-80">
-          <div>Not at all</div>
-          <div>Extremely</div>
-        </div>
-      </div>
-      <div className="my-3">
-        <div className="font-semibold ms-1 mb-2">{questions.ease}</div>
-        <Slider
-          field="ease"
-          min={0}
-          max={10}
-          value={form.ease}
-          onChange={(v) => {
-            setForm((prev) => ({ ...prev, ease: v }));
-          }}
-        />
-        <div className="text-sm flex justify-between opacity-80">
-          <div>Not at all</div>
-          <div>Extremely</div>
-        </div>
-      </div>
-      <div className="my-3">
-        <div className="font-semibold ms-1 mb-2">
-          {questions.wouldRecommend}
-        </div>
-        <Slider
-          field="ease"
-          min={0}
-          max={10}
-          value={form.wouldRecommend}
-          onChange={(v) => {
-            setForm((prev) => ({ ...prev, wouldRecommend: v }));
-          }}
-        />
-        <div className="text-sm flex justify-between opacity-80">
-          <div>Not at all</div>
-          <div>Extremely</div>
-        </div>
-      </div>
-      <div className="my-3">
-        <div className="font-semibold ms-1 mb-3">{questions.hadDifficulty}</div>
-        <RadioGroup
-          direction="vertical"
-          value={form.hadDifficulty}
-          onChange={(e) =>
-            setForm((prev) => ({ ...prev, hadDifficulty: e.target.value }))
-          }
-        >
-          <Radio value={"yes"}>Yes</Radio>
-          <Radio value={"no"}>No</Radio>
-        </RadioGroup>
-      </div>
-      {form.hadDifficulty === "yes" && (
-        <div className="my-3">
-          <div className="font-semibold ms-1 mb-3">{questions.difficulty}</div>
-          <TextArea
-            rows={2}
-            placeholder="Tell us more"
-            value={form.difficulty}
-            onChange={(v) => setForm((prev) => ({ ...prev, difficulty: v }))}
-          />
-        </div>
-      )}
-      <div className="my-3">
-        <div className="font-semibold ms-1 mb-3">
-          {questions.triedOtherApps}
-        </div>
-        <RadioGroup
-          direction="vertical"
-          value={form.triedOtherApps}
-          onChange={(e) =>
-            setForm((prev) => ({ ...prev, triedOtherApps: e.target.value }))
-          }
-        >
-          <Radio value={"yes"}>Yes</Radio>
-          <Radio value={"no"}>No</Radio>
-        </RadioGroup>
-      </div>
-      {form.triedOtherApps === "yes" && (
-        <div className="my-3">
-          <div className="font-semibold ms-1 mb-3">{questions.comparison}</div>
-          <TextArea
-            rows={2}
-            placeholder="Tell us more"
-            value={form.comparison}
-            onChange={(v) => setForm((prev) => ({ ...prev, comparison: v }))}
-          />
-        </div>
-      )}
-      <div className="my-3">
-        <div className="font-semibold ms-1 mb-3">{questions.occupation}</div>
-        <Select
-          optionList={[
-            { value: "Student", label: "Student" },
-            { value: "Teacher", label: "Teacher" },
-            { value: "Developer", label: "Developer" },
-          ]}
-          className="w-full"
-          placeholder="Occupation"
-          value={form.occupation}
-          onSelect={(v) => setForm((prev) => ({ ...prev, occupation: v }))}
-        />
-      </div>
-      <div className="ms-1 font-semibold">
-        How can we make drawDB a better experience for you?
-      </div>
-      <RichEditor theme={theme} />
-      <div className="flex justify-between items-center">
-        <div className="text-sm opacity-80">
-          <i className="fa-brands fa-markdown me-1"></i>Styling with markdown is
-          supported
-        </div>
-        <div className="flex items-center">
-          <Button
-            onClick={onSubmit}
-            style={{ padding: "16px 32px" }}
-            disabled={loading}
-          >
-            Submit
-          </Button>
-          <div className={loading ? "ms-2" : "hidden"}>
-            <Spin />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function Survey() {
-  const [theme, setTheme] = useState("");
-
-  useEffect(() => window.scroll(0, 0));
-
-  useEffect(() => {
-    setTheme(localStorage.getItem("theme"));
-    document.title = "Share you feedback | 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 (
-    <div>
-      <div className="sm:py-3 py-5 md:px-8 px-20 flex justify-between items-center">
-        <div className="flex items-center justify-start">
-          <Link to="/">
-            <img
-              src={theme === "dark" ? logo_dark : logo_light}
-              alt="logo"
-              className="me-2 sm:h-[28px] md:h-[46px] h-[48px]"
-            />
-          </Link>
-          <div className="ms-4 sm:text-sm xl:text-lg font-semibold">
-            Share your feedback
-          </div>
-        </div>
-        <div className="flex items-center">
-          <Button
-            icon={
-              theme === "dark" ? (
-                <IconSun size="extra-large" />
-              ) : (
-                <IconMoon size="extra-large" />
-              )
-            }
-            theme="borderless"
-            onClick={changeTheme}
-          />
-        </div>
-      </div>
-      <hr
-        className={`${
-          theme === "dark" ? "border-zinc-700" : "border-zinc-300"
-        } my-1`}
-      />
-      <div className="md:w-[90%] w-[74%] mx-auto my-8">
-        <Banner
-          fullMode={false}
-          type="info"
-          icon={null}
-          closeIcon={null}
-          description={
-            <div>
-              Thanks for taking this survey! We highly value your feedback and
-              strive to make drawDB fit your needs better.
-            </div>
-          }
-        />
-        <LexicalComposer initialConfig={editorConfig}>
-          <SurveyForm theme={theme} />
-        </LexicalComposer>
-      </div>
-      <hr
-        className={`${
-          theme === "dark" ? "border-zinc-700" : "border-zinc-300"
-        } my-1`}
-      />
-      <div className="text-center text-sm py-3">
-        &copy; 2024 <strong>drawDB</strong> - All right reserved.
-      </div>
-    </div>
-  );
-}