Split request upsert command

This commit is contained in:
Gregory Schier
2023-02-27 10:00:57 -08:00
parent 9dc8234f4b
commit d0846dcd11
8 changed files with 122 additions and 39 deletions

View File

@@ -42,7 +42,7 @@ export const Button = forwardRef(function Button<T extends ElementType>(
justify === 'center' && 'justify-center',
size === 'md' && 'h-10 px-4',
size === 'sm' && 'h-8 px-3 text-sm',
size === 'xs' && 'h-6 px-2 text-sm',
size === 'xs' && 'h-7 px-3 text-sm',
color === undefined && 'hover:bg-gray-500/[0.1] text-gray-800 hover:text-gray-900',
color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 text-white',
color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 text-white',

View File

@@ -47,12 +47,12 @@ export const myHighlightStyle = HighlightStyle.define([
color: '#757b93',
fontStyle: 'italic',
},
{ tag: [t.name, t.tagName, t.angleBracket, t.docString], color: '#4699de' },
{ tag: [t.name, t.tagName, t.angleBracket, t.docString], color: 'hsl(var(--color-blue-500))' },
{ tag: [t.variableName], color: '#31c434' },
{ tag: [t.bool], color: '#e864f6' },
{ tag: [t.attributeName], color: '#a773ff' },
{ tag: [t.attributeValue], color: '#ff964b' },
{ tag: [t.string], color: '#e8b045' },
{ tag: [t.attributeName], color: 'hsl(var(--color-violet-500))' },
{ tag: [t.attributeValue], color: 'hsl(var(--color-orange-500))' },
{ tag: [t.string], color: 'hsl(var(--color-yellow-500))' },
{ tag: [t.keyword, t.meta], color: '#45e8a4' },
]);

View File

@@ -31,7 +31,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
onClick={() => createRequest.mutate({ name: 'Test Request' })}
/>
</HStack>
<VStack as="ul" className="py-2" space={1}>
<VStack as="ul" className="py-3" space={1}>
{requests.map((r) => (
<SidebarItem key={r.id} request={r} active={r.id === activeRequestId} />
))}
@@ -42,12 +42,12 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
function SidebarItem({ request, active }: { request: HttpRequest; active: boolean }) {
return (
<li key={request.id} className="mx-2">
<li key={request.id} className="mx-3">
<Button
as={Link}
to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
className={classnames('w-full', active && 'bg-gray-50')}
size="sm"
size="xs"
justify="start"
>
{request.name}

View File

@@ -17,8 +17,14 @@ export function useRequestUpdate(request: HttpRequest | null) {
if (request == null) {
throw new Error("Can't update a null request");
}
// console.error('UPDATE REQUEST', patch);
const req = await invoke('upsert_request', { ...request, ...patch });
const updatedRequest = { ...request, ...patch } as any;
// TODO: Figure out why this is necessary
updatedRequest.createdAt = updatedRequest.createdAt.toISOString().replace('Z', '');
updatedRequest.updatedAt = updatedRequest.updatedAt.toISOString().replace('Z', '');
const req = await invoke('update_request', { request: updatedRequest });
return convertDates(req as HttpRequest);
},
onSuccess: (req) => {
@@ -31,13 +37,9 @@ export function useRequestUpdate(request: HttpRequest | null) {
export function useRequestCreate(workspaceId: string) {
const queryClient = useQueryClient();
return useMutation<HttpRequest, unknown, Partial<Omit<HttpRequest, 'workspaceId'>>>({
return useMutation<HttpRequest, unknown, Pick<HttpRequest, 'name'>>({
mutationFn: async (patch) => {
const req = await invoke('upsert_request', {
url: '',
method: 'GET',
name: 'New Request',
headers: [],
const req = await invoke('create_request', {
...patch,
workspaceId,
});

View File

@@ -64,6 +64,28 @@ html, body, #root {
--color-red-800: 0 84% 20%;
--color-red-900: 0 84% 10%;
--color-orange-50: 25 95% 95%;
--color-orange-100: 25 95% 88%;
--color-orange-200: 25 95% 76%;
--color-orange-300: 25 95% 70%;
--color-orange-400: 25 95% 65%;
--color-orange-500: 25 95% 58%;
--color-orange-600: 25 95% 43%;
--color-orange-700: 25 95% 30%;
--color-orange-800: 25 95% 20%;
--color-orange-900: 25 95% 10%;
--color-yellow-50: 45 93% 95%;
--color-yellow-100: 45 93% 88%;
--color-yellow-200: 45 93% 76%;
--color-yellow-300: 45 93% 70%;
--color-yellow-400: 45 93% 65%;
--color-yellow-500: 45 93% 58%;
--color-yellow-600: 45 93% 43%;
--color-yellow-700: 45 93% 30%;
--color-yellow-800: 45 93% 20%;
--color-yellow-900: 45 93% 10%;
--color-gray-50: 217 21% 95%;
--color-gray-100: 217 21% 88%;
--color-gray-200: 217 21% 76%;
@@ -100,15 +122,48 @@ html, body, #root {
--color-violet-900: 258 90% 95%;
--color-violet-800: 258 90% 88%;
--color-violet-700: 258 90% 76%;
--color-violet-600: 258 90% 70%;
--color-violet-500: 258 90% 65%;
--color-violet-700: 258 90% 79%;
--color-violet-600: 258 90% 74%;
--color-violet-500: 258 90% 70%;
--color-violet-400: 258 90% 58%;
--color-violet-300: 258 90% 43%;
--color-violet-200: 258 90% 30%;
--color-violet-100: 258 90% 20%;
--color-violet-50: 258 90% 10%;
--color-red-900: 0 84% 95%;
--color-red-800: 0 84% 88%;
--color-red-700: 0 84% 76%;
--color-red-600: 0 84% 70%;
--color-red-500: 0 84% 65%;
--color-red-400: 0 84% 58%;
--color-red-300: 0 84% 43%;
--color-red-200: 0 84% 30%;
--color-red-100: 0 84% 20%;
--color-red-50: 0 84% 10%;
--color-orange-900: 25 95% 95%;
--color-orange-800: 25 95% 88%;
--color-orange-700: 25 95% 76%;
--color-orange-600: 25 95% 70%;
--color-orange-500: 25 95% 65%;
--color-orange-400: 25 95% 58%;
--color-orange-300: 25 95% 43%;
--color-orange-200: 25 95% 30%;
--color-orange-100: 25 95% 20%;
--color-orange-50: 25 95% 10%;
--color-yellow-900: 45 93% 95%;
--color-yellow-800: 45 93% 88%;
--color-yellow-700: 45 93% 76%;
--color-yellow-600: 45 93% 70%;
--color-yellow-500: 45 93% 65%;
--color-yellow-400: 45 93% 58%;
--color-yellow-300: 45 93% 43%;
--color-yellow-200: 45 93% 30%;
--color-yellow-100: 45 93% 20%;
--color-yellow-50: 45 93% 10%;
--color-gray-900: 217 21% 95%;
--color-gray-800: 217 21% 88%;
--color-gray-700: 217 21% 76%;

View File

@@ -14,9 +14,12 @@ import './main.css';
setTheme();
// WASM stuff
await init();
greet();
await invoke('load_db');
// Load the database
// await invoke('load_db');
const queryClient = new QueryClient();
const router = createBrowserRouter([