Converted router to useMatch

destinmoulton · Dec 20, 2022 · a9dae6d · a9dae6d
1 parent abc8302
commit a9dae6d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 33 deletions.
diff --git a/dist/server/public/js/idiotbox/idiotbox.build.js b/dist/server/public/js/idiotbox/idiotbox.build.js
diff --git a/src/client/Components/Layout/IdiotBoxLayout.js b/src/client/Components/Layout/IdiotBoxLayout.js
@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
-import {Route, Routes, useNavigate} from "react-router-dom";
+import {Route, Routes, useNavigate, useParams, useMatch} from "react-router-dom";
 import {Container, Grid} from "@mui/material";
 import {callAPI} from "../../actions/api.actions";
 
@@ -69,24 +69,28 @@ const IdiotBoxLayout = (props) => {
                         }
                     />
                     <Route
-                        path="/show/:slug"
+                        path="show"
                     >
-                        <Route path=":season_number"
-                               element={
-                                   <ShowInfo
-                                       settings={props.settings}
-                                       callAPI={props.callAPI}
-                                       history={useNavigate()}
-                                   />
-                               }/>
-                        <Route path=""
-                               element={
-                                   <ShowInfo
-                                       settings={props.settings}
-                                       callAPI={props.callAPI}
-                                       history={useNavigate()}
-                                   />
-                               }/>
+                        <Route
+                            path=":slug/:season_number"
+                            element={
+                                <ShowInfo
+                                    settings={props.settings}
+                                    callAPI={props.callAPI}
+                                    history={useNavigate()}
+                                    uriMatch={useMatch("show/:slug/:season_number")}
+                                />
+                            }/>
+                        <Route
+                            path=":slug"
+                            element={
+                                <ShowInfo
+                                    settings={props.settings}
+                                    callAPI={props.callAPI}
+                                    history={useNavigate()}
+                                    uriMatch={useMatch("show/:slug")}
+                                />
+                            }/>
                     </Route>
                 </Routes>
             </Container>

diff --git a/src/client/Components/Shows/ShowInfo/SeasonTabs.js b/src/client/Components/Shows/ShowInfo/SeasonTabs.js
@@ -25,11 +25,12 @@ class SeasonTabs extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (this.props.seasonNumber !== -1) {
-            if (prevProps.seasonNumber !== -1) {
-                const prevSeasonNum = prevProps.seasonNumber;
-                const thisSeasonNum = this.props.seasonNumber;
-                if (prevSeasonNum !== thisSeasonNum) {
+        console.log("SeasonTabs::componentDidUpdate() uriParams", this.props.uriParams);
+        const {season_number} = this.props.uriMatch.params;
+        if (season_number) {
+            const old_season_number = prevProps.uriMatch.params.season_number;
+            if (old_season_number) {
+                if (old_season_number !== season_number) {
                     this._parseActiveSeason(this.props);
                 }
             } else {
@@ -41,8 +42,8 @@ class SeasonTabs extends Component {
 
     _parseActiveSeason(props) {
         const {activeSeasonNum, seasons} = this.state;
-        const season_number = props.seasonNumber;
-        if (season_number !== -1) {
+        const season_number = props.uriMatch.params.season_number;
+        if (season_number !== undefined) {
             if (season_number !== activeSeasonNum) {
                 const seasonNumber = parseInt(season_number);
                 let activeSeason = {};
@@ -218,7 +219,6 @@ class SeasonTabs extends Component {
 
 SeasonTabs.propTypes = {
     callAPI: PropTypes.func.isRequired,
-    seasonNumber: PropTypes.number,
     settings: PropTypes.object.isRequired,
     show: PropTypes.object.isRequired,
 };

diff --git a/src/client/Components/Shows/ShowInfo/ShowInfo.js b/src/client/Components/Shows/ShowInfo/ShowInfo.js
@@ -22,6 +22,8 @@ class ShowInfo extends Component {
     _getShowInfo() {
         const {callAPI} = this.props;
 
+        console.log("ShowInfo :: _getShowInfo() uriMatch", this.props.uriMatch);
+
         this.setState({
             isLoadingShow: true,
         });
@@ -39,7 +41,6 @@ class ShowInfo extends Component {
 
     _getShowSlugFromURI() {
         const uri_els = window.location.pathname.split("/");
-        console.log("_getShowSlugFromURI()::uri_els=", uri_els);
         return uri_els[2];
     }
 
@@ -136,18 +137,18 @@ class ShowInfo extends Component {
         const {isLoadingShow, show} = this.state;
 
         const showInfo = this._buildShowInfo();
-        const seasonNumber = this._getShowSeasonNumberFromURI();
+        //const seasonNumber = this._getShowSeasonNumberFromURI();
         let seasonsBar = "";
 
         if (!isLoadingShow) {
             seasonsBar = (
                 <SeasonTabs
                     show={show}
-                    seasonNumber={seasonNumber}
+                    //seasonNumber={seasonNumber}
                     callAPI={this.props.callAPI}
                     settings={this.props.settings}
                     history={this.props.history}
-                    match={this.props.match}
+                    uriMatch={this.props.uriMatch}
                 />
             );
         }