[Eng 200] enter on keyboard doesn't cause modal to submit (#382)

* Add form tag to enable submission when clicking enter

* invalidate library queries when adding/removing

* using useQueryHook to invalidate queries

* Bump Rust version on Contributing

* Fix form double firing

Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>

CONTRIBUTING.md

@@ -58,7 +58,7 @@ To run the landing page
 
 If you are having issues ensure you are using the following versions of Rust and Node:
 
-- Rust version: **1.63.0**
+- Rust version: **1.64.0**
 - Node version: **17**
 
 ##### Mobile app
@@ -72,7 +72,7 @@ To run mobile app
 - `cd apps/mobile && pnpm i` - This is a separate workspace, you need to do this!
 - `pnpm android` - runs on Android Emulator
 - `pnpm ios` - runs on iOS Emulator
-- `pnpm dev` - For already bundled app - This is only temporarily supported. The final app will require the Spacedrive Rust code which isn't included in Expo Go.
+- `pnpm start` - For already bundled app
 
 ### Pull Request
 

packages/interface/src/components/dialog/CreateLibraryDialog.tsx

@@ -16,9 +16,11 @@ export default function CreateLibraryDialog({
 	const { mutate: createLibrary, isLoading: createLibLoading } = useBridgeMutation(
 		'library.create',
 		{
-			onSuccess: (library) => {
+			onSuccess: (library: any) => {
 				console.log('SUBMITTING');
+
 				setOpenCreateModal(false);
+
 				queryClient.setQueryData(['library.list'], (libraries: any) => [
 					...(libraries || []),
 					library
@@ -26,7 +28,7 @@ export default function CreateLibraryDialog({
 
 				if (onSubmit) onSubmit();
 			},
-			onError: (err) => {
+			onError: (err: any) => {
 				console.error(err);
 			}
 		}

packages/interface/src/components/dialog/DeleteLibraryDialog.tsx

@@ -1,4 +1,5 @@
 import { useBridgeMutation } from '@sd/client';
+import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 
 import Dialog from '../layout/Dialog';
@@ -11,9 +12,12 @@ interface Props {
 export default function DeleteLibraryDialog(props: Props) {
 	const [openDeleteModal, setOpenDeleteModal] = useState(false);
 
+	const queryClient = useQueryClient();
+
 	const { mutate: deleteLib, isLoading: libDeletePending } = useBridgeMutation('library.delete', {
 		onSuccess: () => {
 			setOpenDeleteModal(false);
+			queryClient.invalidateQueries(['library.list']);
 		}
 	});
 

packages/interface/src/components/layout/Dialog.tsx

@@ -24,12 +24,7 @@ export default function Dialog(props: DialogProps) {
 			<DialogPrimitive.Portal>
 				<DialogPrimitive.Overlay className="fixed top-0 dialog-overlay bottom-0 left-0 right-0 z-50 grid overflow-y-auto bg-black bg-opacity-50 rounded-xl place-items-center m-[1px]">
 					<DialogPrimitive.Content className="min-w-[300px] max-w-[400px] dialog-content rounded-md bg-gray-650 text-white border border-gray-550 shadow-deep">
-						<form
-							onSubmit={(e) => {
-								if (props.ctaAction) props.ctaAction();
-								e.preventDefault();
-							}}
-						>
+						<form onSubmit={(e) => e.preventDefault()}>
 							<div className="p-5">
 								<DialogPrimitive.Title className="mb-2 font-bold">
 									{props.title}
@@ -48,6 +43,7 @@ export default function Dialog(props: DialogProps) {
 									</Button>
 								</DialogPrimitive.Close>
 								<Button
+									onClick={props.ctaAction}
 									type="submit"
 									size="sm"
 									loading={props.loading}