first draft of changes to integrate rate-limit

apps/playground-web/components/CLI/hooks/useCli.tsx

@@ -13,6 +13,7 @@ export const useCli = (decreaseCommandsLeft: () => void) => {
   //Initialise the command history with sessionStorage
   const [commandHistory, setCommandHistory] = useState<string[]>([]);
   const [historyIndex, setHistoryIndex] = useState<number>(-1);
+  const [newCommandsLeft, setNewCommandsLeft] = useState<number>(1000);
 
   // useRefs
   const terminalRef = useRef<HTMLDivElement>(null);
@@ -27,7 +28,7 @@ export const useCli = (decreaseCommandsLeft: () => void) => {
         `(error) ERR unknown command '${commandName}'`,
       ]);
     } else {
-      handleCommand({ command, setOutput }); // Execute if not blocklisted
+      handleCommand({ command, setOutput, setNewCommandsLeft }); // Execute if not blocklisted
     }
 
     setCommand(''); // Clear input

apps/playground-web/components/Playground/TerminalUI.tsx

@@ -20,7 +20,7 @@ export function TerminalUI() {
           </div>
         </div>
         <div className="h-64 md:h-[30rem] bg-gray-100 rounded-lg overflow-hidden shadow-md">
-          <Shell decreaseCommandsLeft={decreaseCommandsLeft} />
+          <Shell/>
         </div>
       </div>
       <TerminalCounter commandsLeft={commandsLeft} />

apps/playground-web/components/Shell/Shell.tsx

@@ -8,15 +8,15 @@ interface ShellProps {
   decreaseCommandsLeft: () => void;
 }
 
-export default function Shell({ decreaseCommandsLeft }: ShellProps) {
+export default function Shell({ }: ShellProps) {
   const {
     handleInputChange,
     handleKeyDown,
     terminalRef,
     inputRef,
     output,
     command,
-  } = useShell(decreaseCommandsLeft);
+  } = useShell();
   return (
     <div
       ref={terminalRef}

apps/playground-web/components/Shell/hooks/useShell.tsx

@@ -5,14 +5,15 @@ import { useState, useEffect, useRef, KeyboardEvent, ChangeEvent } from 'react';
 import { handleCommand } from '@/shared/utils/shellUtils';
 import blocklistedCommands from '@/shared/utils/blocklist';
 
-export const useShell = (decreaseCommandsLeft: () => void) => {
+export const useShell = () => {
   // states
   const [command, setCommand] = useState('');
   const [output, setOutput] = useState<string[]>([]);
   const [tempCommand, setTempCommand] = useState('');
   // Initialise the command history with sessionStorage
   const [commandHistory, setCommandHistory] = useState<string[]>([]);
   const [historyIndex, setHistoryIndex] = useState<number>(-1);
+  const [newCommandsLeft, setNewCommandsLeft] = useState<number>(1000);
 
   // useRefs
   const terminalRef = useRef<HTMLDivElement>(null);
@@ -32,11 +33,10 @@ export const useShell = (decreaseCommandsLeft: () => void) => {
         `(error) ERR unknown command '${commandName}'`,
       ]);
     } else {
-      handleCommand({ command, setOutput }); // Execute if not blocklisted
+      handleCommand({ command, setOutput, setNewCommandsLeft }); // Execute if not blocklisted
     }
 
     setCommand(''); // Clear input
-    decreaseCommandsLeft(); // Call to update remaining commands
   };
 
   useEffect(() => {

apps/playground-web/lib/api.ts

@@ -12,9 +12,9 @@ export const executeShellCommandOnServer = async (
 
     // Check if the response contains data or if it's an error response
     if (response?.data) {
-      return response.data;
+      return response;
     } else if (response?.error) {
-      return response.error;
+      return response;
     } else {
       throw new Error('Unexpected response structure');
     }

apps/playground-web/shared/utils/cliUtils.ts

@@ -3,9 +3,9 @@
 import { executeShellCommandOnServer } from '@/lib/api';
 import { CommandHandler } from '@/types';
 
-export const handleCommand = async ({ command, setOutput }: CommandHandler) => {
+export const handleCommand = async ({ command, setOutput, setNewCommandsLeft }: CommandHandler) => {
   const newOutput = `dice > ${command}`;
-  let result: string;
+  let result: any;
 
   const [cmd, ...args] = command.split(' ');
   if (!cmd) {
@@ -27,6 +27,7 @@ export const handleCommand = async ({ command, setOutput }: CommandHandler) => {
         const cmdOptions = { key: key };
         result = await executeShellCommandOnServer(cmd, cmdOptions);
         setOutput((prevOutput) => [...prevOutput, newOutput, result]);
+        setNewCommandsLeft((prevOutput) => (result.headers['x-ratelimit-remaining']));
       } catch (error: unknown) {
         console.error('Error executing command:', error);
         result = 'Error executing command';
@@ -41,6 +42,7 @@ export const handleCommand = async ({ command, setOutput }: CommandHandler) => {
           const cmdOptions = { key: key, value: value };
           result = await executeShellCommandOnServer(cmd, cmdOptions);
           setOutput((prevOutput) => [...prevOutput, newOutput, result]);
+          setNewCommandsLeft((prevOutput) => (result.headers['x-ratelimit-remaining']));
         } catch (error: unknown) {
           console.error('Error executing command:', error);
           result = 'Error executing command';
@@ -60,6 +62,7 @@ export const handleCommand = async ({ command, setOutput }: CommandHandler) => {
           const cmdOptions = { keys: [keys] };
           result = await executeShellCommandOnServer(cmd, cmdOptions);
           setOutput((prevOutput) => [...prevOutput, newOutput, result]);
+          setNewCommandsLeft((prevOutput) => (result.headers['x-ratelimit-remaining']));
         } catch (error: unknown) {
           console.error('Error executing command:', error);
           result = 'Error executing command';

apps/playground-web/shared/utils/shellUtils.ts

@@ -3,9 +3,9 @@
 import { executeShellCommandOnServer } from '@/lib/api';
 import { CommandHandler } from '@/types';
 
-export const handleCommand = async ({ command, setOutput }: CommandHandler) => {
+export const handleCommand = async ({ command, setOutput, setNewCommandsLeft }: CommandHandler) => {
   const newOutput = `dice > ${command}`;
-  let result: string;
+  let result: any;
 
   const [cmd, ...args] = command.split(' ');
 
@@ -15,6 +15,7 @@ export const handleCommand = async ({ command, setOutput }: CommandHandler) => {
   try {
     result = await executeShellCommandOnServer(cmd, args);
     setOutput((prevOutput) => [...prevOutput, newOutput, result]);
+    setNewCommandsLeft((prevOutput) => (result.headers['x-ratelimit-remaining']));
   } catch (error: unknown) {
     console.error('Error executing command:', error);
     result = 'Error executing command';

apps/playground-web/types/index.d.ts

@@ -3,4 +3,5 @@ import * as React from 'react';
 export interface CommandHandler {
   command: string;
   setOutput: React.Dispatch<React.SetStateAction<string[]>>;
+  setNewCommandsLeft: React.Dispatch<React.SetStateAction<number>>;
 }