Skip to content

Commit 59ddf7a

Browse files
CK-7vnjtucholski
CK-7vn
and
jtucholski
authored
fix: remove breadcrumbs, move page titles (#657)
Co-authored-by: jtucholski <[email protected]>
1 parent 9cddf74 commit 59ddf7a

19 files changed

Lines changed: 49 additions & 103 deletions

‎frontend/src/Components/Navbar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function Navbar({
7575

7676
return (
7777
<div className="w-60 min-w-[240px] flex flex-col bg-background group h-screen">
78-
<div className="hidden lg:flex self-end py-6 mr-4">
78+
<div className="hidden lg:flex self-end py-8 mr-4">
7979
{isPinned ? (
8080
<div
8181
className="tooltip tooltip-left"
@@ -99,7 +99,7 @@ export default function Navbar({
9999
)}
100100
</div>
101101

102-
<Link to="/" className="mt-16">
102+
<Link to="/" className="mt-14">
103103
<Brand />
104104
</Link>
105105

@@ -190,7 +190,7 @@ export default function Navbar({
190190
</li>
191191
)}
192192
<li>
193-
<Link to="/students">
193+
<Link to="/residents">
194194
<ULIComponent icon={AcademicCapIcon} />
195195
Residents
196196
</Link>

‎frontend/src/Components/PageNav.tsx‎

Lines changed: 33 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,30 @@
1-
import { useEffect, useRef, useState } from 'react';
1+
import { useState, useEffect, useRef } from 'react';
22
import { isAdministrator, useAuth } from '@/useAuth';
3-
import {
4-
Bars3Icon,
5-
BuildingOffice2Icon,
6-
HomeIcon
7-
} from '@heroicons/react/24/solid';
3+
import { Bars3Icon, BuildingOffice2Icon } from '@heroicons/react/24/solid';
84
import ULIComponent from '@/Components/ULIComponent.tsx';
9-
import { Facility } from '@/common';
10-
import { useLoaderData } from 'react-router-dom';
5+
import { Facility, TitleHandler } from '@/common';
6+
import { useMatches, useLoaderData } from 'react-router-dom';
117
import API from '@/api/api';
12-
import { usePathValue } from '@/Context/PathValueCtx';
8+
9+
let setGlobalPageTitle: (newTitle: string) => void;
1310

1411
export default function PageNav({
15-
path,
1612
showOpenMenu,
1713
onShowNav
1814
}: {
19-
path: string[];
2015
showOpenMenu: boolean;
2116
onShowNav?: () => void;
2217
}) {
2318
const { user } = useAuth();
2419
const detailsRef = useRef<HTMLDetailsElement>(null);
25-
const { pathVal } = usePathValue();
26-
const [customPath, setCustomPath] = useState<string[]>(path ?? []);
2720
const facilityNames = useLoaderData() as Facility[] | null;
28-
29-
useEffect(() => {
30-
const handlePathChange = () => {
31-
const newPath = [...path];
32-
if (newPath && newPath.length > 0) {
33-
setCustomPath(
34-
newPath.map((p) => {
35-
return (
36-
pathVal?.find((pv) => pv.path_id === p)?.value ?? p
37-
);
38-
})
39-
);
40-
return;
41-
}
42-
setCustomPath(path);
43-
};
44-
handlePathChange();
45-
}, [path, pathVal]);
21+
const matches = useMatches();
22+
const currentRoute = matches[matches.length - 1];
23+
const pageTitle = (currentRoute?.handle as TitleHandler)?.title;
24+
const [globalPageTitle, _setGlobalPageTitle] = useState<string>(
25+
pageTitle || 'Library Viewer'
26+
);
27+
setGlobalPageTitle = _setGlobalPageTitle;
4628

4729
useEffect(() => {
4830
const closeDropdown = ({ target }: MouseEvent) => {
@@ -72,40 +54,25 @@ export default function PageNav({
7254

7355
return (
7456
<div className="px-6 py-3 flex justify-between items-center">
75-
<div className="breadcrumbs">
76-
<ul>
77-
{showOpenMenu ? (
78-
<li>
79-
<ULIComponent
80-
onClick={() => {
81-
if (onShowNav) onShowNav();
82-
}}
83-
icon={Bars3Icon}
84-
iconClassName={'cursor-pointer'}
85-
/>
86-
</li>
87-
) : (
88-
<li>
89-
<ULIComponent
90-
onClick={() => {
91-
if (onShowNav) onShowNav();
92-
}}
93-
icon={Bars3Icon}
94-
iconClassName={'lg:hidden cursor-pointer'}
95-
/>
96-
<ULIComponent
97-
icon={HomeIcon}
98-
iconClassName={'hidden lg:block'}
99-
/>
100-
</li>
101-
)}
102-
103-
{customPath?.map((p) => (
104-
<li className="capitalize body" key={p}>
105-
{p}
106-
</li>
107-
))}
108-
</ul>
57+
<div className="flex items-center gap-3">
58+
{showOpenMenu ? (
59+
<ULIComponent
60+
onClick={onShowNav}
61+
icon={Bars3Icon}
62+
iconClassName="cursor-pointer"
63+
/>
64+
) : (
65+
<ULIComponent
66+
onClick={onShowNav}
67+
icon={Bars3Icon}
68+
iconClassName="lg:hidden cursor-pointer"
69+
/>
70+
)}
71+
<h1>
72+
{pageTitle == 'Library Viewer'
73+
? globalPageTitle
74+
: pageTitle}
75+
</h1>
10976
</div>
11077
{user && isAdministrator(user) ? (
11178
<ul className="menu menu-horizontal px-1">
@@ -148,3 +115,4 @@ export default function PageNav({
148115
</div>
149116
);
150117
}
118+
export { setGlobalPageTitle };

‎frontend/src/Components/VideoEmbedViewer.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export default function VideoViewer() {
4040
};
4141
return (
4242
<div className="px-8 pb-4">
43-
<h1>Video Viewer</h1>
4443
<div className="w-2/3 pt-4 justify-center">
4544
{isLoading ? (
4645
<div className="flex h-screen gap-4 justify-center content-center">

‎frontend/src/Layouts/AuthenticatedLayout.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default function AuthenticatedLayout() {
1313
const matches = useMatches() as CustomRouteMatch[];
1414
const currentMatch = matches.find((match) => match?.handle?.title);
1515
const title = currentMatch?.handle?.title ?? 'UnlockEd';
16-
const path = currentMatch?.handle?.path;
1716
// We have three states we need to factor for.
1817
// 1. If the nav is open & pinned (Large screens only & uses lg:drawer-open)
1918
// 2. If the nav is open & not pinned (Large screens only)
@@ -46,7 +45,6 @@ export default function AuthenticatedLayout() {
4645
<div className="drawer-content flex flex-col border-l border-grey-1">
4746
<main className="w-full min-h-screen bg-background flex flex-col">
4847
<PageNav
49-
path={path ?? []}
5048
showOpenMenu={!isNavPinned}
5149
onShowNav={showNav}
5250
/>

‎frontend/src/Pages/AdminLayer2.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,6 @@ export default function AdminLayer2() {
3636
{!data || (isLoading && <div>Loading...</div>)}
3737
{data && layer2_metrics && (
3838
<>
39-
<div className="pb-4">
40-
<h1>Learning Insights</h1>
41-
</div>
4239
<div className="flex flex-row justify-between mb-6">
4340
<select
4441
id="facility"

‎frontend/src/Pages/AdminManagement.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,6 @@ export default function AdminManagement() {
156156
return (
157157
<div>
158158
<div className="flex flex-col space-y-6 overflow-x-auto rounded-lg p-4 px-8">
159-
<h1>Admins</h1>
160159
<div className="flex justify-between">
161160
<div className="flex flex-row gap-x-2">
162161
<SearchBar

‎frontend/src/Pages/CourseCatalog.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ export default function CourseCatalog() {
3030

3131
return (
3232
<div className="px-8 py-4">
33-
<div className="flex flex-row justify-between">
34-
<h1>Course Catalog</h1>
33+
<div className="flex flex-row justify-end">
3534
<ToggleView
3635
activeView={activeView}
3736
setActiveView={setActiveView}

‎frontend/src/Pages/FacilityManagement.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ export default function FacilityManagement() {
110110
return (
111111
<>
112112
<div className="px-8 py-4 flex flex-col justify-center gap-4">
113-
<h1>Facility Management</h1>
114113
<div className="flex flex-row justify-between">
115114
<div>
116115
{/* TO DO: this is where SEARCH and SORT will go */}

‎frontend/src/Pages/LibraryViewer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Error from '@/Pages/Error';
44
import API from '@/api/api';
55
import { Library, ServerResponseOne } from '@/common';
66
import { usePathValue } from '@/Context/PathValueCtx';
7+
import { setGlobalPageTitle } from '@/Components/PageNav';
78

89
export default function LibraryViewer() {
910
const { id: libraryId } = useParams();
@@ -20,6 +21,7 @@ export default function LibraryViewer() {
2021
`libraries/${libraryId}`
2122
)) as ServerResponseOne<Library>;
2223
if (resp.success) {
24+
setGlobalPageTitle(resp.data.title);
2325
setPathVal([
2426
{ path_id: ':library_name', value: resp.data.title }
2527
]);
@@ -49,7 +51,6 @@ export default function LibraryViewer() {
4951
return (
5052
<div>
5153
<div className="px-8 pb-4">
52-
<h1>Library Viewer</h1>
5354
<div className="w-full pt-4 justify-center">
5455
{isLoading ? (
5556
<div className="flex h-screen gap-4 justify-center content-center">

‎frontend/src/Pages/MyCourses.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ export default function MyCourses() {
5555

5656
return (
5757
<div className="px-8 py-4">
58-
<h1>My Courses</h1>
5958
<TabView
6059
tabs={tabs}
6160
activeTab={activeTab}
@@ -81,8 +80,7 @@ export default function MyCourses() {
8180
'order=asc&order_by=start_dt',
8281
'Start Date (descending)':
8382
'order=desc&order_by=start_dt',
84-
'End Date (ascending)':
85-
'order=asc&order_by=end_dt',
83+
'End Date (ascending)': 'order=asc&order_by=end_dt',
8684
'End Date (descending)':
8785
'order=desc&order_by=end_dt'
8886
}}

0 commit comments

Comments
 (0)