From e9f64430347dfbb8bb80ba3e8b36d5ca50f4aa95 Mon Sep 17 00:00:00 2001 From: NGUYEN DINH Quoc-Huy Date: Tue, 21 Sep 2021 16:30:52 +1000 Subject: [PATCH 1/2] Generate sessionId and use it as cache buster for avatar images --- package.json | 2 +- src/app/components/cards/PostSummary.jsx | 24 +++++++---------- .../components/cards/SubscriptionsList.jsx | 26 ++++++++++++------- src/app/components/elements/Userpic.jsx | 14 +++++++--- src/app/redux/UserReducer.js | 13 ++++++++++ src/app/redux/UserSaga.js | 2 ++ 6 files changed, 54 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index f67485fc..e7880bbf 100644 --- a/package.json +++ b/package.json @@ -214,7 +214,7 @@ "npm": ">=5.4.2" }, "lint-staged": { - "src/**/*.+(js)": [ + "src/**/*.+(js|jsx)": [ "eslint" ], "src/**/*.+(json|css|md)": [ diff --git a/src/app/components/cards/PostSummary.jsx b/src/app/components/cards/PostSummary.jsx index 43203acb..1fc1f719 100644 --- a/src/app/components/cards/PostSummary.jsx +++ b/src/app/components/cards/PostSummary.jsx @@ -26,7 +26,7 @@ const CURATOR_VESTS_THRESHOLD = 1.0 * 1000.0 * 1000.0; // TODO: document why ` ` => `%20` is needed, and/or move to base fucntion const proxify = (url, size) => proxifyImageUrl(url, size).replace(/ /g, '%20'); -const vote_weights = post => { +const vote_weights = (post) => { const rshares = post.get('net_rshares'); const dn = post.getIn(['stats', 'flag_weight']); const up = Math.max(String(parseInt(rshares / 2, 10)).length - 10, 0); @@ -69,7 +69,9 @@ class PostSummary extends React.Component { } } - const { ignore, hideCategory, net_vests } = this.props; + const { + ignore, hideCategory, net_vests, sessionId, + } = this.props; const { post } = this.props; if (!post) return null; @@ -211,7 +213,7 @@ class PostSummary extends React.Component { let dots; if (net_vests >= CURATOR_VESTS_THRESHOLD) { - const _dots = cnt => { + const _dots = (cnt) => { return cnt > 0 ? '•'.repeat(cnt) : null; }; const { up, dn } = vote_weights(post); @@ -291,17 +293,8 @@ class PostSummary extends React.Component { image_link = extractImageLink(post.get('cross_post_json_metadata'), post.get('cross_post_body')); } - let listImgMedium; - let listImgLarge; - if (!image_link && !isReply) { - image_link = `https://images.hive.blog/u/${author}/avatar`; - listImgMedium = `https://images.hive.blog/u/${ - author - }/avatar/medium`; - listImgLarge = `https://images.hive.blog/u/${author}/avatar/large`; - } else if (image_link) { - listImgMedium = proxify(image_link, '256x512'); - listImgLarge = proxify(image_link, '640x480'); + if (!image_link && !isReply && sessionId) { + image_link = `https://images.hive.blog/u/${author}/avatar?ord=${sessionId}`; } let thumb = null; @@ -364,6 +357,8 @@ class PostSummary extends React.Component { export default connect((state, props) => { const { post, hideCategory, nsfwPref } = props; const net_vests = state.user.getIn(['current', 'effective_vests'], 0.0); + const sessionId = state.user.get('sessionId'); + return { post, hideCategory, @@ -371,5 +366,6 @@ export default connect((state, props) => { blogmode: state.app.getIn(['user_preferences', 'blogmode']), nsfwPref, net_vests, + sessionId, }; })(PostSummary); diff --git a/src/app/components/cards/SubscriptionsList.jsx b/src/app/components/cards/SubscriptionsList.jsx index 6559a9ff..91b1d3f0 100644 --- a/src/app/components/cards/SubscriptionsList.jsx +++ b/src/app/components/cards/SubscriptionsList.jsx @@ -5,7 +5,9 @@ import { Link } from 'react-router'; import _ from 'lodash'; import 'react-tabs/style/react-tabs.css'; import tt from 'counterpart'; -import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; +import { + Tab, Tabs, TabList, TabPanel, +} from 'react-tabs'; import LoadingIndicator from 'app/components/elements/LoadingIndicator'; import { actions as fetchDataSagaActions } from 'app/redux/FetchDataSaga'; import Callout from 'app/components/elements/Callout'; @@ -26,7 +28,9 @@ class SubscriptionsList extends React.Component { } render() { - const { subscriptions, loading, badges, username } = this.props; + const { + subscriptions, loading, badges, username, sessionId, + } = this.props; const badgesTypes = { activity: [], perso: [], @@ -57,11 +61,11 @@ class SubscriptionsList extends React.Component { } }); } - if (peakdBadges) { + if (peakdBadges && sessionId) { peakdBadges.forEach((badge) => { const type = badge.get('type'); - let valid = true; - if (badgesTypes[type] === undefined || badgesTypes[type] === null) valid = false; + const valid = type in badgesTypes; + if (valid) { badgesTypes[type].push( {badge.get('title')}

- {tt('g.badges_and_achievements_description')}{' '} + {tt('g.badges_and_achievements_description')} + {' '} Peakd - {' '} - &{' '} + + {' & '} Hivebuzz @@ -171,11 +176,14 @@ export default connect( const isOwnAccount = user.getIn(['current', 'username'], '') === username; const loading = global.getIn(['subscriptions', 'loading']); const subscriptions = global.getIn(['subscriptions', username]); + const sessionId = state.user.get('sessionId'); + return { ...props, subscriptions: subscriptions ? subscriptions.toJS() : [], isOwnAccount, loading, + sessionId, }; }, (dispatch) => ({ diff --git a/src/app/components/elements/Userpic.jsx b/src/app/components/elements/Userpic.jsx index 29223444..c5e46bf9 100644 --- a/src/app/components/elements/Userpic.jsx +++ b/src/app/components/elements/Userpic.jsx @@ -13,8 +13,13 @@ class Userpic extends Component { render() { if (this.props.hide) return null; - const { account, size } = this.props; - const url = imageProxy() + `u/${account}/avatar${size}`; + const { account, size, sessionId } = this.props; + + if (!sessionId) { + return null; + } + + const url = `${imageProxy()}u/${account}/avatar${size}?ord=${sessionId}`; const style = { backgroundImage: `url(${url})` }; return

; } @@ -33,9 +38,12 @@ export default connect((state, ownProps) => { hide = !url || !/^(https?:)\/\//.test(url); } + const sessionId = state.user.get('sessionId'); + return { - account: account == 'steemitblog' ? 'steemitdev' : account, + account: account === 'steemitblog' ? 'steemitdev' : account, size: size && sizeList.indexOf(size) > -1 ? '/' + size : '', hide, + sessionId, }; })(Userpic); diff --git a/src/app/redux/UserReducer.js b/src/app/redux/UserReducer.js index 25ba0be0..d39ba359 100644 --- a/src/app/redux/UserReducer.js +++ b/src/app/redux/UserReducer.js @@ -31,6 +31,7 @@ const SHOW_POST_ADVANCED_SETTINGS = 'user/SHOW_POST_ADVANCED_SETTINGS'; const HIDE_POST_ADVANCED_SETTINGS = 'user/HIDE_POST_ADVANCED_SETTINGS'; const HIDE_ANNOUNCEMENT = 'user/HIDE_ANNOUNCEMENT'; const SHOW_ANNOUNCEMENT = 'user/SHOW_ANNOUNCEMENT'; +const GENERATE_SESSION_ID = 'user/GENERATE_SESSION_ID'; // Saga-related export const UPLOAD_IMAGE = 'user/UPLOAD_IMAGE'; @@ -45,6 +46,7 @@ const defaultState = fromJS({ show_side_panel: false, maybeLoggedIn: false, showAnnouncement: false, + sessionId: '', }); export default function reducer(state = defaultState, action) { @@ -213,6 +215,13 @@ export default function reducer(state = defaultState, action) { typeof sessionStorage !== 'undefined' && sessionStorage.setItem('hideAnnouncement', 'true'); return state.set('showAnnouncement', false); + case GENERATE_SESSION_ID: + const gRand = () => { + return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1); + }; + + return state.set('sessionId', `${gRand() + gRand()}-${gRand()}-${gRand()}-${gRand()}-${gRand()}${gRand()}${gRand()}`); + default: return state; } @@ -362,3 +371,7 @@ export const hideAnnouncement = () => ({ export const showAnnouncement = () => ({ type: SHOW_ANNOUNCEMENT, }); + +export const generateSessionId = () => ({ + type: GENERATE_SESSION_ID, +}); diff --git a/src/app/redux/UserSaga.js b/src/app/redux/UserSaga.js index 3f3642d1..543b6a3c 100644 --- a/src/app/redux/UserSaga.js +++ b/src/app/redux/UserSaga.js @@ -115,7 +115,9 @@ function* usernamePasswordLogin(action) { yield call(usernamePasswordLogin2, action.payload); const current = yield select((state) => state.user.get('current')); const username = current ? current.get('username') : null; + if (username) { + yield put(userActions.generateSessionId()); yield fork(loadFollows, 'getFollowingAsync', username, 'blog'); yield fork(loadFollows, 'getFollowingAsync', username, 'ignore'); } -- GitLab From 601d783dfcfe3dac432b6b57c0850d08770fea32 Mon Sep 17 00:00:00 2001 From: NGUYEN DINH Quoc-Huy Date: Tue, 21 Sep 2021 16:58:32 +1000 Subject: [PATCH 2/2] Fix avatar not loading for anonymous users --- src/app/components/cards/PostSummary.jsx | 4 ++-- src/app/components/cards/SubscriptionsList.jsx | 2 +- src/app/components/elements/Userpic.jsx | 6 +----- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/app/components/cards/PostSummary.jsx b/src/app/components/cards/PostSummary.jsx index 1fc1f719..d6cf9059 100644 --- a/src/app/components/cards/PostSummary.jsx +++ b/src/app/components/cards/PostSummary.jsx @@ -293,8 +293,8 @@ class PostSummary extends React.Component { image_link = extractImageLink(post.get('cross_post_json_metadata'), post.get('cross_post_body')); } - if (!image_link && !isReply && sessionId) { - image_link = `https://images.hive.blog/u/${author}/avatar?ord=${sessionId}`; + if (!image_link && !isReply) { + image_link = `https://images.hive.blog/u/${author}/avatar${sessionId ? `?ord=${sessionId}` : ''}`; } let thumb = null; diff --git a/src/app/components/cards/SubscriptionsList.jsx b/src/app/components/cards/SubscriptionsList.jsx index 91b1d3f0..ec27b746 100644 --- a/src/app/components/cards/SubscriptionsList.jsx +++ b/src/app/components/cards/SubscriptionsList.jsx @@ -61,7 +61,7 @@ class SubscriptionsList extends React.Component { } }); } - if (peakdBadges && sessionId) { + if (peakdBadges) { peakdBadges.forEach((badge) => { const type = badge.get('type'); const valid = type in badgesTypes; diff --git a/src/app/components/elements/Userpic.jsx b/src/app/components/elements/Userpic.jsx index c5e46bf9..90bca6e4 100644 --- a/src/app/components/elements/Userpic.jsx +++ b/src/app/components/elements/Userpic.jsx @@ -15,11 +15,7 @@ class Userpic extends Component { const { account, size, sessionId } = this.props; - if (!sessionId) { - return null; - } - - const url = `${imageProxy()}u/${account}/avatar${size}?ord=${sessionId}`; + const url = `${imageProxy()}u/${account}/avatar${size}${sessionId ? `?ord=${sessionId}` : ''}`; const style = { backgroundImage: `url(${url})` }; return
; } -- GitLab