Misc updates

solana-foundation · Sep 8, 2024 · 004163e · 004163e
1 parent e7bc4f0
commit 004163e
Show file tree

Hide file tree

Showing 12 changed files with 413 additions and 120 deletions.
diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml
@@ -20,7 +20,7 @@ jobs:
       - name: installing_yarn
         run: yarn install
       - name: formatting
-        run: yarn format
+        run: yarn format:check
   stage:
     name: Test linting...
     needs: Format
@@ -37,4 +37,4 @@ jobs:
       - name: installing_yarn & lint
         run: |
           yarn install
-          yarn run lint
+          yarn lint
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,2 +1,2 @@
-yarn format
+yarn format:check
 yarn lint
diff --git a/package.json b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "solana-com",
-  "private": true,
   "description": "The solana.com website",
   "version": "3.0.0",
   "author": "Solana Maintainers",
@@ -70,27 +69,21 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^9.0.11",
     "next-sitemap": "^4.2.3",
-    "next-transpile-modules": "^10.0.1",
     "postcss": "^8.4.38",
     "postcss-preset-env": "^9.5.14",
     "prettier": "^3.2.5",
     "svg-react-loader": "^0.4.6",
     "typescript": "^5.4.5"
   },
   "scripts": {
-    "build": "echo 'Building solana-com...' && next build",
+    "build": "next build",
     "dev": "next",
-    "develop": "yarn dev",
     "start": "next start",
-    "format": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
-    "format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
+    "format:all": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,scss}\"",
     "lint": "next lint",
-    "lint:fix": "yarn lint --fix",
-    "vdev": "vercel dev --debug",
+    "lint:fix": "next lint --fix",
     "postbuild": "next-sitemap",
     "prepare": "husky"
-  },
-  "msw": {
-    "workerDirectory": "public"
   }
 }
diff --git a/src/components/ModalLauncher/ModalLauncher.js b/src/components/ModalLauncher/ModalLauncher.js
@@ -1,4 +1,11 @@
-import { useEffect, useState, useRef, createElement } from "react";
+import {
+  useEffect,
+  useState,
+  useRef,
+  createElement,
+  useCallback,
+  useMemo,
+} from "react";
 import { useRouter } from "next/router";
 import { Modal, CloseButton } from "react-bootstrap";
 import ArtistsAndCreatorsNewsletter from "../newsletter/artistsAndCreators";
@@ -10,11 +17,14 @@ const ModalLauncher = () => {
   const [modalLaunchId, setModalLaunchId] = useState("default");
   const modalActionCompleted = useRef(false);
 
-  const modalMapping = {
-    artistAndCreatorsNewsletter: ArtistsAndCreatorsNewsletter,
-  };
+  const modalMapping = useMemo(
+    () => ({
+      artistAndCreatorsNewsletter: ArtistsAndCreatorsNewsletter,
+    }),
+    [],
+  );
 
-  const modalCloseHandler = () => {
+  const modalCloseHandler = useCallback(() => {
     // if the modal action is not complete, track bounce
     if (!modalActionCompleted.current && typeof window.gtag !== "undefined") {
       window.gtag("event", "modal_bounce", {
@@ -37,7 +47,7 @@ const ModalLauncher = () => {
       undefined,
       { shallow: true },
     );
-  };
+  }, [modalLaunchId, router]);
 
   useEffect(() => {
     const { modalLaunch, modalLaunchId } = router.query;
@@ -68,7 +78,7 @@ const ModalLauncher = () => {
       setShowModal(false);
       setModalComponent(null);
     }
-  }, [router.query]);
+  }, [router.query, modalCloseHandler, modalMapping]);
 
   return (
     <Modal

diff --git a/src/components/blog/PostCard.js b/src/components/blog/PostCard.js
@@ -170,7 +170,11 @@ const PostCard = ({ post, index, isFirstPage, variant = "primary" }) => {
               height={1073}
             />
           </Link>
-          <h2 className="post-card-title secondary">{post?.data?.title}</h2>
+          <h2 className="post-card-title secondary">
+            {typeof post?.data?.title === "string"
+              ? post.data.title
+              : post?.data?.title?.Default}
+          </h2>
         </div>
         <Link to={url} className="post-card-button">
           {t("blog.read-article")}
@@ -198,7 +202,11 @@ const PostCard = ({ post, index, isFirstPage, variant = "primary" }) => {
                   <small className="d-block post-card-date">
                     <PublishedAt publishedDateString={publishedDate} />
                   </small>
-                  <h2 className="post-card-title">{post?.data?.title}</h2>
+                  <h2 className="post-card-title">
+                    {typeof post?.data?.title === "string"
+                      ? post.data.title
+                      : post?.data?.title?.Default}
+                  </h2>
                   <p className="post-card-excerpt">{excerpt}</p>
                 </div>
               </div>
@@ -232,7 +240,11 @@ const PostCard = ({ post, index, isFirstPage, variant = "primary" }) => {
                 <span className="d-block post-card-date">
                   <PublishedAt publishedDateString={publishedDate} />
                 </span>
-                <h2 className="post-card-title">{post?.data?.title}</h2>
+                <h2 className="post-card-title">
+                  {typeof post?.data?.title === "string"
+                    ? post.data.title
+                    : post?.data?.title?.Default}
+                </h2>
                 <p className="post-card-excerpt">{excerpt}</p>
               </div>
             ) : (

diff --git a/src/components/news/CategorySelection.js b/src/components/news/CategorySelection.js
@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useCallback } from "react";
 import styles from "./CategorySelection.module.scss";
 import classNames from "classnames";
 import { SwitcherButtons } from "@solana-foundation/solana-lib";
@@ -29,7 +29,7 @@ const CategorySelection = ({
     return arr.length; // Return -1 if the sum never exceeds maxNumber
   };
 
-  const updateDisplayedItems = () => {
+  const updateDisplayedItems = useCallback(() => {
     const containerWidth = categoryContainer.current.offsetWidth;
     const dropdownWidth = moreCategoriesLabel?.length * 10 + 70; // 70 = padding + ~margin
     maxDisplayItems.current = findExceedingIndex(
@@ -45,7 +45,7 @@ const CategorySelection = ({
       setDisplayCategories(categories);
       setMoreCategories([]);
     }
-  };
+  }, [buttonWidths, moreCategoriesLabel, categories]); // Added 'categories' to dependencies
 
   // estimate the widths of the category buttons on initial render
   // note: can't rely on actual widths because some buttons are stored in the dropdown and are not accessible
@@ -66,7 +66,7 @@ const CategorySelection = ({
     return () => {
       window.removeEventListener("resize", updateDisplayedItems);
     };
-  }, [buttonWidths]);
+  }, [buttonWidths, updateDisplayedItems]);
 
   return (
     <>

diff --git a/src/components/possible/PossibleAnimatedIcons.js b/src/components/possible/PossibleAnimatedIcons.js
@@ -21,16 +21,18 @@ const PossibleAnimatedIcons = ({
       },
     );
 
-    if (videoRef.current) {
-      observer.observe(videoRef.current);
+    const currentVideoRef = videoRef.current; // Store the current ref
+
+    if (currentVideoRef) {
+      observer.observe(currentVideoRef);
     }
 
     return () => {
-      if (videoRef.current) {
-        observer.unobserve(videoRef.current);
+      if (currentVideoRef) {
+        observer.unobserve(currentVideoRef);
       }
     };
-  }, [videoSrc]);
+  }, []);
 
   const handleVideoError = () => {
     setShowFallback(true);

diff --git a/src/components/shared/Divider.js b/src/components/shared/Divider.js
@@ -3,19 +3,19 @@ import styled from "styled-components";
 const StyledDivider = styled.div`
   height: ${(props) => props.height || "auto"};
   ${(props) =>
-    props.axis === "x"
+    props.$axis === "x"
       ? "border-top"
-      : props.axis === "y"
+      : props.$axis === "y"
         ? "border-right"
         : "border"}: 1px solid
     rgba(
       ${(props) =>
-    props.theme === "light"
+    props.$theme === "light"
       ? "255, 255, 255"
-      : props.theme === "dark"
+      : props.$theme === "dark"
         ? "0, 0, 0"
-        : "100,100,100"},
-      ${(props) => props.alpha || 0.4}
+        : "100, 100, 100"},
+      ${(props) => props.$alpha || 0.4}
     );
 `;
 
@@ -32,9 +32,9 @@ const StyledDivider = styled.div`
 const Divider = ({ theme, alpha, axis, height, className }) => (
   <StyledDivider
     role="separator"
-    theme={theme}
-    alpha={alpha}
-    axis={axis}
+    $theme={theme}
+    $alpha={alpha}
+    $axis={axis}
     height={height}
     className={className}
   />

diff --git a/src/components/shared/Link.js b/src/components/shared/Link.js
@@ -25,7 +25,7 @@ export const Link = ({
         asPath.includes(to) &&
         !partiallyActiveIgnore.filter((el) => asPath.startsWith(el)).length)
     );
-  }, [partiallyActive, asPath, to]);
+  }, [partiallyActive, asPath, to, partiallyActiveIgnore]); // Added partiallyActiveIgnore to dependencies
 
   if (internal) {
     const { scroll, prefetch, ...aProps } = other;

diff --git a/src/pages/news/index.js b/src/pages/news/index.js
@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useMemo } from "react";
 import { builder, BuilderComponent } from "@builder.io/react";
 import HTMLHead from "../../components/builder/HTMLHead";
 import Layout from "../../components/layout";
@@ -36,20 +36,22 @@ const BlogIndex = ({ builderLocale, newsListingPage, pressRelease, posts }) => {
   const newsContent = newsListingPage;
 
   // convert Builder category data to switcherButtons data and prepend a 'All' category with a null value
-  const categoryFilters = [
-    {
-      category: "All",
-      value: null,
-      id: null,
-    },
-    ...(categoryFiltersData?.map((item, index) => {
-      return {
-        category: item.category.value.name,
-        value: index + 1,
-        id: item.category.value.id,
-      };
-    }) || []),
-  ];
+  const categoryFilters = useMemo(() => {
+    return [
+      {
+        category: "All",
+        value: null,
+        id: null,
+      },
+      ...(categoryFiltersData?.map((item, index) => {
+        return {
+          category: item.category.value.name,
+          value: index + 1,
+          id: item.category.value.id,
+        };
+      }) || []),
+    ];
+  }, [categoryFiltersData]);
 
   // convert Builder press release data to Slider data
   const pressReleaseSliderData =
@@ -66,45 +68,46 @@ const BlogIndex = ({ builderLocale, newsListingPage, pressRelease, posts }) => {
     }) || [];
 
   // convert Builder post data to CardDeck data
-  const allPostData =
-    posts
-      ?.map((post) => {
-        const postData = post?.data;
-        if (!postData) {
-          return null;
-        }
-
-        return {
-          type: "blog",
-          publishedDate: postData?.datePublished,
-          heading: postData?.title,
-          body: postData?.intro,
-          backgroundImage: {
-            src: postData?.image || "/src/img/news/blogbackup.png",
-          },
-          tags:
-            postData?.tags?.map((item) => {
-              return item.tag ? item.tag.id : null;
-            }) || [],
-          callToAction: {
-            hierarchy: "link",
-            size: "md",
-            label: newsListingPage?.callToActionLabel || t("blog.readArticle"),
-            endIcon: "arrow-up-right",
-            iconSize: "sm",
-            url: `/news/${postData?.slug || ""}`,
-          },
-        };
-      })
-      .filter(Boolean)
-      .sort((a, b) => {
-        // Convert dates to a format that can be compared
-        const dateA = new Date(a.publishedDate);
-        const dateB = new Date(b.publishedDate);
-
-        // Compare the dates to determine the order
-        return dateB - dateA;
-      }) || [];
+  const allPostData = useMemo(() => {
+    return (
+      posts
+        ?.map((post) => {
+          const postData = post?.data;
+          if (!postData) {
+            return null;
+          }
+
+          return {
+            type: "blog",
+            publishedDate: postData?.datePublished,
+            heading: postData?.title,
+            body: postData?.intro,
+            backgroundImage: {
+              src: postData?.image || "/src/img/news/blogbackup.png",
+            },
+            tags:
+              postData?.tags?.map((item) => {
+                return item.tag ? item.tag.id : null;
+              }) || [],
+            callToAction: {
+              hierarchy: "link",
+              size: "md",
+              label:
+                newsListingPage?.callToActionLabel || t("blog.readArticle"),
+              endIcon: "arrow-up-right",
+              iconSize: "sm",
+              url: `/news/${postData?.slug || ""}`,
+            },
+          };
+        })
+        .filter(Boolean)
+        .sort((a, b) => {
+          const dateA = new Date(a.publishedDate);
+          const dateB = new Date(b.publishedDate);
+          return dateB - dateA;
+        }) || []
+    );
+  }, [posts, newsListingPage?.callToActionLabel, t]);
 
   // Set state for all post data
   const [postResults, setPostResults] = useState(allPostData);
@@ -155,7 +158,13 @@ const BlogIndex = ({ builderLocale, newsListingPage, pressRelease, posts }) => {
       setPostResults(results);
       setNumResults(postsPerPage);
     }
-  }, [categoryFilter, searchFilter]);
+  }, [
+    categoryFilter,
+    searchFilter,
+    allPostData,
+    categoryFilters,
+    postsPerPage,
+  ]);
 
   return (
     <Layout>