19-with-search-params

Author: tylermcginnis

app/components/Battle.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import PropTypes from "prop-types";
 import { close } from "./icons";
-import Results from "./Results";
+import { Link } from "react-router-dom";
 
 function Instructions() {
   return (
@@ -103,7 +103,6 @@ export default class Battle extends React.Component {
     this.state = {
       playerOne: null,
       playerTwo: null,
-      battle: false,
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -120,25 +119,22 @@ export default class Battle extends React.Component {
     });
   }
   render() {
-    const { playerOne, playerTwo, battle } = this.state;
+    const { playerOne, playerTwo } = this.state;
     const disabled = !playerOne || !playerTwo;
 
-    if (battle === true) {
-      return <Results playerOne={playerOne} playerTwo={playerTwo} />;
-    }
-
     return (
       <main className="stack main-stack animate-in">
         <div className="split">
           <h1>Players</h1>
-          <button
-            onClick={() => {
-              this.setState({ battle: true });
+          <Link
+            to={{
+              pathname: "/results",
+              search: `?playerOne=${playerOne}&playerTwo=${playerTwo}`,
             }}
             className={`btn primary ${disabled ? "disabled" : ""}`}
           >
             Battle
-          </button>
+          </Link>
         </div>
         <section className="grid">
           {playerOne === null ? (

app/components/Results.jsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { battle } from "../utils/api";
 import PropTypes from "prop-types";
 import Loading from "./Loading";
+import withSearchParams from "./withSearchParams";
+import { Link } from "react-router-dom";
 
 function Card({ profile }) {
   const {
@@ -64,7 +66,7 @@ Card.propTypes = {
   }).isRequired,
 };
 
-export default class Results extends React.Component {
+class Results extends React.Component {
   constructor(props) {
     super(props);
 
@@ -76,7 +78,9 @@ export default class Results extends React.Component {
     };
   }
   componentDidMount() {
-    const { playerOne, playerTwo } = this.props;
+    const sp = this.props.router.searchParams;
+    const playerOne = sp.get("playerOne");
+    const playerTwo = sp.get("playerTwo");
 
     battle([playerOne, playerTwo])
       .then((players) => {
@@ -109,6 +113,9 @@ export default class Results extends React.Component {
       <main className="animate-in stack main-stack">
         <div className="split">
           <h1>Results</h1>
+          <Link to="/battle" className="btn secondary">
+            Reset
+          </Link>
         </div>
         <section className="grid">
           <article className="results-container">
@@ -131,7 +138,7 @@ export default class Results extends React.Component {
             <Card profile={loser.profile} />
             <p className="results">
               <span>
-                {winner.score === loser.score ? "Tie" : "Loser"}
+                {winner.score === loser.score ? "Tie" : "Loser"}{" "}
                 {loser.score.toLocaleString()}
               </span>
             </p>
@@ -141,3 +148,5 @@ export default class Results extends React.Component {
     );
   }
 }
+
+export default withSearchParams(Results);

app/components/withSearchParams.jsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useSearchParams } from "react-router-dom";
+
+export default function withSearchParams(Component) {
+  return function ComponentWithSearchParams(props) {
+    const [searchParams] = useSearchParams();
+
+    return <Component {...props} router={{ searchParams }} />;
+  };
+}

app/index.jsx

@@ -5,6 +5,7 @@ import Popular from "./components/Popular";
 import Battle from "./components/Battle";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Nav from "./components/Nav";
+import Results from "./components/Results";
 
 class App extends React.Component {
   constructor(prop) {
@@ -30,6 +31,7 @@ class App extends React.Component {
             <Routes>
               <Route path="/" element={<Popular />} />
               <Route path="/battle" element={<Battle />} />
+              <Route path="/results" element={<Results />} />
             </Routes>
           </div>
         </div>