Merge pull request #94 from awest25/app-router

App router

.eslintrc.json

@@ -14,5 +14,8 @@
     "react": {
       "version": "detect"
     }
+  },
+  "env": {
+    "es6": true
   }
 }

app/(interactive)/layout.js

@@ -1,8 +1,8 @@
-import { Inter } from "next/font/google";
+// import { Inter } from "next/font/google";
 import Toolbar from "../components/Toolbar"
-import Footer from "../components/Footer"
+// import Footer from "../components/Footer"
 
-const inter = Inter({ subsets: ["latin"] });
+// const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
   title: "Tennis Video Viewer",

app/(interactive)/matches/[slug]/page.js

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Select from 'react-select';
-import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { usePathname } from 'next/navigation'
 
 import filterStyles from '../../../styles/FilterList.module.css'
 import styles from '../../../styles/Match.module.css';
@@ -34,7 +34,7 @@ const MatchPage = () => {
   const [showCount, setShowCount] = useState(false);
   const [playingPoint, setPlayingPoint] = useState(null);
 
-  const router = useRouter();
+  // const router = useRouter();
   const pathname = usePathname()
   const videoId = pathname.substring(pathname.lastIndexOf('/') + 1);
 

app/(interactive)/tag-match/page.js

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import VideoPlayer from '../../components/VideoPlayer';
 import styles from '../../styles/Tagging.module.css';
 

app/components/FilterList.js

@@ -7,7 +7,7 @@ import nameMap from '../services/nameMap.js';
 
 const FilterList = ({ pointsData, filterList, setFilterList, showPercent, showCount }) => {
   // only keep relevant keys
-  const keys = Object.keys(nameMap).filter(key => pointsData && pointsData.some(point => point.hasOwnProperty(key)));
+  const keys = Object.keys(nameMap).filter(key => pointsData && pointsData.some(point => Object.prototype.hasOwnProperty.call(point, key)));
   const uniqueValues = {};
 
   // Iterate through filtered keys and populate uniqueValues
@@ -53,7 +53,7 @@ const FilterList = ({ pointsData, filterList, setFilterList, showPercent, showCo
   };
 
   // Sort the filterList array in alphabetical order
-  const sortedFilterList = filterList.sort((a, b) => a[0].localeCompare(b[0]));
+  // const sortedFilterList = filterList.sort((a, b) => a[0].localeCompare(b[0]));
 
   return (
     <>

app/components/VideoPlayer.js

@@ -47,7 +47,7 @@ function VideoPlayer({ videoId, setVideoObject }) {
     }
   }, [videoId]);
 
-  const onPlayerReady = (event) => {
+  const onPlayerReady = () => {
     console.log('player is ready')
   };
 

app/layout.js

@@ -1,8 +1,8 @@
-import { Inter } from "next/font/google";
-import Toolbar from "./components/Toolbar"
+// import { Inter } from "next/font/google";
+// import Toolbar from "./components/Toolbar"
 import Footer from "./components/Footer"
 
-const inter = Inter({ subsets: ["latin"] });
+// const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
   title: "Tennis Video Viewer",