filters,sorting,set in pairs (#36)

sgfn · Jun 10, 2024 · 418a77e · 418a77e
1 parent 7eb5a13
commit 418a77e
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 31 deletions.
diff --git a/frontend/src/components/ContestantsCategoryList.js b/frontend/src/components/ContestantsCategoryList.js
@@ -29,17 +29,17 @@ function ContestansCategoryList() {
     // COMUNICATE WITH BACKEND
     // trzeba wziac pod uwage w ktorej stronie drabonki jest zawodnik i czy jest zaznaczona opcja
     // kazdy z kazdym i na tej podstawie wygernowac drabinke
-      //
-      // OK, zróbcie POST pod /duels/generateLadder
-      //    ze strukturą:
-      //      {
-      //        "weightCategory": "Men Heavy-Weight",
-      //        "firstBracketContestant": 2,            // id lub null
-      //        "secondBracketContestant": null         // id lub null
-      //      }
-      //   Desygnować można (nie trzeba) po jednym zawodniku do każdej ze stron.
-      //   Nie robimy zaznaczania opcji każdy z każdym,
-      //    mamy predefiniowane zasady dla danej liczby zawodników
+    //
+    // OK, zróbcie POST pod /duels/generateLadder
+    //    ze strukturą:
+    //      {
+    //        "weightCategory": "Men Heavy-Weight",
+    //        "firstBracketContestant": 2,            // id lub null
+    //        "secondBracketContestant": null         // id lub null
+    //      }
+    //   Desygnować można (nie trzeba) po jednym zawodniku do każdej ze stron.
+    //   Nie robimy zaznaczania opcji każdy z każdym,
+    //    mamy predefiniowane zasady dla danej liczby zawodników
   };
 
   const [selected, setSelected] = useState([]);
@@ -57,7 +57,11 @@ function ContestansCategoryList() {
 
   const handleSave = () => {
     const contestantPairs = generatePairs(selected);
-    setPairs((prevPairs) => [...prevPairs, ...contestantPairs]);
+    const existingPairsSet = new Set(pairs.map((pair) => JSON.stringify(pair)));
+    const uniqueNewPairs = contestantPairs.filter(
+      (pair) => !existingPairsSet.has(JSON.stringify(pair)),
+    );
+    setPairs((prevPairs) => [...prevPairs, ...uniqueNewPairs]);
     setSelected([]);
   };
 
@@ -86,7 +90,8 @@ function ContestansCategoryList() {
         <div>
           <ul>
             {pairs.map((pair, index) => (
-              <li key={index}>{`${pair[0]} and ${pair[1]}`}
+              <li key={index}>
+                {`${pair[0]} and ${pair[1]}`}
                 <button
                   className="remove-button"
                   onClick={() => handleRemove(index)}

diff --git a/frontend/src/components/ContestantsList.css b/frontend/src/components/ContestantsList.css
@@ -93,3 +93,23 @@ img {
 .loading-message {
   text-align: center;
 }
+.filters{
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 20%;
+  font-size: 80px;
+}
+.filters select,
+.filters input {
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.filters select {
+  width: 150px;
+}
+
+.filters input {
+  width: 100px;
+}
diff --git a/frontend/src/components/ContestantsList.js b/frontend/src/components/ContestantsList.js
@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import useFetch from '../hooks/useFetch';
 import './ContestantsList.css';
@@ -7,25 +8,76 @@ import exitIcon from '../../assets/icons/exit.png';
 import config from '../config.js';
 
 function ContestantsList() {
-  const {
-    data: data,
-    isPending,
-    error,
-  } = useFetch(`${config.backendUrl}/contestants`);
+  const [sort, setSort] = useState('');
+  const [minAge, setMinAge] = useState('');
+  const [maxAge, setMaxAge] = useState('');
+  const [minWeight, setMinWeight] = useState('');
+  const [maxWeight, setMaxWeight] = useState('');
+  const [sex, setSex] = useState('');
+
+  const createQueryParams = () => {
+    const params = new URLSearchParams();
+    if (sort) params.append('sort', sort);
+    if (minAge) params.append('minAge', minAge);
+    if (maxAge) params.append('maxAge', maxAge);
+    if (minWeight) params.append('minWeight', minWeight);
+    if (maxWeight) params.append('maxWeight', maxWeight);
+    if (sex) params.append('sex', sex);
+    return params.toString();
+  };
+
+  const { data, isPending, error } = useFetch(
+    `${config.backendUrl}/contestants?${createQueryParams()}`,
+  );
   const history = useNavigate();
 
   const handleExit = () => {
-    // eslint-disable-next-line no-console
     console.log('Exit button pressed');
     history('/');
   };
 
-  // @ts-ignore
   return (
     <>
       <h2>Wrestlers</h2>
       {error && <div className="error-message">{error}</div>}
       {isPending && <div className="loading-message">Loading...</div>}
+      <div className="filters">
+        <select value={sort} onChange={(e) => setSort(e.target.value)}>
+          <option value="">Sort By</option>
+          <option value="name">Name</option>
+          <option value="age">Age</option>
+          <option value="weight">Weight</option>
+        </select>
+        <input
+          type="number"
+          placeholder="Min Age"
+          value={minAge}
+          onChange={(e) => setMinAge(e.target.value)}
+        />
+        <input
+          type="number"
+          placeholder="Max Age"
+          value={maxAge}
+          onChange={(e) => setMaxAge(e.target.value)}
+        />
+        <input
+          type="number"
+          placeholder="Min Weight"
+          value={minWeight}
+          onChange={(e) => setMinWeight(e.target.value)}
+        />
+        <input
+          type="number"
+          placeholder="Max Weight"
+          value={maxWeight}
+          onChange={(e) => setMaxWeight(e.target.value)}
+        />
+        <select value={sex} onChange={(e) => setSex(e.target.value)}>
+          <option value="">Sex</option>
+          <option value="m">Male</option>
+          <option value="f">Female</option>
+        </select>
+      </div>
       {data && (
         <div className="contestant-list">
           {data.contestants.map((contestant) => (
@@ -37,19 +89,12 @@ function ContestantsList() {
                 <p className="weight-info">
                   {contestant.weight}kg ({contestant.weightCategory})
                 </p>
+                <p className="weight-info">Age: {contestant.age}</p>
               </Link>
             </div>
           ))}
         </div>
       )}
-      {/* Te buttony na razie nic nie robią bo task nie dotyczył filtrowania/sortowania,
-      to tylko koncepcja jak to mogłoby wyglądać na stronie */}
-      <button type="button" className="filter-button">
-        <img src={filterIcon} alt="filter-icon" />
-      </button>
-      <button type="button" className="sort-button">
-        <img src={sortIcon} alt="sort-icon" />
-      </button>
       <button type="button" className="exit-button" onClick={handleExit}>
         <img src={exitIcon} alt="exit-icon" />
       </button>

diff --git a/frontend/src/components/Duel.css b/frontend/src/components/Duel.css
@@ -39,3 +39,4 @@ button:disabled {
   background-color: #dddddd; 
   cursor: not-allowed; 
 }
+
diff --git a/frontend/src/components/Duel.js b/frontend/src/components/Duel.js
@@ -22,7 +22,7 @@ function Duel() {
   } = useFetch(`${config.backendUrl}/contestants/${id1Contestant}`);
 
   const { data: duel, loading } = useFetch(
-    `${config.backendUrl}/duels/${duelId}`,
+    `${config.backendUrl}/duels/curr/${duelId}`,
     [],
     { suspense: true },
   );
@@ -33,7 +33,8 @@ function Duel() {
 
   useEffect(() => {
     if (!loading && duel) {
-      const winnerExists = duel.winner !== '' && duel.winner !== undefined && duel.winner !== -1;
+      const winnerExists =
+        duel.winner !== '' && duel.winner !== undefined && duel.winner !== -1;
       setIsWinnerSelected(winnerExists);
     }
     if (!loading && duel && duel.winner == contestant1.id) {

diff --git a/frontend/src/components/DuelList.js b/frontend/src/components/DuelList.js
@@ -10,7 +10,7 @@ function DuelList() {
     data: data,
     isPending,
     error,
-  } = useFetch(`${config.backendUrl}/duels`);
+  } = useFetch(`${config.backendUrl}/duels/curr`);
   const history = useNavigate();
 
   const handleExit = () => {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -39,3 +39,4 @@ button:disabled {
		background-color: #dddddd;
		cursor: not-allowed;
		}