react-webdist-app: @mui initial integration

react-webdist-app/package.json

@@ -4,6 +4,11 @@
   "proxy": "http://buildvm01:5000",
   "private": true,
   "dependencies": {
+    "@emotion/hash": "^0.9.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -13,6 +18,8 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

react-webdist-app/public/index.html

@@ -15,7 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+    <!-- for MaterialUI -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.

react-webdist-app/src/App.js

@@ -1,29 +1,67 @@
-import React, { useState, useEffect } from 'react';
+import React, { Component } from 'react';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import TypoGraphy from '@mui/material/Typography';
+import IconButton from "@mui/material/IconButton";
+import Button from "@mui/material/Button";
+import MenuIcon from "@mui/icons-material/Menu";
 import './App.css';
 import Latest from "./Latest"
+import NavBar from "./NavBar"
 
-function App() {
-  const [placeholder, setPlaceholder] = useState({});
 
-  useEffect(() => {
-    fetch('/api/v1/latest').then(res => res.json()).then(data => {
-      setPlaceholder(data.result);
-    });
-  }, []);
-  
-//  var parse = require('html-react-parser');
-//  var parsed = parse(placeholder);
-  
-  return (
-    <div className="App">
-      <div className="container-fluid">
-      <h2>Welcome To WebDist</h2>
-      <a href="/">Home</a> | <a href="/latest">Latest packages</a>
-      <hr/>
-        <Latest name={placeholder} />
-      </div>
-    </div>
-  );
+class App extends Component {
+    constructor(props){ 
+      super(props)
+      // Set initial state 
+      this.state = { menuState: 0 } 
+      // Binding this keyword 
+      this.showLatest = this.showLatest.bind(this) 
+      this.showHome = this.showHome.bind(this) 
+    }
+
+    showLatest() {
+        this.setState({ menuState: 1 })
+    }
+
+    showHome() {
+        this.setState({ menuState: 0 })
+    }
+    
+    render() {
+        return (
+          <div className="App">
+          <AppBar color="primary" position="static">
+          <Toolbar>
+            <IconButton
+              edge="start"
+              style={{
+                marginRight: 20,
+              }}
+              color="inherit"
+              aria-label="menu">
+              <MenuIcon />
+            </IconButton>
+            <TypoGraphy variant="h6" color="inherit">
+              WebDist
+           </TypoGraphy>
+           <NavBar showLatest={this.showLatest} showHome={this.showHome} />
+          </Toolbar>
+          </AppBar>
+          <br/>
+          <div>
+            <Button color="primary" variant="contained" onClick={this.showLatest}>
+              Click Me
+            </Button>
+          </div>
+            <div className="container-fluid">
+            <hr/>
+           {this.state.menuState === 1 && <Latest />}
+            </div>
+          </div>
+        );
+    }
+    
 }
 
 export default App;

react-webdist-app/src/Latest.js

@@ -1,24 +1,32 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { format } from 'date-fns'
 import "./App.css";
 
-export default class Latest extends React.Component {
-    render() {
-        return (
-            <div className="row align-items-start">
-            <h1>Latest packages</h1>
-                    {Object.entries(this.props.name).map(([repo,pkgs])=>(
-                        <div className="col align-items-start" key={repo}>
-                            <h2 key={repo}>{repo}</h2>
-                                {pkgs.map(pkg =>(
-                                    <div key={pkg['name']}>
-                                        {format(Date.parse(pkg['buildtime']), 'MM/dd')} <strong>{pkg['name']}</strong> {pkg['version']}-{pkg['release']}<br/>
-                                        <small>{pkg['summary']}</small>
-                                    </div>
-                                ))}
-                        </div>
-                    ))}
-            </div>
-        );
-    }
+function Latest() {
+    
+    const [placeholder, setPlaceholder] = useState({});
+
+    useEffect(() => {
+      fetch('/api/v1/latest').then(res => res.json()).then(data => {
+        setPlaceholder(data.result);
+      });
+    }, []);
+    return (
+        <div className="row align-items-start">
+        <h1>Latest packages</h1>
+                {Object.entries(placeholder).map(([repo,pkgs])=>(
+                    <div className="col align-items-start" key={repo}>
+                        <h2 key={repo}>{repo}</h2>
+                            {pkgs.map(pkg =>(
+                                <div key={pkg['name']}>
+                                    {format(Date.parse(pkg['buildtime']), 'MM/dd')} <strong>{pkg['name']}</strong> {pkg['version']}-{pkg['release']}<br/>
+                                    <small>{pkg['summary']}</small>
+                                </div>
+                            ))}
+                    </div>
+                ))}
+        </div>
+    );
 }
+
+export default Latest;

react-webdist-app/src/NavBar.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import TypoGraphy from '@mui/material/Typography'
+
+
+function NavBar(props) {
+
+    return (
+        <List component="nav">
+            <ListItem component="div">
+                <ListItemButton onClick={props.showHome}>
+                    <TypoGraphy color="inherit" variant="h6">
+                        Home
+                    </TypoGraphy>
+                </ListItemButton>
+
+                <ListItemButton onClick={props.showLatest}>
+                    <TypoGraphy color="inherit" variant="h6">
+                        Latest
+                    </TypoGraphy>
+                </ListItemButton>
+
+            </ListItem >
+
+        </List>
+    )
+}
+
+export default NavBar;