Skip to content

Commit

Permalink
Merge pull request #610 from ResearchHub/initialProps
Browse files Browse the repository at this point in the history 
InitialProps Refactor for Home & Hub Page
  • Loading branch information
@lightninglu10
lightninglu10 authored Sep 2, 2020
2 parents 8a6f126 + 1c745fa commit 7d78793
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 112 deletions.
90 changes: 43 additions & 47 deletions components/Hubs/HubPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,56 +35,20 @@ const filterOptions = [
{
value: "hot",
label: "Trending",
// label: (
// <span style={{ display: 'flex', justifyContent: 'flex-start', width: '100%', alignItems: 'center'}}>
// <i
// className="fad fa-chart-line"
// style={{ width: 15, padding: 10, color: colors.GREEN(),}}
// />
// {"Trending"}
// </span>
// ),
disableScope: true,
},
{
value: "top_rated",
label: "Top Rated",
// label: (
// <span style={{ display: 'flex', justifyContent: 'flex-start', width: '100%', alignItems: 'center'}}>
// <i
// className="fad fa-flame"
// style={{ width: 15, padding: 10, color: colors.RED(),}}
// />
// {"Top Rated"}
// </span>
// ),
},
{
value: "newest",
label: "Newest",
// label: (
// <span style={{ display: 'flex', justifyContent: 'flex-start', width: '100%', alignItems: 'center'}}>
// <i
// className="fad fa-sparkles"
// style={{ width: 15, padding: 10, color: colors.YELLOW(),}}
// />
// {"Newest"}
// </span>
// ),
disableScope: true,
},
{
value: "most_discussed",
label: "Most Discussed",
// label: (
// <span style={{ display: 'flex', justifyContent: 'flex-start', width: '100%', alignItems: 'center'}}>
// <i
// className="fad fa-comments-alt"
// style={{ width: 15, padding: 10, color: colors.BLUE(),}}
// />
// {"Most Discussed"}
// </span>
// ),
},
];

Expand Down Expand Up @@ -118,17 +82,30 @@ class HubPage extends React.Component {
constructor(props) {
super(props);
this.state = {
page: 0,
count: 0,
papers: [],
page: this.props.initialFeed ? 1 : 0,
count:
this.props.initialFeed && this.props.initialFeed.count
? this.props.initialFeed.count
: 0,
papers:
this.props.initialFeed && this.props.initialFeed.results.data
? this.props.initialFeed.results.data
: [],
noResults:
this.props.initialFeed && this.props.initialFeed.results.no_results
? this.props.initialFeed.results.no_results
: false,
next:
this.props.initialFeed && this.props.initialFeed.next
? this.props.initialFeed.next
: null,
doneFetching: this.props.initialFeed ? true : false,
filterBy: defaultFilter,
scope: defaultScope,
disableScope: true,
mobileView: false,
mobileBanner: false,
papersLoading: false,
next: null,
doneFetching: false,
unsubscribeHover: false,
subscribeClicked: false,
titleBoxShadow: false,
Expand Down Expand Up @@ -181,7 +158,9 @@ class HubPage extends React.Component {
};

componentDidMount() {
this.fetchPapers({ hub: this.props.hub });
if (!this.props.initialFeed) {
this.fetchPapers({ hub: this.props.hub });
}
this.setState({
subscribe: this.props.hub ? this.props.hub.user_is_subscribed : null,
});
Expand All @@ -190,7 +169,7 @@ class HubPage extends React.Component {
window.addEventListener("scroll", this.scrollListener);
}

componentDidUpdate(prevProps, prevState) {
componentDidUpdate = async (prevProps, prevState) => {
if (
prevProps.hub &&
this.props.hub &&
Expand All @@ -207,7 +186,15 @@ class HubPage extends React.Component {

if (!prevProps.isLoggedIn && this.props.isLoggedIn) {
if (this.props.hub && this.props.hub.id) {
this.fetchPapers({ hub: this.props.hub });
fetch(API.HUB({ slug: this.props.slug }), API.GET_CONFIG())
.then(Helpers.checkStatus)
.then(Helpers.parseJSON)
.then((res) => {
this.setState({
subscribe: res.results[0].user_is_subscribed,
});
});

this.setState({
subscribe: this.props.hub ? this.props.hub.user_is_subscribed : null,
});
Expand All @@ -220,7 +207,7 @@ class HubPage extends React.Component {
) {
this.fetchPapers({ hub: this.props.hub });
}
}
};

componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
Expand Down Expand Up @@ -255,6 +242,7 @@ class HubPage extends React.Component {

fetchPapers = ({ hub }) => {
let { showMessage } = this.props;
this.setState({ doneFetching: false });
if (this.state.papersLoading) {
return null;
}
Expand Down Expand Up @@ -606,7 +594,10 @@ class HubPage extends React.Component {
</div>
<div className={css(styles.row, styles.body)}>
<div className={css(styles.sidebar, styles.column)}>
<HubsList current={this.props.home ? null : this.props.hub} />
<HubsList
current={this.props.home ? null : this.props.hub}
initialHubList={this.props.initialHubList}
/>
</div>
<div className={css(styles.mainFeed, styles.column)}>
<div
Expand Down Expand Up @@ -759,14 +750,18 @@ class HubPage extends React.Component {
<HubsList
current={this.props.home ? null : this.props.hub}
overrideStyle={styles.mobileList}
initialHubList={this.props.initialHubList}
/>
</div>
</div>
<div
className={css(styles.leaderboard)}
style={{ marginTop: this.state.leaderboardTop }}
>
<LeaderboardContainer hub={this.props.hub && this.props.hub.id} />
<LeaderboardContainer
hub={this.props.hub && this.props.hub.id}
initialUsers={this.props.leaderboardFeed}
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -1331,6 +1326,7 @@ const mapDispatchToProps = {
showMessage: MessageActions.showMessage,
setMessage: MessageActions.setMessage,
updateHub: HubActions.updateHub,
getTopHubs: HubActions.getTopHubs,
};

export default connect(
Expand Down
38 changes: 11 additions & 27 deletions components/Hubs/HubsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,47 +21,30 @@ class HubsList extends React.Component {
constructor(props) {
super(props);
this.state = {
hubs: [],
// reveal: false,
hubs:
this.props.initialHubList && this.props.initialHubList.results
? this.props.initialHubList.results
: [],
reveal: true,
};
}

componentDidMount() {
if (this.props.hubs) {
this.setState({ hubs: this.props.hubs }, () => {
// this.revealTimeout = setTimeout(
// () => this.setState({ reveal: true }),
// 400
// );
});
if (this.props.hubs && !this.props.initialHubList) {
this.setState({ hubs: this.props.hubs });
} else {
this.fetchHubs();
}
}

componentDidUpdate(prevProps) {
if (prevProps.current !== this.props.current) {
this.setState(
{
// reveal: false,
hubs: this.props.hubs,
}
// () => {
// this.revealTimeout = setTimeout(
// () => this.setState({ reveal: true }),
// 400
// );
// }
);
this.setState({
hubs: this.props.hubs,
});
}
if (prevProps.hubs !== this.props.hubs) {
this.setState({ hubs: this.props.hubs }, () => {
// this.revealTimeout = setTimeout(
// () => this.setState({ reveal: true }),
// 400
// );
});
this.setState({ hubs: this.props.hubs });
}
}

Expand Down Expand Up @@ -288,6 +271,7 @@ const styles = StyleSheet.create({

const mapStateToProps = (state) => ({
hubs: state.hubs.topHubs,
auth: state.auth,
});

const mapDispatchToProps = {
Expand Down
14 changes: 11 additions & 3 deletions components/Leaderboard/LeaderboardContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,20 @@ import LeaderboardUser from "./LeaderboardUser";
import Link from "next/link";

const LeaderboardContainer = (props) => {
const [users, setUsers] = useState([]);
const [fetchingUsers, setFetchingUsers] = useState(true);
const [users, setUsers] = useState(
props.initialUsers && props.initialUsers.results
? props.initialUsers.results
: []
);
const [fetchingUsers, setFetchingUsers] = useState(
props.initialUsers ? false : true
);

// componentDidMount
useEffect(() => {
fetchLeaderboard();
if (!props.initialUsers) {
fetchLeaderboard();
}
}, []);

const fetchLeaderboard = () => {
Expand Down
11 changes: 10 additions & 1 deletion config/utils/dates.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import TimeAgo from "javascript-time-ago";

import en from "javascript-time-ago/locale/en";
import moment from "moment";

TimeAgo.addLocale(en);

Expand All @@ -25,3 +25,12 @@ export function formatPublishedDate(momentDate, removeText) {
return `Published: ${formatDateStandard(momentDate)}`;
}
}

export function getInitialScope() {
return {
start: moment()
.startOf("day")
.unix(),
end: moment().unix(),
};
}
Loading

0 comments on commit 7d78793

Please sign in to comment.