talents-tube/app
9
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

avancement

Browse Source
This commit is contained in:
Thomas Berrod
2019-05-29 16:00:28 +02:00
parent 2d4ac00df2
commit 5439b98f15
13 changed files with 190 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs/actions/ads.js
+26 -3
View File
@@ -1,9 +1,15 @@
import {
FETCH_ADS_REQUEST,
FETCH_ADS_SUCCESS,
FETCH_ADS_FAILURE,
FETCH_ADS_REQUEST,
FETCH_ADS_SUCCESS,
FETCH_ADS_FAILURE,
FETCH_AD_REQUEST,
FETCH_AD_SUCCESS,
FETCH_AD_FAILURE,
} from '../types'
//Ads list
export const fetchAdsRequest = (payload) => ({
type: FETCH_ADS_REQUEST,
payload
@@ -17,4 +23,21 @@ export const fetchAdsRequest = (payload) => ({
export const fetchAdsFailure = res => ({
type: FETCH_ADS_FAILURE,
res
});
//Single ad
export const fetchAdRequest = (payload) => ({
type: FETCH_AD_REQUEST,
payload
});
export const fetchAdSuccess = res => ({
type: FETCH_AD_SUCCESS,
res
});
export const fetchAdFailure = res => ({
type: FETCH_AD_FAILURE,
res
});
nextjs/components/organisms/OffreRow.js
+2 -2
View File
@@ -37,7 +37,7 @@ class OffreRowComponent extends React.Component {
return (
<Card onClick={() => Router.push(`/Offre?id=${rowData.id}`)}>
<Card onClick={() => Router.push(`/Offre/${rowData.id}`)}>
<CardHeader />
<CardContent>
<CardMedia
@@ -51,7 +51,7 @@ class OffreRowComponent extends React.Component {
</Typography>
<Typography gutterBottom component="h4"
className={classes.details}>
{rowData._embedded.company.business_name}
{rowData.company.business_name}
</Typography>
</CardContent>
</Card>
nextjs/components/templates/Grid.js
+30 -25
View File
@@ -1,10 +1,14 @@
import Griddle from "griddle-react";
import Griddle, {utils} from "griddle-react";
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from "react-redux";
import OffreRow from "../organisms/OffreRow"
import GriddleCustomTable from "../organisms/GriddleCustomTableComponent";
//insights
//
//https://codesandbox.io/s/pw9zy43v1m?module=%2FGrid.js
const CustomTableBody = ({ rowIds, Row, style, className }) => (
<div style={style} className={className}>
@@ -25,18 +29,12 @@ class Grid extends Component {
};
async componentDidMount() {
// try {
this.props.dataFetcher(
{
offset:this.state.currentPage,
limit:this.state.pageSize
}
);
// this.setState({ data });
// } catch (error) {
// console.log(error);
// }
this.props.dataFetcher(
{
offset: this.state.currentPage,
limit: this.state.pageSize
}
);
}
componentWillReceiveProps(nextProps) {
@@ -47,28 +45,30 @@ class Grid extends Component {
_onNext = () => {
const { currentPage, pageSize, filterText } = this.state;
this.props.dataFetcher({offset:currentPage + 1, limit:pageSize, keyword:filterText})
this.props.dataFetcher({ offset: currentPage + 1, limit: pageSize, keyword: filterText })
};
_onPrevious = () => {
const { currentPage, pageSize, filterText } = this.state;
this.props.dataFetcher({offset:currentPage - 1, limit:pageSize, keyword:filterText});
this.props.dataFetcher({ offset: currentPage - 1, limit: pageSize, keyword: filterText });
};
_onGetPage = pageNumber => {
const { pageSize, filterText } = this.state;
this.props.dataFetcher({offset:pageNumber, limit:pageSize, keyword:filterText});
this.props.dataFetcher({ offset: pageNumber, limit: pageSize, keyword: filterText });
};
_onFilter = filterText => {
this.setState({ currentPage: 1 });
const { currentPage, pageSize } = this.state;
this.setState({ filterText });
this.props.dataFetcher({offset:currentPage, limit:pageSize, keyword:filterText});
this.props.dataFetcher({ offset: currentPage, limit: pageSize, keyword: filterText });
};
render() {
const { data, currentPage, pageSize, recordCount } = this.state;
// console.debug("-- render -- ")
// console.debug(data)
const NewLayout = ({ Table, Pagination, Filter }) => (
<div>
@@ -78,16 +78,21 @@ class Grid extends Component {
</div>
);
const rowDataSelector = (state, { griddleKey }) =>state
.get("ads.data")
.find(rowMap => rowMap.get("griddleKey") === griddleKey)
.toJSON()
const rowDataSelector = (state, { griddleKey }) => {
// console.debug("rowDataSelector")
// console.debug(state)
return state
.get("data")
.find(rowMap => rowMap.get("griddleKey") === griddleKey)
.toJSON()
}
const enhancedWithRowData = connect((state, props) => ({
const enhancedWithRowData = utils.connect((state, props) => ({
// rowData will be available into MyCustomComponent
rowData: rowDataSelector(state, props),
}));
return (
<div>
@@ -100,7 +105,7 @@ class Grid extends Component {
}}
components={{
Layout: NewLayout,
Row: enhancedWithRowData(this.props.CustomRowComponent),
Row: this.props.CustomRowComponent,
TableContainer: GriddleCustomTable,
TableBody: CustomTableBody
}}
@@ -119,8 +124,8 @@ class Grid extends Component {
Grid.propTypes = {
dataFetcher: PropTypes.func.isRequired,
CustomRowComponent: PropTypes.func.isRequired,
data: PropTypes.object
CustomRowComponent: PropTypes.any.isRequired,
data: PropTypes.any
}
export default Grid;
nextjs/data/api.js
+5 -2
View File
@@ -9,8 +9,11 @@ export default {
axios.post("/api/login_check", {username:credentials.email, password:credentials.password} ).then(res => res.data)
},
ads: {
fetchAd: id =>
axios.get(`api/ads/${id}`).then(res => res.data),
fetchAd: ({id}) =>
{
console.debug("--- fetchAd")
console.debug(id)
axios.get(`api/ads/${id}`).then(res => res.data)},
fetchAds: ({limit = "", order = "", keyword = "", offset = 1}) =>
{ console.debug("--- fetchAds" + limit)
return axios.get('api/ads', { params: { offset, limit, order, keyword } }).then(res => res.data)}
nextjs/pages/Entreprises.js
-44
View File
@@ -1,44 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Layout from "../components/templates/Layout"
import { Typography } from '@material-ui/core';
const styles = theme => ({
root: {
position: 'relative',
textAlign: 'center',
paddingTop: theme.spacing(20),
justifyContent: 'center',
},
container: {
display: 'flex',
flexDirection: 'column',
height: '100%',
},
});
class Entreprises extends React.Component {
render() {
const { classes } = this.props;
return (
<Layout>
<div className={classes.container}>
Entreprises
</div>
</Layout>
);
}
}
Entreprises.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Entreprises);
nextjs/pages/Offre.js
+54 -34
View File
@@ -1,5 +1,6 @@
import React from 'react';
import { connect } from "react-redux";
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
@@ -9,6 +10,8 @@ import Ar from "lodash/array";
import api from "../data/api"
import LayoutDetail from "../components/templates/LayoutDetail";
import { fetchAdRequest } from '../actions/ads'
import { AdSelector } from '../reducers/ad'
const styles = theme => ({
root: {
@@ -31,60 +34,77 @@ const styles = theme => ({
});
class Offre extends React.Component {
componentDidMount() {
console.debug(this.props)
this.props.fetchAdRequest(this.props.id)
}
onVimeoError = (err) => {
console.error(err);
}
render() {
const { classes, offre } = this.props;
console.log(offre);
return (
<LayoutDetail backLink="/Offres">
<div className={classes.video}>
<Plyr autoplay
type="vimeo" // or "vimeo"
videoId={Ar.last(_.split(offre.video.cdn_url, '/'))}
/>
</div>
<div className={classes.container}>
<Typography gutterBottom variant="title" >
{offre.title}
</Typography>
{/* ville */}
</div>
<div className={classes.container}>
<Typography gutterBottom variant="subheading" >
{offre._embedded.company.brand_name}
</Typography>
{/* secteur */}
</div>
<div className={classes.container}>
<Typography gutterBottom variant="body2" >
{offre.extra.contract_type}
</Typography>
</div>
<div className={classes.container}>
<Typography gutterBottom variant="title" >
Détails de l'offre
{offre && (<Fragment>
<div className={classes.video}>
<Plyr autoplay
type="vimeo" // or "vimeo"
videoId={Ar.last(_.split(offre.video.cdn_url, '/'))}
/>
</div>
<div className={classes.container}>
<Typography gutterBottom variant="title" >
{offre.title}
</Typography>
{/* ville */}
</div>
<div className={classes.container}>
<Typography gutterBottom variant="subheading" >
{offre._embedded.company.brand_name}
</Typography>
{/* secteur */}
</div>
<div className={classes.container}>
<Typography gutterBottom variant="body2" >
{offre.extra.contract_type}
</Typography>
</div>
<div className={classes.container}>
<Typography gutterBottom variant="title" >
Détails de l'offre
</Typography>
<Typography gutterBottom variant="body1" >
{offre.description}
</Typography>
</div>
<Typography gutterBottom variant="body1" >
{offre.description}
</Typography>
</div>
</Fragment>)}
</LayoutDetail>
);
}
}
Offre.getInitialProps = async function (context) {
Offre.getInitialProps = function (context) {
console.debug(context.query)
const { id } = context.query
return api.ads.fetchAd(id);
const store = context.store
store.dispatch(fetchAdRequest(id))
}
function mapStateToProps(state) {
return {
offre: state.ad
};
}
Offre.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Offre);
export default withStyles(styles)(connect(mapStateToProps, { fetchAdRequest })(Offre));
nextjs/pages/Offres.js
+3 -2
View File
@@ -11,7 +11,7 @@ import Grid from "../components/templates/Grid"
import OffreRow from "../components/organisms/OffreRow"
import { fetchAdsRequest } from '../actions/ads'
import {AdsSelector} from '../reducers/ads'
import { AdsSelector } from '../reducers/ads'
const styles = theme => ({
root: {
position: 'relative',
@@ -57,9 +57,10 @@ function mapStateToProps(state) {
console.debug(state)
return {
ads: Object.keys(state.ads).length !== 0 && AdsSelector(state),
// ads: state.ads.data,
//ads: state.ads.data,
currentPage: _.toNumber(!!state.ads.meta && state.ads.meta.offset),
recordCount: _.toNumber(!!state.ads.meta && state.ads.meta.total_items)
};
}
export default withStyles(styles)(connect(mapStateToProps, { fetchAdsRequest })(Offres))
nextjs/reducers/ad.js
+34
View File
@@ -0,0 +1,34 @@
import { createSelector } from "reselect";
import {
FETCH_AD_SUCCESS,
FETCH_AD_FAILURE,
} from "../types";
export function ad(state = {
}, action = {}) {
switch (action.type) {
case FETCH_AD_SUCCESS:
return {
...state,
...action.res
};
case FETCH_AD_FAILURE:
return {
...state,
errors:action.error
};
default:
return state;
}
}
// export const AdHashSelector = state => state.ad.data;
// export const AdSelector = createSelector(AdHashSelector, hash =>
// Object.values(hash)
// );
nextjs/reducers/ads.js
+1 -4
View File
@@ -8,10 +8,7 @@ import {
export function ads(state = {
}, action = {}) {
console.log("Ads reducer :: ")
console.log(action)
// console.log(" :: STATE BEFORE ::")
// console.log(state)
switch (action.type) {
case FETCH_ADS_SUCCESS:
return {
nextjs/rootSaga.js
+4 -2
View File
@@ -4,11 +4,12 @@ import { all, call, delay, put, take, takeLatest } from 'redux-saga/effects'
import es6promise from 'es6-promise'
import { requestLoginSaga } from './sagas/userSaga.js'
import { requestAdsSaga } from './sagas/offreSaga.js'
import { requestAdsSaga, requestAdSaga } from './sagas/offreSaga.js'
import {
REQUEST_LOGIN,
FETCH_ADS_REQUEST
FETCH_ADS_REQUEST,
FETCH_AD_REQUEST
}from "./types";
@@ -19,6 +20,7 @@ function * rootSaga () {
yield all([
takeLatest(REQUEST_LOGIN, requestLoginSaga),
takeLatest(FETCH_ADS_REQUEST, requestAdsSaga),
takeLatest(FETCH_AD_REQUEST, requestAdSaga),
])
}
nextjs/sagas/offreSaga.js
+21 -5
View File
@@ -1,16 +1,16 @@
import { call, put } from "redux-saga/effects";
import { fetchAdsSuccess, fetchAdsFailure } from "../actions/ads";
import { fetchAdsSuccess, fetchAdsFailure, fetchAdSuccess, fetchAdFailure } from "../actions/ads";
import api from "../data/api";
export function* requestAdsSaga(action) {
try {
console.log("requestAdsSaga")
console.debug(action)
// console.log("requestAdsSaga")
// console.debug(action)
const res = yield call(api.ads.fetchAds, action.payload);
console.log(res)
console.log("---")
// console.log(res)
// console.log("---")
if(!!res.data)
yield put(fetchAdsSuccess(res));
else
@@ -20,3 +20,19 @@ export function* requestAdsSaga(action) {
yield put(fetchAdsFailure(err.response));
}
}
export function* requestAdSaga(action) {
try {
// console.log("requestAdSaga")
// console.debug(action)
const res = yield call(api.ads.fetchAd, action.payload);
// console.log(res)
// console.log("---")
if(!!res.data)
yield put(fetchAdSuccess(res));
else
yield put(fetchAdFailure(res));
} catch (err) {
yield put(fetchAdFailure(err.response));
}
}
nextjs/server.js
+5 -5
View File
@@ -21,11 +21,11 @@ app.prepare()
const express = nextAuthOptions.express
const expressApp = nextAuthOptions.expressApp
expressApp.get('/Offre?:id', (req, res) => {
const actualPage = '/Offre'
const queryParams = { id: req.params.id }
app.render(req, res, actualPage, queryParams)
})
// expressApp.get('/Offre?id', (req, res) => {
// const actualPage = '/Offre'
// const queryParams = { id: req.params.id }
// app.render(req, res, actualPage, queryParams)
// })
expressApp.get('/Offre/:id', (req, res) => {
const actualPage = '/Offre'
nextjs/types.js
+5
View File
@@ -7,6 +7,11 @@ export const REQUEST_LOGIN_FAILURE = "REQUEST_LOGIN_FAILURE";
export const FETCH_CURRENT_USER_REQUEST = "FETCH_CURRENT_USER_REQUEST";
//ADS
export const FETCH_ADS_REQUEST = "FETCH_ADS_REQUEST";
export const FETCH_ADS_SUCCESS = "FETCH_ADS_SUCCESS";
export const FETCH_ADS_FAILURE = "FETCH_ADS_FAILURE";
export const FETCH_AD_REQUEST = "FETCH_AD_REQUEST";
export const FETCH_AD_SUCCESS = "FETCH_AD_SUCCESS";
export const FETCH_AD_FAILURE = "FETCH_AD_FAILURE";