Bugfixes and minor improvements

nhamonin · Jul 23, 2023 · 162af73 · 162af73
1 parent e0667eb
commit 162af73
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/src/App.js b/src/App.js
@@ -26,9 +26,9 @@ function Main() {
   const [error, setError] = useState(null);
   const navigate = useNavigate();
 
-  const handleUpload = (fileName, jsonData) => {
+  const handleUpload = (_, jsonData) => {
     try {
-      setData((prevData) => [...prevData, transformMatches(jsonData)]);
+      setData((prevData) => [...prevData, jsonData]);
       setSelectedTab(data.length);
       navigate('/');
     } catch (error) {
@@ -57,7 +57,12 @@ function Main() {
         />
         <Route
           path="/upload"
-          element={<UploadPage onUpload={handleUpload} />}
+          element={
+            <UploadPage
+              onUpload={handleUpload}
+              setSelectedTab={setSelectedTab}
+            />
+          }
         />
       </Routes>
     </div>

diff --git a/src/components/CustomSeed.js b/src/components/CustomSeed.js
@@ -23,12 +23,9 @@ export const CustomSeed = ({
             key={team.id}
             className={`flex items-center justify-between ${
               index === 0 ? 'border-b border-gray-400' : ''
-            }`}
+            } ${team.id === hoveredTeam ? 'bg-blue-600' : ''}`}
             onMouseEnter={() => setHoveredTeam(team.id)}
             onMouseLeave={() => setHoveredTeam(null)}
-            style={{
-              backgroundColor: team.id === hoveredTeam ? '#0284c7' : '',
-            }}
           >
             <img
               src={team?.image}

diff --git a/src/components/Tabs.js b/src/components/Tabs.js
@@ -1,8 +1,13 @@
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 function Tabs({ data, selectedTab, setSelectedTab }) {
   const navigate = useNavigate();
 
+  const handleUploadClick = () => {
+    setSelectedTab(null);
+    navigate('/upload');
+  };
+
   return (
     <div className="flex flex-wrap justify-center items-center mb-10">
       {data.map((_, index) => (
@@ -12,21 +17,25 @@ function Tabs({ data, selectedTab, setSelectedTab }) {
             setSelectedTab(index);
             navigate('/');
           }}
-          className={`py-2 px-3 mx-2 text-center rounded font-bold text-lg shadow-md ${
+          className={`py-2 px-3 mx-2 text-center rounded font-bold text-lg transition duration-200 ${
             index === selectedTab
               ? 'bg-gray-900 text-white'
-              : 'bg-gray-300 text-gray-900'
+              : 'border border-gray-400 bg-white text-gray-900 hover:bg-blue-600 hover:text-white'
           }`}
         >
           Tournament #{index + 1}
         </button>
       ))}
-      <Link
-        to="/upload"
-        className="flex items-center justify-center w-10 h-10 text-lg font-bold text-white transition duration-200 bg-gray-900 rounded-full shadow-md hover:bg-gray-700"
+      <button
+        onClick={handleUploadClick}
+        className={`py-2 px-3 mx-2 text-center rounded font-bold text-lg transition duration-200 ${
+          selectedTab === null
+            ? 'bg-gray-900 text-white'
+            : 'border border-gray-400 bg-white text-gray-900 hover:bg-blue-600 hover:text-white'
+        }`}
       >
         +
-      </Link>
+      </button>
     </div>
   );
 }

diff --git a/src/components/UploadPage.js b/src/components/UploadPage.js
@@ -1,19 +1,33 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { useLocation } from 'react-router-dom';
 
-export function UploadPage({ onUpload }) {
+import { transformMatches } from '../utils/transformMatches';
+
+const maxSize = 5 * 1024 * 1024; // 5MB
+
+export function UploadPage({ onUpload, setSelectedTab, data }) {
   const [error, setError] = useState(null);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.pathname === '/upload') {
+      setSelectedTab(null);
+    }
+  }, [location, setSelectedTab]);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: '.json',
+    maxSize,
     onDrop: (acceptedFiles) => {
       acceptedFiles.forEach((file) => {
         const reader = new FileReader();
 
         reader.onload = () => {
           try {
             const jsonData = JSON.parse(reader.result);
-            onUpload(file.name, jsonData);
+            const transformedData = transformMatches(jsonData);
+            onUpload(file.name, transformedData);
             setError(null);
           } catch (error) {
             console.error('Invalid JSON:', error);
@@ -31,15 +45,15 @@ export function UploadPage({ onUpload }) {
   return (
     <div
       {...getRootProps()}
-      className={`flex flex-col items-center justify-center p-10 border-4 rounded-lg transition-all duration-300 ease-in-out 
+      className={`flex flex-col items-center justify-center p-10 border-4 rounded-lg transition-all duration-300 ease-in-out cursor-pointer 
         ${
           isDragActive
             ? 'border-green-500 bg-green-100 text-green-700'
             : 'border-gray-500 text-gray-800'
         }`}
     >
       <input {...getInputProps()} />
-      <p className="mb-4 text-lg">
+      <p className="text-lg">
         Drag 'n' drop some files here, or click to select files
       </p>
       {error && <p className="text-red-600">{error}</p>}