g-loot / react-tournament-brackets

React component library for displaying bracket leaderboards
https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket
GNU Lesser General Public License v2.1
219 stars 69 forks source link

NextJS e.find is not a function #56

Open DrGreeny opened 1 year ago

DrGreeny commented 1 year ago

Hi, I am using NextJS and updated my component accordingly to fix the window problem, but somehow I am stuck now with the error message "e.find is not a function". This is my code

import matches from "/db/matches.js";
import { useState, useEffect } from "react";

const SingleEliminationBracket = dynamic(
  () =>
    import("@g-loot/react-tournament-brackets").then(
      (mod) => mod.SingleEliminationBracket
    ),
  { ssr: false }
);

const Match = dynamic(
  () => import("@g-loot/react-tournament-brackets").then((mod) => mod.Match),
  { ssr: false }
);

const SVGViewer = dynamic(
  () =>
    import("@g-loot/react-tournament-brackets").then((mod) => mod.SVGViewer),
  { ssr: false }
);

const TournamentWrapper = () => {
  const getWindowSize = () => {
    if (typeof window !== "undefined") {
      return {
        width: window.innerWidth || document.documentElement.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight,
      };
    }
    return { width: 0, height: 0 };
  };

  const [windowSize, setWindowSize] = useState(getWindowSize());

  useEffect(() => {
    const handleResize = () => {
      setWindowSize(getWindowSize());
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const finalWidth = Math.max(windowSize.width - 50, 500);
  const finalHeight = Math.max(windowSize.height - 100, 500);

  return (
    <div className="bg-black">
      <h1>Tournament Bracket</h1>
      <SingleEliminationBracket
        matches={matches} // Remove the extra curly braces
        matchComponent={Match}
        svgWrapper={({ children, ...props }) => (
          <SVGViewer width={finalWidth} height={finalHeight} {...props}>
            {children}
          </SVGViewer>
        )}
      />
    </div>
  );
};

export default TournamentWrapper;

and I am using the matches.js from here: https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket

It seems it has a problem with the matches array, but I can´t figure out, what the problem actually is.