starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-01-19 01:57:41 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Switch to Preact!!!

Browse Source
This commit is contained in:
Gregory Schier
2023-03-09 00:47:25 -08:00
parent 17c734af11
commit 5fbc5edb15
29 changed files with 349 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
package-lock.json generated
View File

@@ -30,10 +30,8 @@
"codemirror": "^6.0.1",
"framer-motion": "^9.0.4",
"parse-color": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-router-dom": "^6.8.1"
"preact-router": "^4.1.0",
"react-helmet-async": "^1.3.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.5.0",
@@ -46,7 +44,6 @@
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0",
"@vitejs/plugin-react": "^3.0.0",
"autoprefixer": "^10.4.13",
"concurrently": "^7.6.0",
"eslint": "^8.34.0",
@@ -402,36 +399,6 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-react-jsx-self": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.18.6.tgz",
"integrity": "sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==",
"dev": true,
"dependencies": {
"@babel/helper-plugin-utils": "^7.18.6"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-react-jsx-source": {
"version": "7.19.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz",
"integrity": "sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==",
"dev": true,
"dependencies": {
"@babel/helper-plugin-utils": "^7.19.0"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/runtime": {
"version": "7.20.13",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
@@ -1863,14 +1830,6 @@
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@remix-run/router": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz",
"integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -2691,25 +2650,6 @@
"url": "https://opencollective.com/typescript-eslint"
}
},
"node_modules/@vitejs/plugin-react": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz",
"integrity": "sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==",
"dev": true,
"dependencies": {
"@babel/core": "^7.20.12",
"@babel/plugin-transform-react-jsx-self": "^7.18.6",
"@babel/plugin-transform-react-jsx-source": "^7.19.6",
"magic-string": "^0.27.0",
"react-refresh": "^0.14.0"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"peerDependencies": {
"vite": "^4.1.0-beta.0"
}
},
"node_modules/@vitest/expect": {
"version": "0.29.2",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.29.2.tgz",
@@ -5476,18 +5416,6 @@
"yallist": "^3.0.2"
}
},
"node_modules/magic-string": {
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
"dev": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.13"
},
"engines": {
"node": ">=12"
}
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6066,13 +5994,20 @@
"version": "10.13.0",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.13.0.tgz",
"integrity": "sha512-ERdIdUpR6doqdaSIh80hvzebHB7O6JxycOhyzAeLEchqOq/4yueslQbfnPwXaNhAYacFTyCclhwkEbOumT0tHw==",
"dev": true,
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
}
},
"node_modules/preact-router": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/preact-router/-/preact-router-4.1.0.tgz",
"integrity": "sha512-y1w2YvVpKAju9FMV+fAVR1NpH4MW5q07BZrziMZeg6F/rGJ9KvLUZtjOqsy2I8fDYiX36AM1AQTXIIK3jigBhA==",
"peerDependencies": {
"preact": ">=10"
}
},
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6184,6 +6119,7 @@
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@@ -6195,6 +6131,7 @@
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
@@ -6229,15 +6166,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-refresh": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
"integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-remove-scroll": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -6293,36 +6221,6 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
"integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
},
"node_modules/react-router": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
"integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==",
"dependencies": {
"@remix-run/router": "1.3.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz",
"integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==",
"dependencies": {
"@remix-run/router": "1.3.2",
"react-router": "6.8.1"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-style-singleton": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -6537,6 +6435,7 @@
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
}
@@ -7867,24 +7766,6 @@
"@babel/plugin-transform-react-jsx": "^7.18.6"
}
},
"@babel/plugin-transform-react-jsx-self": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.18.6.tgz",
"integrity": "sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.18.6"
}
},
"@babel/plugin-transform-react-jsx-source": {
"version": "7.19.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz",
"integrity": "sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.19.0"
}
},
"@babel/runtime": {
"version": "7.20.13",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
@@ -8947,11 +8828,6 @@
"@babel/runtime": "^7.13.10"
}
},
"@remix-run/router": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz",
"integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA=="
},
"@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -9429,19 +9305,6 @@
"eslint-visitor-keys": "^3.3.0"
}
},
"@vitejs/plugin-react": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz",
"integrity": "sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==",
"dev": true,
"requires": {
"@babel/core": "^7.20.12",
"@babel/plugin-transform-react-jsx-self": "^7.18.6",
"@babel/plugin-transform-react-jsx-source": "^7.19.6",
"magic-string": "^0.27.0",
"react-refresh": "^0.14.0"
}
},
"@vitest/expect": {
"version": "0.29.2",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.29.2.tgz",
@@ -11491,15 +11354,6 @@
"yallist": "^3.0.2"
}
},
"magic-string": {
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
"dev": true,
"requires": {
"@jridgewell/sourcemap-codec": "^1.4.13"
}
},
"merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -11897,9 +11751,14 @@
"version": "10.13.0",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.13.0.tgz",
"integrity": "sha512-ERdIdUpR6doqdaSIh80hvzebHB7O6JxycOhyzAeLEchqOq/4yueslQbfnPwXaNhAYacFTyCclhwkEbOumT0tHw==",
"dev": true,
"peer": true
},
"preact-router": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/preact-router/-/preact-router-4.1.0.tgz",
"integrity": "sha512-y1w2YvVpKAju9FMV+fAVR1NpH4MW5q07BZrziMZeg6F/rGJ9KvLUZtjOqsy2I8fDYiX36AM1AQTXIIK3jigBhA==",
"requires": {}
},
"prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -11969,6 +11828,7 @@
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"peer": true,
"requires": {
"loose-envify": "^1.1.0"
}
@@ -11977,6 +11837,7 @@
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"peer": true,
"requires": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
@@ -12004,12 +11865,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-refresh": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
"integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
"dev": true
},
"react-remove-scroll": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -12045,23 +11900,6 @@
}
}
},
"react-router": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz",
"integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==",
"requires": {
"@remix-run/router": "1.3.2"
}
},
"react-router-dom": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz",
"integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==",
"requires": {
"@remix-run/router": "1.3.2",
"react-router": "6.8.1"
}
},
"react-style-singleton": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -12207,6 +12045,7 @@
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"peer": true,
"requires": {
"loose-envify": "^1.1.0"
}

7
package.json
View File

@@ -37,10 +37,8 @@
"codemirror": "^6.0.1",
"framer-motion": "^9.0.4",
"parse-color": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-router-dom": "^6.8.1"
"preact-router": "^4.1.0",
"react-helmet-async": "^1.3.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.5.0",
@@ -53,7 +51,6 @@
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0",
"@vitejs/plugin-react": "^3.0.0",
"autoprefixer": "^10.4.13",
"concurrently": "^7.6.0",
"eslint": "^8.34.0",

BIN
src-tauri/icons/icon.icns
View File

Binary file not shown.

16
src-web/App.tsx
View File

@@ -1,6 +1,5 @@
import classnames from 'classnames';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { RequestPane } from './components/RequestPane';
import { ResponsePane } from './components/ResponsePane';
import { Sidebar } from './components/Sidebar';
@@ -13,11 +12,10 @@ type Params = {
requestId?: string;
};
function App() {
const p = useParams<Params>();
const workspaceId = p.workspaceId ?? '';
export function App({ matches }: { path: string; matches?: Params }) {
const workspaceId = matches?.workspaceId ?? '';
const { data: requests } = useRequests(workspaceId);
const request = requests?.find((r) => r.id === p.requestId);
const request = requests?.find((r) => r.id === matches?.requestId);
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
useEffect(() => {
@@ -27,7 +25,11 @@ function App() {
return (
<div className="grid grid-cols-[auto_1fr] h-full text-gray-900 overflow-hidden rounded-[11px]">
<Sidebar requests={requests ?? []} workspaceId={workspaceId} activeRequestId={p.requestId} />
<Sidebar
requests={requests ?? []}
workspaceId={workspaceId}
activeRequestId={matches?.requestId}
/>
{request && (
<div className="h-full">
<div className="grid grid-rows-[auto_1fr] h-full overflow-hidden">
@@ -57,5 +59,3 @@ function App() {
</div>
);
}
export default App;

13
src-web/components/Button.tsx
View File

@@ -1,6 +1,7 @@
import classnames from 'classnames';
import type { ButtonHTMLAttributes, ForwardedRef } from 'react';
import { forwardRef } from 'react';
import type { ComponentChildren } from 'preact';
import type { ForwardedRef } from 'preact/compat';
import { forwardRef } from 'preact/compat';
import { Icon } from './Icon';
const colorStyles = {
@@ -13,11 +14,17 @@ const colorStyles = {
danger: 'bg-red-400 text-white hover:bg-red-500',
};
export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
export type ButtonProps = {
color?: keyof typeof colorStyles;
size?: 'sm' | 'md';
justify?: 'start' | 'center';
type?: 'button' | 'submit';
onClick?: (event: MouseEvent) => void;
forDropdown?: boolean;
className?: string;
children?: ComponentChildren;
disabled?: boolean;
title?: string;
};
export const Button = forwardRef(function Button(

20
src-web/components/ButtonLink.tsx
View File

@@ -1,22 +1,14 @@
import classnames from 'classnames';
import type { LinkProps } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { Link } from 'preact-router';
import type { ButtonProps } from './Button';
import { Button } from './Button';
type Props = ButtonProps & LinkProps;
type Props = ButtonProps & {
href: string;
};
export function ButtonLink({
reloadDocument,
replace,
state,
preventScrollReset,
relative,
to,
className,
...buttonProps
}: Props) {
const linkProps = { reloadDocument, replace, state, preventScrollReset, relative, to };
export function ButtonLink({ href, className, ...buttonProps }: Props) {
const linkProps = { href };
return (
<Link {...linkProps}>
<Button className={classnames(className, 'w-full')} {...buttonProps} />

3
src-web/components/Dialog.tsx
View File

@@ -1,12 +1,13 @@
import * as D from '@radix-ui/react-dialog';
import classnames from 'classnames';
import { motion } from 'framer-motion';
import type { ComponentChildren } from 'preact';
import React from 'react';
import { IconButton } from './IconButton';
import { HStack, VStack } from './Stacks';
interface Props {
children: React.ReactNode;
children: ComponentChildren;
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;

36
src-web/components/Dropdown.tsx
View File

@@ -1,13 +1,13 @@
import * as D from '@radix-ui/react-dropdown-menu';
import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
import { CheckIcon } from '@radix-ui/react-icons';
import classnames from 'classnames';
import { motion } from 'framer-motion';
import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
import type { ComponentChildren } from 'preact';
import type { ForwardedRef } from 'preact/compat';
import { forwardRef, useImperativeHandle, useLayoutEffect, useState } from 'react';
interface DropdownMenuRadioProps {
children: ReactNode;
children: ComponentChildren;
onValueChange: ((v: { label: string; value: string }) => void) | null;
value: string;
label?: string;
@@ -37,13 +37,13 @@ export function DropdownMenuRadio({
<DropdownMenuPortal>
<DropdownMenuContent>
{label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
<DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
<D.DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
{items.map((item) => (
<DropdownMenuRadioItem key={item.value} value={item.value}>
{item.label}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</D.DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenuPortal>
</D.Root>
@@ -51,13 +51,13 @@ export function DropdownMenuRadio({
}
export interface DropdownProps {
children: ReactNode;
children: ComponentChildren;
items: (
| {
label: string;
onSelect?: () => void;
disabled?: boolean;
leftSlot?: ReactNode;
leftSlot?: ComponentChildren;
}
| '-----'
)[];
@@ -92,12 +92,14 @@ export function Dropdown({ children, items }: DropdownProps) {
}
interface DropdownMenuPortalProps {
children: ReactNode;
children: ComponentChildren;
}
function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
const container = document.querySelector<Element>('#radix-portal');
if (container === null) return null;
return (
<D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
<D.Portal>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
{children}
</motion.div>
@@ -262,7 +264,12 @@ function DropdownMenuSeparator({ className, ...props }: D.DropdownMenuSeparatorP
);
}
function DropdownMenuTrigger({ children, className, ...props }: D.DropdownMenuTriggerProps) {
type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
children: ComponentChildren;
className?: string;
};
function DropdownMenuTrigger({ children, className, ...props }: DropdownMenuTriggerProps) {
return (
<D.Trigger asChild className={classnames(className)} {...props}>
{children}
@@ -270,11 +277,12 @@ function DropdownMenuTrigger({ children, className, ...props }: D.DropdownMenuTr
);
}
interface ItemInnerProps extends HTMLAttributes<HTMLDivElement> {
leftSlot?: ReactNode;
rightSlot?: ReactNode;
children: ReactNode;
interface ItemInnerProps {
leftSlot?: ComponentChildren;
rightSlot?: ComponentChildren;
children: ComponentChildren;
noHover?: boolean;
className?: string;
}
const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(

203
src-web/components/Editor/Editor.tsx
View File

@@ -1,4 +1,199 @@
import type { EditorProps } from './_Editor';
const { default: Editor } = await import('./_Editor');
export { Editor };
export type { EditorProps };
import { defaultKeymap } from '@codemirror/commands';
import { Compartment, EditorState } from '@codemirror/state';
import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
import classnames from 'classnames';
import { EditorView } from 'codemirror';
import { useEffect, useMemo, useRef, useState } from 'react';
import './Editor.css';
import { singleLineExt } from './singleLine';
import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions';
// const { baseExtensions, getLanguageExtension, multiLineExtensions } = await import('./extensions');
export interface EditorProps {
id?: string;
readOnly?: boolean;
className?: string;
heightMode?: 'auto' | 'full';
contentType?: string;
autoFocus?: boolean;
valueKey?: string | number;
defaultValue?: string;
placeholder?: string;
tooltipContainer?: HTMLElement;
useTemplating?: boolean;
onChange?: (value: string) => void;
singleLine?: boolean;
}
export function Editor({
readOnly,
heightMode,
contentType,
autoFocus,
placeholder,
valueKey,
useTemplating,
defaultValue,
onChange,
className,
singleLine,
...props
}: EditorProps) {
const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
const ref = useRef<HTMLDivElement>(null);
const extensions = useMemo(
() =>
getExtensions({
container: ref.current,
readOnly,
placeholder,
singleLine,
onChange,
contentType,
useTemplating,
}),
[contentType, ref.current],
);
// Create codemirror instance when ref initializes
useEffect(() => {
const parent = ref.current;
if (parent === null) return;
// console.log('INIT EDITOR');
let view: EditorView | null = null;
try {
const langHolder = new Compartment();
const langExt = getLanguageExtension({ contentType, useTemplating });
const state = EditorState.create({
doc: `${defaultValue ?? ''}`,
extensions: [...extensions, langHolder.of(langExt)],
});
view = new EditorView({ state, parent });
syncGutterBg({ parent, className });
setCm({ view, langHolder });
if (autoFocus && view) view.focus();
} catch (e) {
console.log('Failed to initialize Codemirror', e);
}
return () => view?.destroy();
}, [ref.current, valueKey]);
// Update value when valueKey changes
// TODO: This would be more efficient but the onChange handler gets fired on update
// useEffect(() => {
// if (cm === null) return;
// console.log('NEW DOC', valueKey, defaultValue);
// cm.view.dispatch({
// changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
// });
// }, [valueKey]);
// Update language extension when contentType changes
useEffect(() => {
if (cm === null) return;
// console.log('UPDATE LANG');
const ext = getLanguageExtension({ contentType, useTemplating });
cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
}, [contentType]);
return (
<div
ref={ref}
className={classnames(
className,
'cm-wrapper text-base bg-gray-50',
heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
singleLine ? 'cm-singleline' : 'cm-multiline',
readOnly && 'cm-readonly',
)}
{...props}
/>
);
}
function getExtensions({
container,
readOnly,
singleLine,
placeholder,
onChange,
contentType,
useTemplating,
}: Pick<
EditorProps,
'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
> & { container: HTMLDivElement | null }) {
const ext = getLanguageExtension({ contentType, useTemplating });
// TODO: Ensure tooltips render inside the dialog if we are in one.
const parent =
container?.closest<HTMLDivElement>('[role="dialog"]') ??
document.querySelector<HTMLDivElement>('#cm-portal') ??
undefined;
return [
...baseExtensions,
tooltips({ parent }),
keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
...(singleLine ? [singleLineExt()] : []),
...(!singleLine ? [multiLineExtensions] : []),
...(ext ? [ext] : []),
...(readOnly ? [EditorState.readOnly.of(true)] : []),
...(placeholder ? [placeholderExt(placeholder)] : []),
...(singleLine
? [
EditorView.domEventHandlers({
focus: (e, view) => {
// select all text on focus, like a regular input does
view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
},
keydown: (e) => {
// Submit nearest form on enter if there is one
if (e.key === 'Enter') {
const el = e.currentTarget as HTMLElement;
const form = el.closest('form');
form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
}
},
}),
]
: []),
// Clear selection on blur
EditorView.domEventHandlers({
blur: (e, view) => {
setTimeout(() => {
view.dispatch({ selection: { anchor: 0, head: 0 } });
}, 100);
},
}),
// Handle onChange
EditorView.updateListener.of((update) => {
if (typeof onChange === 'function' && update.docChanged) {
onChange(update.state.doc.toString());
}
}),
];
}
const syncGutterBg = ({
parent,
className = '',
}: {
parent: HTMLDivElement;
className?: string;
}) => {
const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
const classList = className?.split(/\s+/) ?? [];
const bgClasses = classList
.filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
.map((c) => c.replace(/^bg-/, '!bg-')) // !important
.map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
if (gutterEl) {
gutterEl?.classList.add(...bgClasses);
}
};

196
src-web/components/Editor/_Editor.tsx
View File

@@ -1,196 +0,0 @@
import { defaultKeymap } from '@codemirror/commands';
import { Compartment, EditorState } from '@codemirror/state';
import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
import classnames from 'classnames';
import { EditorView } from 'codemirror';
import type { HTMLAttributes } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
const { baseExtensions, getLanguageExtension, multiLineExtensions } = await import('./extensions');
import { singleLineExt } from './singleLine';
import './Editor.css';
export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
readOnly?: boolean;
heightMode?: 'auto' | 'full';
contentType?: string;
autoFocus?: boolean;
valueKey?: string | number;
defaultValue?: string;
placeholder?: string;
tooltipContainer?: HTMLElement;
useTemplating?: boolean;
onChange?: (value: string) => void;
singleLine?: boolean;
}
export default function Editor({
readOnly,
heightMode,
contentType,
autoFocus,
placeholder,
valueKey,
useTemplating,
defaultValue,
onChange,
className,
singleLine,
...props
}: EditorProps) {
const [cm, setCm] = useState<{ view: EditorView; langHolder: Compartment } | null>(null);
const ref = useRef<HTMLDivElement>(null);
const extensions = useMemo(
() =>
getExtensions({
container: ref.current,
readOnly,
placeholder,
singleLine,
onChange,
contentType,
useTemplating,
}),
[contentType, ref.current],
);
// Create codemirror instance when ref initializes
useEffect(() => {
const parent = ref.current;
if (parent === null) return;
// console.log('INIT EDITOR');
let view: EditorView | null = null;
try {
const langHolder = new Compartment();
const langExt = getLanguageExtension({ contentType, useTemplating });
const state = EditorState.create({
doc: `${defaultValue ?? ''}`,
extensions: [...extensions, langHolder.of(langExt)],
});
view = new EditorView({ state, parent });
syncGutterBg({ parent, className });
setCm({ view, langHolder });
if (autoFocus && view) view.focus();
} catch (e) {
console.log('Failed to initialize Codemirror', e);
}
return () => view?.destroy();
}, [ref.current, valueKey]);
// Update value when valueKey changes
// TODO: This would be more efficient but the onChange handler gets fired on update
// useEffect(() => {
// if (cm === null) return;
// console.log('NEW DOC', valueKey, defaultValue);
// cm.view.dispatch({
// changes: { from: 0, to: cm.view.state.doc.length, insert: `${defaultValue ?? ''}` },
// });
// }, [valueKey]);
// Update language extension when contentType changes
useEffect(() => {
if (cm === null) return;
// console.log('UPDATE LANG');
const ext = getLanguageExtension({ contentType, useTemplating });
cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
}, [contentType]);
return (
<div
ref={ref}
className={classnames(
className,
'cm-wrapper text-base bg-gray-50',
heightMode === 'auto' ? 'cm-auto-height' : 'cm-full-height',
singleLine ? 'cm-singleline' : 'cm-multiline',
readOnly && 'cm-readonly',
)}
{...props}
/>
);
}
function getExtensions({
container,
readOnly,
singleLine,
placeholder,
onChange,
contentType,
useTemplating,
}: Pick<
EditorProps,
'singleLine' | 'onChange' | 'contentType' | 'useTemplating' | 'placeholder' | 'readOnly'
> & { container: HTMLDivElement | null }) {
const ext = getLanguageExtension({ contentType, useTemplating });
// TODO: Ensure tooltips render inside the dialog if we are in one.
const parent =
container?.closest<HTMLDivElement>('[role="dialog"]') ??
document.querySelector<HTMLDivElement>('#cm-portal') ??
undefined;
return [
...baseExtensions,
tooltips({ parent }),
keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
...(singleLine ? [singleLineExt()] : []),
...(!singleLine ? [multiLineExtensions] : []),
...(ext ? [ext] : []),
...(readOnly ? [EditorState.readOnly.of(true)] : []),
...(placeholder ? [placeholderExt(placeholder)] : []),
...(singleLine
? [
EditorView.domEventHandlers({
focus: (e, view) => {
// select all text on focus, like a regular input does
view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
},
keydown: (e) => {
// Submit nearest form on enter if there is one
if (e.key === 'Enter') {
const el = e.currentTarget as HTMLElement;
const form = el.closest('form');
form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
}
},
}),
]
: []),
// Clear selection on blur
EditorView.domEventHandlers({
blur: (e, view) => {
setTimeout(() => {
view.dispatch({ selection: { anchor: 0, head: 0 } });
}, 100);
},
}),
// Handle onChange
EditorView.updateListener.of((update) => {
if (typeof onChange === 'function' && update.docChanged) {
onChange(update.state.doc.toString());
}
}),
];
}
const syncGutterBg = ({
parent,
className = '',
}: {
parent: HTMLDivElement;
className?: string;
}) => {
const gutterEl = parent.querySelector<HTMLDivElement>('.cm-gutters');
const classList = className?.split(/\s+/) ?? [];
const bgClasses = classList
.filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
.map((c) => c.replace(/^bg-/, '!bg-')) // !important
.map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
if (gutterEl) {
gutterEl?.classList.add(...bgClasses);
}
};

3
src-web/components/HeaderEditor.tsx
View File

@@ -1,4 +1,3 @@
import type { FormEvent } from 'react';
import React, { useCallback, useState } from 'react';
import type { HttpHeader } from '../lib/models';
import { IconButton } from './IconButton';
@@ -10,7 +9,7 @@ export function HeaderEditor() {
const [newHeaderName, setNewHeaderName] = useState<string>('');
const [newHeaderValue, setNewHeaderValue] = useState<string>('');
const handleSubmit = useCallback(
(e?: FormEvent) => {
(e?: Event) => {
e?.preventDefault();
setHeaders([...headers, { name: newHeaderName, value: newHeaderValue }]);
setNewHeaderName('');

7
src-web/components/Heading.tsx
View File

@@ -1,7 +1,10 @@
import classnames from 'classnames';
import type { HTMLAttributes } from 'react';
import type { ComponentChildren } from 'preact';
type Props = HTMLAttributes<HTMLHeadingElement>;
type Props = {
className?: string;
children?: ComponentChildren;
};
export function Heading({ className, children, ...props }: Props) {
return (

2
src-web/components/HotKey.tsx
View File

@@ -1,5 +1,5 @@
import { HTMLAttributes } from 'react';
import classnames from 'classnames';
import type { HTMLAttributes } from 'react';
export function HotKey({ children }: HTMLAttributes<HTMLSpanElement>) {
return (

2
src-web/components/IconButton.tsx
View File

@@ -1,5 +1,5 @@
import classnames from 'classnames';
import { forwardRef } from 'react';
import { forwardRef } from 'preact/compat';
import type { ButtonProps } from './Button';
import { Button } from './Button';
import type { IconProps } from './Icon';

21
src-web/components/Input.tsx
View File

@@ -1,14 +1,10 @@
import classnames from 'classnames';
import type { InputHTMLAttributes, ReactNode } from 'react';
import type { ComponentChildren } from 'preact';
import type { EditorProps } from './Editor/Editor';
import { Editor } from './Editor/Editor';
import { HStack, VStack } from './Stacks';
interface Props
extends Omit<
InputHTMLAttributes<HTMLInputElement>,
'size' | 'onChange' | 'onSubmit' | 'defaultValue'
> {
interface Props {
name: string;
label: string;
hideLabel?: boolean;
@@ -17,9 +13,12 @@ interface Props
onChange?: (value: string) => void;
useEditor?: Pick<EditorProps, 'contentType' | 'useTemplating' | 'valueKey'>;
defaultValue?: string;
leftSlot?: ReactNode;
rightSlot?: ReactNode;
leftSlot?: ComponentChildren;
rightSlot?: ComponentChildren;
size?: 'sm' | 'md';
className?: string;
placeholder?: string;
autoFocus?: boolean;
}
export function Input({
@@ -42,8 +41,8 @@ export function Input({
const inputClassName = classnames(
className,
'!bg-transparent pl-3 pr-2 min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
leftSlot && '!pl-0.5',
rightSlot && '!pr-0.5',
!!leftSlot && '!pl-0.5',
!!rightSlot && '!pr-0.5',
);
return (
@@ -83,7 +82,7 @@ export function Input({
) : (
<input
id={id}
onChange={(e) => onChange?.(e.target.value)}
onChange={(e) => onChange?.(e.currentTarget.value)}
placeholder={placeholder}
defaultValue={defaultValue}
className={inputClassName}

10
src-web/components/Layout.tsx
View File

@@ -1,10 +0,0 @@
import {Outlet} from 'react-router-dom';
export function Layout() {
return (
<div className="w-full h-full">
<Outlet />
</div>
);
}

15
src-web/components/LayoutPane.tsx
View File

@@ -1,15 +0,0 @@
import type { ReactNode } from 'react';
export interface LayoutPaneProps {
children?: ReactNode;
className?: string;
}
export function LayoutPane({ className, children }: LayoutPaneProps) {
return <div className={className}>{children}</div>;
// return (
// <div className={classnames(className, 'w-full h-full p-2')} data-tauri-drag-region>
// <div className={classnames('w-full h-full bg-gray-50/50 rounded-lg')}>{children}</div>
// </div>
// );
}

3
src-web/components/RouterError.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react';
import { useRouteError } from 'react-router-dom';
import { ButtonLink } from './ButtonLink';
import { Heading } from './Heading';
@@ -15,7 +14,7 @@ export function RouterError() {
<pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
{message}
</pre>
<ButtonLink to="/" color="primary">
<ButtonLink href="/" color="primary">
Go Home
</ButtonLink>
</VStack>

4
src-web/components/ScrollArea.tsx
View File

@@ -1,9 +1,9 @@
import * as S from '@radix-ui/react-scroll-area';
import classnames from 'classnames';
import type { ReactNode } from 'react';
import type { ComponentChildren } from 'preact';
interface Props {
children: ReactNode;
children: ComponentChildren;
className?: string;
}

12
src-web/components/Sidebar.tsx
View File

@@ -1,5 +1,4 @@
import classnames from 'classnames';
import type { HTMLAttributes } from 'react';
import React, { useState } from 'react';
import { useRequestCreate } from '../hooks/useRequest';
import useTheme from '../hooks/useTheme';
@@ -12,13 +11,14 @@ import { IconButton } from './IconButton';
import { HStack, VStack } from './Stacks';
import { WindowDragRegion } from './WindowDragRegion';
interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
interface Props {
workspaceId: string;
requests: HttpRequest[];
activeRequestId?: string;
className?: string;
}
export function Sidebar({ className, activeRequestId, workspaceId, requests, ...props }: Props) {
export function Sidebar({ className, activeRequestId, workspaceId, requests }: Props) {
const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
const { appearance, toggleAppearance } = useTheme();
const [open, setOpen] = useState<boolean>(false);
@@ -28,7 +28,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
className,
'min-w-[10rem] bg-gray-100 h-full border-r border-gray-200 relative',
)}
{...props}
>
<HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
<Dialog wide open={open} onOpenChange={setOpen} title="Edit Headers">
@@ -56,7 +55,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
alignItems="center"
justifyContent="end"
>
<IconButton icon="colorWheel" onClick={() => setShowPicker((p) => !p)} />
<IconButton icon={appearance === 'dark' ? 'moon' : 'sun'} onClick={toggleAppearance} />
<IconButton icon="rows" onClick={() => setOpen(true)} />
</HStack>
@@ -70,13 +68,13 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
<li key={request.id}>
<ButtonLink
color="custom"
to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
href={`/workspaces/${request.workspaceId}/requests/${request.id}`}
disabled={active}
className={classnames(
'w-full',
active
? 'bg-gray-200/70 text-gray-900'
: 'text-gray-600 hover:text-gray-800 active:bg-gray-200/50',
: 'text-gray-600 hover:text-gray-800 active:bg-gray-200/30',
)}
size="sm"
justify="start"

22
src-web/components/Stacks.tsx
View File

@@ -1,6 +1,6 @@
import classnames from 'classnames';
import type { ReactNode } from 'react';
import React, { Children, Fragment } from 'react';
import type { ComponentChildren, ComponentType } from 'preact';
import { Children, Fragment } from 'react';
const spaceClassesX = {
0: 'pr-0',
@@ -24,7 +24,7 @@ const spaceClassesY = {
interface HStackProps extends BaseStackProps {
space?: keyof typeof spaceClassesX;
children?: ReactNode;
children?: ComponentChildren;
}
export function HStack({ className, space, children, ...props }: HStackProps) {
@@ -52,7 +52,7 @@ export function HStack({ className, space, children, ...props }: HStackProps) {
export interface VStackProps extends BaseStackProps {
space?: keyof typeof spaceClassesY;
children: ReactNode;
children: ComponentChildren;
}
export function VStack({ className, space, children, ...props }: VStackProps) {
@@ -79,21 +79,15 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
}
interface BaseStackProps {
as?: React.ElementType;
as?: ComponentType | 'ul';
alignItems?: 'start' | 'center';
justifyContent?: 'start' | 'center' | 'end';
className?: string;
children?: ReactNode;
children?: ComponentChildren;
}
function BaseStack({
className,
alignItems,
justifyContent,
children,
as = 'div',
}: BaseStackProps) {
const Component = as;
function BaseStack({ className, alignItems, justifyContent, children, as }: BaseStackProps) {
const Component = as ?? 'div';
return (
<Component
className={classnames(

4
src-web/components/StatusColor.tsx
View File

@@ -1,9 +1,9 @@
import classnames from 'classnames';
import type { ReactNode } from 'react';
import type { ComponentChildren } from 'preact';
interface Props {
statusCode: number;
children: ReactNode;
children: ComponentChildren;
}
export function StatusColor({ statusCode, children }: Props) {

14
src-web/components/UrlBar.tsx
View File

@@ -1,4 +1,3 @@
import type { FormEvent } from 'react';
import { Button } from './Button';
import { DropdownMenuRadio } from './Dropdown';
import { IconButton } from './IconButton';
@@ -14,13 +13,14 @@ interface Props {
}
export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChange, url }: Props) {
const handleSendRequest = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
sendRequest();
};
return (
<form onSubmit={handleSendRequest} className="w-full flex items-center">
<form
onSubmit={async (e) => {
e.preventDefault();
sendRequest();
}}
className="w-full flex items-center"
>
<Input
hideLabel
useEditor={{ useTemplating: true, contentType: 'url' }}

7
src-web/components/WindowDragRegion.tsx
View File

@@ -1,7 +1,10 @@
import classnames from 'classnames';
import type { HTMLAttributes } from 'react';
import type { ComponentChildren } from 'preact';
type Props = HTMLAttributes<HTMLDivElement>;
interface Props {
className?: string;
children?: ComponentChildren;
}
export function WindowDragRegion({ className, ...props }: Props) {
return (

5
src-web/hooks/useRequest.ts
View File

@@ -1,6 +1,6 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api';
import { useNavigate } from 'react-router-dom';
import { route } from 'preact-router';
import type { HttpRequest } from '../lib/models';
import { convertDates } from '../lib/models';
import { responsesQueryKey } from './useResponses';
@@ -44,13 +44,12 @@ export function useRequestCreate({
workspaceId: string;
navigateAfter: boolean;
}) {
const navigate = useNavigate();
return useMutation<string, unknown, Pick<HttpRequest, 'name'>>({
mutationFn: async (patch) => invoke('create_request', { ...patch, workspaceId }),
onSuccess: async (requestId) => {
console.log('DONE', { requestId, navigateAfter });
if (navigateAfter) {
navigate(`/workspaces/${workspaceId}/requests/${requestId}`);
route(`/workspaces/${workspaceId}/requests/${requestId}`);
}
},
});

54
src-web/main.tsx
View File

@@ -1,13 +1,10 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { listen } from '@tauri-apps/api/event';
import { MotionConfig } from 'framer-motion';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { render } from 'preact';
import { Router } from 'preact-router';
import { HelmetProvider } from 'react-helmet-async';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App';
import { Layout } from './components/Layout';
import { RouterError } from './components/RouterError';
import { App } from './App';
import { requestsQueryKey } from './hooks/useRequest';
import { responsesQueryKey } from './hooks/useResponses';
import { DEFAULT_FONT_SIZE } from './lib/constants';
@@ -90,36 +87,17 @@ await listen('zoom', ({ payload: zoomDelta }: { payload: number }) => {
document.documentElement.style.fontSize = `${newFontSize}px`;
});
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
errorElement: <RouterError />,
children: [
{
path: '/',
element: <Workspaces />,
},
{
path: '/workspaces/:workspaceId',
element: <App />,
},
{
path: '/workspaces/:workspaceId/requests/:requestId',
element: <App />,
},
],
},
]);
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<MotionConfig transition={{ duration: 0.1 }}>
<HelmetProvider>
<RouterProvider router={router} />
</HelmetProvider>
</MotionConfig>
</QueryClientProvider>
</React.StrictMode>,
render(
<QueryClientProvider client={queryClient}>
<MotionConfig transition={{ duration: 0.1 }}>
<HelmetProvider>
<Router>
<Workspaces path="/" />
<App path="/workspaces/:workspaceId" />
<App path="/workspaces/:workspaceId/requests/:requestId" />
</Router>
</HelmetProvider>
</MotionConfig>
</QueryClientProvider>,
document.getElementById('root') as HTMLElement,
);

6
src-web/pages/Workspaces.tsx
View File

@@ -1,15 +1,15 @@
import { ButtonLink } from '../components/ButtonLink';
import { Heading } from '../components/Heading';
import { VStack } from '../components/Stacks';
import { useWorkspaces } from '../hooks/useWorkspaces';
import { ButtonLink } from '../components/ButtonLink';
export function Workspaces() {
export function Workspaces(props: { path: string }) {
const workspaces = useWorkspaces();
return (
<VStack as="ul" className="p-12">
<Heading>Workspaces</Heading>
{workspaces.data?.map((w) => (
<ButtonLink key={w.id} color="gray" to={`/workspaces/${w.id}`}>
<ButtonLink key={w.id} color="gray" href={`/workspaces/${w.id}`}>
{w.name}
</ButtonLink>
))}

7
tsconfig.json
View File

@@ -15,7 +15,12 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"jsxImportSource": "preact",
"paths": {
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"]
},
},
"include": [
"src-web"

5
vite.config.ts
View File

@@ -1,11 +1,11 @@
import preact from '@preact/preset-vite';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { ViteRsw } from 'vite-plugin-rsw';
import topLevelAwait from 'vite-plugin-top-level-await';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), ViteRsw(), topLevelAwait()],
plugins: [preact({ devToolsEnabled: true }), ViteRsw(), topLevelAwait()],
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
// prevent vite from obscuring rust errors
@@ -15,6 +15,7 @@ export default defineConfig({
port: 1420,
strictPort: true,
},
// to make use of `TAURI_DEBUG` and other env variables
// https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
envPrefix: ['VITE_', 'TAURI_'],