Front/src/widgets/Compiler/ui/Compiler.tsx - master - Rics/JobReady

Front/src/widgets/Compiler/ui/Compiler.tsx
168 строк5 KB
Rics
add app
16 сен 2025, 16:56
16 сен 2025, 16:5675981cd
import {useEffect, useRef, useState} from 'react';
import styles from './compiler.module.scss';
import {compileCode} from "@widgets/Compiler/api/compile.ts";
import reload from '@shared/assets/icons/reload.svg';
import arrow from '@shared/assets/icons/arrow.svg'

const LANGUAGE_OPTIONS = [
    { label: 'C++', value: 'cpp', version: '5' },
    { label: 'Python', value: 'python3', version: '4' },
    { label: 'Java', value: 'java', version: '4' },
    { label: 'JavaScript (Node.js)', value: 'nodejs', version: '4' },
];

const DEFAULT_CODE: Record<string, string> = {
    cpp: `#include <iostream>
using namespace std;

int main() {
    int a, b;
    cin >> a >> b;
    cout << (a + b) << endl;
    return 0;
}`,
    python3: `a, b = map(int, input().split())
print(a + b)`,
    java: `import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int a = sc.nextInt();
        int b = sc.nextInt();
        System.out.println(a + b);
    }
}`,
    nodejs: `const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

let input = [];

rl.on('line', (line) => {
    input.push(line);
    if (input.length === 1) {
        const [a, b] = input[0].split(' ').map(Number);
        console.log(a + b);
        rl.close();
    }
});`,
};

export const Compiler = ({ setRunCodeHandler }: { setRunCodeHandler: (fn: () => void) => void }) => {
    const [language, setLanguage] = useState('python3');
    const [versionIndex, setVersionIndex] = useState('4');
    const [code, setCode] = useState('');
    const [input, setInput] = useState('2 3');
    const [output, setOutput] = useState('');
    const [loading, setLoading] = useState(false);

    const runCode = async () => {
        setLoading(true);
        try {
            const result = await compileCode(code, language, versionIndex, input);
            setOutput(result.output);
        } catch {
            setOutput('Произошла ошибка при выполнении кода');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        setRunCodeHandler(() => runCode);
    }, [code, language, versionIndex, input]);

    const handleLanguageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const selectedLang = e.target.value;
        const config = LANGUAGE_OPTIONS.find((lang) => lang.value === selectedLang);
        setLanguage(selectedLang);
        setVersionIndex(config?.version || '0');
        setCode(DEFAULT_CODE[selectedLang]);
        setOutput('');
    };

    return (
        <div className={styles.compiler}>
            <div className={styles.controls}>
                <LanguageSelector
                    options={LANGUAGE_OPTIONS}
                    value={language}
                    onChange={(selectedLang) => {
                        const config = LANGUAGE_OPTIONS.find((lang) => lang.value === selectedLang);
                        setLanguage(selectedLang);
                        setVersionIndex(config?.version || '0');
                        setCode(DEFAULT_CODE[selectedLang]);
                        setOutput('');
                    }}
                />

                <button onClick={() => setCode("")}>
                    <img src={reload} alt="Сброс" />
                </button>
            </div>

            <textarea
                className={styles.editor}
                value={code}
                onChange={(e) => setCode(e.target.value)}
                placeholder="Введите код здесь..."
            />
        </div>
    );
};

interface Option {
    label: string;
    value: string;
    version: string;
}

interface Props {
    options: Option[];
    value: string;
    onChange: (value: string) => void;
}

export const LanguageSelector = ({ options, value, onChange }: Props) => {
    const [open, setOpen] = useState(false);
    const wrapperRef = useRef<HTMLDivElement>(null);

    const selected = options.find(opt => opt.value === value);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
                setOpen(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    return (
        <div className={styles.dropdown} ref={wrapperRef}>
            <div className={styles.selected} onClick={() => setOpen(prev => !prev)}>
                {selected?.label}
                <span className={`${styles.arrow} ${open ? styles.open : ''}`}>
                    <img src={arrow} />
                </span>
            </div>
            {open && (
                <ul className={styles.options}>
                    {options.map(opt => (
                        <li key={opt.value} onClick={() => {
                            onChange(opt.value);
                            setOpen(false);
                        }}>
                            {opt.label}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
};