Skip to content

Commit 84bdef5

Browse files
PramithaMJPramithaMJ
committed
feat: implement modular application structure with navigation, context providers, and dynamic module rendering, removing default styling.
1 parent 3a5f04e commit 84bdef5

2 files changed

Lines changed: 58 additions & 72 deletions

File tree

‎src/App.css‎

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

‎src/App.tsx‎

Lines changed: 58 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,63 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
1+
/**
2+
* Java Engineering Masterclass - Main Application
3+
* Production-grade React + TypeScript application
4+
*/
55

6-
function App() {
7-
const [count, setCount] = useState(0)
6+
import { NavigationProvider, ConsoleProvider, useNavigation, isModuleView } from './contexts';
7+
import { Layout, ModuleHub, ModuleTabs } from './components';
8+
import { GCModule, ThreadsModule, JITModule, JMMModule } from './features';
9+
import type { ModuleId } from './types';
10+
11+
/**
12+
* Module Renderer Component
13+
* Renders the appropriate module based on current navigation state
14+
*/
15+
function ModuleRenderer() {
16+
const { currentView } = useNavigation();
17+
18+
if (!isModuleView(currentView)) {
19+
return <ModuleHub />;
20+
}
21+
22+
// Module component mapping (OCP - easily extensible)
23+
const moduleComponents: Record<ModuleId, React.ComponentType> = {
24+
gc: GCModule,
25+
threads: ThreadsModule,
26+
jit: JITModule,
27+
jmm: JMMModule,
28+
};
29+
30+
const ModuleComponent = moduleComponents[currentView];
31+
return <ModuleComponent />;
32+
}
833

34+
/**
35+
* App Layout Wrapper
36+
* Provides navigation tabs for module views
37+
*/
38+
function AppContent() {
39+
const { currentView } = useNavigation();
40+
const showModuleNav = isModuleView(currentView);
41+
42+
return (
43+
<Layout moduleNav={showModuleNav ? <ModuleTabs /> : undefined}>
44+
<ModuleRenderer />
45+
</Layout>
46+
);
47+
}
48+
49+
/**
50+
* Root Application Component
51+
* Wrapped with all required context providers
52+
*/
53+
function App() {
954
return (
10-
<>
11-
<div>
12-
<a href="https://vite.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.tsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
31-
</>
32-
)
55+
<NavigationProvider>
56+
<ConsoleProvider>
57+
<AppContent />
58+
</ConsoleProvider>
59+
</NavigationProvider>
60+
);
3361
}
3462

35-
export default App
63+
export default App;

0 commit comments

Comments
 (0)