starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-15 13:29:41 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Started on general window layout

Browse Source
This commit is contained in:
Gregory Schier
2023-02-19 23:11:59 -08:00
parent 0a0839cc3c
commit b95429dbeb
17 changed files with 337 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src-web/App.tsx
View File

@@ -1,12 +1,12 @@
import { FormEvent, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { invoke } from '@tauri-apps/api/tauri';
import Editor from './components/Editor/Editor';
import { Input } from './components/Input';
import { Stacks } from './components/Stacks';
import { HStack, VStack } from './components/Stacks';
import { Button } from './components/Button';
import { Grid } from './components/Grid';
import { DropdownMenuRadio } from './components/Dropdown';
import { WindowDragRegion } from './components/WindowDragRegion';
import { IconButton } from './components/IconButton';
interface Response {
url: string;
@@ -19,6 +19,7 @@ interface Response {
}
function App() {
const [error, setError] = useState<string | null>(null);
const [responseBody, setResponseBody] = useState<Response | null>(null);
const [url, setUrl] = useState('https://go-server.schier.dev/debug');
const [loading, setLoading] = useState(false);
@@ -27,74 +28,107 @@ function App() {
async function sendRequest(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
setLoading(true);
const resp = (await invoke('send_request', { method, url })) as Response;
console.log('RESP', resp);
if (resp.body.includes('<head>')) {
resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
setError(null);
try {
const resp = (await invoke('send_request', { method, url })) as Response;
if (resp.body.includes('<head>')) {
resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
}
setLoading(false);
setResponseBody(resp);
} catch (err) {
setLoading(false);
setError(`${err}`);
}
setLoading(false);
setResponseBody(resp);
}
const contentType = responseBody?.headers['content-type']?.split(';')[0] ?? 'text/plain';
return (
<>
<Helmet>
<body className="bg-background" />
</Helmet>
<div className="w-full h-7 bg-gray-50" data-tauri-drag-region="" />
<div className="p-12 h-full w-full overflow-auto">
<Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}>
<DropdownMenuRadio
onValueChange={setMethod}
value={method}
items={[
{ label: 'GET', value: 'get' },
{ label: 'PUT', value: 'put' },
{ label: 'POST', value: 'post' },
]}
>
<Button className="mr-1" disabled={loading} color="secondary">
{method.toUpperCase()}
</Button>
</DropdownMenuRadio>
<Input
hideLabel
name="url"
label="Enter URL"
className="mr-1 w-[20rem]"
onChange={(e) => setUrl(e.currentTarget.value)}
value={url}
placeholder="Enter a URL..."
/>
<Button className="mr-1" type="submit" disabled={loading}>
{loading ? 'Sending...' : 'Send'}
</Button>
</Stacks>
{responseBody !== null && (
<>
<div className="pt-6">
{responseBody?.method.toUpperCase()}
&nbsp;&bull;&nbsp;
{responseBody?.status}
&nbsp;&bull;&nbsp;
{responseBody?.elapsed}ms &nbsp;&bull;&nbsp;
{responseBody?.elapsed2}ms
</div>
<Grid cols={2} rows={2} gap={1}>
<Editor value={responseBody?.body} contentType={contentType} />
<div className="iframe-wrapper">
<iframe
title="Response preview"
srcDoc={responseBody.body}
sandbox="allow-scripts allow-same-origin"
className="h-full w-full rounded-lg"
<div className="grid grid-cols-[auto_1fr] h-full">
<nav className="w-52 bg-gray-50 h-full border-r border-gray-500/10">
<HStack as={WindowDragRegion} className="pl-24 px-1" items="center" justify="end">
<IconButton icon="archive" size="sm" />
<DropdownMenuRadio
onValueChange={null}
value={'get'}
items={[
{ label: 'This is a cool one', value: 'get' },
{ label: 'But this one is better', value: 'put' },
{ label: 'This one is just alright', value: 'post' },
]}
>
<IconButton icon="camera" size="sm" />
</DropdownMenuRadio>
</HStack>
</nav>
<div className="h-full w-full overflow-auto">
<HStack as={WindowDragRegion} items="center" className="pl-4 pr-1">
<h5>Hello, Friend!</h5>
<IconButton icon="gear" className="ml-auto" size="sm" />
</HStack>
<VStack className="p-4 max-w-[40rem] mx-auto" space={3}>
<HStack as="form" className="items-end" onSubmit={sendRequest} space={2}>
<DropdownMenuRadio
onValueChange={setMethod}
value={method}
items={[
{ label: 'GET', value: 'get' },
{ label: 'PUT', value: 'put' },
{ label: 'POST', value: 'post' },
]}
>
<Button disabled={loading} color="secondary" forDropdown>
{method.toUpperCase()}
</Button>
</DropdownMenuRadio>
<HStack>
<Input
hideLabel
name="url"
label="Enter URL"
className="rounded-r-none font-mono"
onChange={(e) => setUrl(e.currentTarget.value)}
value={url}
placeholder="Enter a URL..."
/>
</div>
</Grid>
</>
)}
<Button
className="mr-1 rounded-l-none -ml-3"
color="primary"
type="submit"
disabled={loading}
>
{loading ? 'Sending...' : 'Send'}
</Button>
</HStack>
</HStack>
{error && <div className="text-white bg-red-500 px-4 py-1 rounded">{error}</div>}
{responseBody !== null && (
<>
<div>
{responseBody?.method.toUpperCase()}
&nbsp;&bull;&nbsp;
{responseBody?.status}
&nbsp;&bull;&nbsp;
{responseBody?.elapsed}ms &nbsp;&bull;&nbsp;
{responseBody?.elapsed2}ms
</div>
{contentType.includes('html') ? (
<iframe
title="Response preview"
srcDoc={responseBody.body}
sandbox="allow-scripts allow-same-origin"
className="h-[70vh] w-full rounded-lg"
/>
) : (
<Editor value={responseBody?.body} contentType={contentType} />
)}
</>
)}
</VStack>
</div>
</div>
</>
);