+
+
-
+
,
document.getElementById('root'),
);
diff --git a/src/profile/DateJoined.jsx b/src/profile/DateJoined.jsx
index 05ce2d66f..1fbe379f0 100644
--- a/src/profile/DateJoined.jsx
+++ b/src/profile/DateJoined.jsx
@@ -6,7 +6,6 @@ const DateJoined = ({ date }) => {
if (date == null) {
return null;
}
-
return (
this is broken as all get
+ );
+}
+
+const platformDisplayInfo = {
+ facebook: {
+ icon: faFacebook,
+ name: '',
+ },
+ twitter: {
+ icon: faTwitter,
+ name: '',
+ },
+ linkedin: {
+ icon: faLinkedin,
+ name: '',
+ },
+};
+
+class ProfilePluginPage extends React.Component {
+ componentDidMount() {
+ this.props.fetchProfile(this.props.params.username);
+ }
+
+ renderContent() {
+ const {
+ profileImage,
+ country,
+ levelOfEducation,
+ socialLinks,
+ isLoadingProfile,
+ dateJoined,
+ intl,
+ } = this.props;
+
+ if (isLoadingProfile) {
+ return ;
+ }
+
+ return (
+ }>
+
+
+ View public profile
+
+ )}
+ actions={
+ (
+
+ {socialLinks
+ .filter(({ socialLink }) => Boolean(socialLink))
+ .map(({ platform, socialLink }) => (
+
+ ))}
+
+ )
+ }
+ />
+
+
+ {this.props.params.username}
+
+
+
+
+
+
+ since
+
+
+
+
+
+ {intl.formatMessage(get(
+ eduMessages,
+ `profile.education.levels.${levelOfEducation}`,
+ eduMessages['profile.education.levels.o'],
+ ))}
+
+
+
+
+
+ );
+ }
+
+ render() {
+ return (
+
+ {this.renderContent()}
+
+ );
+ }
+}
+
+const SocialLink = ({ url, name, platform }) => (
+
+
+ {name}
+
+);
+
+const StaticListItem = ({ url, name, platform }) => (
+
+);
+
+ProfilePluginPage.contextType = AppContext;
+
+ProfilePluginPage.propTypes = {
+ // Account data
+ dateJoined: PropTypes.string,
+
+ // Country form data
+ country: PropTypes.string,
+
+ // Education form data
+ levelOfEducation: PropTypes.string,
+
+ // Social links form data
+ socialLinks: PropTypes.arrayOf(PropTypes.shape({
+ platform: PropTypes.string,
+ socialLink: PropTypes.string,
+ })),
+
+ // Other data we need
+ profileImage: PropTypes.shape({
+ src: PropTypes.string,
+ isDefault: PropTypes.bool,
+ }),
+ isLoadingProfile: PropTypes.bool.isRequired,
+
+ // Actions
+ fetchProfile: PropTypes.func.isRequired,
+
+ // Router
+ params: PropTypes.shape({
+ username: PropTypes.string.isRequired,
+ }).isRequired,
+
+ // i18n
+ intl: intlShape.isRequired,
+};
+
+ProfilePluginPage.defaultProps = {
+ profileImage: {},
+ levelOfEducation: null,
+ country: null,
+ socialLinks: [],
+ dateJoined: null,
+};
+
+export default connect(
+ profilePageSelector,
+ {
+ fetchProfile,
+ },
+)(injectIntl(withParams(ProfilePluginPage)));
diff --git a/src/profile/forms/PluginCountry.jsx b/src/profile/forms/PluginCountry.jsx
new file mode 100644
index 000000000..540d71c84
--- /dev/null
+++ b/src/profile/forms/PluginCountry.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { LocationOn } from '@edx/paragon/icons';
+
+// Selectors
+import { countrySelector } from '../data/selectors';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class PluginCountry extends React.Component {
+ render() {
+ const {
+ country,
+ countryMessages,
+ } = this.props;
+
+ return (
+
+
+
{countryMessages[country]}
+
Profile page
),
NotFoundPage: () => (Not found page
),
+ ProfilePluginPage: () => (Plugin page
),
}));
const RoutesWithProvider = (context, path) => (
@@ -54,6 +55,22 @@ describe('routes', () => {
expect(screen.getByText('Profile page')).toBeTruthy();
});
+ test('Profile Plugin page should be accessible for authenticated users', () => {
+ render(
+ RoutesWithProvider(
+ {
+ authenticatedUser: {
+ username: 'edx',
+ email: 'edx@example.com',
+ },
+ config: getConfig(),
+ },
+ '/u/edx/plugin',
+ ),
+ );
+ expect(screen.getByText('Plugin page')).toBeTruthy();
+ });
+
test('should show NotFound page for a bad route', () => {
render(
RoutesWithProvider(unauthenticatedUser, '/nonMatchingRoute'),