fade-in - lazy load dialog wrapper, not modals wrapped by it - remove…

… colors prop from charts, pass lighter/more consistent colors - add animation fade in via opacity to layout so ssr pages fade in - lazy load emojis and sentry to cut down on bundle size - add bundle analysis tool + script
Plebeian-Technology · Jun 13, 2024 · 0c851b4 · 0c851b4
1 parent 8055685
commit 0c851b4
Show file tree

Hide file tree

Showing 27 changed files with 1,695 additions and 334 deletions.
diff --git a/.ruby-version b/.ruby-version
@@ -1 +1 @@
-3.3.1
+3.3.2
diff --git a/Gemfile b/Gemfile
@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-ruby '3.3.1'
+ruby '3.3.2'
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
 gem 'rails', '~> 7.1.3', '>= 7.1.3.2'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -534,7 +534,7 @@ DEPENDENCIES
   webauthn
 
 RUBY VERSION
-   ruby 3.3.1p55
+   ruby 3.3.2p78
 
 BUNDLED WITH
    2.5.9
diff --git a/app/frontend/components/bill/BillComponent.tsx b/app/frontend/components/bill/BillComponent.tsx
@@ -9,15 +9,14 @@ import { router } from "@inertiajs/react";
 import SwayLogo from "app/frontend/components/SwayLogo";
 import SwaySpinner from "app/frontend/components/SwaySpinner";
 import BillArguments from "app/frontend/components/bill/BillArguments";
-import SuspenseFullScreen from "app/frontend/components/dialogs/SuspenseFullScreen";
+import BillSummaryModal from "app/frontend/components/bill/BillSummaryModal";
 import VoteButtonsContainer from "app/frontend/components/uservote/VoteButtonsContainer";
 import { useLocale, useLocaleName } from "app/frontend/hooks/useLocales";
 import { useUser } from "app/frontend/hooks/users/useUser";
 import { formatDate } from "app/frontend/sway_utils/datetimes";
 import { Animate } from "react-simple-animate";
 import { sway } from "sway";
 
-const BillSummaryModal = lazy(() => import("app/frontend/components/bill/BillSummaryModal"));
 const BillMobileChartsContainer = lazy(() => import("app/frontend/components/bill/charts/BillMobileChartsContainer"));
 const ShareButtons = lazy(() => import("app/frontend/components/social/ShareButtons"));
 const BillActionLinks = lazy(() => import("app/frontend/components/bill/BillActionLinks"));
@@ -176,14 +175,12 @@ const BillComponent: React.FC<IProps> = ({ bill, sponsor, positions, userVote })
                                 </div>
                             </div>
 
-                            <SuspenseFullScreen>
-                                <BillSummaryModal
-                                    summary={bill.summary}
-                                    organizationPosition={DEFAULT_ORGANIZATION_POSITION}
-                                    selectedOrganization={showSummary}
-                                    setSelectedOrganization={setShowSummary}
-                                />
-                            </SuspenseFullScreen>
+                            <BillSummaryModal
+                                summary={bill.summary}
+                                organizationPosition={DEFAULT_ORGANIZATION_POSITION}
+                                selectedOrganization={showSummary}
+                                setSelectedOrganization={setShowSummary}
+                            />
                         </div>
                     </div>
                 )}

diff --git a/app/frontend/components/bill/BillCreatorSummary.tsx b/app/frontend/components/bill/BillCreatorSummary.tsx
@@ -16,7 +16,11 @@ const BillCreatorSummary = forwardRef(({ field }: IProps, ref: React.Ref<string>
     const [summary, setSummary] = useState<string>(formikField.value || "");
 
     const handleSetSummary = useCallback(async (_fieldname: string, string: string) => {
-        setSummary(withEmojis(string));
+        withEmojis(string)
+            .then((emojis) => {
+                setSummary(emojis);
+            })
+            .catch(console.error);
     }, []);
 
     useEffect(() => {

diff --git a/app/frontend/components/bill/BillSummaryModal.tsx b/app/frontend/components/bill/BillSummaryModal.tsx
@@ -1,12 +1,13 @@
 import { titleize } from "app/frontend/sway_utils";
 
-import { useCallback, useMemo } from "react";
+import { lazy, useCallback, useMemo } from "react";
 import { sway } from "sway";
 
+import ButtonUnstyled from "app/frontend/components/ButtonUnstyled";
+import SuspenseFullScreen from "app/frontend/components/dialogs/SuspenseFullScreen";
 import OrganizationIcon from "app/frontend/components/organizations/OrganizationIcon";
-import DialogWrapper from "../dialogs/DialogWrapper";
 import BillSummaryMarkdown from "./BillSummaryMarkdown";
-import ButtonUnstyled from "app/frontend/components/ButtonUnstyled";
+const DialogWrapper = lazy(() => import("../dialogs/DialogWrapper"));
 
 interface IProps {
     summary: string;
@@ -61,23 +62,25 @@ const BillSummaryModal: React.FC<IProps> = ({
         <>
             <div className={`my-2 px-1 brighter-item-hover ${isOpen ? "d-none" : ""}`}>{renderSummary(true)}</div>
             {isOpen && (
-                <DialogWrapper
-                    open={true}
-                    size="xl"
-                    fullscreen
-                    setOpen={() => setSelectedOrganization(undefined)}
-                    style={{ margin: 0 }}
-                >
-                    <div>
+                <SuspenseFullScreen>
+                    <DialogWrapper
+                        open={true}
+                        size="xl"
+                        fullscreen
+                        setOpen={() => setSelectedOrganization(undefined)}
+                        style={{ margin: 0 }}
+                    >
                         <div>
-                            <OrganizationIcon organization={organization} maxWidth={100} />
-                            {organization?.name.toLowerCase() !== "sway" && (
-                                <p className="bold">{titleize(organization?.name as string)}</p>
-                            )}
+                            <div>
+                                <OrganizationIcon organization={organization} maxWidth={100} />
+                                {organization?.name.toLowerCase() !== "sway" && (
+                                    <p className="bold">{titleize(organization?.name as string)}</p>
+                                )}
+                            </div>
+                            {summary && renderSummary(false)}
                         </div>
-                        {summary && renderSummary(false)}
-                    </div>
-                </DialogWrapper>
+                    </DialogWrapper>
+                </SuspenseFullScreen>
             )}
         </>
     );

diff --git a/app/frontend/components/bill/charts/BillChartsContainer.tsx b/app/frontend/components/bill/charts/BillChartsContainer.tsx
@@ -1,17 +1,19 @@
 /** @format */
 
 import { isCongressLocale, isEmptyObject, logDev } from "app/frontend/sway_utils";
-import { useRef, useState } from "react";
+import { lazy, useRef, useState } from "react";
 import { sway } from "sway";
 import { useOpenCloseElement } from "../../../hooks/elements/useOpenCloseElement";
 import { isEmptyScore } from "../../../sway_utils/charts";
-import DialogWrapper from "../../dialogs/DialogWrapper";
 import { BillChartFilters } from "./constants";
 import DistrictVotesChart from "./DistrictVotesChart";
 import TotalVotesChart from "./TotalVotesChart";
 import { useAxiosGet } from "app/frontend/hooks/useAxios";
 import FullScreenLoading from "app/frontend/components/dialogs/FullScreenLoading";
 import { Button } from "react-bootstrap";
+import SuspenseFullScreen from "app/frontend/components/dialogs/SuspenseFullScreen";
+
+const DialogWrapper = lazy(() => import("../../dialogs/DialogWrapper"));
 
 interface IProps {
     bill: sway.IBill;
@@ -134,14 +136,16 @@ const BillChartsContainer: React.FC<IProps> = ({ bill, locale, filter }) => {
                 );
             })}
             {selectedChart && (
-                <DialogWrapper open={open} setOpen={handleClose}>
-                    <selectedChart.Component
-                        score={billScore}
-                        bill={bill}
-                        isEmptyScore={isEmptyScore(billScore)}
-                        district={selectedChart.props.district as sway.IDistrict}
-                    />
-                </DialogWrapper>
+                <SuspenseFullScreen>
+                    <DialogWrapper open={open} setOpen={handleClose}>
+                        <selectedChart.Component
+                            score={billScore}
+                            bill={bill}
+                            isEmptyScore={isEmptyScore(billScore)}
+                            district={selectedChart.props.district as sway.IDistrict}
+                        />
+                    </DialogWrapper>
+                </SuspenseFullScreen>
             )}
         </div>
     );

diff --git a/app/frontend/components/bill/charts/BillMobileChartsContainer.tsx b/app/frontend/components/bill/charts/BillMobileChartsContainer.tsx
@@ -2,19 +2,20 @@
 
 import { useLocale } from "app/frontend/hooks/useLocales";
 import { SWAY_COLORS, isCongressLocale, titleize } from "app/frontend/sway_utils";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FiBarChart, FiBarChart2, FiFlag, FiMap } from "react-icons/fi";
 import { sway } from "sway";
 import { useOpenCloseElement } from "../../../hooks/elements/useOpenCloseElement";
 
 import { isEmptyScore } from "../../../sway_utils/charts";
-import DialogWrapper from "../../dialogs/DialogWrapper";
 import DistrictVotesChart from "./DistrictVotesChart";
 import TotalVotes from "./TotalVotesChart";
 
 import { useAxiosGet } from "app/frontend/hooks/useAxios";
 import { Button } from "react-bootstrap";
 import { BillChartFilters } from "./constants";
+import SuspenseFullScreen from "app/frontend/components/dialogs/SuspenseFullScreen";
+const DialogWrapper = lazy(() => import("../../dialogs/DialogWrapper"));
 
 interface IProps {
     bill: sway.IBill;
@@ -205,14 +206,16 @@ const BillMobileChartsContainer: React.FC<IProps> = ({ bill, filter }) => {
                     })}
                 </div>
                 {selectedChart && (
-                    <DialogWrapper open={open} setOpen={handleClose}>
-                        <selectedChart.Component
-                            bill={bill}
-                            score={billScore}
-                            isEmptyScore={isEmptyScore(billScore)}
-                            district={selectedChart.props.district as sway.IDistrict}
-                        />
-                    </DialogWrapper>
+                    <SuspenseFullScreen>
+                        <DialogWrapper open={open} setOpen={handleClose}>
+                            <selectedChart.Component
+                                bill={bill}
+                                score={billScore}
+                                isEmptyScore={isEmptyScore(billScore)}
+                                district={selectedChart.props.district as sway.IDistrict}
+                            />
+                        </DialogWrapper>
+                    </SuspenseFullScreen>
                 )}
             </div>
         </div>

diff --git a/app/frontend/components/bill/charts/DistrictVotesChart.tsx b/app/frontend/components/bill/charts/DistrictVotesChart.tsx
@@ -22,10 +22,10 @@ const DistrictVotesChart: React.FC<IChildChartProps> = ({ bill, score, district
         datasets: [
             {
                 label: `Votes Cast in District ${district.number} on ${bill.title}`,
-                backgroundColor: district.number ? SWAY_COLORS.primaryLight : SWAY_COLORS.primary,
-                borderColor: SWAY_COLORS.primary,
+                backgroundColor: SWAY_COLORS.primarySubtle,
+                borderColor: SWAY_COLORS.primarySubtle,
                 borderWidth: 1,
-                hoverBackgroundColor: district.number ? SWAY_COLORS.primaryLight : SWAY_COLORS.primary,
+                hoverBackgroundColor: SWAY_COLORS.primary,
                 hoverBorderColor: SWAY_COLORS.primary,
                 barPercentage: 0.8,
                 categoryPercentage: 0.8,

diff --git a/app/frontend/components/bill/charts/TotalVotesChart.tsx b/app/frontend/components/bill/charts/TotalVotesChart.tsx
@@ -20,10 +20,10 @@ const TotalVotesChart: React.FC<IChildChartProps> = ({ bill, score }) => {
         datasets: [
             {
                 label: `All Votes Cast in ${location} on ${bill.title}`,
-                backgroundColor: isCongressLocale(locale) ? SWAY_COLORS.primaryLight : SWAY_COLORS.primary,
-                borderColor: SWAY_COLORS.primary,
+                backgroundColor: SWAY_COLORS.primarySubtle,
+                borderColor: SWAY_COLORS.primarySubtle,
                 borderWidth: 1,
-                hoverBackgroundColor: isCongressLocale(locale) ? SWAY_COLORS.primaryLight : SWAY_COLORS.primary,
+                hoverBackgroundColor: SWAY_COLORS.primary,
                 hoverBorderColor: SWAY_COLORS.primary,
                 barPercentage: 0.8,
                 categoryPercentage: 0.8,

diff --git a/app/frontend/components/bill/creator/BillCreatorOrganization.tsx b/app/frontend/components/bill/creator/BillCreatorOrganization.tsx
@@ -27,7 +27,11 @@ const BillCreatorOrganization: React.FC<IProps> = ({ swayFieldName, organization
 
     const [summary, setSummary] = useState<string>(formikField?.value?.summary ?? "");
     const handleChangeSummary = useCallback(async (_fieldname: string, fieldvalue: string) => {
-        setSummary(withEmojis(fieldvalue));
+        withEmojis(fieldvalue)
+            .then((emojis) => {
+                setSummary(emojis);
+            })
+            .catch(console.error);
     }, []);
 
     // Async updating of formik field using a useEffect and local summary state

diff --git a/app/frontend/components/dialogs/ContactLegislatorDialog.tsx b/app/frontend/components/dialogs/ContactLegislatorDialog.tsx
@@ -30,19 +30,6 @@ const ContactLegislatorDialog: React.FC<IProps> = ({ userVote, legislator, open,
         handleClose(false);
     }, [handleClose]);
 
-    // const getLegislatorEmail = () => {
-    //     if (IS_DEVELOPMENT) {
-    //         return "[email protected]";
-    //     }
-    //     return legislator.email;
-    // };
-    // const getLegislatorPhone = (): string => {
-    //     if (IS_DEVELOPMENT) {
-    //         return formatPhone("1234567890");
-    //     }
-    //     return formatPhone(legislator.phone);
-    // };
-
     const handleSubmit = useCallback(
         (values: { message: string }) => {
             if (type === "email") {
@@ -182,7 +169,7 @@ const ContactLegislatorDialog: React.FC<IProps> = ({ userVote, legislator, open,
                         Unfortunately, it's not possible to email {legislator.title} {legislator.fullName} directly.
                     </span>
                     <span>You can, however, email them through their website at:</span>
-                    <a target="_blank" href={legislator.email}>
+                    <a target="_blank" rel="noreferrer" href={legislator.email}>
                         {legislator.email}
                     </a>
                     <span>
@@ -251,28 +238,7 @@ const ContactLegislatorDialog: React.FC<IProps> = ({ userVote, legislator, open,
                     <Modal.Header id="contact-legislator-dialog">
                         <Modal.Title>{`Increase your sway by ${verbing} your representatives.`}</Modal.Title>
                     </Modal.Header>
-                    <Modal.Body>
-                        {/* {legislator && (
-                <Form.Group controlId="legislator" className="my-2">
-                    <Form.Label>{titleize(verbing)}:</Form.Label>
-                    <Form.Control
-                        as="select"
-                        name="legislator"
-                        value={selectedLegislator?.externalId}
-                        onChange={handleChangeLegislator}
-                    >
-                        {legislators?.map((l) => {
-                            return (
-                                <option key={l.externalId} value={l.externalId}>
-                                    {l.title} {l.fullName}
-                                </option>
-                            );
-                        })}
-                    </Form.Control>
-                </Form.Group>
-            )} */}
-                        {render}
-                    </Modal.Body>
+                    <Modal.Body>{render}</Modal.Body>
                     <Modal.Footer>
                         <Button onClick={handleClose} variant="secondary">
                             <FiX />

diff --git a/app/frontend/components/dialogs/ContactLegislatorDialogButton.tsx b/app/frontend/components/dialogs/ContactLegislatorDialogButton.tsx