wpetit/gengitkan
1
0
Fork 0
Code Issues 17 Pull Requests 1 Releases Wiki Activity

Utilisation de React pour le client

Browse Source
This commit is contained in:
wpetit
2019-11-28 14:12:48 +01:00
parent 98f4288c8a
commit c6851f3f42
27 changed files with 751 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/App.jsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { HashRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import { store } from '../store/store';
import { Provider } from 'react-redux';
import { HomePage } from './HomePage/HomePage';
import { BoardPage } from './BoardPage/BoardPage';
export class App extends React.Component {
render() {
return (
<Provider store={store}>
<React.Fragment>
<Router>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/board/:id" exact component={BoardPage} />
<Route component={() => <Redirect to="/" />} />
</Switch>
</Router>
</React.Fragment>
</Provider>
);
}
}

12
client/src/components/BoardPage/BoardPage.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { Page } from '../Page';
export class BoardPage extends React.Component {
render() {
return (
<Page>
</Page>
);
}
}

12
client/src/components/HomePage/HomePage.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { Page } from '../Page';
export class HomePage extends React.Component {
render() {
return (
<Page>
</Page>
);
}
}

11
client/src/components/Page.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
export class Page extends React.Component {
render() {
return (
<div>
</div>
);
}
}

32
client/src/components/app-loader.riot
View File

@ -1,32 +0,0 @@
<ga-app>
<!-- DOM -->
<riot-router>
<riot-route path="/">
<ga-app />
</riot-route>
<riot-route path="/logout">
<ga-logout />
</riot-route>
<riot-route path="(.*)">
<ga-redirect path="/" />
</riot-route>
</riot-router>
<!-- Script -->
<script>
import { Router, Route, router } from '@riotjs/route';
import Redirect from './redirect.riot';
import Logout from './logout.riot';
import Ticketing from './apps/ticketing/app.riot';
export default {
components: {
RiotRoute: Route,
RiotRouter: Router,
GaRedirect: Redirect,
GaLogout: Logout,
GaApp: Ticketing,
}
};
</script>
</ga-app>

23
client/src/components/apps/ticketing/app.riot
View File

@ -1,23 +0,0 @@
<ga-ticketing>
<style>
:host { display: block; }
</style>
<div class="container">
<ga-navbar></ga-navbar>
<div class="columns"></div>
</div>
<script>
import Navbar from '../../navbar.riot';
export default {
components: {
GaNavbar: Navbar,
},
};
</script>
</ga-ticketing>

12
client/src/components/logout.riot
View File

@ -1,12 +0,0 @@
<ga-logout>
<style>
:host { display: none; }
</style>
<script>
export default {
onMounted() {
window.location = "/logout";
}
};
</script>
</ga-logout>

20
client/src/components/navbar.riot
View File

@ -1,20 +0,0 @@
<ga-navbar>
<style>
:host {
display: block;
}
</style>
<div class="level">
<div class="level-left"></div>
<div class="level-right">
<a class="button is-warning level-item" href="/logout">
Se déconnecter
</a>
</div>
</div>
<script>
export default {
}
</script>
</ga-navbar>

14
client/src/components/redirect.riot
View File

@ -1,14 +0,0 @@
<ga-redirect>
<style>
:host { display: none; }
</style>
<script>
import { router } from '@riotjs/route';
export default {
onMounted() {
console.log(`redirect to ${this.props.path}`);
router.push(this.props.path);
}
};
</script>
</ga-redirect>

2
client/src/index.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="gitea-kan" class="is-fullheight"></div>
<div id="app" class="is-fullheight"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

15
client/src/index.js
View File

@ -1,11 +1,10 @@
import { setBase } from '@riotjs/route';
// const loc = window.location;
// setBase(`${loc.protocol}//${loc.host}#/`);
import { component } from 'riot';
import AppLoader from './components/app-loader.riot';
import './sass/_all.scss';
import './index.html';
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/App';
component(AppLoader)(document.getElementById('gitea-kan'));
ReactDOM.render(
<App />,
document.getElementById('app')
);

5
client/src/store/reducers/issues.js Normal file
View File

@ -0,0 +1,5 @@
export function issuesReducer(state = {}, action) {
return state;
}

6
client/src/store/reducers/root.js Normal file
View File

@ -0,0 +1,6 @@
import { combineReducers } from 'redux';
import { issuesReducer } from './issues';
export const rootReducer = combineReducers({
issues: issuesReducer,
});

4
client/src/store/sagas/failure.js Normal file
View File

@ -0,0 +1,4 @@
export function* handleFailedActionSaga(action) {
console.error(action.error);
}

14
client/src/store/sagas/root.js Normal file
View File

@ -0,0 +1,14 @@
import { all, takeEvery } from 'redux-saga/effects';
import { handleFailedActionSaga } from './failure';
export function* rootSaga() {
yield all([
takeEvery(patternFromRegExp(/^.*_FAILURE/), handleFailedActionSaga),
]);
}
export function patternFromRegExp(re) {
return (action) => {
return re.test(action.type);
};
}

28
client/src/store/store.js Normal file
View File

@ -0,0 +1,28 @@
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { rootReducer } from './reducers/root'
import { rootSaga } from './sagas/root'
let reduxMiddlewares = [];
if (process.env.NODE_ENV !== 'production') {
const createLogger = require('redux-logger').createLogger;
const loggerMiddleware = createLogger({
collapsed: true,
diff: true
});
reduxMiddlewares.push(loggerMiddleware);
}
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
reduxMiddlewares.push(sagaMiddleware);
// mount it on the Store
export const store = createStore(
rootReducer,
applyMiddleware(...reduxMiddlewares)
)
// then run the saga
sagaMiddleware.run(rootSaga);

9
client/src/util/gitea.js Normal file
View File

@ -0,0 +1,9 @@
export class GiteaClient {
constructor() {
}
}
export const gitea = new GiteaClient();