Skip to content

Commit 91986e2

Browse files
leinaD006leinaD006
committed
Merge branch 'devops329-main'
2 parents 47267f7 + 0b722fa commit 91986e2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1569
-1253
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
<body>
1111
<noscript>You need to enable JavaScript to run this app.</noscript>
1212
<div id="root"></div>
13-
<script type="module" src="/index.jsx"></script>
13+
<script type="module" src="/index.tsx"></script>
1414
</body>
1515
</html>

‎index.jsx

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎index.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import { BrowserRouter } from 'react-router-dom';
4+
import App from './src/app/app';
5+
6+
const rootElement = document.getElementById('root');
7+
8+
if (rootElement) {
9+
const root = ReactDOM.createRoot(rootElement);
10+
root.render(
11+
<BrowserRouter>
12+
<App />
13+
</BrowserRouter>
14+
);
15+
} else {
16+
console.error('No root element found');
17+
}

‎package-lock.json

Lines changed: 47 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,16 @@
1313
"test:coverage": "nyc --reporter=json-summary --reporter=text playwright test"
1414
},
1515
"devDependencies": {
16+
"@types/react": "^18.3.3",
17+
"@types/react-dom": "^18.3.0",
1618
"@playwright/test": "^1.48.0",
1719
"@types/node": "^22.7.5",
1820
"autoprefixer": "^10.4.19",
1921
"nyc": "^17.1.0",
2022
"playwright-test-coverage": "^1.2.12",
2123
"postcss": "^8.4.38",
2224
"tailwindcss": "^3.4.3",
25+
"typescript": "^5.5.4",
2326
"vite": "^5.2.8",
2427
"vite-plugin-istanbul": "^6.0.2"
2528
},

‎src/app/app.jsx renamed to ‎src/app/app.tsx

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { useEffect } from 'react';
3-
import { useLocation, Routes, Route, NavLink } from 'react-router-dom';
3+
import { useLocation, Routes, Route } from 'react-router-dom';
44
import Header from './header';
55
import Footer from './footer';
66
import Home from '../views/home';
@@ -23,11 +23,17 @@ import NotFound from '../views/notFound';
2323
import Docs from '../views/docs';
2424
import Breadcrumb from '../components/breadcrumb';
2525
import { pizzaService } from '../service/service';
26-
import { Role } from '../service/pizzaService';
26+
import { Role, User } from '../service/pizzaService';
2727
import 'preline/preline';
2828

29+
declare global {
30+
interface Window {
31+
HSStaticMethods: any;
32+
}
33+
}
34+
2935
export default function App() {
30-
const [user, setUser] = React.useState(null);
36+
const [user, setUser] = React.useState<User | null>(null);
3137
const location = useLocation();
3238

3339
useEffect(() => {
@@ -59,7 +65,13 @@ export default function App() {
5965
{ title: 'Home', to: '/', component: <Home />, display: [] },
6066
{ title: 'Diner', to: '/diner-dashboard', component: <DinerDashboard user={user} />, display: [] },
6167
{ title: 'Order', to: '/menu', component: <Menu />, display: ['nav'] },
62-
{ title: 'Franchise', to: '/franchise-dashboard', component: <FranchiseDashboard user={user} />, constraints: [isNotAdmin], display: ['nav', 'footer'] },
68+
{
69+
title: 'Franchise',
70+
to: '/franchise-dashboard',
71+
component: <FranchiseDashboard user={user} />,
72+
constraints: [isNotAdmin],
73+
display: ['nav', 'footer'],
74+
},
6375
{ title: 'About', to: '/about', component: <About />, display: ['footer'] },
6476
{ title: 'History', to: '/history', component: <History />, display: ['footer'] },
6577
{ title: 'Admin', to: '/admin-dashboard', component: <AdminDashboard user={user} />, constraints: [isAdmin], display: ['nav'] },
@@ -77,14 +89,14 @@ export default function App() {
7789
];
7890

7991
return (
80-
<div className='bg-gray-800'>
81-
<Header user={user} navItems={(user, navItems)} />
92+
<div className="bg-gray-800">
93+
<Header user={user} navItems={navItems} />
8294
<Breadcrumb location={location.pathname.replace('/', '')} />
8395

84-
<main className='size-full'>
96+
<main className="size-full">
8597
<Routes>
8698
{navItems.map((item) => (
87-
<Route key={item.title} path={item.to} element={item.component} exact />
99+
<Route key={item.title} path={item.to} element={item.component} />
88100
))}
89101
</Routes>
90102
</main>

‎src/app/footer.jsx

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/app/footer.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { NavLink } from 'react-router-dom';
3+
4+
interface Props {
5+
navItems: { title: string; to: string; display: string[] }[];
6+
}
7+
8+
export default function Footer(props: Props) {
9+
const [version, setVersion] = React.useState('');
10+
11+
React.useEffect(() => {
12+
fetch('/version.json')
13+
.then((response) => response.json())
14+
.then((data) => setVersion(data.version));
15+
}, []);
16+
17+
return (
18+
<footer className="m-8 flex justify-center">
19+
<div className="container border-t-2 border-gray-200 max-w-3xl">
20+
<nav className="-mb-0.5 flex space-x-6 justify-between">
21+
{props.navItems.map(
22+
(item) =>
23+
item.display.includes('footer') && (
24+
<NavLink
25+
key={item.title}
26+
className=" py-4 px-1 inline-flex items-center gap-2 text-sm whitespace-nowrap text-gray-200 hover:text-orange-600 focus:text-orange-600"
27+
to={item.to}>
28+
{item.title}
29+
</NavLink>
30+
)
31+
)}
32+
</nav>
33+
<p className="text-sm text-center italic text-gray-400">© 2024 JWT Pizza LTD. All rights reserved. Version: {version}</p>
34+
</div>
35+
</footer>
36+
);
37+
}

‎src/app/header.jsx

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎src/app/header.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import { NavLink } from 'react-router-dom';
3+
import { HamburgerIcon, CloseIcon } from '../icons';
4+
import { User } from '../service/pizzaService';
5+
6+
interface Props {
7+
user: User | null;
8+
navItems: { title: string; to: string; display: string[]; constraints?: (() => boolean)[] }[];
9+
}
10+
11+
export default function Header(props: Props) {
12+
function validateConstraints(constraints: (() => boolean)[]) {
13+
return constraints.every((c) => c());
14+
}
15+
16+
function generateUserText(user: User) {
17+
const names = user?.name?.split(' ') || ['?'];
18+
return names.length > 1 ? names[0].charAt(0) + names[names.length - 1].charAt(0) : names[0].charAt(0);
19+
}
20+
21+
return (
22+
<div className="space-y-4">
23+
<header className="flex flex-wrap sm:justify-start sm:flex-nowrap w-full bg-gray-800 text-sm py-4">
24+
<nav className="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
25+
<div className="flex items-center justify-between">
26+
<img className="w-10 m-3" src="/jwt-pizza-icon.png" />
27+
<span className="font-normal flex-none text-4xl bg-clip-text bg-gradient-to-tr from-orange-500 to-orange-300 text-transparent">JWT Pizza</span>
28+
<div className="sm:hidden">
29+
<button
30+
type="button"
31+
className="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-lg border border-gray-700 font-medium bg-gray-800 text-gray-400 shadow-sm align-middle hover:bg-gray-700/[.25] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-blue-600 transition-all text-sm"
32+
data-hs-collapse="#navbar-dark"
33+
>
34+
<HamburgerIcon className="hs-collapse-open:hidden" />
35+
<CloseIcon className="hs-collapse-open:block hidden" />
36+
</button>
37+
</div>
38+
</div>
39+
<div id="navbar-dark" className="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
40+
<div className="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5">
41+
{props.navItems.map((item) => {
42+
return (
43+
item.display.includes('nav') &&
44+
(!item.constraints || validateConstraints(item.constraints)) && (
45+
<NavLink key={item.title} className="font-medium text-gray-400 focus:text-orange-600" to={item.to.replace(':subPath?/', '')}>
46+
{item.title}
47+
</NavLink>
48+
)
49+
);
50+
})}
51+
</div>
52+
</div>
53+
{props.user && (
54+
<NavLink className="font-medium text-gray-400 focus:text-orange-600" to="diner-dashboard">
55+
<div className="hs-tooltip inline-block [--placement:bottom]">
56+
<div className="hs-tooltip-toggle pl-4 font-semibold text-orange-400">
57+
<span className="inline-flex items-center justify-center size-[30px] rounded-full bg-orange-800 font-semibold text-white leading-none">
58+
{generateUserText(props.user)}
59+
</span>
60+
</div>
61+
</div>
62+
</NavLink>
63+
)}
64+
</nav>
65+
</header>
66+
</div>
67+
);
68+
}

0 commit comments

Comments
 (0)