\n {/* Use pagination style */}\n setPage(p => Math.max(p - 1, 1))}\n disabled={page === 1}\n style={styles.paginationButton} // Use paginationButton style\n aria-label=\"Previous Page\"\n >\n Previous\n \n

\n {/* Inline text style */}\n Page {page} of {totalPages > 0 ? totalPages : 1}\n

\n setPage(p => Math.min(p + 1, totalPages))}\n disabled={page === totalPages || totalPages === 0}\n style={styles.paginationButton} // Use paginationButton style\n aria-label=\"Next Page\"\n >\n Next\n \n

\n);\n// Main Component for the News Article (Contents) Tab\nexport function NewsArticleTab({ user }: { user: CurrentUser | null }) {\n const [articles, setArticles] = useState([]);\n const [title, setTitle] = useState(\"\");\n const [mainIdea, setMainIdea] = useState(\"\");\n const [link, setLink] = useState(\"\");\n const [isPublishedNew, setIsPublishedNew] = useState(0); // New state for the submission form\n // Filters - Adapted for News Articles\n const [titleFilter, setTitleFilter] = useState(\"\");\n const [authorFilter, setAuthorFilter] = useState(\"\"); // This filter still searches by username\n const [dateFilter, setDateFilter] = useState(\"\");\n const [page, setPage] = useState(1);\n const itemsPerPage = 8;\n const [successMessage, setSuccessMessage] = useState(\"\");\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(false); // For submit button state\n // State for edit modal\n const [isEditModalOpen, setIsEditModalOpen] = useState(false);\n const [editFormData, setEditFormData] = useState<{\n id: number | null; // **CORRECTED: id is number**\n title: string;\n mainIdea: string;\n link: string;\n employee_id: number | null; // Store the original employee_id (read-only)\n authorFullName: string; // Store the full name for display (read-only)\n isPublished: number;\n comments: string;\n publishedAt: string;\n }>({\n id: null,\n title: \"\",\n mainIdea: \"\",\n link: \"\",\n employee_id: null,\n authorFullName: \"\",\n isPublished: 0,\n comments: \"\",\n publishedAt: \"\",\n });\n const [isSavingEdit, setIsSavingEdit] = useState(false); // To disable save button while saving\n const [editModalError, setEditModalError] = useState(\"\"); // Error specific to the edit modal\n // --- Moved fetchArticles outside useEffect ---\n const fetchArticles = async () => {\n try {\n const response = await fetch(\"/fetch-news\");\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data = await response.json();\n setArticles(data.articles || []);\n } catch (error: any) {\n console.error(\"Failed to fetch articles:\", error);\n setErrorMessage(\"Failed to load articles. Please try again later.\");\n }\n };\n // --- End Move ---\n // Effect to fetch articles on mount\n useEffect(() => {\n fetchArticles(); // Now fetchArticles is defined in the component's scope\n }, []); // Empty dependency array means this runs only once on mount\n // Effect to clear success/error messages after a delay\n useEffect(() => {\n if (successMessage || errorMessage) {\n const timer = setTimeout(() => {\n setSuccessMessage(\"\");\n setErrorMessage(\"\");\n }, 5000);\n return () => clearTimeout(timer);\n }\n }, [successMessage, errorMessage]);\n // Effect to clear edit modal error after a delay\n useEffect(() => {\n if (editModalError) {\n const timer = setTimeout(() => {\n setEditModalError(\"\");\n }, 5000); // Clear modal error after 5 seconds\n return () => clearTimeout(timer);\n }\n }, [editModalError]);\n const filteredArticles = useMemo(() => {\n return articles.filter(article =>\n article.title.toLowerCase().includes(titleFilter.toLowerCase())\n // Author filter now searches by the author_username\n && (article.author_username?.toLowerCase().includes(authorFilter.toLowerCase()) || \"\")\n && (!dateFilter || new Date(article.created_at).toLocaleDateString(\"en-CA\") === dateFilter)\n );\n }, [articles, titleFilter, authorFilter, dateFilter]);\n const totalPages = Math.ceil(filteredArticles.length / itemsPerPage); // Use itemsPerPage\n useEffect(() => {\n if (page > totalPages && totalPages > 0) {\n setPage(1);\n } else if (totalPages === 0 && page !== 1) { // Ensure page is 1 if no results\n setPage(1);\n }\n }, [filteredArticles, totalPages, page]);\n const paginatedArticles = useMemo(() => {\n const currentPage = Math.max(1, page);\n const startIndex = (currentPage - 1) * itemsPerPage; // Use itemsPerPage\n return filteredArticles.slice(startIndex, startIndex + itemsPerPage); // Use itemsPerPage\n }, [filteredArticles, page, itemsPerPage]); // Depend on itemsPerPage\n const submitArticle = async () => {\n // Updated validation logic\n if (!title.trim() || !mainIdea.trim()) {\n setErrorMessage(\"Please fill in Content Title and About content.\");\n setSuccessMessage(\"\");\n return;\n }\n if (isPublishedNew === 1 && !link.trim()) { // If published, link is required\n setErrorMessage(\"URL Link is required for published content.\");\n setSuccessMessage(\"\");\n return;\n }\n if (isPublishedNew === 1 && link.trim()) { // Only validate URL if it's present and published\n try {\n new URL(link);\n } catch (_) {\n setErrorMessage(\"Please enter a valid URL (e.g., https://example.com).\");\n setSuccessMessage(\"\");\n return;\n }\n }\n setIsSubmitting(true); // Set submitting state\n setSuccessMessage(\"\");\n setErrorMessage(\"\");\n try {\n // **REMOVED: newId = crypto.randomUUID();**\n // The database will auto-increment the ID.\n const response = await fetch(\"/submit-news\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n // **REMOVED: id: newId,**\n title,\n mainIdea,\n link: isPublishedNew === 1 ? link : null, // Send link only if published, otherwise null\n employee_id: user?.id, // Send the logged-in user's employee_id\n isPublished: isPublishedNew, // Include the new state\n comments: null,\n publishedAt: isPublishedNew === 1 ? new Date().toISOString() : null, // Set publishedAt only if published\n }),\n });\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({}));\n throw new Error(errorData.message || `HTTP error! status: ${response.status}`);\n }\n const result = await response.json();\n if (result.success && result.article) {\n setSuccessMessage(\"✅ Article submitted successfully!\");\n setErrorMessage(\"\");\n setTitle(\"\");\n setMainIdea(\"\");\n setLink(\"\");\n setIsPublishedNew(0); // Reset publish status\n fetchArticles(); // <-- Refetch the entire list to get author names\n } else {\n throw new Error(result.message || \"Submission failed. Unknown error.\");\n }\n } catch (error: any) {\n console.error(\"Failed to submit article:\", error);\n setErrorMessage(`❌ Submission failed: ${error.message}`);\n setSuccessMessage(\"\");\n } finally {\n setIsSubmitting(false); // Reset submitting state\n }\n };\n // Renamed deleteArticle to handleDelete for consistency\n const handleDelete = async (id: number) => { // **CORRECTED: id type to number**\n const confirmed = window.confirm(\"Are you sure you want to delete this article?\");\n if (!confirmed) return;\n setSuccessMessage(\"\");\n setErrorMessage(\"\");\n try {\n const response = await fetch(`/delete-news?id=${id}`, {\n method: \"DELETE\",\n });\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({}));\n throw new Error(errorData.message || `HTTP error! status: ${response.status}`);\n }\n const result = await response.json();\n if (result.success) {\n setArticles(prev => prev.filter(article => article.id !== id));\n setSuccessMessage(\"🗑 Article deleted successfully!\");\n setErrorMessage(\"\");\n } else {\n throw new Error(result.message || \"Deletion failed. Unknown error.\");\n }\n } catch (error: any) {\n console.error(\"Failed to delete article:\", error);\n setErrorMessage(`❌ Failed to delete article: ${error.message}`);\n setSuccessMessage(\"\");\n }\n };\n // Function to open the edit modal - Similar pattern to MediaMonitoringTab\n const handleEditClick = (article: Article) => {\n setEditFormData({\n id: article.id, // This will now be a number\n title: article.title,\n mainIdea: article.main_idea || \"\",\n link: article.link,\n employee_id: article.employee_id,\n authorFullName: `${article.firstName || article.author_username || \"Unknown\"} ${article.fatherName || \"\"}`.trim(),\n isPublished: article.is_published,\n comments: article.comments || \"\",\n publishedAt: article.published_at ? new Date(article.published_at).toISOString().split(\"T\")[0] : \"\",\n });\n setIsEditModalOpen(true);\n setSuccessMessage(\"\"); // Clear main messages when opening modal\n setErrorMessage(\"\");\n setEditModalError(\"\"); // Clear modal-specific error\n };\n // Function to close the edit modal - Similar pattern to MediaMonitoringTab\n const handleCloseEditModal = () => {\n setIsEditModalOpen(false);\n setEditFormData({\n id: null,\n title: \"\",\n mainIdea: \"\",\n link: \"\",\n employee_id: null,\n authorFullName: \"\",\n isPublished: 0,\n comments: \"\",\n publishedAt: \"\",\n });\n setIsSavingEdit(false); // Reset saving state\n setEditModalError(\"\"); // Clear modal-specific error on close\n };\n // Function to handle changes in the edit modal form - Similar pattern to MediaMonitoringTab\n const handleEditFormChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setEditFormData(prevState => ({\n ...prevState,\n [name]: name === \"isPublished\" ? Number(value) : value,\n }));\n };\n // Function to save the edited entry\n const handleSaveEdit = async () => {\n // Validate required fields from editFormData\n if (!editFormData.title.trim() || !editFormData.mainIdea.trim()) {\n setEditModalError(\"Please fill in Content Title and About content.\");\n return;\n }\n if (editFormData.isPublished === 1 && !editFormData.link.trim()) {\n setEditModalError(\"URL Link is required for published content.\");\n return;\n }\n if (editFormData.isPublished === 1 && editFormData.link.trim()) {\n try {\n new URL(editFormData.link);\n } catch (_) {\n setEditModalError(\"Please enter a valid URL (e.g., https://example.com).\");\n return;\n }\n }\n setIsSavingEdit(true);\n setEditModalError(\"\"); // Clear previous errors\n try {\n const response = await fetch(\"/edit-news\", { // Target the /edit-news endpoint\n method: \"PUT\", // Using PUT for updates\n headers: {\n \"Content-Type\": \"application/json\",\n },\n // Send relevant data from editFormData\n body: JSON.stringify({\n id: editFormData.id, // id is correctly a number\n title: editFormData.title,\n mainIdea: editFormData.mainIdea, // Send mainIdea (camelCase)\n link: editFormData.isPublished === 1 ? editFormData.link : null, // Conditionally send link\n isPublished: editFormData.isPublished,\n comments: editFormData.comments,\n publishedAt: editFormData.isPublished === 1 ? editFormData.publishedAt : null, // Conditionally send publishedAt\n }),\n });\n const result = await response.json();\n if (response.ok && result.success && result.article) {\n // Update the articles state with the updated article received from the backend\n setArticles(prevArticles => prevArticles.map(art => art.id === result.article.id ? result.article : art));\n setSuccessMessage(\"✅ Article updated successfully!\");\n handleCloseEditModal(); // Close modal on success\n setErrorMessage(\"\"); // Clear any main error message\n } else {\n setEditModalError(result.message || \"Failed to update article.\");\n setSuccessMessage(\"\"); // Clear any main success message\n setErrorMessage(\"\"); // Clear any main error message\n }\n } catch (error: any) {\n console.error(\"Error updating article:\", error);\n setEditModalError(`❌ An error occurred while updating the article: ${error.message}`);\n setSuccessMessage(\"\"); // Clear any main success message\n setErrorMessage(\"\"); // Clear any main error message\n } finally {\n setIsSavingEdit(false);\n }\n };\n // Function to clear all filters\n const clearFilters = () => {\n setTitleFilter(\"\");\n setAuthorFilter(\"\");\n setDateFilter(\"\");\n setPage(1); // Reset to first page when clearing filters\n };\n return (\n

\n {/* Use container style */}\n {/* Submission Form */}\n

\n {/* Keep specific text style */}\n 📝 Submit Your Content\n

\n {/* Messages outside form */}\n {successMessage &&

{successMessage}

}\n {errorMessage &&

{errorMessage}

}\n

\n {/* Use form style */}\n setTitle(e.target.value)}\n />\n

setMainIdea(e.target.value)}\n        />\n        {/* New dropdown for is_published */}\n        <div>\n          <label style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}>\n            Publish Status:\n          </label>\n          <select\n            name=\"isPublished\"\n            value={isPublishedNew}\n            onChange={(e) => setIsPublishedNew(Number(e.target.value))}\n            style={styles.select} // Use select style\n            aria-label=\"Publish status\"\n          >\n            <option value={0}>Draft</option>\n            <option value={1}>Published</option>\n          </select>\n        </div>\n        {/* Conditional rendering for link input */}\n        {isPublishedNew === 1 && ( // Only show if 'Published' is selected\n          <div>\n            <label style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}>\n              URL Link (if published):\n            </label>\n            <input\n              type=\"url\"\n              placeholder=\"https://example.com\" // Changed text\n              aria-label=\"URL Link (if published)\"\n              style={styles.input} // Use input style\n              value={link}\n              onChange={(e) => setLink(e.target.value)}\n            />\n          </div>\n        )}\n        <button\n          onClick={submitArticle}\n          style={{ ...styles.button, opacity: isSubmitting ? 0.6 : 1 }} // Use button style + opacity\n          disabled={isSubmitting}\n        >\n          {isSubmitting ? \"Submitting...\" : \"📤 Submit Article\"}\n        </button>\n      </div>\n      {/* Filters Section */}\n      <div style={styles.filters}>\n        <input\n          type=\"text\"\n          placeholder=\"Filter by title...\"\n          aria-label=\"Filter by title\"\n          style={styles.filterInput}\n          value={titleFilter}\n          onChange={(e) => setTitleFilter(e.target.value)}\n        />\n        <input\n          type=\"text\"\n          placeholder=\"Filter by author...\"\n          aria-label=\"Filter by author\"\n          style={styles.filterInput}\n          value={authorFilter}\n          onChange={(e) => setAuthorFilter(e.target.value)}\n        />\n        <input\n          type=\"date\"\n          aria-label=\"Filter by date\"\n          style={styles.filterInput}\n          value={dateFilter}\n          onChange={(e) => setDateFilter(e.target.value)}\n        />\n        <button\n          onClick={clearFilters}\n          style={styles.filterButton}\n          aria-label=\"Clear all filters\"\n        >\n          🔄 Clear Filters\n        </button>\n      </div>\n      {/* Articles Table */}\n      <table style={styles.table}>\n        <thead>\n          <tr>\n            <th style={styles.tableHeader}>S/N</th>\n            <th style={styles.tableHeader}>Title</th>\n            <th style={styles.tableHeader}>Author</th>\n            <th style={styles.tableHeader}>Date</th>\n            <th style={styles.tableHeader}>Link</th>\n            <th style={styles.tableHeader}>Actions</th>\n          </tr>\n        </thead>\n        <tbody>\n          {paginatedArticles.length > 0\n            ? (\n              paginatedArticles.map((article, index) => (\n                <TableRow\n                  key={article.id}\n                  serialNumber={(page - 1) * itemsPerPage + index + 1}\n                  id={article.id}\n                  title={article.title}\n                  article={article}\n                  date={new Date(article.created_at).toLocaleDateString()}\n                  link={article.link}\n                  onDelete={handleDelete}\n                  onEdit={handleEditClick}\n                  currentUser={user || { id: 0, username: \"\", role: \"\" }}\n                />\n              ))\n            )\n            : (\n              <tr>\n                <td\n                  colSpan={6}\n                  style={{ ...styles.tableCell, textAlign: \"center\", fontStyle: \"italic\", color: \"#666\" }}\n                >\n                  No articles found matching your criteria.\n                </td>\n              </tr>\n            )}\n        </tbody>\n      </table>\n      {/* Pagination */}\n      {totalPages > 1 && (\n        <TablePagination\n          page={page}\n          setPage={setPage}\n          totalPages={totalPages}\n        />\n      )}\n      {/* Edit Modal */}\n      {isEditModalOpen && (\n        <div style={styles.modalOverlay} onClick={handleCloseEditModal}>\n          <div style={styles.modalContent} onClick={(e) => e.stopPropagation()}>\n            <h3 style={styles.modalTitle}>✏️ Edit Article</h3>\n            {/* Modal Error Message */}\n            {editModalError && (\n              <div style={styles.errorMessage}>\n                {editModalError}\n              </div>\n            )}\n            {/* Author field (read-only) */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Author:\n              </label>\n              <input\n                type=\"text\"\n                value={editFormData.authorFullName}\n                style={styles.modalReadOnlyInput}\n                readOnly\n                aria-label=\"Author (read-only)\"\n              />\n            </div>\n            {/* Title field */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Title: <span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <input\n                type=\"text\"\n                name=\"title\"\n                value={editFormData.title}\n                onChange={handleEditFormChange}\n                style={styles.modalInput}\n                placeholder=\"Enter article title\"\n                aria-label=\"Article title\"\n              />\n            </div>\n            {/* Main Idea field */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Main Idea: <span style={{ color: BRAND_COLORS.red }}>*</span>\n              </label>\n              <textarea\n                name=\"mainIdea\"\n                value={editFormData.mainIdea}\n                onChange={handleEditFormChange}\n                style={styles.modalTextarea}\n                placeholder=\"Enter main idea\"\n                aria-label=\"Main idea\"\n              />\n            </div>\n            {/* Published Status field */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Publish Status:\n              </label>\n              <select\n                name=\"isPublished\"\n                value={editFormData.isPublished}\n                onChange={handleEditFormChange}\n                style={styles.select}\n                aria-label=\"Publish status\"\n              >\n                <option value={0}>Draft</option>\n                <option value={1}>Published</option>\n              </select>\n            </div>\n            {/* Conditional Link field for Edit Modal */}\n            {editFormData.isPublished === 1 && (\n              <div>\n                <label\n                  style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n                >\n                  URL Link (if published):\n                </label>\n                <input\n                  type=\"url\"\n                  name=\"link\"\n                  value={editFormData.link}\n                  onChange={handleEditFormChange}\n                  style={styles.modalInput}\n                  placeholder=\"https://example.com\"\n                  aria-label=\"URL Link\"\n                />\n              </div>\n            )}\n            {/* Comments field */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Comments:\n              </label>\n              <textarea\n                name=\"comments\"\n                value={editFormData.comments}\n                onChange={handleEditFormChange}\n                style={styles.modalTextarea}\n                placeholder=\"Add comments...\"\n                aria-label=\"Comments\"\n              />\n            </div>\n            {/* Published At field (read-only for published articles, editable for drafts) */}\n            <div>\n              <label\n                style={{ display: \"block\", marginBottom: \"5px\", fontWeight: \"bold\", color: BRAND_COLORS.darkGreen }}\n              >\n                Published At:\n              </label>\n              <input\n                type=\"date\"\n                name=\"publishedAt\"\n                value={editFormData.publishedAt}\n                onChange={handleEditFormChange}\n                style={editFormData.isPublished === 1\n                  ? styles.modalReadOnlyInput\n                  : styles.modalInput}\n                readOnly={editFormData.isPublished === 1} // Read-only if published\n                aria-label=\"Published date\"\n              />\n            </div>\n            <div style={styles.modalActions}>\n              <button\n                onClick={handleSaveEdit}\n                style={{ ...styles.modalButton, ...styles.modalSaveButton, opacity: isSavingEdit ? 0.6 : 1 }}\n                disabled={isSavingEdit}\n                aria-label=\"Save changes\"\n              >\n                {isSavingEdit ? \"Saving...\" : \"💾 Save Changes\"}\n              </button>\n              <button\n                onClick={handleCloseEditModal}\n                style={{ ...styles.modalButton, ...styles.modalCancelButton }}\n                aria-label=\"Cancel edit\"\n              >\n                ✖ Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}","deleted","label",[172,154],"components","permalink","https://www.val.town/x/solomonferede/EEPPortal/code/components/newsArticle.tsx","extension","actionData","errors"]
</article></body></html>