mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-21 17:24:14 -05:00
#5 start updating react-router
This commit is contained in:
Daniel
parent
5ee87ecba5
commit
2aecb184ce
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "chaoticbackup",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"description": "Chaotic Backup",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress",
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
"react-dom": "^16.0.0",
|
||||
"react-interactive": "^0.8.1",
|
||||
"react-process-string": "^1.2.0",
|
||||
"react-router": "^3.2.0",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-transition-group": "^1.2.1",
|
||||
"whatwg-fetch": "^2.0.3"
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import s from '../styles/app.style';
|
||||
import {Children} from './index';
|
||||
|
||||
const language = "ENG";
|
||||
const bkgrnd = "05";
|
||||
|
||||
const propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
routes: PropTypes.array.isRequired,
|
||||
};
|
||||
export default function Base(props) {
|
||||
|
||||
const children = <Children {...props} />;
|
||||
|
||||
function App({ children, routes }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="fix-pgBkgrnd-repeat-x">
|
||||
|
|
@ -122,7 +120,3 @@ function App({ children, routes }) {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
App.propTypes = propTypes;
|
||||
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import s from '../styles/home.style';
|
||||
|
||||
function Home() {
|
||||
|
|
|
|||
|
|
@ -1,180 +1,37 @@
|
|||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
|
||||
import { BrowserRouter as Router, Route } from 'react-router-dom';
|
||||
|
||||
/* Common Components */
|
||||
import App from './Base';
|
||||
import Base from './Base';
|
||||
import {PageNotFound, UnderConstruction} from './Snippets';
|
||||
|
||||
/* Home Component */
|
||||
import Home from './Home';
|
||||
import EnterTheCode from './account/EnterTheCode';
|
||||
|
||||
/* Test Components */
|
||||
import ExampleHome from './example/Home';
|
||||
import ExampleBase from './example/Base';
|
||||
import ExampleComponent from './example/ExampleComponent';
|
||||
import ExampleTwoDeepComponent from './example/ExampleTwoDeepComponent';
|
||||
|
||||
/* Collection */
|
||||
import CollectionHome from './collection/Home';
|
||||
|
||||
/* Portal */
|
||||
import PortalBase from './portal/Base';
|
||||
import PortalHome from './portal/Home';
|
||||
import Attacks from './portal/Category/Attacks';
|
||||
import SingleAttack from './portal/Single/Attack';
|
||||
import Battlegear from './portal/Category/Battlegear';
|
||||
import SingleBattlegear from './portal/Single/Battlegear';
|
||||
import Creatures from './portal/Category/Creatures';
|
||||
import SingleCreature from './portal/Single/Creature';
|
||||
import Locations from './portal/Category/Locations';
|
||||
import SingleLocation from './portal/Single/Location';
|
||||
import Mugic from './portal/Category/Mugic';
|
||||
import SingleMugic from './portal/Single/Mugic';
|
||||
import Tribes from './portal/Category/Tribes';
|
||||
|
||||
|
||||
const routes = (
|
||||
<Route path="/" component={App} >
|
||||
<IndexRoute component={Home} />
|
||||
|
||||
{/* Test */}
|
||||
<Route path="example" mapMenuTitle="Example" component={ExampleBase}>
|
||||
<IndexRoute component={ExampleComponent} />
|
||||
<Route path="two-deep" mapMenuTitle="Two Deep" component={ExampleTwoDeepComponent} />
|
||||
</Route>
|
||||
|
||||
{/* Construction */}
|
||||
<Route path="Construction" component={UnderConstruction} />
|
||||
|
||||
{/* EnterTheCode */}
|
||||
<Route path="EnterTheCode" component={EnterTheCode} />
|
||||
|
||||
{/* Collection */}
|
||||
<Route path="collection">
|
||||
<IndexRoute component={CollectionHome} />
|
||||
<Route path="*" component={CollectionHome} />
|
||||
</Route>
|
||||
|
||||
{/* Portal */}
|
||||
<Route path="portal" component={PortalBase} >
|
||||
<IndexRoute component={PortalHome} />
|
||||
|
||||
{/* Attacks */}
|
||||
<Route path="Attacks" component={Attacks} >
|
||||
<Route path="*" component={SingleAttack} />
|
||||
</Route>
|
||||
|
||||
{/* Battlegear */}
|
||||
<Route path="Battlegear" component={Battlegear} >
|
||||
<Route path="*" component={SingleBattlegear} />
|
||||
</Route>
|
||||
|
||||
{/* Locations */}
|
||||
<Route path="Locations" component={Locations} >
|
||||
<Route path="*" component={SingleLocation} />
|
||||
</Route>
|
||||
|
||||
{/* Creatures */}
|
||||
{/* Todo this isn't needed (tribe checking handled by components) */}
|
||||
<Route path="Creatures" >
|
||||
<IndexRoute component={Creatures} />
|
||||
<Route path="OverWorld" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
<Route path="UnderWorld" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
<Route path="Mipedian" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
<Route path="Danian" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Mugic */}
|
||||
<Route path="Mugic">
|
||||
<IndexRoute component={Mugic} />
|
||||
<Route path="OverWorld" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
<Route path="UnderWorld" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
<Route path="Mipedian" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
<Route path="Danian" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
<Route path="Generic" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* OverWorld */}
|
||||
<Route path="OverWorld" component={Tribes} >
|
||||
<Route path="Creatures" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
<Route path="Mugic" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* UnderWorld */}
|
||||
<Route path="UnderWorld" component={Tribes} >
|
||||
<Route path="Creatures" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
<Route path="Mugic" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Mipedian */}
|
||||
<Route path="Mipedian" component={Tribes} >
|
||||
<Route path="Creatures" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
<Route path="Mugic" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Danian */}
|
||||
<Route path="Danian" component={Tribes} >
|
||||
<Route path="Creatures" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
<Route path="Mugic" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Generic */}
|
||||
<Route path="Generic" component={Tribes} >
|
||||
<Route path="Creatures" component={Creatures} >
|
||||
<Route path="*" component={SingleCreature} />
|
||||
</Route>
|
||||
<Route path="Mugic" component={Mugic} >
|
||||
<Route path="*" component={SingleMugic} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
<Route path="*" component={PageNotFound} />
|
||||
|
||||
</Route>
|
||||
<Route path="*" component={PageNotFound} />
|
||||
</Route>
|
||||
);
|
||||
|
||||
render(
|
||||
<Router
|
||||
history={browserHistory}
|
||||
routes={routes}
|
||||
/>,
|
||||
document.getElementById('root'),
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
,document.getElementById('root'),
|
||||
);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Route path="/" component={Base}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Children(props) {
|
||||
console.log(props);
|
||||
const match = props.match;
|
||||
return (
|
||||
<div>
|
||||
<Route exact path={match.url} component={Home} />
|
||||
<Route path={`${match.url}EnterTheCode`} component={EnterTheCode} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,41 @@ export default class Tribes extends React.Component {
|
|||
return (<div>{this.props.children}</div>);
|
||||
}
|
||||
|
||||
const store = API;
|
||||
|
||||
let path = this.props.location.pathname.split("/");
|
||||
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
|
||||
|
||||
let tribe = path[2];
|
||||
|
||||
if (store.urls === null ||
|
||||
store.portal === null ||
|
||||
store.cards === null) {
|
||||
return (<span>Loading...</span>);
|
||||
}
|
||||
|
||||
if (!store.tribes.includes(tribe)) {
|
||||
return(
|
||||
<div>
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Creatures/Danian"
|
||||
>Danian</Interactive>
|
||||
<br />
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Creatures/OverWorld"
|
||||
>OverWorld</Interactive>
|
||||
<br />
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Creatures/UnderWorld"
|
||||
>UnderWorld</Interactive>
|
||||
<br />
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Creatures/Mipedian"
|
||||
>Mipedian</Interactive>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{tribe}</h1>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user