218 lines
8.6 KiB
TypeScript
218 lines
8.6 KiB
TypeScript
"use client";
|
|
import { useState } from 'react';
|
|
import { useKnowledgeBaseCategories, useFeaturedArticles, useKnowledgeBaseArticles } from '@/lib/hooks/useSupport';
|
|
import KnowledgeBaseArticleModal from './KnowledgeBaseArticleModal';
|
|
|
|
const KnowledgeBase = () => {
|
|
const { categories, loading: categoriesLoading } = useKnowledgeBaseCategories();
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
|
const [selectedArticleSlug, setSelectedArticleSlug] = useState<string | null>(null);
|
|
|
|
// Fetch all articles (for browsing and category filtering)
|
|
const { articles: allArticles, loading: allArticlesLoading } = useKnowledgeBaseArticles();
|
|
|
|
// Fetch featured articles (for default view)
|
|
const { articles: featuredArticles, loading: featuredLoading } = useFeaturedArticles();
|
|
|
|
// Determine which articles to display
|
|
let displayArticles = featuredArticles;
|
|
let isLoading = featuredLoading;
|
|
let headerText = 'Featured Articles';
|
|
|
|
if (searchTerm) {
|
|
// If searching, filter all articles by search term
|
|
displayArticles = allArticles.filter(article =>
|
|
article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
article.summary.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
article.content.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
isLoading = allArticlesLoading;
|
|
headerText = 'Search Results';
|
|
} else if (selectedCategory) {
|
|
// If a category is selected, filter articles by that category
|
|
displayArticles = allArticles.filter(article => article.category_slug === selectedCategory);
|
|
isLoading = allArticlesLoading;
|
|
const categoryName = categories.find(cat => cat.slug === selectedCategory)?.name || 'Category';
|
|
headerText = `${categoryName} Articles`;
|
|
}
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// The search is already being performed by the hook
|
|
};
|
|
|
|
const filteredCategories = selectedCategory
|
|
? categories.filter(cat => cat.slug === selectedCategory)
|
|
: categories;
|
|
|
|
return (
|
|
<div className="knowledge-base">
|
|
<div className="row justify-content-center">
|
|
<div className="col-12 col-lg-10">
|
|
<div className="form-header text-center">
|
|
<h2>Knowledge Base</h2>
|
|
<p>Find answers to frequently asked questions and explore our documentation.</p>
|
|
</div>
|
|
|
|
{/* Search Bar */}
|
|
<form onSubmit={handleSearch} className="kb-search-form">
|
|
<div className="search-input-group">
|
|
<i className="fa-solid fa-search search-icon"></i>
|
|
<input
|
|
type="text"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
placeholder="Search articles, topics, or keywords..."
|
|
className="form-control"
|
|
/>
|
|
{searchTerm && (
|
|
<button
|
|
type="button"
|
|
className="clear-search"
|
|
onClick={() => setSearchTerm('')}
|
|
aria-label="Clear search"
|
|
>
|
|
<i className="fa-solid fa-times"></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
|
|
{/* Categories */}
|
|
{!searchTerm && (
|
|
<div className="kb-categories">
|
|
<h3>Browse by Category</h3>
|
|
{categoriesLoading ? (
|
|
<div className="loading-state">
|
|
<div className="spinner-border" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="row g-4">
|
|
{Array.isArray(categories) && categories.map(category => (
|
|
<div key={category.id} className="col-md-6 col-lg-4">
|
|
<div
|
|
className="category-card"
|
|
onClick={() => setSelectedCategory(category.slug)}
|
|
style={{ borderLeftColor: category.color }}
|
|
>
|
|
<div
|
|
className="category-icon"
|
|
style={{ color: category.color }}
|
|
>
|
|
<i className={`fa-solid ${category.icon}`}></i>
|
|
</div>
|
|
<div className="category-content">
|
|
<h4>{category.name}</h4>
|
|
<p>{category.description}</p>
|
|
<div className="category-meta">
|
|
<span className="article-count">
|
|
{category.article_count} {category.article_count === 1 ? 'article' : 'articles'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Featured/Search Results Articles */}
|
|
<div className="kb-articles">
|
|
<div className="articles-header">
|
|
<div className="d-flex align-items-center justify-content-between">
|
|
<h3>{headerText}</h3>
|
|
{selectedCategory && !searchTerm && (
|
|
<button
|
|
className="btn btn-outline-primary btn-sm"
|
|
onClick={() => setSelectedCategory(null)}
|
|
>
|
|
<i className="fa-solid fa-arrow-left me-2"></i>
|
|
Back to All Articles
|
|
</button>
|
|
)}
|
|
</div>
|
|
{searchTerm && (
|
|
<p className="search-info">
|
|
Found {displayArticles.length} {displayArticles.length === 1 ? 'article' : 'articles'} for "{searchTerm}"
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="loading-state">
|
|
<div className="spinner-border" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
) : displayArticles.length === 0 ? (
|
|
<div className="empty-state">
|
|
<i className="fa-solid fa-search empty-icon"></i>
|
|
<h4>No articles found</h4>
|
|
<p>
|
|
{searchTerm
|
|
? `We couldn't find any articles matching "${searchTerm}". Try different keywords.`
|
|
: 'No articles available at the moment.'}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="articles-list">
|
|
{Array.isArray(displayArticles) && displayArticles.map(article => (
|
|
<div
|
|
key={article.id}
|
|
className="article-item"
|
|
onClick={() => setSelectedArticleSlug(article.slug)}
|
|
>
|
|
<div className="article-header">
|
|
<h4>{article.title}</h4>
|
|
{article.is_featured && (
|
|
<span className="featured-badge">
|
|
<i className="fa-solid fa-star me-1"></i>
|
|
Featured
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="article-summary">{article.summary}</p>
|
|
<div className="article-meta">
|
|
<span className="article-category">
|
|
<i className="fa-solid fa-folder me-1"></i>
|
|
{article.category_name}
|
|
</span>
|
|
<span className="article-stats">
|
|
<i className="fa-solid fa-eye me-1"></i>
|
|
{article.view_count} views
|
|
</span>
|
|
<span className="article-stats">
|
|
<i className="fa-solid fa-thumbs-up me-1"></i>
|
|
{article.helpful_count} helpful
|
|
</span>
|
|
</div>
|
|
<button className="article-read-more">
|
|
Read More <i className="fa-solid fa-arrow-right ms-2"></i>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Article Modal */}
|
|
{selectedArticleSlug && (
|
|
<KnowledgeBaseArticleModal
|
|
slug={selectedArticleSlug}
|
|
onClose={() => setSelectedArticleSlug(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KnowledgeBase;
|
|
|