اذهب إلى المحتوى
  • 0

الفلترة بواسطة تقييم منتج محدد

محمود_سعداوي

السؤال

السلام عليكم.

أريد القيام بفلترة حسب التقييم (تقييم المنتج في شكل star rating)

Capture.JPG.e5ffd036c186fbfae862a770811cc659.JPG

الكود الذي قمت به:

import '../styles/App.css';
import Header from './Header'
import Aside from './Aside'
import Product from './Product'
import data from './data'
import {useState} from 'react'

function App() {
  const [checked, setChecked] = useState([])
  const [numLikes, setNumLikes] = useState(0)

  // define products categories
  const categories = data.reduce(
		(acc, elem) =>
			acc.includes(elem.category) ? acc : acc.concat(elem.category),
		[]
  )
  const handleCheck = (event) => {
    if (checked.includes(event.target.value)) {  
      let updated = checked.filter(item => item !== event.target.value) 
      setChecked(updated) 
    } else {
      let updated = [...checked, event.target.value]
      setChecked(updated)
    }
  }

  // add To Favorites
  const handleLike = (el) => {
    if (el.target.className.includes("toggle-like-btn-icon")) {
      setNumLikes(numLikes - 1)
      el.target.classList.toggle('toggle-like-btn-icon')
    } else {
      setNumLikes(numLikes + 1)
      el.target.classList.toggle('toggle-like-btn-icon')
    }
  }

  // filter by rating
  const [currentValue, setCurrentValue] = useState(0);
  const handleRateClick = value => {
    setCurrentValue(value)
    filterByRating()
  }
  const filterByRating = () =>{
    // console.log(currentValue);
    let filtered = data.filter(prod => Math.round(prod.rate) === currentValue)
    setChecked(filtered)
    console.log(filtered);
  }

  return (
    <div className="App">
      <Header
        numLikes = {numLikes}
      />
      <div className='main'>
        <Aside
          categories = { categories }
          handleCheck = {handleCheck}
          handleRateClick = {handleRateClick}
          currentValue = {currentValue}
        />
        {
          <div className='products-section'>
            {
              data.map(product => 
                checked.length === 0
                 ? (
                <Product
                  key = {product.id}
                  id = {product.id}
                  title = {product.title}
                  img = {product.img}
                  price = {product.price}
                  rating = {product.rate}
                  handleLike = {handleLike}
                />
                ) : checked.includes(product.category)
                ? (
                         <Product
                             key = {product.id}
                             id = {product.id}
                             title = {product.title}
                             img = {product.img}
                             price = {product.price}
                             rating = {product.rate}
                         />
                  ) : []
              )
            }
          </div>
        }
      </div>
    </div>
  );
}

export default App;

شكرا على المساعدة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 35 دقائق مضت قال محمود سعداوي:

عندما أضغط على النجمة الثالثة مثلا لا تظهر المنتجات التي تقييمها يكون ثلاث نجمات

على ما يبدو ان المشكلة بسبب كون ال state لمسماة filtered تستخدم من اجل الـ category فقط وبالتالي فلا تستطيع استخدامها من اجل التقييم.

وإذا اردت تطبيق فكرة النجوم يجب انشاء state جديدة ولتكن stars  :

const [stars, setStars] = useState(-1);

وان تعدل الوظيفة لتصبح :

  const filterByRating = () =>{
       setStars(currentValue)
  }

ونضيف الوظيفة التالية والخاصة بعملية الفلترة :

const filterTheData = () => {
    const filteredByCategory = checked.length === 0 ?
          data :
          data.filter(product => checked.includes(product.category));
    const filteredData = stars === -1 ?
          filteredByCategory     : 
          filteredByCategory.filter(product => Math.round(product.rate) === stars);
    return filteredData;
}

وبدلاً من الشروط التي كنا قد وضعنا في الـ return نبدلها للشكل التالي :

 return (
    <div className="App">
      <Header
        numLikes = {numLikes}
      />
      <div className='main'>
        <Aside
          categories = { categories }
          handleCheck = {handleCheck}
          handleRateClick = {handleRateClick}
          currentValue = {currentValue}
        />
        {
          <div className='products-section'>
            {
              filterTheData().map(product =>                
                <Product
                  key = {product.id}
                  id = {product.id}
                  title = {product.title}
                  img = {product.img}
                  price = {product.price}
                  rating = {product.rate}
                  handleLike = {handleLike}
                />              
            }
          </div>
        }
      </div>
    </div>
  );

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال عمر قره محمد:

ماهي المشكلة التي تواجهها تحديدا

عندما أضغط على النجمة الثالثة مثلا لا تظهر المنتجات التي تقييمها يكون ثلاث نجمات

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 ساعات قال عمر قره محمد:

على ما يبدو ان المشكلة بسبب كون ال state لمسماة filtered تستخدم من اجل الـ category فقط وبالتالي فلا تستطيع استخدامها من اجل التقييم.

وإذا اردت تطبيق فكرة النجوم يجب انشاء state جديدة ولتكن stars  :


const [stars, setStars] = useState(-1);

وان تعدل الوظيفة لتصبح :


  const filterByRating = () =>{
       setStars(currentValue)
  }

ونضيف الوظيفة التالية والخاصة بعملية الفلترة :


const filterTheData = () => {
    const filteredByCategory = checked.length === 0 ?
          data :
          data.filter(product => checked.includes(product.category));
    const filteredData = stars === -1 ?
          filteredByCategory     : 
          filteredByCategory.filter(product => Math.round(product.rate) === stars);
    return filteredData;
}

وبدلاً من الشروط التي كنا قد وضعنا في الـ return نبدلها للشكل التالي :


 return (
    <div className="App">
      <Header
        numLikes = {numLikes}
      />
      <div className='main'>
        <Aside
          categories = { categories }
          handleCheck = {handleCheck}
          handleRateClick = {handleRateClick}
          currentValue = {currentValue}
        />
        {
          <div className='products-section'>
            {
              filterTheData().map(product =>                
                <Product
                  key = {product.id}
                  id = {product.id}
                  title = {product.title}
                  img = {product.img}
                  price = {product.price}
                  rating = {product.rate}
                  handleLike = {handleLike}
                />              
            }
          </div>
        }
      </div>
    </div>
  );

 

شكرا أخي 

هناك مشكل بسيط هو أن تفعيل الفلترة بواسطة تقييم النجوم يحدث بعد النقر من المرة الثانية

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ الآن قال محمود سعداوي:

شكرا أخي 

هناك مشكل بسيط هو أن تفعيل الفلترة بواسطة تقييم النجوم يحدث بعد النقر من المرة الثانية

هل يمكنك مشاركة ملف الـ src حتى استطيع الاطلاع على المشكلة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...