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

Better display of universities card

parent 6f6aa7e8
......@@ -64,6 +64,6 @@
63,"Technical University Of Kosice","Kosice","SK","48.73280395","21.244194264458",,,
64,"Chalmers University Of Technology","Goteborg","SE","57.6896523","11.9766811023544",,,
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",,,
68,"National Taiwan University Of Science And Technology","Taipei","TW","25.01350785","121.541707560048",,,
......@@ -3,6 +3,21 @@ import Loading from './other/Loading';
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) {
for (let el in this.props) {
let prop = this.props[el];
......@@ -25,12 +40,12 @@ class MyComponent extends Component {
return this.checkProps('invalidated');
}
loadPropsIfNeeded(){
loadPropsIfNeeded() {
for (let prop_key in this.props) {
let prop = this.props[prop_key];
if (prop && 'fetched' in prop){
if ( (!prop.fetched.fetchedAt) || prop.invalidated){
if (!prop.isLoading){
if (prop && 'fetched' in prop) {
if ((!prop.fetched.fetchedAt) || prop.invalidated) {
if (!prop.isLoading) {
this.props.fetchData[prop_key]();
}
}
......@@ -42,14 +57,14 @@ class MyComponent extends Component {
this.loadPropsIfNeeded();
this.myComponentDidMount();
}
myComponentDidMount(){};
myComponentDidMount() { };
componentDidUpdate() {
// TODO ajouter expire date
this.loadPropsIfNeeded();
this.myComponentDidMount();
}
myComponentDidMount(){};
myComponentDidMount() { };
render() {
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 { connect } from "react-redux";
import Loading from '../other/Loading';
import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, LayerGroup } from 'react-leaflet';
import { Marker, Popup } from 'react-leaflet';
// import MarkerClusterGroup from 'react-leaflet-markercluster';
import UnivCard from './UnivCard';
import {
universitiesFetchData,
universitiesInvalidated,
mainCampusesFetchData,
mainCampusesInvalidated
citiesFetchData,
countriesFetchData
} from '../../generated/actions';
import MyComponent from '../MyComponent'
class UnivMarkers extends MyComponent {
class UnivMarkers extends Component {
myRender() {
render() {
let universities = this.props.universities.fetched.data;
let mainCampuses = this.props.mainCampuses.fetched.data;
let { universities,
mainCampuses,
countries,
cities } = this.getAllFetchedData()
let selected_main_campus = [];
for (let main_campus_pk in mainCampuses) {
let campus = mainCampuses[main_campus_pk]
let univ = universities[campus.university]
if (univ && campus) {
let city = cities[campus.city]
let country = countries[city.country]
selected_main_campus.push({
univ_name: univ.name,
univ_logo: univ.logo,
univ_city: city.name,
univ_country: country.name,
lat: campus.lat,
lon: campus.lon,
id: univ.id
......@@ -38,7 +46,12 @@ class UnivMarkers extends Component {
selected_main_campus.map((el) => (
<Marker key={el.id} position={[el.lat, el.lon]}>
<Popup>
{el.univ_name}
<UnivCard
name={el.univ_name}
logo={el.univ_logo}
city={el.univ_city}
country={el.univ_country}
></UnivCard>
</Popup>
</Marker>
))
......@@ -51,8 +64,21 @@ class UnivMarkers extends Component {
const mapStateToProps = (state) => {
return {
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'
import { connect } from "react-redux";
import { Map, TileLayer, LayersControl, LayerGroup } from 'react-leaflet';
import {
universitiesFetchData,
mainCampusesFetchData,
} from '../../generated/actions';
import UnivMarkers from './UnivMakers';
import { saveMainMapPosition } from '../../actions/map'
......@@ -105,18 +101,12 @@ class UnivMap extends MyComponent {
const mapStateToProps = (state) => {
return {
universities: state.universities,
mainCampuses: state.mainCampuses,
map: state.app.mainMap
};
};
const mapDispatchToProps = (dispatch) => {
return {
fetchData: {
universities: () => dispatch(universitiesFetchData()),
mainCampuses: () => dispatch(mainCampusesFetchData())
},
saveMainMap: (pos) => dispatch(saveMainMapPosition(pos)),
};
};
......
......@@ -7,6 +7,7 @@ import {
countriesElReducers,
universitiesElReducers,
currenciesReducers,
citiesReducers,
} from '../generated/combinedReducers';
import {
......@@ -19,7 +20,8 @@ const appReducers = combineReducers({
const rootReducer = combineReducers({
countries: countriesReducers,
countriesEl: countriesElReducers,
countriesEl: countriesElReducers,
cities: citiesReducers,
universities: universitiesReducers,
universitiesEl: universitiesElReducers,
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