turn on strict typescript

src/components/ArtistLookUp/ArtistLookUp.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
 import { guestList, headliners } from "arrays/previous-guests";
-import { defaultGuest, GuestSlug, PreviousGuestType } from "components/PreviousGuest/types";
+import { defaultGuest, PreviousGuestType } from "components/PreviousGuest/types";
 import { PreviousGuest } from "components/PreviousGuest";
+import { PostProps } from "types/frontmatter";
 import { ArtistModal } from "./ArtistModal";
 
 interface LookUpProps {
   anames: string[];
-  gigs: GuestSlug[];
+  gigs: PostProps[];
   current: string;
 }
 
@@ -22,16 +23,16 @@ export const ArtistLookUp = ({ anames, gigs, current }: LookUpProps) => {
         {anames.map((name) => {
           const dj = djs.find((dj) => name.toLowerCase() === dj.name.toLowerCase());
 
-          if (!dj) return <></>;
-
-          return (
-            <PreviousGuest
-              key={dj.name}
-              artist={dj}
-              setModalData={setModalData}
-              setShow={setShow}
-            />
-          );
+          if (dj) {
+            return (
+              <PreviousGuest
+                key={dj.name}
+                artist={dj}
+                setModalData={setModalData}
+                setShow={setShow}
+              />
+            );
+          }
         })}
       </div>
       <ArtistModal data={modalData} show={show} setShow={setShow} gigs={gigs} current={current} />

src/components/ArtistLookUp/ArtistModal.tsx

@@ -1,22 +1,23 @@
 import Link from "next/link";
 import { Modal } from "components/Modal";
-import { GuestSlug, PreviousGuestType } from "components/PreviousGuest/types";
+import { PreviousGuestType } from "components/PreviousGuest/types";
 import { Picture } from "components/Picture";
+import { PostProps } from "types/frontmatter";
 import styles from "./ArtistLookUp.module.scss";
 
 interface ArtistModalProps {
   data: PreviousGuestType;
   show: boolean;
   setShow: (show: boolean) => void;
-  gigs: GuestSlug[];
+  gigs: PostProps[];
   current?: string;
 }
 
 export const ArtistModal = ({ data, show, setShow, gigs, current }: ArtistModalProps) => {
   const previousGigs = data.gig.filter((gig) => gig !== current);
 
   const getArtistGigs = (url: string) => {
-    const gig: GuestSlug = gigs.find((gig: GuestSlug) => gig.frontmatter.tickets === url);
+    const gig = gigs.find(({ frontmatter }) => frontmatter.tickets === url);
 
     if (gig && "frontmatter" in gig && "slug" in gig) {
       const { frontmatter, slug } = gig;

src/components/Button/Button.module.scss

@@ -59,3 +59,9 @@
 .wide {
   padding: 0.375rem 1rem;
 }
+
+.showbox {
+  display: flex;
+  margin-top: 2rem;
+  gap: 0.25rem;
+}

src/components/Button/Showbox.tsx

@@ -0,0 +1,19 @@
+import styles from "./Button.module.scss";
+
+interface ShowboxProps {
+  handleLoadMore: () => void;
+  handleLoadAll: () => void;
+}
+
+export const Showbox = ({ handleLoadMore, handleLoadAll }: ShowboxProps) => {
+  return (
+    <div className={styles.showbox}>
+      <button className="btn btn-outline-dark" onClick={handleLoadMore} role="button">
+        Load More
+      </button>
+      <button className="btn btn-dark" onClick={handleLoadAll} role="button">
+        Load All
+      </button>
+    </div>
+  );
+};

src/components/Button/index.ts

@@ -1 +1,2 @@
+export { Showbox } from "./Showbox";
 export { Button } from "./Button";

src/components/Card/StickyCard.tsx

@@ -22,9 +22,11 @@ export const StickyCard = (props: CardProps) => {
       <div className={styles.newsImage}>
         <Picture alt={title} size={600} src={pic} />
         <div className={`row ${styles.widthOverride}`}>
-          <div className="col-6">
-            <Button to={page} text={artist} />
-          </div>
+          {page && (
+            <div className="col-6">
+              <Button to={page} text={artist} />
+            </div>
+          )}
           <div className="col-6">
             <Button to={link} text={insta} />
           </div>

src/components/Card/TextCard.tsx

@@ -1,32 +1,32 @@
 import Link from "next/link";
-import { CardProps } from "types/frontmatter";
+import { PostProps } from "types/frontmatter";
 import { Picture } from "components/Picture";
 import styles from "./Card.module.scss";
 
 interface Props {
   link: string;
-  post: CardProps;
+  post: PostProps;
   columns?: string;
 }
 
-export const TextCard = (props: Props) => {
-  const { post, link, columns = "col-6 col-sm-6 col-md-6 col-lg-3" } = props;
+export const TextCard = ({ post, link, columns = "col-6 col-sm-6 col-md-6 col-lg-3" }: Props) => {
+  const { title, pic, bio, date } = post.frontmatter;
   return (
     <div className={columns}>
       <Link href={link} className="anchorColor">
         <div className={`card border-0 h-100 ${styles.cardStyle}`}>
           <Picture
-            alt={post.frontmatter.title}
+            alt={title}
             size={500}
-            src={post.frontmatter.pic}
+            src={pic}
             style={{
               borderTopLeftRadius: "0.375rem",
               borderTopRightRadius: "0.375rem",
             }}
           />
           <div className={`${styles.cardBody} card-body`}>
-            <p className={styles.cardTitle}>{post.frontmatter.bio}</p>
-            <p className={styles.cardDate}>{post.frontmatter.date}</p>
+            <p className={styles.cardTitle}>{bio}</p>
+            <p className={styles.cardDate}>{date}</p>
           </div>
         </div>
       </Link>

src/components/Icon/Icon.tsx

@@ -52,5 +52,5 @@ export interface SocialIconProps {
 }
 
 export const Icon = ({ name }: SocialIconProps) => {
-  return IconMap[name.toLowerCase()];
+  return IconMap[name.toLowerCase() as IconType];
 };

src/components/Icon/SocialGroup.tsx

@@ -1,8 +1,8 @@
 import { SocialIcon } from "components/Icon";
-import { IconType } from "./types";
+import { SocialIconType } from "./types";
 
 interface SocialGroupI {
-  icons: IconType[];
+  icons: SocialIconType[];
 }
 
 export const SocialGroup = ({ icons }: SocialGroupI) => {

src/components/Icon/SocialIcon/SocialIcon.tsx

@@ -2,11 +2,7 @@ import Link from "next/link";
 import { plantbassdInstagram } from "utils/constants";
 import styles from "./SocialIcon.module.scss";
 import { Icon } from "../Icon";
-import { IconType } from "../types";
-
-interface SocialIconI {
-  text: IconType;
-}
+import { SocialIconType } from "../types";
 
 const link = {
   instagram: plantbassdInstagram,
@@ -17,7 +13,7 @@ const link = {
   spotify: "https://open.spotify.com/playlist/5skAgzUfGmZLwrOPNLnGVf?si=c5affedbcbc74e76",
 };
 
-export const SocialIcon = ({ text }: SocialIconI) => {
+export const SocialIcon = ({ text }: { text: SocialIconType }) => {
   return (
     <Link
       aria-label={text}

src/components/Icon/types.ts

@@ -29,3 +29,11 @@ export type IconType =
 export type IconMapType = {
   [key in IconType]: ReactElement;
 };
+
+export type SocialIconType =
+  | "instagram"
+  | "soundcloud"
+  | "bandcamp"
+  | "email"
+  | "resident advisor"
+  | "spotify";

src/components/Main/FreshJuice.tsx

@@ -1,13 +1,9 @@
-import { AllPostProps } from "types/frontmatter";
+import { PostProps } from "types/frontmatter";
 import { Button } from "components/Button";
 import { SimpleCard } from "components/Card";
 import { Header } from "components/Header";
 
-interface Props {
-  freshjuice: AllPostProps[];
-}
-
-export const FreshJuice = ({ freshjuice }: Props) => {
+export const FreshJuice = ({ freshjuice }: { freshjuice: PostProps[] }) => {
   return (
     <section className="freshSection">
       <div className="row mb-2 align-items-center">

src/components/Main/Gigs/Gigs.tsx

@@ -2,15 +2,11 @@ import Link from "next/link";
 import { Picture } from "components/Picture";
 import { Header } from "components/Header";
 import { Button } from "components/Button";
-import { AllPostProps } from "types/frontmatter";
+import { PostProps } from "types/frontmatter";
 import card from "components/Card/Card.module.scss";
 import styles from "./Gigs.module.scss";
 
-interface Props {
-  gigs: AllPostProps[];
-}
-
-export const Gigs = ({ gigs }: Props) => {
+export const Gigs = ({ gigs }: { gigs: PostProps[] }) => {
   return (
     <section className="mixSection">
       <div className="row align-items-center">

src/components/Main/News.tsx

@@ -1,15 +1,11 @@
-import { AllPostProps } from "types/frontmatter";
+import { PostProps } from "types/frontmatter";
 import { Header } from "components/Header";
 import { HoverLink } from "components/HoverLink";
 import { plantbassdInstagram } from "utils/constants";
 import { Button } from "components/Button";
 import { TextCard } from "components/Card";
 
-interface Props {
-  news: AllPostProps[];
-}
-
-export const News = ({ news }: Props) => {
+export const News = ({ news }: { news: PostProps[] }) => {
   return (
     <section className="newsSection">
       <div className="row mb-2 align-items-center">

src/components/Main/Radar.tsx

@@ -1,13 +1,9 @@
 import { SimpleCard } from "components/Card";
-import { AllPostProps } from "types/frontmatter";
+import { PostProps } from "types/frontmatter";
 import { Button } from "components/Button";
 import { Header } from "components/Header";
 
-interface Props {
-  radar: AllPostProps[];
-}
-
-export const Radar = ({ radar }: Props) => {
+export const Radar = ({ radar }: { radar: PostProps[] }) => {
   return (
     <section className="radioSection col-lg-6 col-md-12">
       <div className="row mb-2 align-items-center">

src/components/Main/TopTen.tsx

@@ -1,13 +1,9 @@
 import { SimpleCard } from "components/Card";
-import { AllPostProps } from "types/frontmatter";
+import { PostProps } from "types/frontmatter";
 import { Button } from "components/Button";
 import { Header } from "components/Header";
 
-interface Props {
-  topTen: AllPostProps[];
-}
-
-export const TopTen = ({ topTen }: Props) => {
+export const TopTen = ({ topTen }: { topTen: PostProps[] }) => {
   return (
     <section className="takeoverSection col-lg-6 col-md-12">
       <div className="row mb-2 flex-nowrap justify-content-end align-items-center">

src/components/Modal/Modal.tsx

@@ -17,7 +17,7 @@ export const Modal = (props: ModalProps) => {
 
   const selector = "#modal";
   const [mounted, setMounted] = useState(false);
-  const ref = useRef(null);
+  const ref = useRef<HTMLElement | null>(null);
   const backdrop = useRef(null);
   const container = useRef(null);
   const backdropMouseDown = useRef(false);
@@ -87,7 +87,7 @@ export const Modal = (props: ModalProps) => {
             </CSSTransition>
           </div>
         </CSSTransition>,
-        ref.current
+        ref.current as HTMLElement
       )
     : null;
 };

src/components/PageMetaData.tsx

@@ -9,7 +9,7 @@ interface TitleProps {
 }
 
 export default function PageMetaData({ title, description, imageUrl, url }: TitleProps) {
-  let cloudImage: string;
+  let cloudImage: string = "";
 
   if (imageUrl) {
     cloudImage = getCldImageUrl({

src/components/Players/SoundCloud.tsx

@@ -1,14 +1,14 @@
 import dynamic from "next/dynamic";
 import { HoverLink } from "components/HoverLink";
 
-const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
-
 interface Props {
   url: string;
   name?: string;
   height?: string;
 }
 
+const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
+
 /**
  *
  * @param url = soundcloud url

src/components/Players/YouTube.tsx

@@ -1,12 +1,12 @@
 import dynamic from "next/dynamic";
 
-const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
-
 interface Props {
   url: string;
   height?: string;
 }
 
+const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
+
 /**
  *
  * @param url = soundcloud url

src/components/PreviousGuest/types.ts

@@ -1,5 +1,3 @@
-import { IGigs } from "types/frontmatter";
-
 export interface PreviousGuestType {
   img: string;
   link: string;
@@ -19,8 +17,3 @@ export interface PreviousGuestProps {
   setModalData: (val: PreviousGuestType) => void;
   setShow: (val: boolean) => void;
 }
-
-export interface GuestSlug {
-  slug: string;
-  frontmatter: IGigs;
-}

src/hooks/useBatch.hook.ts

@@ -0,0 +1,20 @@
+import { useMemo, useState } from "react";
+import { PostProps } from "types/frontmatter";
+
+export const useBatch = (files: PostProps[]) => {
+  const [amount, setAmount] = useState(1);
+
+  const filesToShow = useMemo(() => {
+    return files.slice(0, amount * 20);
+  }, [files, amount]);
+
+  const handleLoadMore = () => {
+    setAmount((prev) => prev + 1);
+  };
+
+  const handleLoadAll = () => {
+    setAmount(files.length);
+  };
+
+  return { filesToShow, handleLoadMore, handleLoadAll };
+};

src/hooks/useRellax.hook.ts

@@ -9,7 +9,6 @@ export const useRellax = () => {
       round: true,
       speed: -7.5,
       vertical: true,
-      wrapper: null,
     });
   }, []);
 };