diff --git a/src/app/components/elements/ContentPropertyTags.tsx b/src/app/components/elements/ContentPropertyTags.tsx index ef230b5d09..f41aa94ff9 100644 --- a/src/app/components/elements/ContentPropertyTags.tsx +++ b/src/app/components/elements/ContentPropertyTags.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { isPhy, isStaff, isTeacherOrAbove } from "../../services"; +import { isStaff, isTeacherOrAbove } from "../../services"; import { selectors, useAppSelector } from "../../state"; import classNames from "classnames"; import {v4 as uuid_v4} from "uuid"; @@ -17,7 +17,7 @@ export const ContentPropertyTags = ({ deprecated, supersededByPath, tags, ...res const accessibilitySettings = useAccessibilitySettings(); return
- {isPhy && accessibilitySettings?.SHOW_INACCESSIBLE_WARNING && getAccessibilityTags(tags)?.map(tag => { + {accessibilitySettings?.SHOW_INACCESSIBLE_WARNING && getAccessibilityTags(tags)?.map(tag => { const id = `access-warn-${uuid_v4()}`; // must be globally unique. making refs in a loop was too painful. return diff --git a/src/app/components/elements/sidebar/MyAdaSidebar.tsx b/src/app/components/elements/sidebar/MyAdaSidebar.tsx index 105419b103..4c5ccd8de3 100644 --- a/src/app/components/elements/sidebar/MyAdaSidebar.tsx +++ b/src/app/components/elements/sidebar/MyAdaSidebar.tsx @@ -3,77 +3,10 @@ import { ContentSidebar, ContentSidebarProps } from "../layout/SidebarLayout"; import { StyledTabPicker } from "../inputs/StyledTabPicker"; import classNames from "classnames"; import { selectors, sidebarSlice, useAppDispatch, useAppSelector } from "../../../state"; -import { above, below, isStudent, isTeacherOrAbove, isTutorOrAbove, useDeviceSize, useUserNotifications } from "../../../services"; +import { above, below, isStudent, isTeacherOrAbove, isTutorOrAbove, MyAdaTabs, useDeviceSize, useUserNotifications } from "../../../services"; import { Spacer } from "../Spacer"; import { useLocation } from "react-router"; -interface MyAdaTab { - title: string; - url: string; - icon: string; - user: "STUDENT" | "TUTOR" | "TEACHER" | "ALL"; // Which user roles can see this tab – n.b. teacher means teacherOrAbove -} - -const MyAdaTabs: Record = { - overview: { - title: "Overview", - url: "/dashboard", - icon: "icon-home", - user: "ALL" - }, - groups: { - title: "Groups", - url: "/groups", - icon: "icon-group", - user: "TUTOR" - }, - setQuizzes: { - title: "Quizzes", - url: "/quizzes/set", - icon: "icon-file", - user: "TUTOR" - }, - setTests: { - title: "Tests", - url: "/set_tests", - icon: "icon-school", - user: "TEACHER" - }, - markbook: { - title: "Markbook", - url: "/my_markbook", - icon: "icon-done-all", - user: "TUTOR" - }, - - assignedToMe: { - title: "Assigned to me", - url: "/assignments", - icon: "icon-person-check", - user: "ALL" - }, - - myTests: { - title: "Tests", - url: "/tests", - icon: "icon-school", - user: "STUDENT" - }, - progress: { - title: "Progress", - url: "/progress", - icon: "icon-done-all", - user: "STUDENT" - }, - - account: { - title: "Account", - url: "/account", - icon: "icon-cog", - user: "ALL" - } -}; - interface AdaSidebarCollapserProps extends React.HTMLAttributes { collapsed: boolean; toggleSidebar: () => void; diff --git a/src/app/components/navigation/InaccessibleContentWarningBanner.tsx b/src/app/components/navigation/InaccessibleContentWarningBanner.tsx index b216e6374e..b2ad04f09d 100644 --- a/src/app/components/navigation/InaccessibleContentWarningBanner.tsx +++ b/src/app/components/navigation/InaccessibleContentWarningBanner.tsx @@ -1,9 +1,11 @@ import React from 'react'; import { Alert } from 'reactstrap'; import { ACCESSIBILITY_WARNINGS } from '../../services/accessibility'; +import { isAda } from '../../services'; export const InaccessibleContentWarningBanner = ({type}: {type: keyof typeof ACCESSIBILITY_WARNINGS}) => { - return + return + {isAda && } {ACCESSIBILITY_WARNINGS[type].description} ; }; diff --git a/src/app/services/constants.ts b/src/app/services/constants.ts index 7b71ff085a..9ec73217aa 100644 --- a/src/app/services/constants.ts +++ b/src/app/services/constants.ts @@ -1075,6 +1075,73 @@ export const ACCOUNT_TABS_ALIASES: {[alias: string]: ACCOUNT_TAB} = { export enum MANAGE_QUIZ_TAB {set = 1, manage = 2} export enum MARKBOOK_TYPE_TAB {assignments = 1, tests = 2} +interface MyAdaTab { + title: string; + url: string; + icon: string; + user: "STUDENT" | "TUTOR" | "TEACHER" | "ALL"; // Which user roles can see this tab – n.b. teacher means teacherOrAbove +} + +export const MyAdaTabs: Record = { + overview: { + title: "Overview", + url: "/dashboard", + icon: "icon-home", + user: "ALL" + }, + groups: { + title: "Groups", + url: "/groups", + icon: "icon-group", + user: "TUTOR" + }, + setQuizzes: { + title: "Quizzes", + url: "/quizzes/set", + icon: "icon-file", + user: "TUTOR" + }, + setTests: { + title: "Tests", + url: "/set_tests", + icon: "icon-school", + user: "TEACHER" + }, + markbook: { + title: "Markbook", + url: "/my_markbook", + icon: "icon-done-all", + user: "TUTOR" + }, + + assignedToMe: { + title: "Assigned to me", + url: "/assignments", + icon: "icon-person-check", + user: "ALL" + }, + + myTests: { + title: "Tests", + url: "/tests", + icon: "icon-school", + user: "STUDENT" + }, + progress: { + title: "Progress", + url: "/progress", + icon: "icon-done-all", + user: "STUDENT" + }, + + account: { + title: "Account", + url: "/account", + icon: "icon-cog", + user: "ALL" + } +}; + export const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; export const HOME_CRUMB = {title: "Home", to: "/"}; diff --git a/src/app/services/device.ts b/src/app/services/device.ts index 0655cc48e2..9d3fc354a7 100644 --- a/src/app/services/device.ts +++ b/src/app/services/device.ts @@ -1,6 +1,7 @@ -import {useEffect, useState} from "react"; +import {useCallback, useEffect, useState} from "react"; import { siteSpecific } from "./siteConstants"; import { isAda } from "./siteConstants"; +import { MyAdaTabs } from "./constants"; const MOBILE_WINDOW_WIDTH = 768; @@ -33,8 +34,8 @@ export enum DeviceOrientation { const descDeviceSizes = [DeviceSize.XXXL, DeviceSize.XXL, DeviceSize.XL, DeviceSize.LG, DeviceSize.MD, DeviceSize.SM, DeviceSize.XS]; export const useDeviceSize = () => { - const getSize = (): DeviceSize => { - const shouldIncludeSidebar = isAda && window.innerWidth >= 768; + const getSize = useCallback((): DeviceSize => { + const shouldIncludeSidebar = isAda && Object.values(MyAdaTabs).some(tab => window.location.pathname.includes(tab.url)) && window.innerWidth >= 768; const width = window.innerWidth - (shouldIncludeSidebar ? 220 : 0); if (width >= 1800) return DeviceSize.XXXL; else if (width >= 1400) return DeviceSize.XXL; @@ -43,7 +44,7 @@ export const useDeviceSize = () => { else if (width >= 768) return DeviceSize.MD; else if (width >= 576) return DeviceSize.SM; else return DeviceSize.XS; - }; + }, []); const [windowSize, setWindowSize] = useState(getSize); @@ -51,7 +52,7 @@ export const useDeviceSize = () => { const handleResize = () => {setWindowSize(getSize());}; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); - }, []); + }, [getSize]); return windowSize; };