توضيح بعض الأخطاء لموقع قمت برفعه على Netlify

مشكلة البحث:

الخطأ في عرض البحث بحيث يعمل البحث فقط إذا تم إدخال الكلمة بالكامل. على سبيل المثال، عند الكتابة "p"، لا يعرض أي شيء.

هذا الخطأ يحدث لأن استخدام الدالة setMeals() في الدالة getSearchedMeals() يعيد قائمة الوجبات إلى حالتها الأصلية، مما يعني أن العرض الحالي للوجبات سيتم إزالته. يجب استخدام حالة جديدة تتضمن النتائج المصفاة دون تغيير الحالة الأصلية لقائمة الوجبات.

لإصلاح هذا الخطأ، يمكن تعديل الدالة getSearchedMeals() على النحو التالي:

const getSearchedMeals = (e) => {
  e.preventDefault();
  if (searchMeal !== "") {
    const searched = meals.filter(meal =>
      meal.title.toLowerCase().includes(searchMeal.toLowerCase())
    );
    setShowMeals(true);
    setMeals(searched);
  } else {
    setShowMeals(false);
  }
  setSearchMeal("");
};

مشكلة تصفية النوع:

تحدث هذه المشكلة لأنه في كل مرة تقوم فيها بتحديد الفئة، تقوم الدالة setMeals() بتعيين القائمة المفلترة إلى قائمة من الوجبات التي تحتوي فقط على النوع الذي تم تحديده. لحل هذه المشكلة، يمكنك استخدام مصفوفة أخرى لتخزين القائمة الأصلية من الوجبات وتقوم بتصفيتها بناءً على النوع وتعيين القائمة المعروضة إلى النتيجة.

يمكنك تعديل الكود كالتالي:

function App() {
    const [searchMeal, setSearchMeal] = useState("");
    const [meals, setMeals] = useState([]);
    const [showMeals, setShowMeals] = useState(false);
    const [originalMeals, setOriginalMeals] = useState([]); // إضافة قائمة الوجبات الأصلية

    // Fetch Meals API
    const getMeals = async () => {
        const response = await fetch(
            "https://www.themealdb.com/api/json/v1/1/search.php?s"
        );
        const data = await response.json();
        const findMeals = data.meals.map((meal) => ({
            id: meal.idMeal,
            title: meal.strMeal,
            image: meal.strMealThumb,
            rate: (Math.random() * 5).toFixed(2),
            category: meal.strCategory,
            description: meal.strYoutube,
        }));
        setMeals(findMeals);
    };
    useEffect(() => {
        getMeals();
    }, []);

    // Display Searched Meals
   const getSearchedMeals = (e) => {
  e.preventDefault();
  if (searchMeal !== "") {
    const searched = meals.filter(meal =>
      meal.title.toLowerCase().includes(searchMeal.toLowerCase())
    );
    setShowMeals(true);
    setMeals(searched);
  } else {
    setShowMeals(false);
  }
  setSearchMeal("");
};

    // filter by category
    const [selected, setSelected] = useState([]);
    const categories = meals
        .map((meal) => meal.category)
        .reduce((acc, item) => (acc.includes(item) ? acc : [...acc, item]), []);
    const handleCheck = (e) => {
        const { value, checked } = e.target;
        if (checked === true) {
            setSelected((pre) => [...pre, value]);
        } else {
            setSelected((pre) => [...pre.filter((item) => item !== value)]);
        }
    };

    useEffect(() => {
        const filtered = meals.filter((item) =>
            selected.includes(item.category)
        );
        setMeals(filtered);
    }, [selected]);

    // Filter By Rate

    return (
        <div className="container">
            <Search
                searchMeal={searchMeal}
                setSearchMeal={setSearchMeal}
                getSearchedMeals={getSearchedMeals}
            />
            <div className="main">
                {showMeals && (
                    <FilterMeal
                        categories={categories}
                        handleCheck={handleCheck}
                    />
                )}
                {showMeals && <Meals meals={meals} searchMeal={searchMeal} />}
            </div>
        </div>
    );
}
export default App;