From c52c36e51ec48d3df1126b7a143da54c182ed948 Mon Sep 17 00:00:00 2001 From: Tom <20648924+moT01@users.noreply.github.com> Date: Sat, 5 Oct 2019 02:28:16 -0500 Subject: [PATCH] fix: add report user button back to profile pages (#36926) * fix: add report user button back to profile pages * fix: make local redirect to signin work * fix: redirect to learn instead of homepage * fix: change from gatsby Link to the helper component Link * feat: add tests for profile report and settings buttons * Update client/src/client-only-routes/ShowUser.js Co-Authored-By: Oliver Eyton-Williams * Update client/src/client-only-routes/ShowUser.js Co-Authored-By: Oliver Eyton-Williams * Update client/src/client-only-routes/ShowUser.js Co-Authored-By: Oliver Eyton-Williams * Update client/src/client-only-routes/ShowUser.js Co-Authored-By: Oliver Eyton-Williams * Update client/src/client-only-routes/ShowUser.js Co-Authored-By: Oliver Eyton-Williams --- client/src/client-only-routes/ShowUser.js | 34 +++- client/src/components/profile/Profile.js | 28 ++- client/src/components/profile/Profile.test.js | 88 +++++++++ .../__snapshots__/Profile.test.js.snap | 187 ++++++++++++++++++ client/src/redux/report-user-saga.js | 2 +- 5 files changed, 327 insertions(+), 12 deletions(-) create mode 100644 client/src/components/profile/Profile.test.js create mode 100644 client/src/components/profile/__snapshots__/Profile.test.js.snap diff --git a/client/src/client-only-routes/ShowUser.js b/client/src/client-only-routes/ShowUser.js index bcf824f9bd8..6606b259d4e 100644 --- a/client/src/client-only-routes/ShowUser.js +++ b/client/src/client-only-routes/ShowUser.js @@ -1,7 +1,7 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; -import { Link, navigate } from 'gatsby'; +import { navigate } from '@reach/router'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { @@ -14,6 +14,8 @@ import { } from '@freecodecamp/react-bootstrap'; import Helmet from 'react-helmet'; +import { apiLocation } from '../../config/env.json'; + import { isSignedInSelector, userFetchStateSelector, @@ -25,6 +27,7 @@ import { Spacer, Loader, FullWidthRow } from '../components/helpers'; const propTypes = { email: PropTypes.string, isSignedIn: PropTypes.bool, + navigate: PropTypes.func.isRequired, reportUser: PropTypes.func.isRequired, userFetchState: PropTypes.shape({ pending: PropTypes.bool, @@ -46,7 +49,13 @@ const mapStateToProps = createSelector( ); const mapDispatchToProps = dispatch => - bindActionCreators({ reportUser }, dispatch); + bindActionCreators( + { + navigate, + reportUser + }, + dispatch + ); class ShowUser extends Component { constructor(props) { @@ -79,9 +88,10 @@ class ShowUser extends Component { const { username, reportUser } = this.props; return reportUser({ username, reportDescription }); } - setNavigationTimer() { + + setNavigationTimer(navigate) { if (!this.timer) { - this.timer = setTimeout(() => navigate('/signin'), 5000); + this.timer = setTimeout(() => navigate(`${apiLocation}/signin`), 5000); } } @@ -93,7 +103,8 @@ class ShowUser extends Component { } if ((complete || errored) && !isSignedIn) { - this.setNavigationTimer(); + const { navigate } = this.props; + this.setNavigationTimer(navigate); return (
@@ -111,9 +122,16 @@ class ShowUser extends Component { automatically in 5 seconds

- - Or you can here if you do not want to wait - +

diff --git a/client/src/components/profile/Profile.js b/client/src/components/profile/Profile.js index 272c200182e..87961492ae5 100644 --- a/client/src/components/profile/Profile.js +++ b/client/src/components/profile/Profile.js @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Grid, Row, Col } from '@freecodecamp/react-bootstrap'; import Helmet from 'react-helmet'; -import { Link } from 'gatsby'; +import Link from '../helpers/Link'; import { CurrentChallengeLink, FullWidthRow, Spacer } from '../helpers'; import Camper from './components/Camper'; @@ -62,7 +62,9 @@ function renderIsLocked(username, isSessionUser) { - {isSessionUser ? renderSettingsButton() : null} + {isSessionUser + ? renderSettingsButton() + : renderReportUserButton(username)}

{username} has not made their profile public. @@ -98,6 +100,24 @@ function renderSettingsButton() { ); } +function renderReportUserButton(username) { + return ( + + + + + Report This User + + + + + + ); +} + function Profile({ user, isSessionUser }) { const { profileUI: { @@ -142,7 +162,9 @@ function Profile({ user, isSessionUser }) { - {isSessionUser ? renderSettingsButton() : null} + {isSessionUser + ? renderSettingsButton() + : renderReportUserButton(username)} ', () => { + it('renders the settings button on your own profile', () => { + const profileToRender = ; + const profile = shallow(profileToRender); + expect( + profile + .find(Link) + .first() + .prop('to') + ).toBe('/settings'); + }); + + it('renders the report button on another persons profile', () => { + const profileToRender = ; + const profile = shallow(profileToRender); + expect( + profile + .find(Link) + .first() + .prop('to') + ).toBe('/user/string/report-user'); + }); + + it('renders correctly', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/profile/__snapshots__/Profile.test.js.snap b/client/src/components/profile/__snapshots__/Profile.test.js.snap new file mode 100644 index 00000000000..74273934303 --- /dev/null +++ b/client/src/components/profile/__snapshots__/Profile.test.js.snap @@ -0,0 +1,187 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly 1`] = ` +Array [ +
, +
, +
+ +
+
+
+
+
+ string's avatar +
+
+ +
+

+ @ + string +

+
+
+
, +] +`; diff --git a/client/src/redux/report-user-saga.js b/client/src/redux/report-user-saga.js index 407ac1488f9..6df1cbcca16 100644 --- a/client/src/redux/report-user-saga.js +++ b/client/src/redux/report-user-saga.js @@ -18,7 +18,7 @@ function* reportUserSaga({ payload }) { } function* acceptCompleteSaga() { - yield call(navigate, '/'); + yield call(navigate, '/learn'); } export function createReportUserSaga(types) {