diff --git a/client/src/components/scoreboard-display/scoreboard-display.component.jsx b/client/src/components/scoreboard-display/scoreboard-display.component.jsx index e3f3244a4..a27b5c633 100644 --- a/client/src/components/scoreboard-display/scoreboard-display.component.jsx +++ b/client/src/components/scoreboard-display/scoreboard-display.component.jsx @@ -8,8 +8,11 @@ import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { selectBodyshop } from "../../redux/user/user.selectors"; import moment from "moment"; -import { useApolloClient } from "@apollo/client"; -import { GET_BLOCKED_DAYS } from "../../graphql/scoreboard.queries"; +import { useApolloClient, useQuery } from "@apollo/client"; +import { + GET_BLOCKED_DAYS, + QUERY_SCOREBOARD, +} from "../../graphql/scoreboard.queries"; const mapStateToProps = createStructuredSelector({ //currentUser: selectCurrentUser bodyshop: selectBodyshop, @@ -22,10 +25,15 @@ export default connect( mapDispatchToProps )(ScoreboardDisplayComponent); -export function ScoreboardDisplayComponent({ - bodyshop, - scoreboardSubscription, -}) { +export function ScoreboardDisplayComponent({ bodyshop }) { + const scoreboardSubscription = useQuery(QUERY_SCOREBOARD, { + variables: { + start: moment().startOf("month"), + end: moment().endOf("month"), + }, + pollInterval: 60000, + }); + const { data } = scoreboardSubscription; const client = useApolloClient(); const scoreBoardlist = (data && data.scoreboard) || []; diff --git a/client/src/graphql/scoreboard.queries.js b/client/src/graphql/scoreboard.queries.js index 2b9a4195b..3ce8ed1bf 100644 --- a/client/src/graphql/scoreboard.queries.js +++ b/client/src/graphql/scoreboard.queries.js @@ -1,7 +1,7 @@ import { gql } from "@apollo/client"; -export const SUBSCRIPTION_SCOREBOARD = gql` - subscription SUBSCRIPTION_SCOREBOARD($start: date!, $end: date!) { +export const QUERY_SCOREBOARD = gql` + query QUERY_SCOREBOARD($start: date!, $end: date!) { scoreboard( where: { _and: { date: { _gte: $start, _lte: $end } } } order_by: { date: asc } diff --git a/client/src/pages/scoreboard/scoreboard.page.container.jsx b/client/src/pages/scoreboard/scoreboard.page.container.jsx index 2ded23396..d1e8115d9 100644 --- a/client/src/pages/scoreboard/scoreboard.page.container.jsx +++ b/client/src/pages/scoreboard/scoreboard.page.container.jsx @@ -2,17 +2,14 @@ import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; +import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component"; +import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; +import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component"; import { setBreadcrumbs, setSelectedHeader, } from "../../redux/application/application.actions"; import { selectBodyshop } from "../../redux/user/user.selectors"; -import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component"; -import { useSubscription } from "@apollo/client"; -import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries"; -import moment from "moment"; -import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component"; -import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, @@ -26,13 +23,6 @@ const mapDispatchToProps = (dispatch) => ({ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) { const { t } = useTranslation(); - const scoreboardSubscription = useSubscription(SUBSCRIPTION_SCOREBOARD, { - variables: { - start: moment().startOf("month"), - end: moment().endOf("month"), - }, - }); - useEffect(() => { document.title = t("titles.scoreboard"); setSelectedHeader("scoreboard"); @@ -47,7 +37,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) { return ( - + );