From 2418f737e78b3fe21d36f7a2e8c7101f24f1c608 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Wed, 15 Feb 2023 20:26:33 -0800 Subject: [PATCH] Return struct for response --- src-tauri/src/main.rs | 26 +++++++++++++++-- src/App.tsx | 56 ++++++++++++++++++++++------------- src/Editor.css | 8 +++++ src/hooks/useCodemirror.ts | 60 ++++++++++++++++++++------------------ src/style.css | 11 ++++++- 5 files changed, 109 insertions(+), 52 deletions(-) diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 1a6163d6..3926bc5d 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -9,16 +9,38 @@ fn greet(name: &str) -> String { format!("Hello, {}! You've been greeted from Rust!", name) } +#[derive(serde::Serialize)] +struct CustomResponse { + status: String, + body: String, + elapsed: u128, + elapsed2: u128, +} + #[tauri::command] -async fn send_request(url: &str) -> Result { +async fn send_request(url: &str) -> Result { + let start = std::time::Instant::now(); + let mut url = url.to_string(); if !url.starts_with("http://") && !url.starts_with("https://") { url = format!("http://{}", url); } let resp = reqwest::get(url).await; + let elapsed = start.elapsed().as_millis(); + match resp { - Ok(v) => Ok(v.text().await.unwrap()), + Ok(v) => { + let status = v.status().to_string(); + let body = v.text().await.unwrap(); + let elapsed2 = start.elapsed().as_millis(); + Ok(CustomResponse { + status, + body, + elapsed, + elapsed2, + }) + } Err(e) => Err(e.to_string()), } } diff --git a/src/App.tsx b/src/App.tsx index 2a8c6754..7557da80 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,38 +1,52 @@ import {useState} from "react"; -import reactLogo from "./assets/react.svg"; import {invoke} from "@tauri-apps/api/tauri"; import "./App.css"; import Editor from "./Editor"; +interface Response { + body: string; + status: string; + elapsed: number; + elapsed2: number; +} + function App() { - const [responseBody, setResponseBody] = useState(""); + const [responseBody, setResponseBody] = useState(null); const [url, setUrl] = useState(""); async function sendRequest() { - const body = await invoke("send_request", {url: url}) as string; + const body = await invoke("send_request", {url: url}) as Response; setResponseBody(body); } return (
-

Welcome to Twosomnia!

- -
-
{ - e.preventDefault(); - sendRequest(); - }} - > - setUrl(e.currentTarget.value)} - placeholder="Enter a URL..." - /> - - - -
+

Welcome, Friend!

+
{ + e.preventDefault(); + sendRequest(); + }} + > + setUrl(e.currentTarget.value)} + placeholder="Enter a URL..." + /> + +
+ {responseBody !== null && ( + <> +
+ {responseBody?.status} +  •  + {responseBody?.elapsed}ms +  •  + {responseBody?.elapsed2}ms +
+ + + )}
); } diff --git a/src/Editor.css b/src/Editor.css index 47897fe8..020a6dfa 100644 --- a/src/Editor.css +++ b/src/Editor.css @@ -23,3 +23,11 @@ .cm-editor .cm-cursor { border-left: 2px solid red; } + +.cm-editor .cm-selectionBackground { + background-color: rgba(180, 180, 180, 0.3); +} + +.cm-editor.cm-focused .cm-selectionBackground { + background-color: rgba(180, 180, 180, 0.3); +} diff --git a/src/hooks/useCodemirror.ts b/src/hooks/useCodemirror.ts index 90aaf138..1ea6c8ac 100644 --- a/src/hooks/useCodemirror.ts +++ b/src/hooks/useCodemirror.ts @@ -3,42 +3,45 @@ import {EditorView, minimalSetup} from "codemirror"; import {javascript} from "@codemirror/lang-javascript"; import {json} from "@codemirror/lang-json"; import {html} from "@codemirror/lang-html"; +import {EditorState} from "@codemirror/state"; import {tags} from "@lezer/highlight" import {HighlightStyle, syntaxHighlighting} from "@codemirror/language" +const myHighlightStyle = HighlightStyle.define([ + { + tag: [ + tags.documentMeta, + tags.blockComment, + tags.lineComment, + tags.docComment, + tags.comment, + ], + color: "#757b93" + }, + {tag: tags.name, color: "#4b92ff"}, + {tag: tags.variableName, color: "#4bff4e"}, + {tag: tags.attributeName, color: "#b06fff"}, + {tag: tags.attributeValue, color: "#ff964b"}, + {tag: tags.keyword, color: "#fc6"}, + {tag: tags.comment, color: "#f5d", fontStyle: "italic"} +]); + +const extensions = [ + minimalSetup, + syntaxHighlighting(myHighlightStyle), + html(), + javascript(), + json(), +]; + export default function useCodeMirror({value}: { value: string }) { const [cm, setCm] = useState(null); const ref = useRef(null); useEffect(() => { if (ref.current === null) return; - const myHighlightStyle = HighlightStyle.define([ - { - tag: [ - tags.documentMeta, - tags.blockComment, - tags.lineComment, - tags.docComment, - tags.comment, - ], - color: "#757b93" - }, - {tag: tags.name, color: "#4b92ff"}, - {tag: tags.variableName, color: "#4bff4e"}, - {tag: tags.attributeName, color: "#b06fff"}, - {tag: tags.attributeValue, color: "#ff964b"}, - {tag: tags.keyword, color: "#fc6"}, - {tag: tags.comment, color: "#f5d", fontStyle: "italic"} - ]) - const view = new EditorView({ - extensions: [ - minimalSetup, - syntaxHighlighting(myHighlightStyle), - html(), - javascript(), - json(), - ], + extensions, parent: ref.current }); @@ -49,8 +52,9 @@ export default function useCodeMirror({value}: { value: string }) { useEffect(() => { if (cm === null) return; - let transaction = cm.state.update({changes: {from: 0, to: cm.state.doc.length, insert: value}}) - cm.dispatch(transaction) + + const newState = EditorState.create({doc: value, extensions}); + cm.setState(newState); }, [cm, value]); return {ref, cm}; diff --git a/src/style.css b/src/style.css index e1403cf3..17f4c542 100644 --- a/src/style.css +++ b/src/style.css @@ -14,6 +14,14 @@ -webkit-text-size-adjust: 100%; } +:not(input):not(textarea), +:not(input):not(textarea)::after, +:not(input):not(textarea)::before { + -webkit-user-select: none; + user-select: none; + cursor: default; +} + div, form, p { width: 100%; } @@ -25,7 +33,8 @@ div, form, p { flex-direction: column; justify-content: center; text-align: center; - width: 700px; + width: 80vw; + max-width: 800px; } .logo {