leumas-private-shared/src/Components/Downloaders/CodeViewer.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState, useEffect } from 'react';
import { Box, Button, Typography, CircularProgress } from '@mui/material';
import DownloadIcon from '@mui/icons-material/Download';
import AceEditor from 'react-ace';

// Import Ace Editor modes and themes
import 'ace-builds/webpack-resolver';

const CodeViewer = ({ filePath, fileType, editorTheme }) => {
  const [code, setCode] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(filePath)
      .then((response) => response.text())
      .then((data) => {
        setCode(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Error fetching the code file:', error);
        setLoading(false);
      });
  }, [filePath]);

  const downloadFile = () => {
    const blob = new Blob([code], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filePath.split('/').pop(); // Extract file name from path
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  return (
    <Box sx={{ my: 2, textAlign: 'center' }}>
      <Typography variant="h6">Code Viewer</Typography>
      {loading ? (
        <CircularProgress sx={{ my: 2 }} />
      ) : (
        <AceEditor
          mode={fileType}
          theme={editorTheme}
          value={code}
          readOnly
          fontSize={14}
          width="100%"
          height="400px"
          setOptions={{ useWorker: false }}
        />
      )}
      <Button
        variant="contained"
        color="primary"
        startIcon={<DownloadIcon />}
        onClick={downloadFile}
        sx={{ mt: 2 }}
      >
        Download Code
      </Button>
    </Box>
  );
};

export default CodeViewer;