| 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; |
