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

grid paging

Browse Source
This commit is contained in:
Thomas Berrod
2019-06-03 18:53:42 +02:00
parent 9a8a2d7728
commit 060521f380
9 changed files with 54 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs/.gitignore
+1
View File
@@ -1 +1,2 @@
/.next
nextjs/node_modules/
nextjs/actions/ads.js
+1 -1
View File
@@ -27,7 +27,7 @@ export const fetchAdsRequest = (payload) => ({
//Single ad
export const fetchAdRequest = (payload) => ({
export const fetchAdRequest = payload => ({
type: FETCH_AD_REQUEST,
payload
});
nextjs/components/organisms/OffreRow.js
+2 -4
View File
@@ -91,10 +91,8 @@ class OffreRowComponent extends React.Component {
const { classes, theme, rowData } = this.props;
const imgDefaultUrl = "https://www.talentstube.com/img/default_picture_company.svg"
const imgUrl = (rowData.video.thumbnails[0] && rowData.video.thumbnails[0].sizes[4]) ? rowData.video.thumbnails[0].sizes[4].link : imgDefaultUrl
const logoUrl = publicRuntimeConfig.logoUrl + rowData.company.logo
const imgUrl = (rowData.video.thumbnails[0] && rowData.video.thumbnails[0].sizes[4]) ? rowData.video.thumbnails[0].sizes[4].link : publicRuntimeConfig.adListDefaultUrl
const logoUrl = publicRuntimeConfig.logoRootUrl + rowData.company.logo
//rowData._embedded.company.business_name
return (
nextjs/components/templates/Grid.js
+16 -15
View File
@@ -1,4 +1,4 @@
import Griddle, {utils} from "griddle-react";
import Griddle, { utils } from "griddle-react";
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from "react-redux";
@@ -46,32 +46,33 @@ class Grid extends Component {
_onNext = () => {
const { currentPage, pageSize, filterText } = this.state;
this.props.dataFetcher({ offset: currentPage + 1, limit: pageSize, keyword: filterText })
console.debug(`-- _onNext -- ${0} -- ${1} -- ${2} --`, currentPage, pageSize, filterText)
this.props.dataFetcher({ offset: currentPage * pageSize, 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 - 2) * pageSize + 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 - 1) * pageSize + 1, 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 - 1) * pageSize + 1, limit: pageSize, keyword: filterText });
};
render() {
const style = {
styles: {
TableBody: { display: "flex", flexWrap: "wrap", justifyContent: "space-around"},
TableBody: { display: "flex", flexWrap: "wrap", justifyContent: "space-around" },
}
}
}
const { data, currentPage, pageSize, recordCount } = this.state;
// console.debug("-- render -- ")
@@ -86,12 +87,12 @@ class Grid extends Component {
);
const rowDataSelector = (state, { griddleKey }) => {
// console.debug("rowDataSelector")
// console.debug(state)
return state
.get("data")
.find(rowMap => rowMap.get("griddleKey") === griddleKey)
.toJSON()
// console.debug("rowDataSelector")
// console.debug(state)
return state
.get("data")
.find(rowMap => rowMap.get("griddleKey") === griddleKey)
.toJSON()
}
const enhancedWithRowData = utils.connect((state, props) => ({
@@ -99,10 +100,10 @@ class Grid extends Component {
rowData: rowDataSelector(state, props),
}));
return (
<div>
<Griddle
data={data}
nextjs/data/api.js
+11 -9
View File
@@ -6,17 +6,19 @@ axios.defaults.baseURL = (process.env.NODE_ENV !== 'production') ? 'http://local
export default {
user: {
login: credentials =>
axios.post("/api/login_check", {username:credentials.email, password:credentials.password} ).then(res => res.data)
axios.post("/api/login_check", { username: credentials.email, password: credentials.password }).then(res => res.data)
},
ads: {
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)}
fetchAd: (id) => {
console.debug("--- fetchAd")
console.debug(id)
return axios.get(`api/ads/${id}`).then(res => res.data)
},
fetchAds: ({ limit = "", order = "", keyword = "", offset = 1 }) => {
console.debug("--- fetchAds" + offset, limit, order, keyword)
return axios.get('api/ads', { params: { offset, limit, order, keyword } })
.then(res => res.data)
}
},
companies: {
fetchCompany: id =>
nextjs/next.config.js
+7 -40
View File
@@ -8,45 +8,12 @@ module.exports = withPlugins([
/* config for next-optimized-images */
}],
// your other plugins here
// {
// webpack: (config, { isServer }) => {
// // config.module.noParse = /jpg/;
// // config.module.rules.push(
// // {
// // test: /\.js$/,
// // loader: 'babel-loader',
// // exclude: /node_modules/,
// // },
// // {
// // test: /\.css$/,
// // loader: 'style!css'
// // },
// // {
// // test: /\.html$/,
// // loader: 'raw'
// // }
// // )
// // const videojsPlugin = new webpack.ProvidePlugin({
// // videojs: "video.js/dist/video.cjs.js",
// // RecordRTC: "recordrtc",
// // MediaStreamRecorder: ["recordrtc", "MediaStreamRecorder"]
// // });
// // const videojsAlias = {
// // videojs: "video.js",
// // WaveSurfer: "wavesurfer.js",
// // RecordRTC: "recordrtc"
// // };
// // config.resolve.alias = { ...config.resolve.alias, ...videojsAlias };
// // config.plugins.push(videojsPlugin);
// return config
// }
[{
publicRuntimeConfig:{
adListDefaultUrl : "https://www.talentstube.com/img/default_picture_company.svg",
logoRootUrl: 'https://www.talentstube.com/media/cache/profile_thumb/uploads/img/'
}
}]
]);
nextjs/pages/Offre.js
+13 -12
View File
@@ -1,5 +1,6 @@
import React from 'react';
import React, { Fragment } from 'react';
import { connect } from "react-redux";
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
@@ -13,6 +14,7 @@ import LayoutDetail from "../components/templates/LayoutDetail";
import { fetchAdRequest } from '../actions/ads'
import { AdSelector } from '../reducers/ad'
const styles = theme => ({
root: {
position: 'relative',
@@ -30,14 +32,13 @@ const styles = theme => ({
flexDirection: 'column',
height: '33vh',
},
});
class Offre extends React.Component {
componentDidMount() {
console.debug(this.props)
this.props.fetchAdRequest(this.props.id)
// console.debug(this.props)
// this.props.fetchAdRequest(this.props.id)
}
onVimeoError = (err) => {
@@ -48,7 +49,7 @@ console.debug(this.props)
return (
<LayoutDetail backLink="/Offres">
{offre && (<Fragment>
{offre.video && (<Fragment>
<div className={classes.video}>
<Plyr autoplay
type="vimeo" // or "vimeo"
@@ -56,14 +57,14 @@ console.debug(this.props)
/>
</div>
<div className={classes.container}>
<Typography gutterBottom variant="title" >
<Typography gutterBottom variant="h1" >
{offre.title}
</Typography>
{/* ville */}
</div>
<div className={classes.container}>
<Typography gutterBottom variant="subheading" >
{offre._embedded.company.brand_name}
<Typography gutterBottom variant="subtitle1" >
{offre.company.brand_name}
</Typography>
{/* secteur */}
</div>
@@ -88,11 +89,11 @@ console.debug(this.props)
}
Offre.getInitialProps = function (context) {
console.debug(context.query)
// console.debug(context)
const { id } = context.query
const store = context.store
store.dispatch(fetchAdRequest(id))
console.debug('offre getInitialProps')
console.debug(id)
context.store.dispatch(fetchAdRequest(id))
}
nextjs/pages/Offres.js
+2 -3
View File
@@ -40,8 +40,7 @@ class Offres extends React.Component {
data={this.props.ads}
currentPage={this.props.currentPage}
recordCount={this.props.recordCount}
>
</Grid>
/>
</div>
</LayoutGrid>
);
@@ -58,7 +57,7 @@ function mapStateToProps(state) {
return {
ads: Object.keys(state.ads).length !== 0 && AdsSelector(state),
//ads: state.ads.data,
currentPage: _.toNumber(!!state.ads.meta && state.ads.meta.offset),
currentPage: _.toNumber(!!state.ads.meta && _.ceil((state.ads.meta.offset + 1) /state.ads.meta.limit) ),
recordCount: _.toNumber(!!state.ads.meta && state.ads.meta.total_items)
};
}
nextjs/reducers/ad.js
+1 -3
View File
@@ -1,16 +1,14 @@
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:
console.debug(action)
return {
...state,
...action.res