From 286182304586843a7cf4f1aed21f09767e161ed0 Mon Sep 17 00:00:00 2001 From: Paulina Date: Fri, 26 Feb 2021 02:49:58 +0100 Subject: [PATCH] TASK-309 Show "go to now" button only in schedule view mode (#231) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Paweł Renc --- .../header/header.component.tsx | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/common-components/header/header.component.tsx b/src/components/common-components/header/header.component.tsx index 2fe925f0d..05bf5406b 100644 --- a/src/components/common-components/header/header.component.tsx +++ b/src/components/common-components/header/header.component.tsx @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ import AssignmentIndIcon from "@material-ui/icons/AssignmentInd"; -import React, { useEffect, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { ApplicationStateModel } from "../../../state/models/application-state.model"; import { MonthSwitchActionCreator } from "../../../state/reducers/month-state/schedule-data/month-switch.action-creator"; @@ -12,6 +12,7 @@ import classNames from "classnames/bind"; import { Button as MaterialButton } from "@material-ui/core"; import ReportIssueModal from "../modal/report-issue-modal/report-issue-modal.component"; import SettingsIcon from "@material-ui/icons/Settings"; +import { AppConfigContext, AppConfigOptions, AppMode } from "../../../state/app-config-context"; function monthDiff(d1: Date, d2: Date): number { let months: number; @@ -22,7 +23,9 @@ function monthDiff(d1: Date, d2: Date): number { } export function HeaderComponent(): JSX.Element { - const { mode } = useSelector((state: ApplicationStateModel) => state.actualState); + const applicationStateModel = useSelector((state: ApplicationStateModel) => state.actualState) + .mode; + const appConfigContext = useAppConfig().mode; const dispatch = useDispatch(); const { month_number: monthNumber, year } = useSelector( @@ -39,21 +42,39 @@ export function HeaderComponent(): JSX.Element { const offset = monthDiff(new Date(year, monthNumber), new Date()); dispatch(MonthSwitchActionCreator.switchToNewMonth(offset)); } - const isInViewMode = mode === "readonly"; + const isInViewMode = applicationStateModel === "readonly"; const [isModalOpen, setIsModalOpen] = useState(false); function onReportIssueClick(): void { setIsModalOpen(true); } + function useAppConfig(): AppConfigOptions { + const context = useContext(AppConfigContext); + + if (!context) throw new Error("useAppConfig have to be used within AppConfigProvider"); + + return context; + } + const [showNowNavigation, setShowNowNavigation] = useState(false); + + useEffect(() => { + appConfigContext === AppMode.SCHEDULE + ? setShowNowNavigation(isInViewMode) + : setShowNowNavigation(false); + }, [appConfigContext, isInViewMode]); + return ( <>