Commit b12a29c8 authored by Florent Chehab's avatar Florent Chehab
Browse files

Better display of universities card

parent 6f6aa7e8
Pipeline #26870 passed with stages
in 2 minutes and 25 seconds
...@@ -64,6 +64,6 @@ ...@@ -64,6 +64,6 @@
63,"Technical University Of Kosice","Kosice","SK","48.73280395","21.244194264458",,, 63,"Technical University Of Kosice","Kosice","SK","48.73280395","21.244194264458",,,
64,"Chalmers University Of Technology","Goteborg","SE","57.6896523","11.9766811023544",,, 64,"Chalmers University Of Technology","Goteborg","SE","57.6896523","11.9766811023544",,,
65,"Lulea University Of Technology","Lulea","SE","65.6170445","22.1370606335398",,, 65,"Lulea University Of Technology","Lulea","SE","65.6170445","22.1370606335398",,,
66,"Ecole Polytechnique Federale De Lausanne","Lausanne","CH","46.5186594","6.566561505148","EPFL","https://www.epfl.ch/","https://www.epfl.ch/img/epfl_small.png" 66,"Ecole Polytechnique Federale De Lausanne","Lausanne","CH","46.5186594","6.566561505148","EPFL","https://www.epfl.ch/","https://upload.wikimedia.org/wikipedia/commons/f/f4/Logo_EPFL.svg"
67,"National Chiao Tung University","Hsinchu","TW","24.78676765","120.997244116807",,, 67,"National Chiao Tung University","Hsinchu","TW","24.78676765","120.997244116807",,,
68,"National Taiwan University Of Science And Technology","Taipei","TW","25.01350785","121.541707560048",,, 68,"National Taiwan University Of Science And Technology","Taipei","TW","25.01350785","121.541707560048",,,
...@@ -3,6 +3,21 @@ import Loading from './other/Loading'; ...@@ -3,6 +3,21 @@ import Loading from './other/Loading';
class MyComponent extends Component { class MyComponent extends Component {
getFetchedData(prop) {
return this.props[prop].fetched.data;
}
getAllFetchedData() {
let out = Object()
for (let prop_key in this.props) {
let prop = this.props[prop_key];
if (prop && 'fetched' in prop) {
out[prop_key] = prop.fetched.data;
}
}
return out;
}
checkProps(val) { checkProps(val) {
for (let el in this.props) { for (let el in this.props) {
let prop = this.props[el]; let prop = this.props[el];
...@@ -25,12 +40,12 @@ class MyComponent extends Component { ...@@ -25,12 +40,12 @@ class MyComponent extends Component {
return this.checkProps('invalidated'); return this.checkProps('invalidated');
} }
loadPropsIfNeeded(){ loadPropsIfNeeded() {
for (let prop_key in this.props) { for (let prop_key in this.props) {
let prop = this.props[prop_key]; let prop = this.props[prop_key];
if (prop && 'fetched' in prop){ if (prop && 'fetched' in prop) {
if ( (!prop.fetched.fetchedAt) || prop.invalidated){ if ((!prop.fetched.fetchedAt) || prop.invalidated) {
if (!prop.isLoading){ if (!prop.isLoading) {
this.props.fetchData[prop_key](); this.props.fetchData[prop_key]();
} }
} }
...@@ -42,14 +57,14 @@ class MyComponent extends Component { ...@@ -42,14 +57,14 @@ class MyComponent extends Component {
this.loadPropsIfNeeded(); this.loadPropsIfNeeded();
this.myComponentDidMount(); this.myComponentDidMount();
} }
myComponentDidMount(){}; myComponentDidMount() { };
componentDidUpdate() { componentDidUpdate() {
// TODO ajouter expire date // TODO ajouter expire date
this.loadPropsIfNeeded(); this.loadPropsIfNeeded();
this.myComponentDidMount(); this.myComponentDidMount();
} }
myComponentDidMount(){}; myComponentDidMount() { };
render() { render() {
if (this.checkPropsHasError()) { if (this.checkPropsHasError()) {
......
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
const styles = {
card: {
maxWidth: 345,
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: 'cover',
},
};
function ImgMediaCard(props) {
const { classes } = props;
let height = (props.logo !== "" ? "140" : "0");
return (
<Card className={classes.card}>
<CardActionArea>
<CardMedia
component="img"
className={classes.media}
height={height}
image={props.logo}
title={props.name}
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
{props.name}
</Typography>
<Typography component="p">
{props.city} ~ {props.country}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
ImgMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ImgMediaCard);
\ No newline at end of file
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from "react-redux"; import { connect } from "react-redux";
import Loading from '../other/Loading'; import { Marker, Popup } from 'react-leaflet';
import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, LayerGroup } from 'react-leaflet';
// import MarkerClusterGroup from 'react-leaflet-markercluster'; // import MarkerClusterGroup from 'react-leaflet-markercluster';
import UnivCard from './UnivCard';
import { import {
universitiesFetchData, universitiesFetchData,
universitiesInvalidated,
mainCampusesFetchData, mainCampusesFetchData,
mainCampusesInvalidated citiesFetchData,
countriesFetchData
} from '../../generated/actions'; } from '../../generated/actions';
import MyComponent from '../MyComponent'
class UnivMarkers extends MyComponent {
class UnivMarkers extends Component { myRender() {
render() { let { universities,
mainCampuses,
let universities = this.props.universities.fetched.data; countries,
let mainCampuses = this.props.mainCampuses.fetched.data; cities } = this.getAllFetchedData()
let selected_main_campus = []; let selected_main_campus = [];
for (let main_campus_pk in mainCampuses) { for (let main_campus_pk in mainCampuses) {
let campus = mainCampuses[main_campus_pk] let campus = mainCampuses[main_campus_pk]
let univ = universities[campus.university] let univ = universities[campus.university]
if (univ && campus) { if (univ && campus) {
let city = cities[campus.city]
let country = countries[city.country]
selected_main_campus.push({ selected_main_campus.push({
univ_name: univ.name, univ_name: univ.name,
univ_logo: univ.logo,
univ_city: city.name,
univ_country: country.name,
lat: campus.lat, lat: campus.lat,
lon: campus.lon, lon: campus.lon,
id: univ.id id: univ.id
...@@ -38,7 +46,12 @@ class UnivMarkers extends Component { ...@@ -38,7 +46,12 @@ class UnivMarkers extends Component {
selected_main_campus.map((el) => ( selected_main_campus.map((el) => (
<Marker key={el.id} position={[el.lat, el.lon]}> <Marker key={el.id} position={[el.lat, el.lon]}>
<Popup> <Popup>
{el.univ_name} <UnivCard
name={el.univ_name}
logo={el.univ_logo}
city={el.univ_city}
country={el.univ_country}
></UnivCard>
</Popup> </Popup>
</Marker> </Marker>
)) ))
...@@ -51,8 +64,21 @@ class UnivMarkers extends Component { ...@@ -51,8 +64,21 @@ class UnivMarkers extends Component {
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
universities: state.universities, universities: state.universities,
mainCampuses: state.mainCampuses mainCampuses: state.mainCampuses,
cities: state.cities,
countries: state.countries
};
};
const mapDispatchToProps = (dispatch) => {
return {
fetchData: {
universities: () => dispatch(universitiesFetchData()),
mainCampuses: () => dispatch(mainCampusesFetchData()),
cities: () => dispatch(citiesFetchData()),
countries: () => dispatch(countriesFetchData())
}
}; };
}; };
export default connect(mapStateToProps)(UnivMarkers); export default connect(mapStateToProps, mapDispatchToProps)(UnivMarkers);
...@@ -3,10 +3,6 @@ import MyComponent from '../MyComponent' ...@@ -3,10 +3,6 @@ import MyComponent from '../MyComponent'
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Map, TileLayer, LayersControl, LayerGroup } from 'react-leaflet'; import { Map, TileLayer, LayersControl, LayerGroup } from 'react-leaflet';
import {
universitiesFetchData,
mainCampusesFetchData,
} from '../../generated/actions';
import UnivMarkers from './UnivMakers'; import UnivMarkers from './UnivMakers';
import { saveMainMapPosition } from '../../actions/map' import { saveMainMapPosition } from '../../actions/map'
...@@ -105,18 +101,12 @@ class UnivMap extends MyComponent { ...@@ -105,18 +101,12 @@ class UnivMap extends MyComponent {
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
universities: state.universities,
mainCampuses: state.mainCampuses,
map: state.app.mainMap map: state.app.mainMap
}; };
}; };
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
fetchData: {
universities: () => dispatch(universitiesFetchData()),
mainCampuses: () => dispatch(mainCampusesFetchData())
},
saveMainMap: (pos) => dispatch(saveMainMapPosition(pos)), saveMainMap: (pos) => dispatch(saveMainMapPosition(pos)),
}; };
}; };
......
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
countriesElReducers, countriesElReducers,
universitiesElReducers, universitiesElReducers,
currenciesReducers, currenciesReducers,
citiesReducers,
} from '../generated/combinedReducers'; } from '../generated/combinedReducers';
import { import {
...@@ -19,7 +20,8 @@ const appReducers = combineReducers({ ...@@ -19,7 +20,8 @@ const appReducers = combineReducers({
const rootReducer = combineReducers({ const rootReducer = combineReducers({
countries: countriesReducers, countries: countriesReducers,
countriesEl: countriesElReducers, countriesEl: countriesElReducers,
cities: citiesReducers,
universities: universitiesReducers, universities: universitiesReducers,
universitiesEl: universitiesElReducers, universitiesEl: universitiesElReducers,
currencies: currenciesReducers, currencies: currenciesReducers,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment