🎯 الحل الاحترافي الحقيقي

🔥 إنشاء QuickViewModal واحد على مستوى التطبيق كله

بدل وضع المودال داخل كل صفحة، نضعه في مكان أعلى:

App
 ├── Navbar
 ├── Routes
 │    ├── Home
 │    ├── Books
 │    ├── Category
 │    └── BookDetails
 └── QuickViewModal  ← مودال واحد عالمي

App
 ├── Navbar
 ├── Routes
 │    ├── Home
 │    ├── Books
 │    ├── Category
 │    └── BookDetails
 └── QuickViewModal  ← مودال واحد عالمي

CSS

🧠 كيف نجعل أي كتاب في أي صفحة يفتح نفس المودال؟

لدينا خيارين احترافيين:

🟢 الخيار 1 (أنظف وأفضل هنا) → Context API

لأن Quick View:

UI state
ليس بيانات تجارية
ليس شيء يحتاج Redux

🏗 الخطوة 1: إنشاء QuickViewContext

📁 context/QuickViewContext.jsx

import { createContext, useState } from "react";
export const QuickViewContext = createContext();
export const QuickViewProvider = ({ children }) => { 
const [selectedBook, setSelectedBook] = useState(null); 
const openQuickView = (book) => {
    setSelectedBook(book);
  }; 
   const closeQuickView = () => {
    setSelectedBook(null);
  };  
  return (
    <QuickViewContext.Provider
      value={{ selectedBook, openQuickView, closeQuickView }}
    >
      {children}
    </QuickViewContext.Provider>
  );
};

import { createContext, useState } from "react";
export const QuickViewContext = createContext();
export const QuickViewProvider = ({ children }) => { 
const [selectedBook, setSelectedBook] = useState(null); 
const openQuickView = (book) => {
    setSelectedBook(book);
  }; 
   const closeQuickView = () => {
    setSelectedBook(null);
  };  
  return (
    <QuickViewContext.Provider
      value={{ selectedBook, openQuickView, closeQuickView }}
    >
      {children}
    </QuickViewContext.Provider>
  );
};

JavaScript

🏗 الخطوة 2: لف التطبيق به

في main.jsx:

<Provider store={store}>
  <QuickViewProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </QuickViewProvider>
</Provider>

<Provider store={store}>
  <QuickViewProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </QuickViewProvider>
</Provider>

JavaScript

🏗 الخطوة 3: إنشاء مودال واحد عالمي

📁 components/QuickViewModal.jsx

import { useContext } from "react";<br>import { QuickViewContext } from "../context/QuickViewContext";function QuickViewModal() {  const { selectedBook, closeQuickView } = useContext(QuickViewContext);  if (!selectedBook) return null;  return (<br>    <div className="modal show d-block"><br>      <div className="modal-dialog modal-lg"><br>        <div className="modal-content">          <div className="modal-header"><br>            <h5>{selectedBook.name}</h5><br>            <button<br>              className="btn-close"<br>              onClick={closeQuickView}<br>            /><br>          </div>          <div className="modal-body"><br>            <p>{selectedBook.description}</p><br>            <h4>{selectedBook.price} $</h4><br>          </div>        </div><br>      </div><br>    </div><br>  );<br>}export default QuickViewModal;

import { useContext } from "react";<br>import { QuickViewContext } from "../context/QuickViewContext";function QuickViewModal() {  const { selectedBook, closeQuickView } = useContext(QuickViewContext);  if (!selectedBook) return null;  return (<br>    <div className="modal show d-block"><br>      <div className="modal-dialog modal-lg"><br>        <div className="modal-content">          <div className="modal-header"><br>            <h5>{selectedBook.name}</h5><br>            <button<br>              className="btn-close"<br>              onClick={closeQuickView}<br>            /><br>          </div>          <div className="modal-body"><br>            <p>{selectedBook.description}</p><br>            <h4>{selectedBook.price} $</h4><br>          </div>        </div><br>      </div><br>    </div><br>  );<br>}export default QuickViewModal;

JavaScript

🏗 الخطوة 4: وضعه مرة واحدة داخل App

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        ...
      </Routes>    
      
      <QuickViewModal />
    </>
  );
}

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        ...
      </Routes>    
      
      <QuickViewModal />
    </>
  );
}

JavaScript

🏗 الخطوة 5: استخدامه في أي Book component

داخل أي مكان:

import { useContext } from "react";
import { QuickViewContext } from "../../context/QuickViewContext";
const Book = ({ book }) => { 
const { openQuickView } = useContext(QuickViewContext);
  return (
  
    <button
      className="btn btn-outline-primary"
      onClick={() => openQuickView(book)}
    >
      عرض سريع
    </button>
  );
};

import { useContext } from "react";
import { QuickViewContext } from "../../context/QuickViewContext";
const Book = ({ book }) => { 
const { openQuickView } = useContext(QuickViewContext);
  return (
  
    <button
      className="btn btn-outline-primary"
      onClick={() => openQuickView(book)}
    >
      عرض سريع
    </button>
  );
};

JavaScript

🔥 الآن أي كتاب في أي صفحة يفتح نفس المودال.

🧠 لماذا هذا احترافي؟

ميزة	لماذا مهم
مودال واحد فقط	DOM خفيف
لا تكرار	نظيف
يعمل في كل الصفحات	قابل للتوسع
لا Redux	بسيط
لا API إضافي	سريع

🟣 هل يمكن استخدام Redux بدل Context؟

نعم، لكن:

غير ضروري
سيزيد التعقيد
Quick View مجرد UI

Redux يستخدم لبيانات الأعمال (cart, auth, orders)

🏆 الآن لديك معمارية متجر حقيقي

أي كتاب في أي مكان:

openQuickView(book)
        ↓
Context
        ↓
QuickViewModal
        ↓
عرض البيانات

openQuickView(book)
        ↓
Context
        ↓
QuickViewModal
        ↓
عرض البيانات

JavaScript

🔥 نظيف – خفيف – قابل للتوسع