feature(database-connection): Clean up MainPage.tsx

frontend/src/pages/MainPage/MainPage.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useCallback, useEffect, useState} from "react";
+import React, {FC, useEffect, useState} from "react";
 import UserStatsMockService from "../../mock/UserStatsMockService";
 import Header from "../../components/Header/Header";
 import UserList from "../../components/UserList/UserList";
@@ -11,90 +11,12 @@ import RequestError from "../../models/RequestError";
 import './MainPage.scss';
 import {ClipLoader} from "react-spinners";
 
-// class MainPage extends React.Component<IMainPageProps, IMainPageState> {
-//
-//     private apiService: UserStatsService = new UserStatsService();
-//     private mockService = new UserStatsMockService();
-//
-//     constructor(props: IMainPageProps) {
-//         super(props)
-//
-//         console.log("this.props.match.params.id = " + this.props.match.params.id)
-//
-//
-//
-//         let seasonId = !this.props.match.params.id ? "1" : this.props.match.params.id
-//
-//         console.log("seasonId = " + seasonId)
-//
-//         this.state = {
-//             id: seasonId,
-//             error: undefined,
-//             loading: false,
-//             users: this.mockService.getStatsWithoutPromise("1")
-//         }
-//     }
-//
-//     componentWillMount() {
-//         this.fetchData();
-//     }
-//
-//     componentDidUpdate(prevProps: Readonly<IMainPageProps>) {
-//         const element = findDOMNode(this);
-//         if (element != null) {
-//             window.scrollTo(0, 0);
-//         }
-//
-//         if(prevProps.match.params.id !== this.props.match.params.id) {
-//             this.setState({ id: this.props.match.params.id })
-//             this.fetchData()
-//         }
-//     }
-//
-//     private fetchData() {
-//         this.setState({ loading: true })
-//         // this.apiService.getStats(this.state.id)
-//         //     .then(data => this.setState({
-//         //         loading: false,
-//         //         users: data
-//         //     }))
-//         this.mockService.getStats(this.state.id)
-//             .then(data => this.setState({
-//                 loading: false,
-//                 users: data
-//             }))
-//     }
-//
-//     render() {
-//         console.log("this.state.id = " + this.state.id)
-//         console.log("this.state.users.seasonId = " + this.state.users.seasonId)
-//
-//         return (
-//             <div className="MainPage">
-//                 <Header />
-//                 {
-//                     this.state.error && <ErrorContainer message={this.state.error} />
-//                 }
-//                 {
-//                     (this.state.loading)
-//                     ? <UserList userStats={this.state.users} mocked={true}         />
-//                     : <UserList userStats={this.state.users} mocked={!(!this.state.error)}    />
-//                 }
-//                 {/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
-//                 <Footer />
-//             </div>
-//         )
-//     }
-// }
-
 const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
     const [seasonId, setSeasonId] = useState(props.match.params.id)
     const [error, setError] = useState<RequestError | undefined>(undefined)
     const [loading, setLoadingState] = useState(true)
     const [seasonStats, setSeasonStats] = useState<UserStatsResponse>(UserStatsMockService.getStatsWithoutPromise(seasonId))
-    const [spinnerColor, setSpinnerColor] = useState('#61dafb')
+    const [spinnerColor] = useState('#61dafb')
-
-    const toggleLoading = useCallback(() => setLoadingState(!loading), [setLoadingState, loading])
 
     useEffect(() => {
         UserStatsMockService.getStats(seasonId)
@@ -117,22 +39,11 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
             {
                 error && <ErrorContainer message={error.message} />
             }
-            {
+            <ClipLoader color={spinnerColor} loading={loading} size={150} css={spinnerCss} />
+            <div className={loading ? "blurred" : ""}>
+                <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} />
+            </div>
 
-            }
-            {
-                // (loading)
-                // ? <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={true}         />
-                // : <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={!(!error)}    />
-
-            }
-            {/*<div className="UserList-container">*/}
-                <ClipLoader color={spinnerColor} loading={loading} size={150} css={spinnerCss} />
-                <div className={loading ? "blurred" : ""}>
-                    <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} />
-                </div>
-            {/*</div>*/}
-            {/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
             <Footer />
         </div>
     )