send solve request

src/components/state-modal.tsx

@@ -6,6 +6,7 @@ import { useDisclosure } from '@heroui/use-disclosure';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 
 import { Index2Color } from './consts';
+import { rotationController } from './rotation-controller';
 
 export type StateModalRef = {
   open: (state: Array<Array<number>>) => void;
@@ -26,6 +27,26 @@ export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
     navigator.clipboard.writeText(JSON.stringify(state));
   };
 
+  const solve = async () => {
+    try {
+      const response = await fetch('/api/solve', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ state }),
+      });
+      if (!response.ok) {
+        throw new Error('Server error', { cause: response });
+      }
+      const { steps } = await response.json();
+      rotationController.addRotationStepCode(...steps);
+    } catch (err) {
+      alert('An error occurred. Check the console for details.');
+      console.error(err);
+    }
+  };
+
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
       <ModalContent>
@@ -70,9 +91,12 @@ export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
               <Button color="danger" variant="light" size="sm" onPress={onClose}>
                 Close
               </Button>
-              <Button color="primary" size="sm" onPress={copy}>
+              <Button color="primary" variant="light" size="sm" onPress={copy}>
                 Copy
               </Button>
+              <Button color="success" size="sm" onPress={solve}>
+                Solve
+              </Button>
             </ModalFooter>
           </>
         )}

src/components/ui-controls.tsx

@@ -40,10 +40,6 @@ export const UIControls = () => {
     stateModalRef.current?.open(state);
   };
 
-  const solve = () => {
-    alert('Working on it!');
-  };
-
   const train = () => {
     alert('Working on it!');
   };
@@ -105,11 +101,7 @@ export const UIControls = () => {
                   <Button onPress={reset}>Reset</Button>
                 </ButtonGroup>
 
-                <Button size="sm" variant="light" onPress={showState}>
-                  Show State
-                </Button>
-
-                <Button size="sm" className="ms-auto" color="success" onPress={solve}>
+                <Button size="sm" className="ms-auto" color="success" onPress={showState}>
                   Solve
                 </Button>
               </div>

src/middleware.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+
+export const config = {
+  matcher: '/api/solve',
+};
+
+export function middleware(req: Request) {
+  const url = new URL(req.url);
+  if (url.pathname === '/api/solve') {
+    return NextResponse.rewrite('http://localhost:8000/solve');
+  }
+  return NextResponse.next();
+}