From 3574cf7c4ef7ac3cb0ff8ed35fd6105ac7d6d33d Mon Sep 17 00:00:00 2001 From: Aasif Khan Date: Fri, 25 Oct 2024 15:03:18 +0530 Subject: [PATCH 1/2] integrate cleanup time from playground-mono --- .../components/Playground/TerminalUI.tsx | 20 ++++++++++++++----- .../playground-web/components/Shell/Shell.tsx | 2 +- .../components/Shell/hooks/useShell.tsx | 4 +++- .../shared/utils/commonUtils.ts | 5 +++-- apps/playground-web/types/index.d.ts | 2 +- 5 files changed, 23 insertions(+), 10 deletions(-) diff --git a/apps/playground-web/components/Playground/TerminalUI.tsx b/apps/playground-web/components/Playground/TerminalUI.tsx index a9217b2..9c3d6c5 100644 --- a/apps/playground-web/components/Playground/TerminalUI.tsx +++ b/apps/playground-web/components/Playground/TerminalUI.tsx @@ -6,8 +6,10 @@ import { useState } from 'react'; import Tooltip from '../Overlays/Tooltip'; export function TerminalUI({ initialCommandsLeft = 1000 }) { const [commandsLeft, setCommandsLeft] = useState(initialCommandsLeft); - const handleCommandExecuted = (commands: number) => { + const [cleanupTimeLeft, setCleanupTimeLeft] = useState(15 * 60); + const handleCommandExecuted = (commands: number, cleanup: number) => { setCommandsLeft(commands); + setCleanupTimeLeft(cleanup); }; return ( @@ -27,13 +29,21 @@ export function TerminalUI({ initialCommandsLeft = 1000 }) { - + ); } -function TerminalCounter({ commandsLeft }: { commandsLeft: number }) { - const { timeLeft } = useTimer(15 * 60); +function TerminalCounter({ + commandsLeft, + cleanupTimeLeft, +}: { + commandsLeft: number; + cleanupTimeLeft: number; +}) { return (
@@ -42,7 +52,7 @@ function TerminalCounter({ commandsLeft }: { commandsLeft: number }) { className="flex items-center justify-between border border-gray-400 text-sm bg-transparent p-3 rounded-lg" data-testid="cleanup-timer" > - Cleanup in: {formatTime(timeLeft)} mins + Cleanup in: {formatTime(cleanupTimeLeft)} mins
diff --git a/apps/playground-web/components/Shell/Shell.tsx b/apps/playground-web/components/Shell/Shell.tsx index 643a9a3..81b7de5 100644 --- a/apps/playground-web/components/Shell/Shell.tsx +++ b/apps/playground-web/components/Shell/Shell.tsx @@ -5,7 +5,7 @@ import { useShell } from './hooks/useShell'; interface ShellProps { - onCommandExecuted: (commandsLeft: number) => void; + onCommandExecuted: (commandsLeft: number, cleanupTimeLeft: number) => void; } export default function Shell({ onCommandExecuted }: ShellProps) { diff --git a/apps/playground-web/components/Shell/hooks/useShell.tsx b/apps/playground-web/components/Shell/hooks/useShell.tsx index 5da2699..9c46973 100644 --- a/apps/playground-web/components/Shell/hooks/useShell.tsx +++ b/apps/playground-web/components/Shell/hooks/useShell.tsx @@ -5,7 +5,9 @@ import { useState, useEffect, useRef, KeyboardEvent, ChangeEvent } from 'react'; import { handleCommand } from '@/shared/utils/shellUtils'; import blocklistedCommands from '@/shared/utils/blocklist'; -export const useShell = (onCommandExecuted: (commandsLeft: number) => void) => { +export const useShell = ( + onCommandExecuted: (commandsLeft: number, cleanupTimeLeft: number) => void, +) => { // states const [command, setCommand] = useState(''); const [output, setOutput] = useState([]); diff --git a/apps/playground-web/shared/utils/commonUtils.ts b/apps/playground-web/shared/utils/commonUtils.ts index beaa013..c0e4efd 100644 --- a/apps/playground-web/shared/utils/commonUtils.ts +++ b/apps/playground-web/shared/utils/commonUtils.ts @@ -13,7 +13,7 @@ interface HandleResultProps { }; newOutput: string; setOutput: (prevOutput: any) => any; // Adjust type as necessary - onCommandExecuted: (commandsLeft: number) => void; // Allow undefined + onCommandExecuted: (commandsLeft: number, cleanupTimeLeft: number) => void; // Allow undefined } export const handleResult = ({ @@ -37,5 +37,6 @@ export const handleResult = ({ } const commandsLeft = Number(result.headers['x-ratelimit-remaining']); - onCommandExecuted(commandsLeft); + const cleanupTimeLeft = Number(result.headers['x-next-cleanup-time']); + onCommandExecuted(commandsLeft, cleanupTimeLeft); }; diff --git a/apps/playground-web/types/index.d.ts b/apps/playground-web/types/index.d.ts index cd03372..93a2a35 100644 --- a/apps/playground-web/types/index.d.ts +++ b/apps/playground-web/types/index.d.ts @@ -3,5 +3,5 @@ import * as React from 'react'; export interface CommandHandler { command: string; setOutput: React.Dispatch>; - onCommandExecuted: (commandsLeft: number) => void; + onCommandExecuted: (commandsLeft: number, cleanupTimeLeft: number) => void; } From 274d46e143b48079bb29ee791e12ebb488e23cb7 Mon Sep 17 00:00:00 2001 From: aasifkhan7 Date: Sat, 26 Oct 2024 12:54:21 +0530 Subject: [PATCH 2/2] do not set cleanup time when cleanup !== -1 --- apps/playground-web/components/Playground/TerminalUI.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/playground-web/components/Playground/TerminalUI.tsx b/apps/playground-web/components/Playground/TerminalUI.tsx index 9c3d6c5..d279b79 100644 --- a/apps/playground-web/components/Playground/TerminalUI.tsx +++ b/apps/playground-web/components/Playground/TerminalUI.tsx @@ -1,7 +1,6 @@ import { Dice1, Dice3, Dice5, Info } from 'lucide-react'; import Shell from '../Shell/Shell'; import { formatTime } from '@/shared/utils/commonUtils'; -import { useTimer } from '@/shared/hooks/useTimer'; import { useState } from 'react'; import Tooltip from '../Overlays/Tooltip'; export function TerminalUI({ initialCommandsLeft = 1000 }) { @@ -9,7 +8,9 @@ export function TerminalUI({ initialCommandsLeft = 1000 }) { const [cleanupTimeLeft, setCleanupTimeLeft] = useState(15 * 60); const handleCommandExecuted = (commands: number, cleanup: number) => { setCommandsLeft(commands); - setCleanupTimeLeft(cleanup); + if (cleanup !== -1) { + setCleanupTimeLeft(cleanup); + } }; return (