masterhc
/
reactexercise2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
master
Cristiano Pires 2 years ago
parent 18739a1c10
commit fa335b4771
12 changed files with 159 additions and 194 deletions
Show Stats Download Patch File Download Diff File

75
package-lock.json generated
Unescape View File

@ -19,7 +19,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router": "^5.2.0", "react-router": "^5.2.0",
"react-router-dom": "^5.2.0", "react-router-dom": "^6.16.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
} }
@ -3342,6 +3342,14 @@
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/@remix-run/router": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
"integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rollup/plugin-babel": { "node_modules/@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -15452,20 +15460,33 @@
} }
}, },
"node_modules/react-router-dom": { "node_modules/react-router-dom": {
"version": "5.2.0", "version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.1.2", "@remix-run/router": "1.9.0",
"history": "^4.9.0", "react-router": "6.16.0"
"loose-envify": "^1.3.1", },
"prop-types": "^15.6.2", "engines": {
"react-router": "5.2.0", "node": ">=14.0.0"
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=15" "react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-router-dom/node_modules/react-router": {
"version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
"integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
"dependencies": {
"@remix-run/router": "1.9.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
} }
}, },
"node_modules/react-router/node_modules/isarray": { "node_modules/react-router/node_modules/isarray": {
@ -21033,6 +21054,11 @@
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true "peer": true
}, },
"@remix-run/router": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
"integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA=="
},
"@rollup/plugin-babel": { "@rollup/plugin-babel": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -29732,17 +29758,22 @@
} }
}, },
"react-router-dom": { "react-router-dom": {
"version": "5.2.0", "version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
"requires": { "requires": {
"@babel/runtime": "^7.1.2", "@remix-run/router": "1.9.0",
"history": "^4.9.0", "react-router": "6.16.0"
"loose-envify": "^1.3.1", },
"prop-types": "^15.6.2", "dependencies": {
"react-router": "5.2.0", "react-router": {
"tiny-invariant": "^1.0.2", "version": "6.16.0",
"tiny-warning": "^1.0.0" "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
"integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
"requires": {
"@remix-run/router": "1.9.0"
}
}
} }
}, },
"react-scripts": { "react-scripts": {

2
package.json
Unescape View File

@ -15,7 +15,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router": "^5.2.0", "react-router": "^5.2.0",
"react-router-dom": "^5.2.0", "react-router-dom": "^6.16.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

1
src/Components/Controls.js
Unescape View File

@ -13,6 +13,7 @@ class Controls extends React.Component
return( return(
<div className="Frame"> <div className="Frame">
<div className='Title'>Legendary</div> <div className='Title'>Legendary</div>
<div className='minimize btControl' onClick={this.minimize}><span>_</span></div> <div className='minimize btControl' onClick={this.minimize}><span>_</span></div>
<div className='Maximize btControl' onClick={this.maximize}><span>-</span></div> <div className='Maximize btControl' onClick={this.maximize}><span>-</span></div>
<div className='Close btControl' onClick={this.close}><span>X</span></div> <div className='Close btControl' onClick={this.close}><span>X</span></div>

6
src/Components/Login.css
Unescape View File

@ -32,9 +32,3 @@ span
position: relative; position: relative;
left:2em; left:2em;
} }
.Register
{
float:right;
position: relative;
right: 1em;
}

14
src/Components/Login.js
Unescape View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import './Login.css'; import './Login.css';
class Login extends React.Component class Login extends React.Component
{ {
constructor() constructor()
@ -9,13 +10,6 @@ class Login extends React.Component
this.isPWValid = false; this.isPWValid = false;
this.receive(); this.receive();
} }
callRegister()
{
var date = new Date( new Date().setTime(new Date().getTime()+10000)).toGMTString();
document.cookie = document.cookie+ 'nextPage=Register; expires='+date+';';
window.location.reload();
}
validateConstraints(event) validateConstraints(event)
{ {
event.preventDefault(); event.preventDefault();
@ -52,7 +46,7 @@ class Login extends React.Component
handleKeyDown(event) handleKeyDown(event)
{ {
if (event.keyCode === 13 ) { if (event.keyCode === 13 ) {
    event.preventDefault(); event.preventDefault();
} }
} }
receive() receive()
@ -65,6 +59,7 @@ class Login extends React.Component
} }
render() render()
{ {
return( return(
<div className='container'> <div className='container'>
<form id='form' className='loginForm'> <form id='form' className='loginForm'>
@ -72,8 +67,7 @@ class Login extends React.Component
<input required className='emailInput' type="email" placeholder=" " onKeyDown={this.handleKeyDown} onInvalid={this.emailValidity}></input> <input required className='emailInput' type="email" placeholder=" " onKeyDown={this.handleKeyDown} onInvalid={this.emailValidity}></input>
<label><span>Password</span></label> <label><span>Password</span></label>
<input required className='password' type="password" onKeyDown={this.handleKeyDown} autoComplete="current-password" ></input> <input required className='password' type="password" onKeyDown={this.handleKeyDown} autoComplete="current-password" ></input>
<button className='bt Login' onClick={this.validateConstraints}>Login</button> <button className='bt Login' onClick={this.validateConstraints}>Login</button>
<button className='bt Register' type='button' onClick={this.callRegister} > Register</button>
</form> </form>
</div> </div>
) )

17
src/Components/Navigation.css
Unescape View File

@ -0,0 +1,17 @@
.navBar
{
position: fixed;
top:0;
padding-top:2em;
display: flex;
}
.navItem
{
color: ivory;
padding-left: 2.5em;
text-decoration: none;
}
.navBar::frist-child
{
padding-left:1em;
}

74
src/Components/Navigation.js
Unescape View File

@ -1,68 +1,34 @@
import './Navigation.css'; import './Navigation.css';
import {HashRouter,Link,Route,Switch} from "react-router-dom"; import {HashRouter,Link,Route,Routes} from "react-router-dom";
import Login from "../Components/Login"; import Login from "../Components/Login";
import Register from "../Components/RegisterForm";
import Games from "../Pages/Games" import Games from "../Pages/Games"
import Listener from "../Pages/Listener" import Listener from "../Pages/Listener"
import Leagues from "../Pages/Leagues" import Leagues from "../Pages/Leagues"
import Home from "../Pages/Home"
import React from "react"; import React from "react";
class Navigation extends React.Component class Navigation extends React.Component
{ {
Leagues = ()=>{ render()
return(
<Leagues/>
)
}
login = ()=>{
return(
<Login/>
)
}
Register = ()=>{
return(
<Register/>
)
}
Games = ()=>{
return(
<Games/>
)
}
Listener = ()=>{
return(
<Listener/>
)
}
goToGames()
{ {
var date = new Date( new Date().setTime(new Date().getTime()+250)).toGMTString(); return (
document.cookie = document.cookie+ 'nextPage=Register; expires='+date+';'; <HashRouter>
window.location.reload(); <div className="navBar">
} <Link className='navItem' to="/"><h2>Home</h2></Link>
goToLeagues() <Link className='navItem' to="/Leagues"><h2>Leagues</h2></Link>
{ <Link className='navItem' to="/Games"><h2>My Games</h2></Link>
var date = new Date( new Date().setTime(new Date().getTime()+250)).toGMTString(); </div>
document.cookie = document.cookie+ 'nextPage=Register; expires='+date+';'; <Routes>
window.location.reload(); <Route exact path="/" element={<Home/>}/>
} <Route exact path="/Leagues" element={<Leagues/>}/>
<Route exact path="/Games" element={<Games/>}/>
// render() <Route exact path="/Login" element={<Login/>}/>
// { <Route exact path="/Listener" element={<Listener/>}/>
// return( </Routes>
// <div className="Navbar"> </HashRouter>
// <div className='Title'> );
// {/* SVG LOGO */} }
// </div>
// <div className='Leagues navbt' onClick={this.goToLeagues}><span>Leagues</span></div>
// <div className='Games navbt' onClick={this.goToGames}><span>My Games</span></div>
// </div>
// );
// }
} }

2
src/Pages/Games.js
Unescape View File

@ -1,4 +1,6 @@
import React from 'react';
function Games() { function Games() {
return ( return (
<div> <div>

15
src/Pages/Home.css
Unescape View File

@ -0,0 +1,15 @@
.tempNavBar
{
position: relative;
top:3em;
display: flex;
left: calc(50% - 6em);
}
.btTempNav
{
min-width: 5em;
text-decoration: none;
position: relative;
color:ivory;
background-color: red;
}

104
src/Pages/Home.js
Unescape View File

@ -1,106 +1,38 @@
import React from 'react'; import React from 'react';
// import {HashRouter,Link,Route,Switch} from "react-router-dom"; import './Home.css'
import {HashRouter,Link,Route,Routes, redirect} from "react-router-dom";
import Login from "../Components/Login"; import Login from "../Components/Login";
import Register from "../Components/RegisterForm"; import Register from "../Components/RegisterForm";
import Navigation from "../Components/Navigation"; import Navigation from "../Components/Navigation";
import Games from "../Pages/Games"
import Listener from "../Pages/Listener"
import Leagues from "../Pages/Leagues"
const { cookieSlicer } = require("../lib"); const { cookieSlicer } = require("../lib");
function Home() { function Home() {
var Hash = cookieSlicer(document.cookie,'Hash'); var Hash = cookieSlicer(document.cookie,'Hash');
var nextPage = cookieSlicer(document.cookie, 'nextPage'); // console.log(Hash)
// console.log(nextPage)
console.log(Hash)
// const Leagues = ()=>{
// return(
// <Leagues/>
// )
// }
// const Login = ()=>{
// return(
// <Login/>
// )
// }
// const Register = ()=>{
// return(
// <Register/>
// )
// }
// const Games = ()=>{
// return(
// <Games/>
// )
// }
// const Listener = ()=>{
// return(
// <Listener/>
// )
// }
// return (
// <HashRouter>
// <div className="App">
// <div className="menu">
// <Link to="/"><h2>Home</h2></Link>
// <Link to="/one"><h2>Stand</h2></Link>
// <Link to="/two"><h2>Sit</h2></Link>
// </div>
// <Switch>
// <Route exact path="/" component={Home}/>
// <Route exact path="/Leagues" component={Leagues}/>
// <Route exact path="/Games" component={Games}/>
// <Route exact path="/Login" component={Games}/>
// <Route exact path="/Register" component={Games}/>
// </Switch>
// </div>
// </HashRouter>
// );
return ( return (
<div className="BODY"> <div className="BODY">
{Hash ? {Hash ?
( (
<div> <Navigation/>
<Navigation/>
{nextPage==='Leagues'?
(
<Leagues/>
):
(
<div>
{nextPage==='Games'?
(
<Games/>
):
(
<Listener/>
)
}
</div>
)
}
</div>
) : ) :
( (
<div> <HashRouter>
{nextPage==='Register'? <div className='tempNavBar'>
(
<Register /> <Link className='btTempNav' to="/"><h2>Login</h2></Link>
): <Link className='btTempNav' to="/Register"><h2>Register</h2></Link>
( </div>
<Login /> <redirect to="/"/>
) <Routes>
} <Route exact path="/" element={<Login/>}/>
</div> <Route exact path="/Register" element={<Register/>}/>
) </Routes>
} </HashRouter>
)}
</div> </div>
); );

8
src/Pages/Leagues.js
Unescape View File

@ -1,8 +1,14 @@
import React from 'react';
function Leagues() { function Leagues() {
return ( return (
<div> <div style={{color:'red'}}>
<br></br>
<br></br>
<br></br>
<br></br>
FODA-Se
</div> </div>
) )
} }

35
yarn.lock
Unescape View File

@ -1686,6 +1686,11 @@
"resolved" "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz" "resolved" "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
"version" "2.11.8" "version" "2.11.8"
"@remix-run/router@1.9.0":
"integrity" "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA=="
"resolved" "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz"
"version" "1.9.0"
"@rollup/plugin-babel@^5.2.0": "@rollup/plugin-babel@^5.2.0":
"integrity" "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==" "integrity" "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q=="
"resolved" "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz" "resolved" "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz"
@ -8285,7 +8290,7 @@
"strip-ansi" "^6.0.1" "strip-ansi" "^6.0.1"
"text-table" "^0.2.0" "text-table" "^0.2.0"
"react-dom@^18.0.0", "react-dom@^18.2.0": "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.8":
"integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==" "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
"version" "18.2.0" "version" "18.2.0"
@ -8328,20 +8333,15 @@
"resolved" "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz" "resolved" "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
"version" "0.11.0" "version" "0.11.0"
"react-router-dom@^5.2.0": "react-router-dom@^6.16.0":
"integrity" "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==" "integrity" "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg=="
"resolved" "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz" "resolved" "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz"
"version" "5.2.0" "version" "6.16.0"
dependencies: dependencies:
"@babel/runtime" "^7.1.2" "@remix-run/router" "1.9.0"
"history" "^4.9.0" "react-router" "6.16.0"
"loose-envify" "^1.3.1"
"prop-types" "^15.6.2"
"react-router" "5.2.0"
"tiny-invariant" "^1.0.2"
"tiny-warning" "^1.0.0"
"react-router@^5.2.0", "react-router@5.2.0": "react-router@^5.2.0":
"integrity" "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==" "integrity" "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw=="
"resolved" "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz" "resolved" "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz"
"version" "5.2.0" "version" "5.2.0"
@ -8357,6 +8357,13 @@
"tiny-invariant" "^1.0.2" "tiny-invariant" "^1.0.2"
"tiny-warning" "^1.0.0" "tiny-warning" "^1.0.0"
"react-router@6.16.0":
"integrity" "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA=="
"resolved" "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz"
"version" "6.16.0"
dependencies:
"@remix-run/router" "1.9.0"
"react-scripts@^5.0.1": "react-scripts@^5.0.1":
"integrity" "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==" "integrity" "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ=="
"resolved" "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz" "resolved" "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz"
@ -8412,7 +8419,7 @@
optionalDependencies: optionalDependencies:
"fsevents" "^2.3.2" "fsevents" "^2.3.2"
"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=15": "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=15", "react@>=16.8":
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==" "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz" "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
"version" "18.2.0" "version" "18.2.0"

Write Preview
Loading…
Cancel
Save