{isTestMode ? (
) : (
diff --git a/open-giving/src/pages/index-old.js b/open-giving/src/pages/index-old.js
new file mode 100644
index 0000000..4087137
--- /dev/null
+++ b/open-giving/src/pages/index-old.js
@@ -0,0 +1,163 @@
+import { Box, Container, Pagination, Snackbar } from '@mui/material';
+import { useRouter } from 'next/router';
+import { verifiedNonprofits } from 'non-profit-donations';
+import React, { useEffect, useState } from 'react';
+
+import FilterAccordion from '../components/FilterAccordion';
+import Header from '../components/Header';
+import Layout from '../components/Layout';
+import NonProfitDialog from '../components/NonProfitDialog';
+import NonProfitGrid from '../components/NonProfitGrid';
+import { PAYMENT_METHODS } from '../utils/paymentMethods';
+
+const ITEMS_PER_PAGE = 9;
+
+export default function Home() {
+ const router = useRouter();
+ const [nonProfits, setNonProfits] = useState([]);
+ const [filteredNonProfits, setFilteredNonProfits] = useState([]);
+ const [selectedPaymentMethods, setSelectedPaymentMethods] = useState([]);
+ const [isFilterExpanded, setIsFilterExpanded] = useState(false);
+ const [selectedNonProfit, setSelectedNonProfit] = useState(null);
+ const [snackbarOpen, setSnackbarOpen] = useState(false);
+ const [snackbarMessage, setSnackbarMessage] = useState('');
+ const [totalPages, setTotalPages] = useState(0);
+
+ useEffect(() => {
+ const allNonProfits = verifiedNonprofits();
+ setNonProfits(allNonProfits);
+
+ const { paymentMethod, npCode } = router.query;
+ if (paymentMethod) {
+ const methods = paymentMethod.split(',');
+ setSelectedPaymentMethods(methods);
+ setIsFilterExpanded(true);
+ }
+ if (npCode) {
+ const nonProfit = allNonProfits.find((np) => np.npCode === npCode);
+ if (nonProfit) {
+ setSelectedNonProfit(nonProfit);
+ }
+ }
+ }, [router.query]);
+
+ useEffect(() => {
+ const filtered = nonProfits.filter(
+ (nonProfit) =>
+ selectedPaymentMethods.length === 0 ||
+ nonProfit.paymentMethods.some((method) =>
+ selectedPaymentMethods.includes(method.type)
+ )
+ );
+ setFilteredNonProfits(filtered);
+ setTotalPages(Math.ceil(filtered.length / ITEMS_PER_PAGE));
+ }, [nonProfits, selectedPaymentMethods]);
+
+ const handlePaymentMethodToggle = (method) => {
+ const newSelectedMethods = selectedPaymentMethods.includes(method)
+ ? selectedPaymentMethods.filter((m) => m !== method)
+ : [...selectedPaymentMethods, method];
+ setSelectedPaymentMethods(newSelectedMethods);
+ updateUrl({ newPage: 1, methods: newSelectedMethods });
+ };
+
+ const updateUrl = ({ newPage, methods, npCode } = {}) => {
+ const query = { ...router.query };
+ if (methods !== undefined) {
+ if (methods.length > 0) {
+ query.paymentMethod = methods.join(',');
+ } else {
+ delete query.paymentMethod;
+ }
+ }
+ if (newPage !== undefined) {
+ if (newPage > 1) {
+ query.page = newPage.toString();
+ } else {
+ delete query.page;
+ }
+ }
+ if (npCode !== undefined) {
+ if (npCode) {
+ query.npCode = npCode;
+ } else {
+ delete query.npCode;
+ }
+ }
+
+ router.push({ pathname: router.pathname, query }, undefined, {
+ shallow: true,
+ });
+ };
+
+ const handleOpenDialog = (nonProfit) => {
+ setSelectedNonProfit(nonProfit);
+ updateUrl({ npCode: nonProfit.npCode });
+ };
+
+ const handleCloseDialog = () => {
+ setSelectedNonProfit(null);
+ updateUrl({ npCode: null });
+ };
+
+ const handleChangePage = (event, newPage) => {
+ updateUrl({ newPage });
+ };
+
+ const currentPage = parseInt(router.query.page, 10) || 1;
+ const paginatedNonProfits = filteredNonProfits.slice(
+ (currentPage - 1) * ITEMS_PER_PAGE,
+ currentPage * ITEMS_PER_PAGE
+ );
+ const defaultLogo = `https://placehold.co/300x200/?text=${selectedNonProfit?.name}`;
+
+ return (
+
+
+
+
+
+ {filteredNonProfits.length > ITEMS_PER_PAGE && (
+
+
+
+ )}
+ {selectedNonProfit?.name && (
+
+ )}
+
+ setSnackbarOpen(false)}
+ message={snackbarMessage}
+ />
+
+ );
+}
diff --git a/open-giving/src/pages/index.js b/open-giving/src/pages/index.js
index 5abfcfb..b7ffd0d 100644
--- a/open-giving/src/pages/index.js
+++ b/open-giving/src/pages/index.js
@@ -118,22 +118,21 @@ export default function Home() {
selectedPaymentMethods={selectedPaymentMethods}
/>
-
-
-
+
+ {filteredNonProfits.length > ITEMS_PER_PAGE && (
+
- {filteredNonProfits.length > ITEMS_PER_PAGE && (
-
- )}
-
+ )}
+