File size: 4,618 Bytes
d35c7df | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const HelpManagement = ({ isAdmin }) => {
const [helpContent, setHelpContent] = useState('');
const [isEditing, setIsEditing] = useState(false);
const [file, setFile] = useState(null);
useEffect(() => {
fetchHelpContent();
}, []);
const fetchHelpContent = async () => {
try {
const response = await axios.get('/api/help-content');
setHelpContent(response.data.content);
} catch (error) {
toast.error('Failed to load help content');
}
};
const handleFileUpload = (e) => {
const file = e.target.files[0];
if (file) {
setFile(file);
}
};
const handleImport = async () => {
if (!file) return;
try {
const formData = new FormData();
formData.append('file', file);
const response = await axios.post('/api/help-content/import', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
setHelpContent(response.data.content);
toast.success('Help content imported successfully');
setFile(null);
} catch (error) {
toast.error('Failed to import help content');
}
};
const handleSave = async () => {
try {
await axios.put('/api/help-content', { content: helpContent });
toast.success('Help content saved successfully');
setIsEditing(false);
} catch (error) {
toast.error('Failed to save help content');
}
};
return (
<div className="container mx-auto p-6">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-800 dark:text-white">Help Center</h2>
{isAdmin && (
<div className="flex space-x-3">
{!isEditing ? (
<button
onClick={() => setIsEditing(true)}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
>
Edit Content
</button>
) : (
<button
onClick={handleSave}
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
>
Save Changes
</button>
)}
</div>
)}
</div>
{isEditing ? (
<div className="space-y-4">
<div className="mb-4">
<ReactQuill
theme="snow"
value={helpContent}
onChange={setHelpContent}
modules={{
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }],
['link', 'image'],
['clean'],
],
}}
/>
</div>
<div className="border-t pt-4">
<h3 className="text-lg font-medium text-gray-800 dark:text-white mb-3">Import from File</h3>
<div className="flex items-center space-x-3">
<input
type="file"
accept=".html,.txt"
onChange={handleFileUpload}
className="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
file:rounded-md file:border-0
file:text-sm file:font-semibold
file:bg-blue-50 file:text-blue-700
hover:file:bg-blue-100"
/>
<button
onClick={handleImport}
disabled={!file}
className={`px-4 py-2 rounded-lg ${file ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-400'} text-white transition`}
>
Import
</button>
</div>
</div>
</div>
) : (
<div
className="prose dark:prose-invert max-w-none"
dangerouslySetInnerHTML={{ __html: helpContent }}
/>
)}
</div>
<ToastContainer position="bottom-right" autoClose={3000} />
</div>
);
};
export default HelpManagement; |