mwitnessing/pages/permits.tsx

import React, { useState } from 'react';
import Layout from "../components/layout";
import fs from 'fs';
import path from 'path';
import { url } from 'inspector';
import ProtectedRoute, { serverSideAuth } from "/components/protectedRoute";
import axiosInstance from '../src/axiosSecure';
import { UserRole } from "@prisma/client";


const PDFViewerPage = ({ pdfFiles }) => {
    const [files, setFiles] = useState(pdfFiles);

    const handleFileDelete = async (fileName) => {
        const subfolder = 'permits';  // Change this as needed based on your subfolder structure
        try {
            await axiosInstance.delete(`/api/content/${subfolder}?file=${fileName}`);
            setFiles(files.filter(file => file.name !== fileName));
        } catch (error) {
            console.error('Error deleting file:', error);
        }
    };

    const handleFileUpload = async (event) => {
        const file = event.target.files[0];
        //utf-8 encoding
        // const formData = new FormData();
        const formData = new FormData();
        // formData.append('file', file);
        const newFile = new File([file], encodeURI(file.name), { type: file.type });
        formData.append('file', newFile);

        const subfolder = 'permits';  // Change this as needed based on your subfolder structure
        try {
            const response = await axiosInstance.post(`/api/content/${subfolder}`, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    // 'Content-Encoding': 'utf-8'
                }
            });
            const newFiles = response.data.files.map(file => ({ name: decodeURIComponent(file.originalname), url: file.path }));
            setFiles([...files, ...newFiles]);
        } catch (error) {
            console.error('Error uploading file:', error);
        }
    };


    return (
        <Layout>
            <h1 className="text-3xl font-bold p-4 pt-8">Разрешителни</h1>
            <ProtectedRoute allowedRoles={[UserRole.ADMIN]} deniedMessage="">
                <div className="border border-blue-500 p-4 rounded shadow-md">
                    <div className="mb-6">
                        <p className="text-lg mb-2">За да качите файл кликнете на бутона по-долу и изберете файл от вашия компютър.</p>
                        <input type="file" onChange={handleFileUpload} className="block w-full text-sm text-gray-600
          file:mr-4 file:py-2 file:px-4
          file:border-0
          file:text-sm file:font-semibold
          file:bg-blue-500 file:text-white
          hover:file:bg-blue-600"/>
                    </div>
                    <div>
                        <h3 className="text-lg font-semibold mb-2">Съществуващи файлове:</h3>
                        {files.length > 0 ? (
                            files.map((file, index) => (
                                <div key={index} className="flex items-center justify-between mb-2 p-2 hover:bg-blue-50 rounded">
                                    <a href={file.url} className="text-blue-600 hover:text-blue-800 visited:text-purple-600 underline" target="_blank" rel="noopener noreferrer">
                                        {file.name}
                                    </a>
                                    <button onClick={() => handleFileDelete(file.name)} className="ml-4 bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
                                        изтрий
                                    </button>
                                </div>
                            ))
                        ) : (
                            <p className="text-gray-500">Няма качени файлове.</p>
                        )}
                    </div>
                </div>

            </ProtectedRoute>

            <div style={{ width: '100%', height: 'calc(100vh - 100px)' }}> {/* Adjust the 100px based on your header/footer size */}
                {pdfFiles.map((file, index) => (
                    <> <p className="pt-2">
                        <a href={file.url} className="text-blue-600 hover:text-blue-800 visited:text-purple-600 underline" target='_blank'>
                            Свали: {file.name}
                        </a>
                    </p>
                        <div style={{ width: 'calc(100% - 1rem)', height: '100%' }} className='py-2'>
                            < object data={file.url} type="application/pdf" style={{ width: '100%', height: '100%' }}>
                                <p>Вашият браузър не поддържа PDFs файлове. Моля свалете файла за да го разгледате: <a href={file.url}>Свали {file.name}</a>.</p>
                                <p>Your browser does not support PDFs. Please download the PDF to view it: <a href={file.url}> {file.name}</a>.</p>
                            </object>
                        </div>
                    </>
                ))}
            </div>
        </Layout >
    );
};

export default PDFViewerPage;


export const getServerSideProps = async (context) => {
    const permitsFolder = path.join('public', 'content', 'permits');

    // Create folders if they do not exist
    if (!fs.existsSync(permitsFolder)) {
        fs.mkdirSync(permitsFolder, { recursive: true });
    }
    //get all the files in the permits folder order them by date desc and display them
    const pdfFiles = fs.readdirSync(path.join(process.cwd(), permitsFolder)).map(file => {
        return {
            name: file,
            date: fs.statSync(path.join(process.cwd(), permitsFolder, file)).mtime,
            url: `/content/permits/${file}`
        };
    }).sort((a, b) => b.date - a.date)
        .map(file => {
            return {
                name: file.name,
                url: file.url
            };
        }
        );
    return {
        props: {
            pdfFiles
        }
    };
}