Padawan (#42)

* padawan - settimeout to keep container alive while user is on page

* padawan - deploy script

* padawan - ignore wireguard

* padawan - remove turnstile

* inertia - remove redux and use inertia instead

* inertia - add maryland svg, fix census query

* inertia - fix notification subscriptions create/destroy, fix census lookup of congressional districts

* inertia - add maryland svg, fix census query, add unique index to bill.external_id

* inertia - fix rspec, get new tapioca dsl + gems

* inertia - rspec test ruby version

* inertia - typescript and eslint gh actions

* inertia - rspec action

* inertia - fix eslint - https://github.com/t3-oss/create-t3-turbo/issues/984\#issuecomment-2210934687

* inertia - add ssl certs for github + address some sonar issues

* main - remove uneeded code

* inertia - update deps

* inertia - upgraded deps

* padawan - update deps, node version, minor adjustments

* padawan - re-version schema

* padawan - eslint lint

* padawan - replace dart-sass with sass, use npm ci instead of install

* padawan - remove lock.json and node modules and reinstall

* padawan - fake bill data, seeds, button sizes

app/frontend/components/bill/BillComponent.tsx

@@ -218,7 +218,7 @@ const BillComponent: React.FC<IProps> = ({ bill, sponsor, positions, userVote })
                             <span className="bold">Data From:&nbsp;</span>
                             <a href={bill.link} rel="noreferrer" target="_blank">
                                 {(VOTING_WEBSITES_BY_LOCALE as Record<string, string>)[localeName]}&nbsp;
-                                <FiExternalLink />
+                                <FiExternalLink title={bill.link} />
                             </a>
                         </div>
                     </div>

app/frontend/components/bill/BillSummary.tsx

@@ -51,7 +51,7 @@ const BillSummary: React.FC<IProps> = ({ summary, cutoff, handleClick }) => {
                           className="bold"
                       >
                           More Info&nbsp;
-                          <FiExternalLink />
+                          <FiExternalLink title={link || "https://sway.vote"} />
                       </a>,
                   ],
         );

app/frontend/components/bill/BillsListItem.tsx

@@ -3,7 +3,7 @@ import { IS_MOBILE_PHONE, ROUTES } from "app/frontend/sway_constants";
 import { titleize } from "app/frontend/sway_utils";
 import { lazy, useCallback } from "react";
 
-import { Button } from "react-bootstrap";
+import { Button, Fade } from "react-bootstrap";
 import { FiInfo } from "react-icons/fi";
 import { sway } from "sway";
 
@@ -22,9 +22,10 @@ interface IProps {
     userVote?: sway.IUserVote;
     index: number;
     isLastItem: boolean;
+    inView: boolean;
 }
 
-const BillsListItem: React.FC<IProps> = ({ bill, userVote, isLastItem }) => {
+const BillsListItem: React.FC<IProps> = ({ bill, userVote, isLastItem, inView }) => {
     const [locale] = useLocale();
 
     const { category, externalId, title } = bill;
@@ -34,50 +35,54 @@ const BillsListItem: React.FC<IProps> = ({ bill, userVote, isLastItem }) => {
     }, [bill.id]);
 
     return (
-        <div className={`row py-3 justify-content-center ${!isLastItem ? "border-bottom border-2" : ""}`}>
-            <div className="col">
-                <div className="row mb-3">
-                    <div className="col-3 text-start">
-                        <LocaleAvatar />
+        <Fade in={inView} mountOnEnter>
+            <div className={`row py-3 justify-content-center ${!isLastItem ? "border-bottom border-2" : ""}`}>
+                <div className="col">
+                    <div className="row mb-3">
+                        <div className="col-3 text-start">
+                            <LocaleAvatar />
+                        </div>
+                        <div className="col text-end">
+                            {category && <span className="bold">{titleize(category)}</span>}
+                        </div>
+                    </div>
+                    <div className="row">
+                        <div className="bold">{`Bill ${externalId}`}</div>
+                        <div>{title}</div>
                     </div>
-                    <div className="col text-end">{category && <span className="bold">{titleize(category)}</span>}</div>
-                </div>
-                <div className="row">
-                    <div className="bold">{`Bill ${externalId}`}</div>
-                    <div>{title}</div>
-                </div>
 
-                <VoteButtonsContainer bill={bill} userVote={userVote} />
-                <div className="col text-center w-100">
-                    <Button
-                        variant="outline-primary"
-                        style={{ opacity: "70%" }}
-                        onClick={handleGoToSingleBill}
-                        className="p-3"
-                    >
-                        <FiInfo />
-                        &nbsp;<span className="align-text-top">Show More Info</span>
-                    </Button>
-                    {bill.voteDateTimeUtc && !bill.active && (
-                        <div className={"row g-0 my-2"}>
-                            <span>Legislators that voted on this bill may no longer be in office.</span>
-                        </div>
-                    )}
+                    <VoteButtonsContainer bill={bill} userVote={userVote} />
+                    <div className="col text-center w-100">
+                        <Button
+                            variant="outline-primary"
+                            style={{ opacity: "70%" }}
+                            onClick={handleGoToSingleBill}
+                            className="p-3"
+                        >
+                            <FiInfo />
+                            &nbsp;<span className="align-text-top">Show More Info</span>
+                        </Button>
+                        {bill.voteDateTimeUtc && !bill.active && (
+                            <div className={"row g-0 my-2"}>
+                                <span>Legislators that voted on this bill may no longer be in office.</span>
+                            </div>
+                        )}
+                    </div>
                 </div>
+                {locale && userVote && !IS_MOBILE_PHONE && (
+                    <div className="col">
+                        <SuspenseFullScreen>
+                            <BillChartsContainer
+                                bill={bill}
+                                locale={locale}
+                                userVote={userVote}
+                                filter={BillChartFilters.total}
+                            />
+                        </SuspenseFullScreen>
+                    </div>
+                )}
             </div>
-            {locale && userVote && !IS_MOBILE_PHONE && (
-                <div className="col">
-                    <SuspenseFullScreen>
-                        <BillChartsContainer
-                            bill={bill}
-                            locale={locale}
-                            userVote={userVote}
-                            filter={BillChartFilters.total}
-                        />
-                    </SuspenseFullScreen>
-                </div>
-            )}
-        </div>
+        </Fade>
     );
 };
 

app/frontend/components/dialogs/ContactLegislatorDialog.tsx

@@ -136,12 +136,17 @@ const ContactLegislatorDialog: React.FC<IProps> = ({ userVote, legislator, open,
             format: "text/plain",
             onCopy: () =>
                 notify({
+                    id: `legislator-${legislator.id}-${type}`,
                     level: "info",
-                    title: `Copied ${type} to clipboard.`,
+                    title: (
+                        <span>
+                            Copied <span className="bold text-primary">{type}</span> to clipboard.
+                        </span>
+                    ),
                 }),
         });
         return "";
-    }, [getLegislatorEmail, getLegislatorPhone, type]);
+    }, [getLegislatorEmail, getLegislatorPhone, type, legislator.id]);
 
     const render = useMemo(() => {
         if (type === "email" && !legislator.email) {
@@ -245,7 +250,7 @@ const ContactLegislatorDialog: React.FC<IProps> = ({ userVote, legislator, open,
                             &nbsp;<span className="align-text-top">Cancel</span>
                         </Button>
                         <Button type="submit" variant="primary">
-                            {type === "phone" ? <FiPhoneCall /> : <FiMail />}
+                            {type === "phone" ? <FiPhoneCall title="Call" /> : <FiMail title="Email" />}
                             &nbsp;
                             <span className="align-text-top">{type === "phone" ? "Call" : "Send"}</span>
                         </Button>

app/frontend/components/dialogs/InviteIconDialog.tsx

@@ -15,7 +15,7 @@ const InviteIconDialog = ({ withText }: { withText?: boolean; iconStyle?: React.
     return (
         <Dropdown.Item onClick={handleOpenModal} className="row mx-0 fs-5 py-3 align-items-center">
             <span className="col-1 px-0 text-start opacity-75">
-                <FiUserPlus />
+                <FiUserPlus title="Invite" />
             </span>
             <span className="col-10">{withText && <span>Invite Friends</span>}</span>
             <span className="col-1">

app/frontend/components/dialogs/invites/InviteBody.tsx

@@ -27,7 +27,7 @@ const InviteBody: React.FC = () => {
 
             <p className="mt-2">Invite your friends using this link:</p>
             <Button variant="link" className="p-0 ellipses mt-2" onClick={handleCopy}>
-                <FiCopy onClick={handleCopy} />
+                <FiCopy title="Copy" onClick={handleCopy} />
                 &nbsp;{link}
             </Button>
         </div>

app/frontend/components/forms/ContactLegislatorFormEditable.tsx

@@ -45,7 +45,7 @@ const ContactLegislatorFormEditable: React.FC<IProps> = ({ user, legislator, use
                                 <div className="col">
                                     <span className="bold">{"To: "}</span>
                                     <span>{methods.getLegislatorEmailPreview()}</span>
-                                    <FiCopy onClick={methods.handleCopy} />
+                                    <FiCopy title="Copy" onClick={methods.handleCopy} />
                                 </div>
                             </div>
                             <div className="row">

app/frontend/components/legislator/Legislator.tsx

@@ -9,7 +9,7 @@ interface IProps {
 }
 
 const Legislator_: React.FC<IProps> = ({ legislator }) => {
-    return <LegislatorCard legislator={legislator} />;
+    return <LegislatorCard legislator={legislator} inView={true} />;
 };
 
 const Legislator = Legislator_;

app/frontend/components/legislator/LegislatorCard.tsx

@@ -16,15 +16,16 @@ const LegislatorMobileChartsContainer = lazy(() => import("./charts/LegislatorMo
 
 interface IProps {
     legislator: sway.ILegislator;
+    inView: boolean;
 }
 
-const LegislatorCard: React.FC<IProps> = ({ legislator }) => {
+const LegislatorCard: React.FC<IProps> = ({ legislator, inView }) => {
     const [locale] = useLocale();
 
     const { items: userLegislatorScore, isLoading } = useUserLegislatorScore(legislator);
 
     return (
-        <Fade in={!isLoading}>
+        <Fade in={inView && !isLoading} mountOnEnter>
             <div className="col border rounded border-primary-subtle p-3">
                 <div className="row">
                     <div className="col">

app/frontend/components/legislator/LegislatorCardSocialItem.tsx

@@ -34,15 +34,16 @@ const LegislatorCardSocialItem: React.FC<IProps> = ({ title, text, handleCopy, I
             <div className="row mt-1">
                 <div className="col-6 col-sm-4 col-md-3 col-lg-2">
                     <Button
+                        size="lg"
                         variant="outline-primary"
                         className="text-primary-subtle border-primary-subtle"
                         onClick={setCopy}
                     >
-                        <FiCopy />
+                        <FiCopy title="Copy" />
                     </Button>
                 </div>
                 <div className="col-6 col-sm-4 col-md-3 col-lg-2 ps-0">
-                    <Button variant="outline-primary" className="text-primary-subtle border-primary-subtle">
+                    <Button size="lg" variant="outline-primary" className="text-primary-subtle border-primary-subtle">
                         {Icon}
                     </Button>
                 </div>

app/frontend/components/legislator/LegislatorCardSocialRow.tsx

@@ -11,17 +11,25 @@ interface IProps {
 }
 
 const LegislatorCardSocialRow: React.FC<IProps> = ({ legislator }) => {
-    const handleCopy = useCallback((value: string) => {
-        copy(value, {
-            message: "Click to Copy",
-            format: "text/plain",
-            onCopy: () =>
-                notify({
-                    level: "info",
-                    title: `Copied ${value} to clipboard.`,
-                }),
-        });
-    }, []);
+    const handleCopy = useCallback(
+        (value: string) => {
+            copy(value, {
+                message: "Click to Copy",
+                format: "text/plain",
+                onCopy: () =>
+                    notify({
+                        id: `legislator-${legislator.id}-${value}`,
+                        level: "info",
+                        title: (
+                            <span>
+                                Copied <span className="bold text-primary">{value}</span> to clipboard.
+                            </span>
+                        ),
+                    }),
+            });
+        },
+        [legislator.id],
+    );
 
     return (
         <div className="col-6 col-sm-8">

app/frontend/components/legislator/LegislatorEmail.tsx

@@ -10,7 +10,7 @@ interface IProps {
 }
 
 const Button = ({ handleOpen }: { handleOpen: () => void }) => {
-    return <FiMail onClick={handleOpen} />;
+    return <FiMail title="Email" onClick={handleOpen} />;
 };
 
 const LegislatorEmail: React.FC<IProps> = ({ legislator, handleCopy }) => {

app/frontend/components/legislator/LegislatorPhone.tsx

@@ -11,7 +11,7 @@ interface IProps {
 }
 
 const Button = ({ handleOpen }: { handleOpen: () => void }) => {
-    return <FiPhone onClick={handleOpen} />;
+    return <FiPhone title="Call" onClick={handleOpen} />;
 };
 
 const LegislatorPhone: React.FC<IProps> = ({ legislator, handleCopy }) => {

app/frontend/components/legislator/LegislatorTwitter.tsx

@@ -24,7 +24,7 @@ const Button = ({ city, twitter }: { twitter: string; city: string }) => {
         }
     };
 
-    return <FiTwitter onClick={handleClick} />;
+    return <FiTwitter title="Tweet" onClick={handleClick} />;
 };
 
 const LegislatorTwitter: React.FC<IProps> = ({ legislator: { twitter }, handleCopy }) => {

app/frontend/pages/Bills.tsx

@@ -9,6 +9,7 @@ import { sway } from "sway";
 import BillsListCategoriesHeader from "../components/bill/BillsListCategoriesHeader";
 import BillsListItem from "../components/bill/BillsListItem";
 import LocaleSelector from "../components/user/LocaleSelector";
+import { InView } from "react-intersection-observer";
 
 const Bills_: React.FC<{ bills: sway.IBill[] }> = ({ bills }) => {
     const [locale] = useLocale();
@@ -27,7 +28,15 @@ const Bills_: React.FC<{ bills: sway.IBill[] }> = ({ bills }) => {
             );
         }
 
-        return bills.map((b, i) => <BillsListItem key={i} bill={b} index={i} isLastItem={i === bills.length - 1} />);
+        return bills.map((b, i) => (
+            <InView key={`bill-${locale.name}-${b.externalId}`} triggerOnce initialInView={i < 5}>
+                {({ inView, ref }) => (
+                    <div ref={ref} style={{ minHeight: "100px" }}>
+                        <BillsListItem bill={b} index={i} isLastItem={i === bills.length - 1} inView={inView} />
+                    </div>
+                )}
+            </InView>
+        ));
     }, [bills, categories, locale.name]);
 
     return (

app/frontend/pages/Legislators.tsx

@@ -8,8 +8,9 @@ import { useAxiosPost } from "app/frontend/hooks/useAxios";
 import { useLocale } from "app/frontend/hooks/useLocales";
 import { toFormattedLocaleName } from "app/frontend/sway_utils";
 import { isEmpty } from "lodash";
-import { Fragment, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { Button } from "react-bootstrap";
+import { InView } from "react-intersection-observer";
 import { sway } from "sway";
 
 interface IProps {
@@ -21,46 +22,29 @@ interface IProps {
 const Legislators_: React.FC<IProps> = ({ legislators: representatives }) => {
     const [locale] = useLocale();
 
-    // useEffect(() => {
-    //     const searchParams = new URLSearchParams(window.location.search);
-    //     const queryStringCompletedRegistration =
-    //         searchParams && searchParams.get(NOTIFY_COMPLETED_REGISTRATION);
-    //     if (queryStringCompletedRegistration === "1") {
-    //         if (localGet(NOTIFY_COMPLETED_REGISTRATION)) {
-    //             searchParams.delete(NOTIFY_COMPLETED_REGISTRATION);
-    //         } else {
-    //             localSet(NOTIFY_COMPLETED_REGISTRATION, "1");
-    //             notify({
-    //                 level: "success",
-    //                 title: withTadas("Welcome to Sway"),
-    //                 message: "Click/tap here to start voting and earning Sway!",
-    //                 tada: true,
-    //                 duration: 200000,
-    //                 onClick: () => navigate(ROUTES.billOfTheWeek),
-    //             });
-    //         }
-    //     }
-    // }, [navigate, search]);
-
     const reps = useMemo(
         () => representatives.filter((l) => !locale?.id || l.swayLocaleId === locale?.id),
         [locale?.id, representatives],
     );
 
     const render = useMemo(() => {
         return reps.map((legislator: sway.ILegislator, index: number) => (
-            <Fragment key={legislator.externalId}>
-                <div className={`row g-0 my-3`}>
-                    <LegislatorCard legislator={legislator} />
-                </div>
-                {index === reps.length - 1 ? null : (
-                    <div className="row">
-                        <div className="col-12 text-center">
-                            <LocaleAvatar />
+            <InView key={legislator.externalId} triggerOnce initialInView={index === 0}>
+                {({ inView, ref }) => (
+                    <div ref={ref}>
+                        <div className={`row g-0 my-3`}>
+                            <LegislatorCard legislator={legislator} inView={inView} />
                         </div>
+                        {index === reps.length - 1 ? null : (
+                            <div className="row">
+                                <div className="col-12 text-center">
+                                    <LocaleAvatar />
+                                </div>
+                            </div>
+                        )}
                     </div>
                 )}
-            </Fragment>
+            </InView>
         ));
     }, [reps]);