idanoo/GoScrobble
1
0
Fork 0
mirror of https://github.com/idanoo/GoScrobble.git synced 2024-11-21 16:11:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Frontend work

Browse Source
This commit is contained in:
Daniel Mason 2021-03-25 21:13:28 +13:00
parent 6ab1b13ea3
commit 2fe9516fc2
9 changed files with 968 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

851
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
web/package.json
View File

@ -6,9 +6,13 @@
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"reactstrap": "^8.9.0",
"web-vitals": "^1.1.1"
},
"scripts": {

4
web/public/index.html
View File

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="GoScrobble.com Open source music scropbbler"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>GoScrobble</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

46
web/src/App.js
View File

@ -1,24 +1,36 @@
import logo from './logo.svg';
import './App.css';
import Home from './Components/Pages/Home';
import About from './Components/Pages/About';
import Login from './Components/Pages/Login';
import Navigation from './Components/Pages/Navigation';
import { Route, Switch, HashRouter } from 'react-router-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
if (!true) {
return <Login />
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
goscrobble.com
</p>
<a
className="App-link"
href="https://git.m2.nz/idanoo/go-scrobble"
target="_blank"
rel="noopener noreferrer"
>
git.m2.nz/idanoo/go-scrobble
</a>
</header>
</div>
<HashRouter>
<div className="wrapper">
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
</HashRouter>
// <div className="App">
// <Router>
// <Navigation/>
// <Switch>
// <Route exact path='/' component={Home}/>
// <Route path='/about' component={About}/>
// </Switch>
// </Router>
// </div>
);
}

23
web/src/Components/Pages/About.js Normal file
View File

@ -0,0 +1,23 @@
import logo from '../../logo.svg';
import '../../App.css';
function About() {
return (
<div>
<img src={logo} className="App-logo" alt="logo" />
<p>
TEST!!!
</p>
<a
className="App-link"
href="https://git.m2.nz/idanoo/go-scrobble"
target="_blank"
rel="noopener noreferrer"
>
TEST@!@@
</a>
</div>
);
}
export default About;

23
web/src/Components/Pages/Home.js Normal file
View File

@ -0,0 +1,23 @@
import logo from '../../logo.svg';
import '../../App.css';
function Home() {
return (
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
goscrobble.com
</p>
<a
className="App-link"
href="https://git.m2.nz/idanoo/go-scrobble"
target="_blank"
rel="noopener noreferrer"
>
git.m2.nz/idanoo/go-scrobble
</a>
</div>
);
}
export default Home;

22
web/src/Components/Pages/Login.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
export default function Login() {
return(
<div className="login-wrapper">
<h1>Please Log In</h1>
<form>
<label>
<p>Username</p>
<input type="text" />
</label>
<label>
<p>Password</p>
<input type="password" />
</label>
<div>
<button type="submit">Submit</button>
</div>
</form>
</div>
)
}

16
web/src/Components/Pages/Navigation.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { Navbar, NavbarBrand, NavLink } from 'reactstrap';
const Navigation = () => {
return (
<div>
<Navbar color="dark" dark fixed="top">
<NavbarBrand exact href="/" className="mr-auto">GoScrobble</NavbarBrand>
<NavLink exact href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
</Navbar>
</div>
);
}
export default Navigation;

6
web/src/index.js
View File

@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
@ -10,8 +9,3 @@ ReactDOM.render(
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();