Merge pull request #29 from your-digital-rights/bugfix/substack

Bugfix/substack
your-digital-rights · Sep 17, 2024 · a3b99a3 · a3b99a3
2 parents 1109672 + d20e813
commit a3b99a3
Show file tree

Hide file tree

Showing 10 changed files with 414 additions and 443 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,11 +24,11 @@
     "@fortawesome/free-brands-svg-icons": "^5.9.0",
     "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "accepts": "^1.3.5",
-    "ag-grid-community": "^32.0.0",
-    "ag-grid-react": "^32.0.0",
+    "ag-grid-community": "^27.0.0",
+    "ag-grid-react": "^27.0.0",
     "cookie-cutter": "^0.2.0",
     "downshift": "^9.0.6",
     "isomorphic-fetch": "^3.0.0",
@@ -38,8 +38,8 @@
     "leaflet.markercluster": "^1.5.3",
     "mailgo": "^0.12.2",
     "mailto-link": "^2.0.0",
-    "next": "^14.1.1",
-    "next-seo": "^6.4.0",
+    "next": "^14.2.11",
+    "next-seo": "^6.6.0",
     "node-gyp": "^6.1.0",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
@@ -48,7 +48,7 @@
     "react-dom": "^18.2.0",
     "react-intl": "^6.6.8",
     "react-leaflet": "^4.2.1",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
+    "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
     "react-share": "^4.4.1",
     "sitemap": "^6.4.0",
     "universal-fetch": "^1.0.0"

diff --git a/frontend/src/components/DataBrokersList/index.js b/frontend/src/components/DataBrokersList/index.js
@@ -38,8 +38,8 @@ const DataBrokersDB = ({ classes, dataBrokers }) => {
       <>
       <Image 
         className={classes.orgLogo} 
-        width='20px' 
-        height='20px' 
+        width='20' 
+        height='20' 
         src={src} 
         placeholder="blur"
         blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVR42mMU3NlZz0AEYBxVSF+FAOEUEj9NKjNZAAAAAElFTkSuQmCC"
@@ -143,12 +143,12 @@ const DataBrokersDB = ({ classes, dataBrokers }) => {
     setSelectedDataBroker(e.data); 
   };
 
-  const Map = dynamic(
-    () => import("../MainMap"), 
+  const Map = React.useMemo(() => dynamic(
+    () => import('../MainMap'), // replace '@components/map' with your component's location
     { 
-      ssr: false 
-    } // This line is important. It's what prevents server-side render
-  );
+      ssr: false // This line is important. It's what prevents server-side render
+    }
+  ), [selectedDataBroker])
 
   return (
     <div className={classes.container}>

diff --git a/frontend/src/components/Footer/index.js b/frontend/src/components/Footer/index.js
@@ -113,7 +113,7 @@ const Footer = ({ classes }) => {
               id="footer.privacyPolicy"
               defaultMessage="<a>Privacy Policy</a>"
               values={{
-                a: txt=> (<Link href="/privacy" ><a className={classes.DisclaimerLink}>{txt}</a></Link>)
+                a: txt=> (<Link legacyBehavior href="/privacy" ><a className={classes.DisclaimerLink}>{txt}</a></Link>)
               }}
             />
           </Typography>
@@ -122,7 +122,7 @@ const Footer = ({ classes }) => {
               id="footer.mission"
               defaultMessage="<a>Mission</a>"
               values={{
-                a: txt=> (<Link href="/about" ><a className={classes.DisclaimerLink}>{txt}</a></Link>)
+                a: txt=> (<Link legacyBehavior href="/about" ><a className={classes.DisclaimerLink}>{txt}</a></Link>)
               }}
             />
           </Typography> 

diff --git a/frontend/src/components/MainMap/index.js b/frontend/src/components/MainMap/index.js
@@ -3,9 +3,9 @@ import { MapContainer, Marker, Popup, TileLayer, useMap} from 'react-leaflet'
 import 'leaflet/dist/leaflet.css'
 import { Style as styles } from "./styles";
 import { withStyles } from "@material-ui/core/styles";
-import MarkerClusterGroup from 'react-leaflet-markercluster';
+import MarkerClusterGroup from '@changey/react-leaflet-markercluster';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import 'react-leaflet-markercluster/dist/styles.min.css';
+import '@changey/react-leaflet-markercluster/dist/styles.min.css';
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
 import 'leaflet-defaulticon-compatibility';
 import Typography from "@material-ui/core/Typography";
@@ -34,10 +34,8 @@ const Map = (props) => {
 };
 
 const DataBrokersGroup = ({dataBrokers, classes, selectedDataBroker}) => {
-	const map = useMap();
 	const groupRef = React.useRef(null);
 	const dataBrokersWithLocation = dataBrokers.filter((dataBroker) => dataBroker.latlng && dataBroker.latlng.length > 0);
-
 	const [markers, setMarkers] = React.useState({})
 
 	const markersRef = React.useCallback((dataBroker, marker) => {

diff --git a/frontend/src/components/Nav/index.js b/frontend/src/components/Nav/index.js
@@ -22,7 +22,7 @@ const NavItem = ({
 }) => {
   return (
     <li className={classes.item} onClick={onClickHandler}>
-      <Link href={href} className={classes.link} passHref>
+      <Link legacyBehavior href={href} className={classes.link} passHref>
         <Typography
           component="a"
           target={target}

diff --git a/frontend/src/components/Social/index.js b/frontend/src/components/Social/index.js
@@ -134,6 +134,9 @@ const styles = (theme) => ({
     marginLeft: "3px",
   },
 
+  ssBtn: {
+    marginRight: "20px",
+  },
 });
 
 const Social = ({
@@ -204,7 +207,7 @@ const Social = ({
           "https://yourdigitalrights.org/?pk_campaign=siteshare&pk_kwd=facebook&pk_source=" +
           sourcePage
         }
-        className="ss-btn"
+        className={classes.ssBtn}
         quote={facebookQuote}
       >
         <img src="/images/sh/fb.svg" />
@@ -216,7 +219,7 @@ const Social = ({
           "https://yourdigitalrights.org/?pk_campaign=siteshare&pk_kwd=linkedin&pk_source=" +
           sourcePage
         }
-        className="ss-btn"
+        className={classes.ssBtn}
       >
         <img src="/images/sh/lin.svg" />
       </LinkedinShareButton>
@@ -234,14 +237,14 @@ const Social = ({
           "SurveillanceCapitalism",
           "Privacy",
         ]}
-        className="ss-btn"
+        className={classes.ssBtn}
       >
         <img src="/images/sh/tw.svg" />
       </TwitterShareButton>
       <a
         href={emailLink}
         onClick={handleEmailClick}
-        className="ss-btn SocialMediaShareButton--email"
+        className="SocialMediaShareButton--email"
       >
         <img src="/images/sh/mail.svg" />
       </a>

diff --git a/frontend/src/components/Subscribe/index.js b/frontend/src/components/Subscribe/index.js
@@ -3,11 +3,6 @@ import styles from "./styles";
 import { withStyles } from "@material-ui/core/styles";
 import tracking from "../../utils/tracking";
 import { FormattedMessage } from "react-intl";
-import Script from 'next/script'
-
-const handleSignUpClick = (e) => {
-  e.preventDefault();
-}
 
 const Subscribe = ({ classes, children, page="thank-you"}) => {
   const trackSubscribe = () => {
@@ -23,7 +18,6 @@ const Subscribe = ({ classes, children, page="thank-you"}) => {
               color="inherit" 
               variant="h3"
               component="h3"
-              className={classes.intro}
               gutterBottom={true}
             >
               <FormattedMessage id="subscribe.title" defaultMessage="Subscribe To Privacy Alerts!" />
@@ -41,7 +35,7 @@ const Subscribe = ({ classes, children, page="thank-you"}) => {
             </Typography> 
           </div>
           <div className={classes.substack}>
-            <iframe src="https://consciousdigital.substack.com/embed" width="350" height="100" frameborder="0" ></iframe>
+          <iframe src="https://newsletter.yourdigitalrights.org/embed" width="350" height="150" frameborder="0" scrolling="no"></iframe>
           </div>    
         </div>
       </div>

diff --git a/frontend/src/components/Subscribe/styles.js b/frontend/src/components/Subscribe/styles.js
@@ -4,12 +4,12 @@ import { theme } from "../../styles/theme";
 const Theme = (theme) => ({
   heading: {
     color: "white",
-    padding: "25px 20px",
+    padding: "25px 8% 20px",
     backgroundColor: "#039277",
     borderRadius: "20px",
     maxWidth: "980px !important",
-    margin: "30px",
-    [theme.breakpoints.down("sm")]: {
+    margin: "30px 30px 60px",
+    [theme.breakpoints.down('md')]: {
       display: "inherit",
       margin: "auto 10px",
     },
@@ -19,13 +19,13 @@ const Theme = (theme) => ({
     boxSizing: "border-box",
     textAlign: "center",
     ...container,
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down('md')]: {
       paddingLeft: "0px",
       paddingRight: "0px",
     }
   },
   image: {
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down('md')]: {
       display: "none",
     },
   },
@@ -37,10 +37,22 @@ const Theme = (theme) => ({
   },
   substack: {
     marginTop: "20px",
+    justifyContent: "center",
     alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+  },
+  error: {
+    color: "black",
+  }, 
+  success: {
+    color: "black",
   },
   signUpButton: {
     marginTop: "20px",
+  },
+  intro: {
+    marginBottom: "20px",
   }
 });
 

diff --git a/frontend/src/pages/top-ten.js b/frontend/src/pages/top-ten.js
@@ -131,7 +131,7 @@ const Brokers = ({ classes, router }) => {
                 {dataBrokers.map((company) => (
                   <Grid key={company.domain} item>
                     <Paper className={classes.paper} elevation={2} >
-                      <Link href={"https://yourdigitalrights.org/d/" + company.domain} passHref> 
+                      <Link legacyBehavior href={"https://yourdigitalrights.org/d/" + company.domain} passHref> 
                         <GridListTile
                           component="a"
                           target="_blank"