HjHimansh

index.js of result

Oct 22nd, 2020
82
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from "react";
  2. import "./styles.css";
  3.  
  4. function Result({ finalist, setFinalist, setTeamlist1 }) {
  5.   const [first, setFirst] = useState("");
  6.   const [second, setSecond] = useState("");
  7.   const [third, setThird] = useState("");
  8.   const [fourth, setFourth] = useState("");
  9.   const [toggle, setToggle] = useState(false);
  10.   let id = [];
  11.  
  12.   useEffect(() => {
  13.     // Determine the winners
  14.     console.log("Finalists:", finalist);
  15.     if (!finalist[0] || !finalist[1] || !finalist[2] || !finalist[3] || id.length===2) return;
  16.     id.push(setTimeout(() => {
  17.       let winner = Math.random() < 0.5 ? finalist[0] : finalist[3];
  18.       setThird(winner);
  19.       setFourth(winner === finalist[0] ? finalist[3] : finalist[0]);
  20.       id.push(setTimeout(() => {
  21.         let winner = Math.random() < 0.5 ? finalist[1] : finalist[2];
  22.         setFirst(winner);
  23.         setSecond(winner === finalist[1] ? finalist[2] : finalist[1]);
  24.       }, Math.floor(Math.random() * 7000) + 5000));
  25.     }, Math.floor(Math.random() * 7000) + 5000));
  26.  
  27.     console.log("IS Set:", id);
  28.     return () => {
  29.       console.log("Component unmounting...");
  30.       id.forEach(element => {
  31.         clearTimeout(element);
  32.       });
  33.       setFinalist([]);
  34.       id = [];
  35.     };
  36.   }, [finalist]);
  37.  
  38.   return (
  39.     <div className="outerBox">
  40.       {toggle && (
  41.         <div className="alert">
  42.           <h2>Are you sure you want to terminate the current game play?</h2>
  43.           <button
  44.             className="buttonD"
  45.             onClick={(e) => {
  46.               setTeamlist1("");
  47.               setToggle(false);
  48.             }}
  49.           >
  50.             YES
  51.           </button>
  52.           <button
  53.             className="buttonD"
  54.             onClick={(e) => {
  55.               setToggle(false);
  56.             }}
  57.           >
  58.             NO
  59.           </button>
  60.         </div>
  61.       )}
  62.       <button
  63.         className="buttonC"
  64.         onClick={(e) => {
  65.           setToggle(true);
  66.         }}
  67.       >
  68.         Upload another file
  69.       </button>
  70.       <div>
  71.         <img
  72.           src="https://img.favpng.com/23/17/21/2014-fifa-world-cup-brazil-football-player-png-favpng-E8nyFDyxnSCEfCKdBs0ezq4ML.jpg"
  73.           alt="Image"
  74.           className="img"
  75.         />
  76.       </div>
  77.       <div>
  78.         <div className="box">
  79.           <div className="box">
  80.             {first ? <h3>{first?.teamName}</h3> : <p>Yet to be decided</p>}
  81.           </div>
  82.           <hr size="2" style={{ width: "100%" }} />
  83.           <h4>WINNNER</h4>
  84.         </div>
  85.         <div className="box">
  86.           <div className="box">
  87.             {second ? <h3>{second?.teamName}</h3> : <p>Yet to be decided</p>}
  88.           </div>
  89.           <hr size="2" style={{ width: "100%" }} />
  90.           <h4>RUNNER-UP</h4>
  91.         </div>
  92.       </div>
  93.       <div>
  94.         <img
  95.           src="https://upload.wikimedia.org/wikipedia/en/1/1d/2014_FIFA_World_Cup.svg"
  96.           alt="Image"
  97.           className="img"
  98.         />
  99.       </div>
  100.       <div>
  101.         <div className="box">
  102.           <div className="box">
  103.             {third ? <h3>{third?.teamName}</h3> : <p>Yet to be decided</p>}
  104.           </div>
  105.           <hr size="2" style={{ width: "100%" }} />
  106.           <h4>3rd PLACE</h4>
  107.         </div>
  108.         <div className="box">
  109.           <div className="box">
  110.             {fourth ? <h3>{fourth?.teamName}</h3> : <p>Yet to be decided</p>}
  111.           </div>
  112.           <hr size="2" style={{ width: "100%" }} />
  113.           <h4>4th PLACE</h4>
  114.         </div>
  115.       </div>
  116.     </div>
  117.   );
  118. }
  119.  
  120. export default Result;
  121.  
RAW Paste Data Copied