From 25be46529751fb8a3edc4fd07cf4674cfdedb5c7 Mon Sep 17 00:00:00 2001
From: Uchi Uchibeke <uchi.uchibeke@gmail.com>
Date: Sun, 27 Oct 2024 10:46:39 +0200
Subject: [PATCH] Fix linter issues

---
 open-giving/src/components/DonationForm.js    |   5 +-
 open-giving/src/components/Header.js          |   3 +-
 open-giving/src/components/Layout.js          |   7 +-
 open-giving/src/components/NonProfitDialog.js |  18 +-
 .../src/components/TestModeSwitcher.js        |   2 +-
 .../src/components/landingpage/Hero.js        |   1 +
 .../src/components/landingpage/Orgs.js        |   7 +-
 .../landingpage/SelectDonationMethod.js       |   3 +-
 .../components/landingpage/donateButton.js    |   1 +
 open-giving/src/hooks/mobile.js               |   2 +-
 open-giving/src/pages/index-old.js            | 163 ------------------
 open-giving/src/pages/index.js                |  14 +-
 12 files changed, 39 insertions(+), 187 deletions(-)
 delete mode 100644 open-giving/src/pages/index-old.js

diff --git a/open-giving/src/components/DonationForm.js b/open-giving/src/components/DonationForm.js
index c160b2b..14bbb2e 100644
--- a/open-giving/src/components/DonationForm.js
+++ b/open-giving/src/components/DonationForm.js
@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 
 import useDonation from '../hooks/useDonation';
-import DonateButton from './landingpage/donateButton';
-import CopyWithTooltip from './landingpage/copy';
 import { sanitizeNumericInput } from '../utils/paymentMethods';
 
+import CopyWithTooltip from './landingpage/copy';
+import DonateButton from './landingpage/donateButton';
+
 const dev = process.env.NODE_ENV == 'development';
 const DonationForm = React.memo(
   ({ method, index, setSnackbarMessage, setSnackbarOpen, NPOName }) => {
diff --git a/open-giving/src/components/Header.js b/open-giving/src/components/Header.js
index d865d7e..c0671a6 100644
--- a/open-giving/src/components/Header.js
+++ b/open-giving/src/components/Header.js
@@ -1,8 +1,9 @@
-import useIsMobileScreen from '@/hooks/mobile';
 import Image from 'next/image';
 import React from 'react';
 import { FaGithub } from 'react-icons/fa';
 
+import useIsMobileScreen from '@/hooks/mobile';
+
 const Header = () => {
   const isMobile = useIsMobileScreen();
   return (
diff --git a/open-giving/src/components/Layout.js b/open-giving/src/components/Layout.js
index 9e5847f..a67929e 100644
--- a/open-giving/src/components/Layout.js
+++ b/open-giving/src/components/Layout.js
@@ -1,8 +1,9 @@
+import Image from 'next/image';
 import React from 'react';
-import TestModeSwitcher from './TestModeSwitcher';
-import Header from './Header';
 import { FaHeart } from 'react-icons/fa6';
-import Image from 'next/image';
+
+import Header from './Header';
+import TestModeSwitcher from './TestModeSwitcher';
 const Layout = ({ children, plain = false }) => {
   return (
     <div className="min-h-screen  bg-gray-50 w-full">
diff --git a/open-giving/src/components/NonProfitDialog.js b/open-giving/src/components/NonProfitDialog.js
index f22349d..3a2884a 100644
--- a/open-giving/src/components/NonProfitDialog.js
+++ b/open-giving/src/components/NonProfitDialog.js
@@ -1,15 +1,17 @@
+import Image from 'next/image';
 import React, { useState } from 'react';
-import { MdClose, MdLocationOn } from 'react-icons/md';
 import { FaRegCalendarAlt } from 'react-icons/fa';
-import DonationForm from './DonationForm';
-import Image from 'next/image';
 import { FaAngleRight, FaArrowLeft } from 'react-icons/fa6';
+import { MdClose, MdLocationOn } from 'react-icons/md';
+
+import DonationForm from './DonationForm';
+
+import useIsMobileScreen from '@/hooks/mobile';
 import {
   filterDonationMethods,
   formatPaymentMethodName,
   getIconByMethod,
 } from '@/utils/paymentMethods';
-import useIsMobileScreen from '@/hooks/mobile';
 
 const Modal = ({ open, onClose, children }) => {
   if (!open) return null;
@@ -39,6 +41,7 @@ const NonProfitDialog = ({
     nonProfit?.logo || defaultLogo
   );
   const [selectedPaymentType, setSelectedPaymentType] = useState(null);
+  const isMobile = useIsMobileScreen();
 
   const handleDialogImageError = () => {
     setDialogImgSrc(defaultLogo);
@@ -46,7 +49,6 @@ const NonProfitDialog = ({
 
   if (!nonProfit) return null;
 
-  const isMobile = useIsMobileScreen();
   const getPaymentID = (method) => {
     if (!method.paymentID) {
       return true;
@@ -102,7 +104,10 @@ const NonProfitDialog = ({
                   },
                 ].map((i) => {
                   return (
-                    <span className="bg-[#EDEAEC] font-sans flex flex-row items-center px-[11px] py-[6px] text-[#4A4152] font-medium text-[11px] md:text-[12px] rounded-full gap-1">
+                    <span
+                      key={i.name}
+                      className="bg-[#EDEAEC] font-sans flex flex-row items-center px-[11px] py-[6px] text-[#4A4152] font-medium text-[11px] md:text-[12px] rounded-full gap-1"
+                    >
                       {i.icon} {i.name}
                     </span>
                   );
@@ -186,6 +191,7 @@ const NonProfitDialog = ({
                 {options.map((i) => {
                   return (
                     <button
+                      key={i.type}
                       onClick={() => handleSelect(i.type)}
                       className="border w-full px-[12px] py-[13px] md:py-[11px] mb-[10px]  border-[#C4C4C470] bg-[#F1E7F208] rounded-[8px] flex flex-row items-center justify-between"
                     >
diff --git a/open-giving/src/components/TestModeSwitcher.js b/open-giving/src/components/TestModeSwitcher.js
index 63f442b..3bd4a15 100644
--- a/open-giving/src/components/TestModeSwitcher.js
+++ b/open-giving/src/components/TestModeSwitcher.js
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import React from 'react';
-import { FaToggleOn, FaToggleOff } from 'react-icons/fa';
+import { FaToggleOff, FaToggleOn } from 'react-icons/fa';
 
 const TestModeSwitcher = () => {
   const router = useRouter();
diff --git a/open-giving/src/components/landingpage/Hero.js b/open-giving/src/components/landingpage/Hero.js
index 4fce3ca..4784fab 100644
--- a/open-giving/src/components/landingpage/Hero.js
+++ b/open-giving/src/components/landingpage/Hero.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { FaHeart } from 'react-icons/fa6';
+
 import { HeroContent } from '../constants';
 
 export const Hero = () => {
diff --git a/open-giving/src/components/landingpage/Orgs.js b/open-giving/src/components/landingpage/Orgs.js
index ff92e5f..7b5fb04 100644
--- a/open-giving/src/components/landingpage/Orgs.js
+++ b/open-giving/src/components/landingpage/Orgs.js
@@ -1,8 +1,11 @@
-import { FaHeart } from 'react-icons/fa6';
 import { useState } from 'react';
+import { FaHeart } from 'react-icons/fa6';
+import { LuSearchSlash } from 'react-icons/lu';
+
 import QRCodeComponent from '../QRCodeComponent';
+
 import { filterDonationMethods } from '@/utils/paymentMethods';
-import { LuSearchSlash } from 'react-icons/lu';
+
 
 const OrgCard = ({ org, onLearnMore, showQRCode }) => {
   const paymentOptions = filterDonationMethods(org);
diff --git a/open-giving/src/components/landingpage/SelectDonationMethod.js b/open-giving/src/components/landingpage/SelectDonationMethod.js
index ecfda79..8fc285a 100644
--- a/open-giving/src/components/landingpage/SelectDonationMethod.js
+++ b/open-giving/src/components/landingpage/SelectDonationMethod.js
@@ -1,6 +1,7 @@
-import useIsMobileScreen from '@/hooks/mobile';
 import Image from 'next/image';
 
+import useIsMobileScreen from '@/hooks/mobile';
+
 export const SelectDonationMethod = ({
   paymentMethods,
   handleToggle,
diff --git a/open-giving/src/components/landingpage/donateButton.js b/open-giving/src/components/landingpage/donateButton.js
index 1bb24f7..3022a7b 100644
--- a/open-giving/src/components/landingpage/donateButton.js
+++ b/open-giving/src/components/landingpage/donateButton.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { FaHeart } from 'react-icons/fa6';
+
 import Loader from './Loader';
 
 const DonateButton = ({
diff --git a/open-giving/src/hooks/mobile.js b/open-giving/src/hooks/mobile.js
index b9d7b3f..33e5635 100644
--- a/open-giving/src/hooks/mobile.js
+++ b/open-giving/src/hooks/mobile.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 const useIsMobileScreen = (mobileBreakpoint = 768) => {
   const [isMobile, setIsMobile] = useState(false);
diff --git a/open-giving/src/pages/index-old.js b/open-giving/src/pages/index-old.js
deleted file mode 100644
index 4087137..0000000
--- a/open-giving/src/pages/index-old.js
+++ /dev/null
@@ -1,163 +0,0 @@
-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 (
-    <Layout>
-      <Container maxWidth="lg" sx={{ py: 4 }}>
-        <Header />
-        <FilterAccordion
-          isExpanded={isFilterExpanded}
-          setIsExpanded={setIsFilterExpanded}
-          selectedMethods={selectedPaymentMethods}
-          onMethodToggle={handlePaymentMethodToggle}
-          paymentMethods={PAYMENT_METHODS}
-        />
-        <NonProfitGrid
-          nonProfits={paginatedNonProfits}
-          onOpenDialog={handleOpenDialog}
-          showQRCode={router.query.showQRCode}
-          useTestPaymentID={router.query.useTestPaymentID}
-        />
-        {filteredNonProfits.length > ITEMS_PER_PAGE && (
-          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
-            <Pagination
-              count={totalPages}
-              page={currentPage}
-              onChange={handleChangePage}
-              color="primary"
-              size="large"
-            />
-          </Box>
-        )}
-        {selectedNonProfit?.name && (
-          <NonProfitDialog
-            nonProfit={selectedNonProfit}
-            open={Boolean(selectedNonProfit)}
-            onClose={handleCloseDialog}
-            setSnackbarMessage={setSnackbarMessage}
-            setSnackbarOpen={setSnackbarOpen}
-            defaultLogo={defaultLogo}
-            useTestPaymentID={router.query.useTestPaymentID}
-          />
-        )}
-      </Container>
-      <Snackbar
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        open={snackbarOpen}
-        autoHideDuration={3000}
-        onClose={() => setSnackbarOpen(false)}
-        message={snackbarMessage}
-      />
-    </Layout>
-  );
-}
diff --git a/open-giving/src/pages/index.js b/open-giving/src/pages/index.js
index b7ffd0d..f740275 100644
--- a/open-giving/src/pages/index.js
+++ b/open-giving/src/pages/index.js
@@ -1,14 +1,14 @@
-import { Hero } from '@/components/landingpage/Hero';
-
-import { DonationOrganizations } from '@/components/landingpage/Orgs';
-import { SelectDonationMethod } from '@/components/landingpage/SelectDonationMethod';
-import Layout from '@/components/Layout';
 import { useRouter } from 'next/router';
-import { useState, useEffect } from 'react';
 import { verifiedNonprofits } from 'non-profit-donations';
+import { useEffect, useState } from 'react';
+
+import Layout from '@/components/Layout';
+import NonProfitDialog from '@/components/NonProfitDialog';
 import { donationMethods } from '@/components/constants';
+import { Hero } from '@/components/landingpage/Hero';
+import { DonationOrganizations } from '@/components/landingpage/Orgs';
+import { SelectDonationMethod } from '@/components/landingpage/SelectDonationMethod';
 import Pagination from '@/components/landingpage/pagination';
-import NonProfitDialog from '@/components/NonProfitDialog';
 import Snackbar from '@/components/landingpage/snackbar';
 
 const ITEMS_PER_PAGE = 9;