Skip to content

Commit

Permalink
Merge pull request #1827 from ResearchHub/save-social-links
Browse files Browse the repository at this point in the history
Allow user to update their social links
  • Loading branch information
yattias authored Sep 11, 2024
2 parents ef7b973 + f434b6e commit 976bac3
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 101 deletions.
13 changes: 9 additions & 4 deletions components/Author/Profile/AuthorSocialMediaIcons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,37 @@ import { css, StyleSheet } from "aphrodite";
import Link from "next/link";

const AuthorSocialMediaIcons = ({ profile }: { profile: FullAuthorProfile }) => {
console.log('profile.orcidUrl', profile.orcidUrl)
console.log('profile.linkedInUrl', profile.linkedInUrl)




return (
<div className={css(styles.iconsWrapper)}>
{profile.orcidUrl ? (
<Link href={profile.orcidUrl} target="_blank">
<Link href={profile.orcidUrl.indexOf("http") === -1 ? `https://${profile.orcidUrl}` : profile.orcidUrl} target="_blank">
<OrcidIcon externalUrl={profile.orcidUrl} width={25} height={25} />
</Link>
) : (
<OrcidIcon externalUrl={profile.orcidUrl} width={25} height={25} />
)}
{profile.linkedInUrl ? (
<Link href={profile.linkedInUrl} target="_blank">
<Link href={profile.linkedInUrl.indexOf("http") === -1 ? `https://${profile.linkedInUrl}` : profile.linkedInUrl} target="_blank">
<LinkedInIcon externalUrl={profile.linkedInUrl} width={25} height={25} />
</Link>
) : (
<LinkedInIcon externalUrl={profile.linkedInUrl} width={25} height={25} />
)}
{profile.xUrl ? (
<Link href={profile.xUrl} target="_blank">
<Link href={profile.xUrl.indexOf("http") === -1 ? `https://${profile.xUrl}` : profile.xUrl} target="_blank">
<XIcon externalUrl={profile.xUrl} width={25} height={25} />
</Link>
) : (
<XIcon externalUrl={profile.xUrl} width={25} height={25} />
)}
{profile.googleScholarUrl ? (
<Link href={profile.googleScholarUrl} target="_blank">
<Link href={profile.googleScholarUrl.indexOf("http") === -1 ? `https://${profile.googleScholarUrl}` : profile.googleScholarUrl} target="_blank">
<GoogleScholarIcon externalUrl={profile.googleScholarUrl} width={25} height={25} />
</Link>
) : (
Expand Down
122 changes: 26 additions & 96 deletions components/Modals/UserInfoModal.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Component } from "react";
import { StyleSheet, css } from "aphrodite";
import { connect } from "react-redux";
import React from "react";

// Component
import AuthorAvatar from "~/components/AuthorAvatar";
Expand All @@ -22,6 +23,7 @@ import { MessageActions } from "~/redux/message";
import colors from "~/config/themes/colors";
import API from "~/config/api";
import { Helpers } from "@quantfive/js-web-config";
import OnboardForm from "../Onboard/OnboardForm";

class UserInfoModal extends Component {
constructor(props) {
Expand All @@ -38,7 +40,10 @@ class UserInfoModal extends Component {
this.props.author.education &&
this.props.author.education.length - 1,
mainIndex: 0,
isSaveInProgress: false,
};

this.formRef = React.createRef();
}

componentDidMount = async () => {
Expand Down Expand Up @@ -189,6 +194,8 @@ class UserInfoModal extends Component {
};

saveAuthorChanges = (e, silent = false) => {
this.setState({ isSaveInProgress: true });

const { setMessage, showMessage } = this.props;
e && e.preventDefault();
!silent && showMessage({ show: true, load: true });
Expand Down Expand Up @@ -351,25 +358,6 @@ class UserInfoModal extends Component {
containerStyle={styles.formInput}
value={label === "Headline" ? value.title : value}
/>
{/* {label === "Headline" && (
<div className={css(styles.isPublicContainer)}>
<h3
className={css(
styles.isPublicLabel,
value.isPublic && styles.activeLabel
)}
>
{value.isPublic ? "Public" : "Private"}
</h3>
<Toggle
className={"react-toggle"}
height={15}
value={value.isPublic}
checked={value.isPublic}
onChange={this.handleIsPublic}
/>
</div>
)} */}
</div>
);
};
Expand All @@ -385,8 +373,14 @@ class UserInfoModal extends Component {
);
};

save = () => {
const saveButton = this.formRef.current;
saveButton.click();
};

render() {
const { hoverAvatar, allowEdit, avatarUploadIsOpen } = this.state;
const { hoverAvatar, allowEdit, avatarUploadIsOpen, isSaveInProgress } =
this.state;
const { author, modals } = this.props;
if (!this.props.auth.isLoggedIn) return null;
return (
Expand All @@ -400,84 +394,20 @@ class UserInfoModal extends Component {
modalContentStyle={styles.modalContentStyles}
>
<div className={css(styles.rootContainer)}>
<EducationModal
education={this.state.education[this.state.activeIndex]}
currentIndex={this.state.activeIndex}
onSave={this.onEducationModalSave}
onActive={this.setEducationActive}
/>
<img
src={"/static/icons/close.png"}
className={css(styles.closeButton)}
onClick={this.closeModal}
draggable={false}
alt="Close Button"
<OnboardForm
author={author}
submitRef={this.formRef}
onAuthorSave={() => {
this.props.onSave && this.props.onSave();
}}
/>
<div className={css(styles.titleContainer, styles.left)}>
<div className={css(styles.title)}>
{"Edit your personal information"}
</div>
</div>
<form className={css(styles.form)} onSubmit={this.saveAuthorChanges}>
<div className={css(styles.titleHeader)}>
<div
className={css(
styles.avatarContainer,
author.profile_image && styles.border
)}
onClick={() => this.toggleAvatarModal(true)}
onMouseEnter={this.onMouseEnterAvatar}
onMouseLeave={this.onMouseLeaveAvatar}
draggable={false}
>
<AuthorAvatar author={author} disableLink={true} size={120} />
{allowEdit && hoverAvatar && (
<div className={css(styles.profilePictureHover)}>Update</div>
)}
</div>
<div className={css(styles.column)}>
{this.renderFormInput({
label: "First Name",
id: "first_name",
required: true,
value: this.state.first_name,
})}
{this.renderFormInput({
label: "Last Name",
id: "last_name",
required: true,
value: this.state.last_name,
})}
</div>
</div>
{this.renderFormInput({
label: "Headline",
id: "headline",
subtitle:
"This information will be displayed in comments below your name",
value: this.state.headline,
})}
{this.renderEducationList()}
{this.renderFormInput({
label: "About",
id: "description",
value: this.state.description,
})}
<AvatarUpload
isOpen={avatarUploadIsOpen}
closeModal={() => this.toggleAvatarModal(false)}
saveButton={this.renderSaveButton}
section={"pictures"}
<div className={css(styles.buttonRowContainer)}>
<Button
label="Save Changes"
disabled={isSaveInProgress}
onClick={this.save}
/>
<div className={css(styles.buttonContainer)}>
<Button
label={"Save Changes"}
customButtonStyle={styles.buttonCustomStyle}
rippleClass={styles.rippleClass}
type={"submit"}
/>
</div>
</form>
</div>
</div>
</BaseModal>
);
Expand Down
2 changes: 1 addition & 1 deletion components/Onboard/OnboardForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -497,7 +497,7 @@ const styles = StyleSheet.create({
backgroundColor: "#fff",
transition: "all ease-in-out 0.4s",
boxSizing: "border-box",
minWidth: 700,
maxWidth: 700,
width: "100%",
overflow: "visible",
"@media only screen and (max-width: 936px)": {
Expand Down

0 comments on commit 976bac3

Please sign in to comment.