- + diff --git a/src/components/FeaturedChallenges/FeaturedChallengesWidget.js b/src/components/FeaturedChallenges/FeaturedChallengesWidget.js index 8cd2d58f2..745fec562 100644 --- a/src/components/FeaturedChallenges/FeaturedChallengesWidget.js +++ b/src/components/FeaturedChallenges/FeaturedChallengesWidget.js @@ -1,13 +1,14 @@ -import React, { Component } from 'react' +import React, { Component, useRef } from 'react' import { FormattedMessage } from 'react-intl' -import _map from 'lodash/map' -import _get from 'lodash/get' -import _compact from 'lodash/compact' -import _isFinite from 'lodash/isFinite' +import Carousel, { consts } from 'react-elastic-carousel' import { Link } from 'react-router-dom' +import _map from 'lodash/map' import { WidgetDataTarget, registerWidgetType } from '../../services/Widget/Widget' import WithFeatured from '../HOCs/WithFeatured/WithFeatured' +import CardChallenge from '../CardChallenge/CardChallenge' +import CardProject from '../CardProject/CardProject' +import SvgSymbol from '../SvgSymbol/SvgSymbol' import QuickWidget from '../QuickWidget/QuickWidget' import messages from './Messages' @@ -26,64 +27,125 @@ const descriptor = { export default class FeaturedChallengesWidget extends Component { render() { return ( - } - > - + +
+

+ +

+
+
+
+ +
+
+ +
) } } -const FeaturedList = function(props) { - const projectItems = - _compact(_map(props.featuredProjects, project => { - if (!_isFinite(_get(project, 'id'))) { - return null - } +const FeaturedList = props => { + const carouselRef = useRef(null) - return ( -
  • - - {project.displayName || project.name} - - - - -
    • - ) + const onNextStart = (currentItem, nextItem) => { + if (currentItem.index === nextItem.index) { + // we hit the last item, go to first item + carouselRef.current.goTo(0); } - )) + } - const challengeItems = - _compact(_map(props.featuredChallenges, challenge => { - if (!_isFinite(_get(challenge, 'id'))) { - return null + const projectCards = _map(props.featuredProjects.map, project => + } + /> + ) - return ( -
  • - - {challenge.name} - -
    • - ) - } - )) + const challengeCards = _map(props.featuredChallenges, challenge => + + } + /> + ) - const featuredItems = projectItems.concat(challengeItems) + const featuredItems = projectCards.concat(challengeCards) + if (featuredItems.length === 0) { + return ( +
    + +
    + ) + } return ( - featuredItems.length > 0 ? -
      + {featuredItems} -
    : -
    - -
    + ) } +const BrowseControl = props => { + return ( + + + + ) +} + +const ArrowControl = ({ type, onClick }) => ( +
    + +
    +) + +const PaginationControl = ({ pages, activePage, onClick }) => ( +
    + {pages.map(page => ( + onClick(page)} + /> + ))} +
    +) + registerWidgetType(WithFeatured(FeaturedChallengesWidget), descriptor) diff --git a/src/components/FeaturedChallenges/Messages.js b/src/components/FeaturedChallenges/Messages.js index 61985a24a..f3d582b74 100644 --- a/src/components/FeaturedChallenges/Messages.js +++ b/src/components/FeaturedChallenges/Messages.js @@ -6,7 +6,7 @@ import { defineMessages } from 'react-intl' export default defineMessages({ header: { id: "FeaturedChallenges.header", - defaultMessage: "Featured", + defaultMessage: "Challenge Highlights", }, nothingFeatured: { @@ -18,4 +18,9 @@ export default defineMessages({ id: "FeaturedChallenges.projectIndicator.label", defaultMessage: "Project" }, + + browseFeaturedLabel: { + id: "FeaturedChallenges.browse", + defaultMessage: "Explore", + }, }) diff --git a/src/components/HOCs/WithUserMetrics/WithUserMetrics.js b/src/components/HOCs/WithUserMetrics/WithUserMetrics.js index a99141757..4b44a458a 100644 --- a/src/components/HOCs/WithUserMetrics/WithUserMetrics.js +++ b/src/components/HOCs/WithUserMetrics/WithUserMetrics.js @@ -13,7 +13,7 @@ import { CUSTOM_RANGE, ALL_TIME } * * @author [Kelli Rotstan](https://github.com/krotstan) */ -export const WithUserMetrics = function(WrappedComponent) { +export const WithUserMetrics = function(WrappedComponent, userProp) { return class extends Component { state = { loading: false, @@ -28,10 +28,10 @@ export const WithUserMetrics = function(WrappedComponent) { updateAllMetrics(props) { this.setState({loading: true}) - if ( this.props.targetUser && - (!_get(this.props.targetUser, 'settings.leaderboardOptOut') || - _get(this.props.targetUser, 'id') === _get(this.props.currentUser, 'userId'))) { - fetchLeaderboardForUser(this.props.targetUser.id, 0, -1).then(userLeaderboard => { + if ( this.props[userProp] && + (!_get(this.props[userProp], 'settings.leaderboardOptOut') || + _get(this.props[userProp], 'id') === _get(this.props.currentUser, 'userId'))) { + fetchLeaderboardForUser(this.props[userProp].id, 0, -1).then(userLeaderboard => { this.setState({loading: false, leaderboardMetrics: userLeaderboard[0]}) }) @@ -40,8 +40,8 @@ export const WithUserMetrics = function(WrappedComponent) { } updateUserMetrics(props) { - if (!_get(this.props.targetUser, 'settings.leaderboardOptOut') || - _get(this.props.targetUser, 'id') === _get(this.props.currentUser, 'userId')) { + if (!_get(this.props[userProp], 'settings.leaderboardOptOut') || + _get(this.props[userProp], 'id') === _get(this.props.currentUser, 'userId')) { const startDate = _get(this.state.tasksCompletedDateRange, 'length', 0) === 2 ? format(this.state.tasksCompletedDateRange[0], 'YYYY-MM-DD') : null @@ -61,7 +61,7 @@ export const WithUserMetrics = function(WrappedComponent) { const reviewerEnd = _get(this.state.tasksReviewerDateRange, 'length', 0) === 2 ? format(this.state.tasksReviewerDateRange[1], 'YYYY-MM-DD') : null - fetchUserMetrics(this.props.targetUser.id, + fetchUserMetrics(this.props[userProp].id, this.state.tasksCompletedMonthsPast, this.state.tasksReviewedMonthsPast, this.state.tasksReviewerMonthsPast, @@ -125,13 +125,13 @@ export const WithUserMetrics = function(WrappedComponent) { } componentDidMount() { - if (this.props.targetUser) { + if (this.props[userProp]) { this.updateAllMetrics(this.props) } } componentDidUpdate(prevProps, prevState) { - if (prevProps.targetUser !== this.props.targetUser) { + if (prevProps[userProp] !== this.props[userProp]) { this.updateAllMetrics(this.props) } @@ -192,5 +192,5 @@ const mapStateToProps = state => ({}) const mapDispatchToProps = (dispatch, ownProps) => ({ }) -export default WrappedComponent => - connect(mapStateToProps, mapDispatchToProps)(WithUserMetrics(WrappedComponent)) +export default (WrappedComponent, userProp="targetUser") => + connect(mapStateToProps, mapDispatchToProps)(WithUserMetrics(WrappedComponent, userProp)) diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index 297d57ca6..7d5a3685d 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -40,6 +40,17 @@ export default class Navbar extends Component { this.setState({mobileMenuOpen: !this.state.mobileMenuOpen}) } + showHomePage = () => { + // Record in session storage that the user really does want to see the home + // page so that we don't redirect them to the Dashboard (if they're signed + // in) like we usually would + try { + sessionStorage.setItem('goHome', 'true') + } catch (e) { + console.log(e) + } + } + signout = () => { this.props.logoutUser(_get(this.props, 'user.id')) this.closeMobileMenu() @@ -49,7 +60,12 @@ export default class Navbar extends Component { return (