feat: ux-improement: improving list loadings (pathwar#221)

feat: ux-improement: improving list loadings
cdeleeuwe · Oct 24, 2019 · e85f3dc · e85f3dc
2 parents 1e5eb93 + 75781e6
commit e85f3dc
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 64 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -1,6 +1,6 @@
 [build]
   base = "web"
-  publish = "web/public"
+  publish = "public"
   command = "npm install && npm run build"
   ignore = "git diff --quiet HEAD^ HEAD -- ."
 

diff --git a/web/src/components/ProtectedRoute.js b/web/src/components/ProtectedRoute.js
@@ -5,6 +5,8 @@ import Keycloak from 'keycloak-js';
 import { Dimmer } from "tabler-react";
 import { setKeycloakSession } from '../actions/userSession';
 
+import styles from "../styles/layout/loader.module.css"
+
 class ProtectedRoute extends React.PureComponent {
 
     async componentDidMount() {
@@ -27,7 +29,7 @@ class ProtectedRoute extends React.PureComponent {
         }
 
         return (
-          <Dimmer active loader />
+          <Dimmer className={styles.dimmer} active loader />
         );
     }
 }

diff --git a/web/src/components/challenges/ChallengeCardPreview.js b/web/src/components/challenges/ChallengeCardPreview.js
@@ -1,7 +1,8 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
 import { Link } from "gatsby";
-import { Card, Button } from "tabler-react";
+import { Card, Button, Dimmer } from "tabler-react";
+import styles from "../../styles/layout/loader.module.css";
 
 const ChallengeBody = ({ challenge }) => {
     const { author, description, locale, key, id } = challenge;
@@ -28,7 +29,7 @@ const ChallengeBody = ({ challenge }) => {
 const ChallengeCardPreview = (props) => {
     const { challenges } = props;
 
-    return challenges.map((challenge) =>
+    return !challenges ? <Dimmer className={styles.dimmer} active loader /> : challenges.map((challenge) =>
     <Card title={challenge.name} key={challenge.id}
         isCollapsible
         statusColor="orange"

diff --git a/web/src/components/tournament/AllTeamsOnTournamentList.js b/web/src/components/tournament/AllTeamsOnTournamentList.js
@@ -1,11 +1,8 @@
 import * as React from "react";
-import { connect } from "react-redux"
-import { Card, Table } from "tabler-react";
+import { Card, Table, Dimmer } from "tabler-react";
 import PropTypes from "prop-types";
-import {
-  fetchAllTournamentTeams as fetchAllTournamentTeamsAction
-} from "../../actions/tournaments"
 
+import styles from "../../styles/layout/loader.module.css"
 
 const TeamsRows = ({ teams }) => {
     return teams.map((item) => {
@@ -19,55 +16,35 @@ const TeamsRows = ({ teams }) => {
     })
 }
 
-class AllTeamsOnTournamentList extends React.PureComponent {
-
-    componentDidMount() {
-        const { tournaments: { activeTournament }, fetchAllTournamentTeamsAction } = this.props;
-        fetchAllTournamentTeamsAction(activeTournament.id)
-    }
-
-    render() {
-        const { tournaments: { activeTournament, allTeamsOnTournament } } = this.props;
-        return (
-            <Card>
-                <Table
-                    cards={true}
-                    striped={true}
-                    responsive={true}
-                    className="table-vcenter"
-                >
-                    <Table.Header>
-                        <Table.Row>
-                            <Table.ColHeader colSpan={2}>Name</Table.ColHeader>
-                        </Table.Row>
-                    </Table.Header>
-                    <Table.Body>
-                        { activeTournament && allTeamsOnTournament &&
-                            <TeamsRows
-                                teams={allTeamsOnTournament}
-                            />
-                        }
-                    </Table.Body>
-                </Table>
-            </Card>
-        )
-    }
+const AllTeamsOnTournamentList = ({ activeTournament, allTeamsOnTournament }) => {
+    return (
+        !activeTournament || !allTeamsOnTournament ? <Dimmer className={styles.dimmer} active loader /> :
+        <Card>
+            <Table
+                cards={true}
+                striped={true}
+                responsive={true}
+                className="table-vcenter"
+            >
+                <Table.Header>
+                    <Table.Row>
+                        <Table.ColHeader colSpan={2}>Name</Table.ColHeader>
+                    </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                    { activeTournament && allTeamsOnTournament &&
+                        <TeamsRows
+                            teams={allTeamsOnTournament}
+                        />
+                    }
+                </Table.Body>
+            </Table>
+        </Card>
+    )
 }
 
 AllTeamsOnTournamentList.propTypes = {
-    fetchAllTournamentTeamsAction: PropTypes.func,
     tournaments: PropTypes.object,
 };
 
-const mapStateToProps = state => ({
-    tournaments: state.tournaments
-});
-
-const mapDispatchToProps = {
-  fetchAllTournamentTeamsAction: (tournamentID) => fetchAllTournamentTeamsAction(tournamentID)
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(AllTeamsOnTournamentList);
+export default AllTeamsOnTournamentList;
diff --git a/web/src/pages/TournamentPage.js b/web/src/pages/TournamentPage.js
@@ -7,33 +7,37 @@ import { isNil } from "ramda";
 import AllTeamsOnTournamentList from "../components/tournament/AllTeamsOnTournamentList"
 import ChallengesCardPreview from "../components/challenges/ChallengeCardPreview";
 import ValidationCouponStamp from "../components/coupon/ValidateCouponStampCard";
-import { fetchChallenges as fetchChallengesAction } from "../actions/tournaments";
+import {
+  fetchChallenges as fetchChallengesAction ,
+  fetchAllTournamentTeams as fetchAllTournamentTeamsAction
+} from "../actions/tournaments";
 
 class TournamentPage extends React.Component {
 
     componentDidUpdate(prevProps) {
-      const { fetchChallengesAction, tournaments: { activeTournament } } = this.props;
+      const { fetchChallengesAction, fetchAllTournamentTeamsAction, tournaments: { activeTournament } } = this.props;
       const { tournaments: { activeTournament: prevActiveTournament } } = prevProps;
 
       if (isNil(prevActiveTournament) && activeTournament ) {
         fetchChallengesAction(activeTournament.id);
+        fetchAllTournamentTeamsAction(activeTournament.id)
       }
     }
 
     render() {
-        const { tournaments: { activeTournament, activeChallenges } } = this.props;
+        const { tournaments: { activeTournament, activeChallenges, allTeamsOnTournament } } = this.props;
         const name = activeTournament ? activeTournament.name : undefined;
 
         return (
             <Page.Content title="Tournament" subTitle={name}>
                 <Grid.Row>
                   <Grid.Col xs={12} sm={3} lg={3}>
                     <h3>Teams</h3>
-                    {activeTournament && <AllTeamsOnTournamentList />}
+                    <AllTeamsOnTournamentList activeTournament={activeTournament} allTeamsOnTournament={allTeamsOnTournament} />
                   </Grid.Col>
                   <Grid.Col xs={12} sm={6} lg={6}>
                     <h3>Challenges</h3>
-                    {activeChallenges && <ChallengesCardPreview challenges={activeChallenges} />}
+                    <ChallengesCardPreview challenges={activeChallenges} />
                   </Grid.Col>
                   <Grid.Col xs={12} sm={3} lg={3}>
                     <h3>Actions</h3>
@@ -57,6 +61,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = {
   fetchChallengesAction: (tournamentID) => fetchChallengesAction(tournamentID),
+  fetchAllTournamentTeamsAction: (tournamentID) => fetchAllTournamentTeamsAction(tournamentID)
 };
 
 export default connect(

diff --git a/web/src/pages/app.js b/web/src/pages/app.js
@@ -11,7 +11,6 @@ import SiteWrapper from "../components/SiteWrapper";
 const ProtectedRoute = loadable(() => import('../components/ProtectedRoute'))
 
 import "tabler-react/dist/Tabler.css";
-import "../styles/layout/loader.css";
 
 
 const App = () => (

diff --git a/web/src/styles/layout/loader.css b/web/src/styles/layout/loader.css
diff --git a/web/src/styles/layout/loader.module.css b/web/src/styles/layout/loader.module.css
@@ -0,0 +1,7 @@
+.dimmer {
+  margin-top: 100px;
+}
+
+.dimmerSmall {
+  width: 20px;
+}