Loading context added

package.json

@@ -16,15 +16,15 @@
     "test.watch": "jest --watch"
   },
   "dependencies": {
-    "@vercel/speed-insights": "^1.0.8",
+    "@vercel/speed-insights": "^1.0.10",
     "bootstrap": "^5.3.2",
     "date-fns": "^3.3.1",
     "fuse.js": "^6.6.2",
     "google-spreadsheet": "^3.3.0",
     "gray-matter": "^4.0.3",
-    "marked": "^4.3.0",
-    "next": "^13.4.4",
-    "next-cloudinary": "^4.21.0",
+    "marked": "^12.0.0",
+    "next": "^14.1.1",
+    "next-cloudinary": "6.0.1",
     "next-pwa": "^5.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -36,21 +36,21 @@
     "sharp": "^0.33.2"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.3.1",
-    "@testing-library/jest-dom": "^6.3.0",
+    "@next/eslint-plugin-next": "^14.1.1",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/google-spreadsheet": "^3.3.1",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.12",
     "@types/marked": "^5.0.2",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
     "@types/react-responsive-masonry": "^2.1.3",
     "@types/react-transition-group": "^4.4.10",
     "@types/rellax": "^1.7.7",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
-    "@vercel/analytics": "^1.1.2",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@vercel/analytics": "^1.2.2",
     "eslint": "8",
     "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.1.0",

src/arrays/social-icons.tsx

@@ -1,5 +1,12 @@
 import { ReactElement } from "react";
-import { BandcampIcon, EmailIcon, FacebookIcon, InstaIcon, SoundCloudIcon } from "components/Icon";
+import {
+  BandcampIcon,
+  EmailIcon,
+  FacebookIcon,
+  InstaIcon,
+  RaIcon,
+  SoundCloudIcon,
+} from "components/Icon";
 import { plantbassdInstagram } from "utils/constants";
 import { IconType } from "components/Icon/types";
 
@@ -25,6 +32,11 @@ export const socialIcons: IconsProps[] = [
     icon: <EmailIcon />,
     name: "Email" as IconType,
   },
+  {
+    link: "https://ra.co/promoters/103854",
+    icon: <RaIcon />,
+    name: "resident advisor",
+  },
   {
     link: "https://soundcloud.com/plantbassdworld",
     icon: <SoundCloudIcon />,

src/components/FilterTags/FilterTags.module.scss

@@ -17,10 +17,12 @@
   text-transform: uppercase;
   font-size: 1.4rem;
 }
+
 .tagged {
   display: flex;
   gap: 0.25rem;
   align-items: center;
+
   svg {
     width: 0.9rem;
     height: 0.9rem;

src/components/Loading/Loading.tsx

@@ -1,11 +1,11 @@
-import styles from "./loading.module.scss";
+import { ReactNode, useContext } from "react";
+import { LoadingContext } from "context/loading.context";
+import { Spinner } from "./Spinner";
 
-export const Loading = ({ button }: { button?: boolean }) => {
-  return (
-    <div className={button ? styles.button : styles.loading}>
-      <div className={button ? styles.btnBorder : styles.border}>
-        <span className={styles.hidden}>Loading...</span>
-      </div>
-    </div>
-  );
+export const Loading = ({ children }: { children: ReactNode }) => {
+  const { loading } = useContext(LoadingContext);
+  if (loading) {
+    return <Spinner />;
+  }
+  return children;
 };

src/components/Loading/Spinner.tsx

@@ -0,0 +1,11 @@
+import styles from "./Spinner.module.scss";
+
+export const Spinner = ({ button }: { button?: boolean }) => {
+  return (
+    <div className={button ? styles.button : styles.loading}>
+      <div className={button ? styles.btnBorder : styles.border}>
+        <span className={styles.hidden}>Loading...</span>
+      </div>
+    </div>
+  );
+};

src/components/Loading/index.ts

@@ -1 +1,2 @@
 export { Loading } from "./Loading";
+export { Spinner } from "./Spinner";

src/components/Signup/Signup.tsx

@@ -1,4 +1,4 @@
-import { Loading } from "components/Loading";
+import { Spinner } from "components/Loading";
 import { HoverLink } from "components/HoverLink";
 import { useNewsletter } from "hooks/useNewsletter.hook";
 import { CheckIcon } from "components/Icon";
@@ -19,7 +19,7 @@ export const Signup = ({ linktree }: { linktree?: boolean }) => {
   } = useNewsletter();
 
   const handleButtonView = () => {
-    if (loading) return <Loading button />;
+    if (loading) return <Spinner button />;
     if (complete) {
       return (
         <button className="btn btn-outline-success shake" disabled>

src/components/Slug/Slug.tsx

@@ -4,6 +4,7 @@ import styles from "styles/slug.module.scss";
 import { HoverLink } from "components/HoverLink";
 import { Picture } from "components/Picture";
 import { BandCamp, SoundCloud, VideoPlayer, YouTube } from "components/Players";
+import { Loading } from "components/Loading";
 import { ImageAndDescription } from "./ImageAndDescription";
 import { TextAndMedia } from "./TextAndMedia";
 
@@ -34,14 +35,16 @@ export const Slug = (props: SlugProps) => {
     ? styles.fullWidth
     : `${styles.postContent} col-lg-8 col-md-12 col-xl-8`;
   return (
-    <div className={styling}>
-      <p className="mb-1">
-        {<HoverLink url="/" name="home" />} / {<HoverLink url={`/${path}`} name={path} />} /
-      </p>
-      <p>Posted on {date}</p>
-      <h1>{title}</h1>
-      <MDXRemote {...mdxSource} components={components} lazy />
-      {children}
-    </div>
+    <Loading>
+      <div className={styling}>
+        <p className="mb-1">
+          {<HoverLink url="/" name="home" />} / {<HoverLink url={`/${path}`} name={path} />} /
+        </p>
+        <p>Posted on {date}</p>
+        <h1>{title}</h1>
+        <MDXRemote {...mdxSource} components={components} lazy />
+        {children}
+      </div>
+    </Loading>
   );
 };

src/pages/archive/index.tsx

@@ -1,6 +1,5 @@
 import { InferGetStaticPropsType } from "next";
 import { GetStaticProps } from "next/types";
-import { useContext } from "react";
 import Error from "components/Error";
 import { useSearchFilter } from "hooks/useSearchFilter.hook";
 import { TextCard } from "components/Card";
@@ -10,12 +9,10 @@ import { SearchBox } from "components/SearchBox";
 import { getAllPosts } from "utils/getAllPosts";
 import PageMetaData from "components/PageMetaData";
 import { sortByMostRecentDate } from "utils";
-import { SocialGroup } from "components/Icon/SocialGroup";
+import { SocialGroup } from "components/Icon";
 import { Loading } from "components/Loading";
-import { LoadingContext } from "context/loading.context";
 
 export default function ArchivePage({ files }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const { loading } = useContext(LoadingContext);
   const { searchError, filter, searchHasErrored, postCards, handleSearchChange } =
     useSearchFilter(files);
 
@@ -34,9 +31,7 @@ export default function ArchivePage({ files }: InferGetStaticPropsType<typeof ge
 
       <SocialGroup icons={["instagram", "email"]} />
 
-      {loading ? (
-        <Loading />
-      ) : (
+      <Loading>
         <div className="row g-2">
           {postCards.map((story: AllPostProps) => (
             <TextCard
@@ -46,7 +41,7 @@ export default function ArchivePage({ files }: InferGetStaticPropsType<typeof ge
             />
           ))}
         </div>
-      )}
+      </Loading>
     </div>
   );
 }

src/pages/delete-email/index.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, FormEvent, useState } from "react";
-import { Loading } from "components/Loading";
+import { Spinner } from "components/Loading";
 import styles from "components/Signup/Signup.module.scss";
 import { CheckIcon } from "components/Icon";
 
@@ -42,7 +42,7 @@ export default function DeleteEmail() {
   };
 
   const handleButtonView = () => {
-    if (loading) return <Loading button />;
+    if (loading) return <Spinner button />;
     return (
       <button className="btn btn-outline-dark" type="submit" disabled={error ? true : false}>
         Update

src/pages/fresh-juice/index.tsx

@@ -1,6 +1,6 @@
 import { InferGetStaticPropsType } from "next";
 import { GetStaticProps } from "next/types";
-import { useContext } from "react";
+
 import Error from "components/Error";
 import { useSearchFilter } from "hooks/useSearchFilter.hook";
 import { TextCard } from "components/Card";
@@ -10,14 +10,13 @@ import { SearchBox } from "components/SearchBox";
 import { getPosts } from "utils/getPosts";
 import PageMetaData from "components/PageMetaData";
 import { sortByMostRecentDate } from "utils";
-import { SocialGroup } from "components/Icon/SocialGroup";
-import { LoadingContext } from "context/loading.context";
+import { SocialGroup } from "components/Icon";
+
 import { Loading } from "components/Loading";
 
 export default function FreshJuicePage({
   freshjuice,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const { loading } = useContext(LoadingContext);
   const { searchError, filter, searchHasErrored, postCards, handleSearchChange } =
     useSearchFilter(freshjuice);
 
@@ -42,9 +41,7 @@ export default function FreshJuicePage({
       />
       <SocialGroup icons={["instagram", "bandcamp"]} />
 
-      {loading ? (
-        <Loading />
-      ) : (
+      <Loading>
         <div className="row g-3">
           {postCards.map((juice: AllPostProps) => (
             <TextCard
@@ -54,7 +51,7 @@ export default function FreshJuicePage({
             />
           ))}
         </div>
-      )}
+      </Loading>
     </div>
   );
 }

src/pages/gallery/[slug].tsx

@@ -23,24 +23,22 @@ export default function NewsSlug({
         url={`www.plantbassd.com/${slug}`}
       />
       <div className="row">
-        {
-          <Slug path={path} date={date} title={title} mdxSource={mdxSource} fullWidth>
-            <div style={{ margin: "2rem 0" }}>
-              <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}>
-                <Masonry gutter="2px">
-                  {[...Array(gallerySize).keys()].map((image) => (
-                    <Picture
-                      key={image}
-                      src={`/${gallery}/${image}.JPG`}
-                      alt={`image ${image}`}
-                      size={400}
-                    />
-                  ))}
-                </Masonry>
-              </ResponsiveMasonry>
-            </div>
-          </Slug>
-        }
+        <Slug path={path} date={date} title={title} mdxSource={mdxSource} fullWidth>
+          <div style={{ margin: "2rem 0" }}>
+            <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}>
+              <Masonry gutter="2px">
+                {[...Array(gallerySize).keys()].map((image) => (
+                  <Picture
+                    key={image}
+                    src={`/${gallery}/${image}.JPG`}
+                    alt={`image ${image}`}
+                    size={400}
+                  />
+                ))}
+              </Masonry>
+            </ResponsiveMasonry>
+          </div>
+        </Slug>
       </div>
     </div>
   );

src/pages/gallery/index.tsx

@@ -1,6 +1,6 @@
 import { InferGetStaticPropsType } from "next";
 import { GetStaticProps } from "next/types";
-import { useContext } from "react";
+
 import { useTagsFilter } from "hooks";
 import Error from "components/Error";
 import { FilterTags } from "components/FilterTags";
@@ -10,8 +10,8 @@ import { AllPostProps } from "types/frontmatter";
 import { getPosts } from "utils/getPosts";
 import PageMetaData from "components/PageMetaData";
 import { sortByMostRecentDate } from "utils";
-import { SocialGroup } from "components/Icon/SocialGroup";
-import { LoadingContext } from "context/loading.context";
+import { SocialGroup } from "components/Icon";
+
 import { Loading } from "components/Loading";
 
 const gigsTags = [
@@ -22,7 +22,6 @@ const gigsTags = [
 ];
 
 export default function GalleryPage({ gigs }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const { loading } = useContext(LoadingContext);
   const { tagsError, tagsHasErrored, filteredPosts, tagList, handleTags } = useTagsFilter(
     gigsTags,
     gigs,
@@ -47,9 +46,7 @@ export default function GalleryPage({ gigs }: InferGetStaticPropsType<typeof get
 
       <SocialGroup icons={["instagram", "resident advisor"]} />
 
-      {loading ? (
-        <Loading />
-      ) : (
+      <Loading>
         <div className="row g-3">
           {filteredPosts.map((gig: AllPostProps) => (
             <TextCard
@@ -59,7 +56,7 @@ export default function GalleryPage({ gigs }: InferGetStaticPropsType<typeof get
             />
           ))}
         </div>
-      )}
+      </Loading>
     </div>
   );
 }