fix: Resolve issues with restaurant filtering and sorting functionality

src/App.jsx

@@ -19,40 +19,48 @@ import NotFound from "./pages/NotFound";
 
 import { RestaurantsProvider } from "./context/RestaurantsContext";
 import { AuthProvider } from "./context/AuthContext";
+import { ToastProvider } from "./context/ToastContext";
+import ToastContainer from "./components/common/ToastContainer";
+import { useToastContext } from "./context/ToastContext";
 import "./styles/main.css";
 
+function AppContent() {
+  const { toasts, removeToast } = useToastContext();
 
+  return (
+    <div className="app-root">
+      <Navbar />
+      <main>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/restaurants" element={<RestaurantListPage />} />
+          <Route path="/restaurants/:id" element={<RestaurantDetailsPage />} />
+          <Route path="/search" element={<SearchResultsPage />} />
+          <Route path="/write-review" element={<WriteReviewPage />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/profile" element={<UserProfilePage />} />
+          <Route path="/favorites" element={<Favorites />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="/about" element={<About />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </main>
 
-
-
-
+      <Footer />
+      <ToastContainer toasts={toasts} removeToast={removeToast} />
+    </div>
+  );
+}
 
 function App() {
   return (
     <BrowserRouter>
       <AuthProvider>
         <RestaurantsProvider>
-          <div className="app-root">
-            <Navbar />
-            <main>
-              <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/restaurants" element={<RestaurantListPage />} />
-                <Route path="/restaurants/:id" element={<RestaurantDetailsPage />} />
-                <Route path="/search" element={<SearchResultsPage />} />
-                <Route path="/write-review" element={<WriteReviewPage />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/signup" element={<Signup />} />
-                <Route path="/profile" element={<UserProfilePage />} />
-                <Route path="/favorites" element={<Favorites />} />
-                <Route path="/contact" element={<Contact />} />
-                <Route path="/about" element={<About />} />
-                <Route path="*" element={<NotFound />} />
-              </Routes>
-            </main>
-
-            <Footer />
-          </div>
+          <ToastProvider>
+            <AppContent />
+          </ToastProvider>
         </RestaurantsProvider>
       </AuthProvider>
     </BrowserRouter>

src/components/common/EmptyState.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function EmptyState({ title, message, suggestions = [], actionLabel, actionLink }) {
+  return (
+    <div className="empty-state">
+      <div className="empty-state-icon">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <circle cx="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+        </svg>
+      </div>
+      <h2 className="empty-state-title">{title}</h2>
+      <p className="empty-state-message">{message}</p>
+
+      {suggestions.length > 0 && (
+        <div className="empty-state-suggestions">
+          <h3 className="empty-state-suggestions-title">Suggestions:</h3>
+          <ul className="empty-state-suggestions-list">
+            {suggestions.map((suggestion, idx) => (
+              <li key={idx}>{suggestion}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {actionLabel && actionLink && (
+        <Link to={actionLink} className="button button-primary empty-state-action">
+          {actionLabel}
+        </Link>
+      )}
+    </div>
+  );
+}
+
+export default EmptyState;
+

src/components/common/FilterChips.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+function FilterChips({ filters, onRemoveFilter, onClearAll }) {
+  const activeFilters = [];
+
+  if (filters.category) {
+    activeFilters.push({ key: "category", label: `Category: ${filters.category}`, value: filters.category });
+  }
+  if (filters.minRating > 0) {
+    activeFilters.push({ key: "minRating", label: `Rating: ${filters.minRating.toFixed(1)}+`, value: filters.minRating });
+  }
+  if (filters.price) {
+    activeFilters.push({ key: "price", label: `Price: ${filters.price}`, value: filters.price });
+  }
+
+  if (activeFilters.length === 0) return null;
+
+  return (
+    <div className="filter-chips">
+      <div className="filter-chips-label">Active filters:</div>
+      <div className="filter-chips-list">
+        {activeFilters.map((filter) => (
+          <button
+            key={filter.key}
+            className="filter-chip"
+            onClick={() => onRemoveFilter(filter.key)}
+            aria-label={`Remove ${filter.label} filter`}
+          >
+            <span>{filter.label}</span>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        ))}
+        {activeFilters.length > 1 && (
+          <button className="filter-chip filter-chip-clear" onClick={onClearAll}>
+            Clear all
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FilterChips;
+

src/components/common/ShareButton.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+function ShareButton({ url, title, text }) {
+  const [copied, setCopied] = useState(false);
+
+  async function handleShare() {
+    const shareUrl = url || window.location.href;
+    const shareText = text || title || "Check out this restaurant on Find Addis!";
+
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: title || "Find Addis",
+          text: shareText,
+          url: shareUrl,
+        });
+      } catch (err) {
+        // User cancelled or error occurred
+        if (err.name !== "AbortError") {
+          copyToClipboard(shareUrl);
+        }
+      }
+    } else {
+      copyToClipboard(shareUrl);
+    }
+  }
+
+  function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  return (
+    <button className="share-button" onClick={handleShare} aria-label="Share restaurant">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="18" cy="5" r="3"></circle>
+        <circle cx="6" cy="12" r="3"></circle>
+        <circle cx="18" cy="19" r="3"></circle>
+        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+      </svg>
+      {copied ? "Copied!" : "Share"}
+    </button>
+  );
+}
+
+export default ShareButton;
+

src/components/common/SortDropdown.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import Dropdown from "./Dropdown";
+
+const SORT_OPTIONS = [
+  { value: "rating-desc", label: "Rating: High to Low" },
+  { value: "rating-asc", label: "Rating: Low to High" },
+  { value: "name-asc", label: "Name: A to Z" },
+  { value: "name-desc", label: "Name: Z to A" },
+  { value: "price-asc", label: "Price: Low to High" },
+  { value: "price-desc", label: "Price: High to Low" },
+];
+
+function SortDropdown({ value, onChange, className = "" }) {
+  return (
+    <div className={`sort-container ${className}`}>
+      <label className="sort-label">Sort by</label>
+      <Dropdown
+        value={value || "rating-desc"}
+        onChange={(e) => onChange(e.target.value)}
+        options={SORT_OPTIONS}
+        className={className}
+      />
+    </div>
+  );
+}
+
+export function sortRestaurants(restaurants, sortBy) {
+  const sorted = [...restaurants];
+
+  switch (sortBy) {
+    case "rating-desc":
+      return sorted.sort((a, b) => (b.rating || 0) - (a.rating || 0));
+    case "rating-asc":
+      return sorted.sort((a, b) => (a.rating || 0) - (b.rating || 0));
+    case "name-asc":
+      return sorted.sort((a, b) => a.name.localeCompare(b.name));
+    case "name-desc":
+      return sorted.sort((a, b) => b.name.localeCompare(a.name));
+    case "price-asc":
+      return sorted.sort((a, b) => {
+        const priceOrder = { "$": 1, "$$": 2, "$$$": 3, "$$$$": 4 };
+        return (priceOrder[a.price] || 0) - (priceOrder[b.price] || 0);
+      });
+    case "price-desc":
+      return sorted.sort((a, b) => {
+        const priceOrder = { "$": 1, "$$": 2, "$$$": 3, "$$$$": 4 };
+        return (priceOrder[b.price] || 0) - (priceOrder[a.price] || 0);
+      });
+    default:
+      return sorted;
+  }
+}
+
+export default SortDropdown;
+

src/components/common/Toast.jsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from "react";
+
+function Toast({ message, type = "success", onClose, duration = 3000 }) {
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [duration, onClose]);
+
+  return (
+    <div className={`toast toast-${type}`} role="alert">
+      <span className="toast-message">{message}</span>
+      <button className="toast-close" onClick={onClose} aria-label="Close">
+        ×
+      </button>
+    </div>
+  );
+}
+
+export default Toast;
+

src/components/common/ToastContainer.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Toast from "./Toast";
+
+function ToastContainer({ toasts, removeToast }) {
+  return (
+    <div className="toast-container" aria-live="polite" aria-atomic="true">
+      {toasts.map((toast) => (
+        <Toast
+          key={toast.id}
+          message={toast.message}
+          type={toast.type}
+          onClose={() => removeToast(toast.id)}
+          duration={toast.duration}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default ToastContainer;
+