{t('tools.drugsList.noResults')}
{category.category}
{category.list.length} {t('tools.drugsList.items')}{t('tools.drugsList.drugName')} | {t('tools.drugsList.manufacturer')} |
---|---|
{drug.name} | {drug.factory} |
import React, { useState, useEffect } from 'react';
import { useScrollToTop } from '../hooks/useScrollToTop';
import '../styles/DrugsList.css';
import drugs from '../data/original-drugs-chn.json';
import SEO from '../components/SEO';
import { useTranslation } from '../js/i18n';
import { usePageLoading } from '../hooks/usePageLoading';
import LoadingOverlay from './LoadingOverlay';
const DrugsList = () => {
useScrollToTop();
const { t } = useTranslation();
const isLoading = usePageLoading();
const [searchTerm, setSearchTerm] = useState('');
const [selectedCategory, setSelectedCategory] = useState('all');
const [isSearchFocused, setIsSearchFocused] = useState(false);
// Filter drugs based on search term and category
const filteredDrugs = drugs
.filter(category => selectedCategory === 'all' || category.category === selectedCategory)
.map(category => ({
...category,
list: category.list.filter(drug =>
drug.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
drug.factory.toLowerCase().includes(searchTerm.toLowerCase())
)
}))
.filter(category => category.list.length > 0);
const totalDrugs = drugs.reduce((acc, curr) => acc + curr.list.length, 0);
const filteredTotalDrugs = filteredDrugs.reduce((acc, curr) => acc + curr.list.length, 0);
// Add schema.org structured data for SEO
useEffect(() => {
const schema = {
"@context": "https://schema.org",
"@type": "Dataset",
"name": t('tools.drugsList.title'),
"description": t('tools.drugsList.description'),
"keywords": ["drugs", "medicine", "China", "NMPA", "pharmaceutical"],
"url": "https://fishersama.com/drugs-list",
"creator": {
"@type": "Organization",
"name": "National Medical Products Administration",
"url": "https://www.nmpa.gov.cn/"
},
"dateModified": new Date().toISOString().split('T')[0],
"license": "https://www.nmpa.gov.cn/",
"numberOfItems": totalDrugs
};
const script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(schema);
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}, [t, totalDrugs]);
return (
<>
{t('tools.drugsList.description')}
{t('tools.drugsList.noResults')}
{t('tools.drugsList.drugName')} | {t('tools.drugsList.manufacturer')} |
---|---|
{drug.name} | {drug.factory} |