update

src/sshx.tsx

@@ -1,232 +1,86 @@
-import { json, ActionFunction, LoaderFunction } from '@remix-run/node';
-import { useLoaderData, Form, useSubmit, useNavigation } from '@remix-run/react';
-import { useEffect, useState, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
+import { json, ActionFunction } from '@remix-run/node';
+import { useLoaderData, Form, useSubmit } from '@remix-run/react';
 import { spawn, ChildProcess } from 'child_process';
 
-// Types
-type SshxStatus = 'running' | 'stopped';
-
-interface LoaderData {
-    status: SshxStatus;
-    output: string;
-    link: string | null;
-    shell: string | null;
-}
-
-// Server-side state
 let sshxProcess: ChildProcess | null = null;
 let sshxOutput = '';
 
-export const loader: LoaderFunction = async () => {
-    const status: SshxStatus = sshxProcess ? 'running' : 'stopped';
-    const link = extractFromOutput(sshxOutput, /Link:\s+(https:\/\/sshx\.io\/s\/[^\s]+)/);
-    const shell = extractFromOutput(sshxOutput, /Shell:\s+([^\n]+)/);
-
-    return json<LoaderData>({ status, output: sshxOutput, link, shell });
+export const loader = async () => {
+    return json({ status: sshxProcess ? 'running' : 'stopped', output: sshxOutput });
 };
 
 export const action: ActionFunction = async ({ request }) => {
     const formData = await request.formData();
     const action = formData.get('action');
 
-    switch (action) {
-        case 'start':
-            if (!sshxProcess) {
-                try {
-                    sshxProcess = spawn('/home/pn/sshx/sshx', [], { env: process.env });
-                    sshxProcess.stdout?.on('data', handleProcessOutput);
-                    sshxProcess.stderr?.on('data', handleProcessOutput);
-                    sshxProcess.on('close', handleProcessClose);
-                    sshxProcess.on('error', (error) => {
-                        sshxOutput += `Error: ${error.message}\n`;
-                        handleProcessClose();
-                    });
-                    return json({ status: 'started' });
-                } catch (error) {
-                    return json({ error: 'Failed to start SSHX process' }, { status: 500 });
-                }
-            }
-            break;
-        case 'stop':
-            if (sshxProcess) {
-                sshxProcess.kill();
-                sshxProcess = null;
-                sshxOutput = '';
-                return json({ status: 'stopped' });
-            }
-            break;
-        default:
-            return json({ error: 'Invalid action' }, { status: 400 });
+    if (action === 'start' && !sshxProcess) {
+        sshxProcess = spawn('/home/pn/sshx/sshx', []);
+        sshxProcess.stdout?.on('data', (data: Buffer) => {
+            sshxOutput += data.toString();
+        });
+        sshxProcess.stderr?.on('data', (data: Buffer) => {
+            sshxOutput += data.toString();
+        });
+        return json({ status: 'started' });
+    } else if (action === 'stop' && sshxProcess) {
+        sshxProcess.kill();
+        sshxProcess = null;
+        sshxOutput = '';
+        return json({ status: 'stopped' });
     }
 
-    return json({ error: 'Action not performed' }, { status: 400 });
+    return json({ error: 'Invalid action' }, { status: 400 });
 };
 
-function handleProcessOutput(data: Buffer) {
-    sshxOutput += data.toString();
-}
-
-function handleProcessClose() {
-    sshxProcess = null;
-    sshxOutput += '\nSSHX process has ended.';
-}
-
-function extractFromOutput(output: string, regex: RegExp): string | null {
-    const match = output.match(regex);
-    return match ? match[1] : null;
-}
-
 export default function Sshx() {
-    const { status, output, link, shell } = useLoaderData<LoaderData>();
+    const { status, output } = useLoaderData<{ status: string; output: string }>();
     const submit = useSubmit();
-    const navigation = useNavigation();
     const [localOutput, setLocalOutput] = useState(output);
 
-    const refreshData = useCallback(() => {
-        submit(null, { method: 'get', replace: true });
-    }, [submit]);
-
     useEffect(() => {
-        const interval = setInterval(refreshData, 1000);
+        const interval = setInterval(() => {
+            submit(null, { method: 'get', replace: true });
+        }, 1000);
         return () => clearInterval(interval);
-    }, [refreshData]);
+    }, [submit]);
 
     useEffect(() => {
         setLocalOutput(output);
     }, [output]);
 
-    const isLoading = navigation.state === 'submitting' || navigation.state === 'loading';
+    const getLink = () => {
+        const match = localOutput.match(/Link:\s+(https:\/\/sshx\.io\/s\/[^\s]+)/);
+        return match ? match[1] : null;
+    };
 
-    const styles = {
-        container: {
-            fontFamily: 'Arial, sans-serif',
-            maxWidth: '800px',
-            margin: '0 auto',
-            padding: '20px',
-        },
-        header: {
-            color: '#333',
-            borderBottom: '2px solid #333',
-            paddingBottom: '10px',
-        },
-        status: {
-            fontSize: '18px',
-            fontWeight: 'bold' as const,
-        },
-        statusRunning: {
-            color: 'green',
-        },
-        statusStopped: {
-            color: 'red',
-        },
-        buttonGroup: {
-            display: 'flex',
-            gap: '10px',
-            marginBottom: '20px',
-        },
-        button: {
-            padding: '10px 20px',
-            fontSize: '16px',
-            color: 'white',
-            border: 'none',
-            borderRadius: '5px',
-            cursor: 'pointer',
-        },
-        startButton: {
-            backgroundColor: '#4CAF50',
-        },
-        stopButton: {
-            backgroundColor: '#f44336',
-        },
-        disabledButton: {
-            opacity: 0.5,
-            cursor: 'not-allowed',
-        },
-        infoBox: {
-            backgroundColor: '#f0f0f0',
-            padding: '15px',
-            borderRadius: '5px',
-            marginBottom: '20px',
-        },
-        link: {
-            color: '#1a0dab',
-        },
-        outputHeader: {
-            color: '#333',
-            borderBottom: '1px solid #333',
-            paddingBottom: '5px',
-        },
-        output: {
-            backgroundColor: '#f0f0f0',
-            padding: '15px',
-            borderRadius: '5px',
-            whiteSpace: 'pre-wrap' as const,
-            wordWrap: 'break-word' as const,
-        },
+    const getShell = () => {
+        const match = localOutput.match(/Shell:\s+([^\n]+)/);
+        return match ? match[1] : null;
     };
 
     return (
-        <div style={styles.container}>
-            <h1 style={styles.header}>SSHX Control</h1>
-            <p style={styles.status}>
-                Status:{' '}
-                <span style={status === 'running' ? styles.statusRunning : styles.statusStopped}>
-                    {status}
-                </span>
+        <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
+            <h1 style={{ color: '#333', borderBottom: '2px solid #333', paddingBottom: '10px' }}>SSHX Control</h1>
+            <p style={{ fontSize: '18px', fontWeight: 'bold' }}>
+                Status: <span style={{ color: status === 'running' ? 'green' : 'red' }}>{status}</span>
             </p>
-            <div style={styles.buttonGroup}>
+            <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
                 <Form method="post">
-                    <button
-                        type="submit"
-                        name="action"
-                        value="start"
-                        style={{
-                            ...styles.button,
-                            ...styles.startButton,
-                            ...(status === 'running' || isLoading ? styles.disabledButton : {}),
-                        }}
-                        disabled={status === 'running' || isLoading}
-                        aria-disabled={status === 'running' || isLoading}
-                    >
-                        Start SSHX
-                    </button>
+                    <button type="submit" name="action" value="start" style={{ padding: '10px 20px', fontSize: '16px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }} disabled={status === 'running'}>Start SSHX</button>
                 </Form>
                 <Form method="post">
-                    <button
-                        type="submit"
-                        name="action"
-                        value="stop"
-                        style={{
-                            ...styles.button,
-                            ...styles.stopButton,
-                            ...(status === 'stopped' || isLoading ? styles.disabledButton : {}),
-                        }}
-                        disabled={status === 'stopped' || isLoading}
-                        aria-disabled={status === 'stopped' || isLoading}
-                    >
-                        Stop SSHX
-                    </button>
+                    <button type="submit" name="action" value="stop" style={{ padding: '10px 20px', fontSize: '16px', backgroundColor: '#f44336', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }} disabled={status === 'stopped'}>Stop SSHX</button>
                 </Form>
             </div>
             {status === 'running' && (
-                <div style={styles.infoBox}>
-                    <p>
-                        <strong>Link:</strong>{' '}
-                        {link ? (
-                            <a href={link} target="_blank" rel="noopener noreferrer" style={styles.link}>
-                                {link}
-                            </a>
-                        ) : (
-                            'Not available'
-                        )}
-                    </p>
-                    <p>
-                        <strong>Shell:</strong> {shell || 'Not available'}
-                    </p>
+                <div style={{ backgroundColor: '#f0f0f0', padding: '15px', borderRadius: '5px', marginBottom: '20px' }}>
+                    <p style={{ margin: '5px 0' }}><strong>Link:</strong> <a href={getLink() || '#'} target="_blank" rel="noopener noreferrer" style={{ color: '#1a0dab' }}>{getLink()}</a></p>
+                    <p style={{ margin: '5px 0' }}><strong>Shell:</strong> {getShell()}</p>
                 </div>
             )}
-            <h2 style={styles.outputHeader}>Output:</h2>
-            <pre style={styles.output}>{localOutput}</pre>
+            <h2 style={{ color: '#333', borderBottom: '1px solid #333', paddingBottom: '5px' }}>Output:</h2>
+            <pre style={{ backgroundColor: '#f0f0f0', padding: '15px', borderRadius: '5px', whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>{localOutput}</pre>
         </div>
     );
-}
+}