Send requests with active environment

src-web/components/RequestPane.tsx

@@ -30,6 +30,7 @@ import { GraphQLEditor } from './GraphQLEditor';
 import { HeaderEditor } from './HeaderEditor';
 import { ParametersEditor } from './ParameterEditor';
 import { UrlBar } from './UrlBar';
+import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 
 interface Props {
   style?: CSSProperties;
@@ -42,6 +43,7 @@ const useActiveTab = createGlobalState<string>('body');
 export const RequestPane = memo(function RequestPane({ style, fullHeight, className }: Props) {
   const activeRequest = useActiveRequest();
   const activeRequestId = activeRequest?.id ?? null;
+  const activeEnvironmentId = useActiveEnvironmentId();
   const updateRequest = useUpdateRequest(activeRequestId);
   const [activeTab, setActiveTab] = useActiveTab();
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
@@ -144,9 +146,9 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
     'send_request',
     async ({ windowLabel }) => {
       if (windowLabel !== appWindow.label) return;
-      await invoke('send_request', { requestId: activeRequestId });
+      await invoke('send_request', { requestId: activeRequestId, environmentId: activeEnvironmentId });
     },
-    [activeRequestId],
+    [activeRequestId, activeEnvironmentId],
   );
 
   return (

src-web/components/Sidebar.tsx

@@ -23,6 +23,8 @@ import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
 import { IconButton } from './core/IconButton';
 import { useCreateRequest } from '../hooks/useCreateRequest';
+import { appWindow } from '@tauri-apps/api/window';
+import { invoke } from '@tauri-apps/api';
 
 interface Props {
   className?: string;
@@ -48,6 +50,9 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
   const [hasFocus, setHasFocus] = useState<boolean>(false);
   const [selectedIndex, setSelectedIndex] = useState<number>();
 
+  // TODO: Move these listeners to a central place
+  useListenToTauriEvent('create_request', async () => createRequest.mutate({}));
+
   const focusActiveRequest = useCallback(
     (forcedIndex?: number) => {
       const index = forcedIndex ?? requests.findIndex((r) => r.id === activeRequestId);
@@ -169,7 +174,12 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
             className="text-left mb-0"
             justify="start"
           />
-          <IconButton size="sm" icon="plusCircle" title="Create Request" onClick={() => createRequest.mutate({})} />
+          <IconButton
+            size="sm"
+            icon="plusCircle"
+            title="Create Request"
+            onClick={() => createRequest.mutate({})}
+          />
         </HStack>
         <VStack
           as="ul"

src-web/components/core/Editor/Editor.tsx

@@ -13,6 +13,7 @@ import { baseExtensions, getLanguageExtension, multiLineExtensions } from './ext
 import type { GenericCompletionConfig } from './genericCompletion';
 import { singleLineExt } from './singleLine';
 import { useEnvironments } from '../../../hooks/useEnvironments';
+import { useActiveEnvironment } from '../../../hooks/useActiveEnvironment';
 
 // Export some things so all the code-split parts are in this file
 export { buildClientSchema, getIntrospectionQuery } from 'graphql/utilities';
@@ -67,8 +68,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   }: EditorProps,
   ref,
 ) {
-  const environments = useEnvironments();
-  const environment = environments[0] ?? null;
+  const environment = useActiveEnvironment();
 
   const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
   useImperativeHandle(ref, () => cm.current?.view);
@@ -121,7 +121,6 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     if (cm.current === null) return;
     const { view, languageCompartment } = cm.current;
     const ext = getLanguageExtension({ contentType, environment, useTemplating, autocomplete });
-    console.log("EXT", ext);
     view.dispatch({ effects: languageCompartment.reconfigure(ext) });
   }, [contentType, autocomplete, useTemplating, environment]);