✨ feat(custom): init empty editor page

Valen-C12 · Feb 21, 2023 · fb84113 · fb84113
1 parent 637f521
commit fb84113
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
+    "react-router-dom": "^6.8.1",
     "smiles-drawer": "^2.1.7"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,98 +1,7 @@
-import { Field, Form, Formik, useFormikContext } from "formik";
-import { useEffect, useState } from "react";
 import "./App.css";
-import SyntheticRoute from "./components/SyntheticRoute";
-import { useRouteSearch } from "./services/routeSearch";
-import { RouteSearchParams } from "./services/routeSearch/type";
 
 function App() {
-  const [params, setParams] = useState<RouteSearchParams>({
-    target: "CCOC(=O)C(F)C(NCC(C)C)",
-    max_rxn_steps: 3,
-    n_path: 5,
-  });
-  const { data, isLoading } = useRouteSearch(params);
-  const [displayStyle, setDisplayStyle] = useState<string>("rdKit");
-
-  return (
-    <div className="App">
-      <Formik<RouteSearchParams>
-        initialValues={params}
-        onSubmit={(value) => setParams(value)}
-      >
-        <Form>
-          <label htmlFor="target">目标分子</label>
-          <Field id="target" name="target" />
-          <br />
-
-          <label htmlFor="max_rxn_steps">最大实验数</label>
-          <Field id="max_rxn_steps" name="max_rxn_steps" type="number" />
-          <br />
-
-          <label htmlFor="n_path">路径数</label>
-          <Field id="n_path" name="n_path" type="number" />
-          <br />
-
-          <label htmlFor="max_material_cost">最大物料花费</label>
-          <Field
-            id="max_material_cost"
-            name="max_material_cost"
-            type="number"
-          />
-          <br />
-
-          <label htmlFor="exclude_substructures">排除分子</label>
-          <Field
-            id="exclude_substructures"
-            name="exclude_substructures"
-            type="number"
-          />
-          <br />
-
-          <label htmlFor="exclude_materials">排除物料</label>
-          <Field
-            id="exclude_materials"
-            name="exclude_materials"
-            type="number"
-          />
-          <br />
-
-          <label htmlFor="exclude_rxns">排除反应</label>
-          <Field id="exclude_rxns" name="exclude_rxns" type="number" />
-          <br />
-
-          <button type="submit">Submit</button>
-          <br />
-
-          <div role="group">
-            <label>
-              <Field
-                type="radio"
-                name="display"
-                value="rdKit"
-                onClick={(e) => setDisplayStyle(e.target?.value)}
-              />
-              rdKit
-            </label>
-            <label>
-              <Field
-                type="radio"
-                name="display"
-                value="smilesDrawer"
-                onClick={(e) => setDisplayStyle(e.target?.value)}
-              />
-              SmilesDrawer
-            </label>
-          </div>
-        </Form>
-      </Formik>
-      {!isLoading && data?.data ? (
-        <SyntheticRoute routes={data.data} display={displayStyle} />
-      ) : (
-        "Loading..."
-      )}
-    </div>
-  );
+  return <div className="App">App</div>;
 }
 
 export default App;
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,13 +3,24 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
 import { QueryClient, QueryClientProvider, useQuery } from "react-query";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import RouteSearch from "./pages/route-search";
+import Editor from "./pages/editor";
 
 const queryClient = new QueryClient();
+const router = createBrowserRouter([
+  { path: "/", element: <App /> },
+  {
+    path: "route-search",
+    element: <RouteSearch />,
+  },
+  { path: "editor", element: <Editor /> },
+]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <RouterProvider router={router} />
     </QueryClientProvider>
   </React.StrictMode>
 );
diff --git a/src/pages/editor/index.tsx b/src/pages/editor/index.tsx
@@ -0,0 +1,7 @@
+import { FC } from "react";
+
+const Editor: FC = () => {
+  return <>Editor</>;
+};
+
+export default Editor;
diff --git a/src/pages/route-search/index.css b/src/pages/route-search/index.css
@@ -0,0 +1,43 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+  width: calc(100vw - 50px);
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/src/pages/route-search/index.tsx b/src/pages/route-search/index.tsx
@@ -0,0 +1,98 @@
+import { Field, Form, Formik } from "formik";
+import { FC, useState } from "react";
+import "./index.css";
+import SyntheticRoute from "../../components/SyntheticRoute";
+import { useRouteSearch } from "../../services/routeSearch";
+import { RouteSearchParams } from "../../services/routeSearch/type";
+
+const RouteSearch: FC = () => {
+  const [params, setParams] = useState<RouteSearchParams>({
+    target: "CCOC(=O)C(F)C(NCC(C)C)",
+    max_rxn_steps: 3,
+    n_path: 5,
+  });
+  const { data, isLoading } = useRouteSearch(params);
+  const [displayStyle, setDisplayStyle] = useState<string>("rdKit");
+
+  return (
+    <div className="App">
+      <Formik<RouteSearchParams>
+        initialValues={params}
+        onSubmit={(value) => setParams(value)}
+      >
+        <Form>
+          <label htmlFor="target">目标分子</label>
+          <Field id="target" name="target" />
+          <br />
+
+          <label htmlFor="max_rxn_steps">最大实验数</label>
+          <Field id="max_rxn_steps" name="max_rxn_steps" type="number" />
+          <br />
+
+          <label htmlFor="n_path">路径数</label>
+          <Field id="n_path" name="n_path" type="number" />
+          <br />
+
+          <label htmlFor="max_material_cost">最大物料花费</label>
+          <Field
+            id="max_material_cost"
+            name="max_material_cost"
+            type="number"
+          />
+          <br />
+
+          <label htmlFor="exclude_substructures">排除分子</label>
+          <Field
+            id="exclude_substructures"
+            name="exclude_substructures"
+            type="number"
+          />
+          <br />
+
+          <label htmlFor="exclude_materials">排除物料</label>
+          <Field
+            id="exclude_materials"
+            name="exclude_materials"
+            type="number"
+          />
+          <br />
+
+          <label htmlFor="exclude_rxns">排除反应</label>
+          <Field id="exclude_rxns" name="exclude_rxns" type="number" />
+          <br />
+
+          <button type="submit">Submit</button>
+          <br />
+
+          <div role="group">
+            <label>
+              <Field
+                type="radio"
+                name="display"
+                value="rdKit"
+                onClick={(e) => setDisplayStyle(e.target?.value)}
+              />
+              rdKit
+            </label>
+            <label>
+              <Field
+                type="radio"
+                name="display"
+                value="smilesDrawer"
+                onClick={(e) => setDisplayStyle(e.target?.value)}
+              />
+              SmilesDrawer
+            </label>
+          </div>
+        </Form>
+      </Formik>
+      {!isLoading && data?.data ? (
+        <SyntheticRoute routes={data.data} display={displayStyle} />
+      ) : (
+        "Loading..."
+      )}
+    </div>
+  );
+};
+
+export default RouteSearch;
diff --git a/yarn.lock b/yarn.lock
@@ -371,6 +371,11 @@
   resolved "https://registry.npmjs.org/@rdkit/rdkit/-/rdkit-2022.9.4-1.0.0.tgz"
   integrity sha512-6mvNFZ8aHXDN+ahopW+VA/8uouqypkp7BsB0OveeinFDZgm9fN6+1/lOtvDJAC/azlzu5AQfoVhcXe7b4txtSA==
 
+"@remix-run/[email protected]":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.3.2.tgz#58cd2bd25df2acc16c628e1b6f6150ea6c7455bc"
+  integrity sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==
+
 "@types/lodash@^4.14.191":
   version "4.14.191"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz"
@@ -875,6 +880,21 @@ react-refresh@^0.14.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-router-dom@^6.8.1:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.8.1.tgz#7e136b67d9866f55999e9a8482c7008e3c575ac9"
+  integrity sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==
+  dependencies:
+    "@remix-run/router" "1.3.2"
+    react-router "6.8.1"
+
+[email protected]:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.8.1.tgz#e362caf93958a747c649be1b47cd505cf28ca63e"
+  integrity sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==
+  dependencies:
+    "@remix-run/router" "1.3.2"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"