From 0e39e7d3b7e761a04931ba379a3c391b4fc73cb0 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Sat, 29 Jul 2023 11:16:05 +0100 Subject: [PATCH 01/17] initiate activities page --- src/common/api/hive.ts | 3 + .../components/profile-activities/index.scss | 23 ++++++ .../components/profile-activities/index.tsx | 70 +++++++++++++++++++ src/common/components/profile-menu/index.tsx | 2 +- src/common/i18n/locales/en-US.json | 1 + src/common/pages/profile-functional.tsx | 18 +++++ src/common/routes.ts | 2 +- 7 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 src/common/components/profile-activities/index.scss create mode 100644 src/common/components/profile-activities/index.tsx diff --git a/src/common/api/hive.ts b/src/common/api/hive.ts index 5da3780c022..52f33855feb 100644 --- a/src/common/api/hive.ts +++ b/src/common/api/hive.ts @@ -656,3 +656,6 @@ export const getRcOperationStats = (): Promise => client.call("rc_api", "ge export const getContentReplies = (author: string, permlink: string): Promise => client.call("condenser_api", "get_content_replies", { author, permlink }); + + export const getAllActiviies = async (username: string, limit = 100) => + client.call('condenser_api', 'get_account_history', [username, -1, limit, ]); diff --git a/src/common/components/profile-activities/index.scss b/src/common/components/profile-activities/index.scss new file mode 100644 index 00000000000..f901b795b94 --- /dev/null +++ b/src/common/components/profile-activities/index.scss @@ -0,0 +1,23 @@ +.activities-container{ + display: flex; + flex-direction: column; + gap: 10px; + + .activities{ + display: flex; + // flex-direction: column; + justify-content: space-between; + // gap: 5px; + background: #161d26; + width: 100%; + height: fit-content; + padding: 10px; + border-radius: 5px; + + .activities-details{ + display: flex; + flex-direction: column; + gap: 5px; + } + } +} \ No newline at end of file diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx new file mode 100644 index 00000000000..f945934ce53 --- /dev/null +++ b/src/common/components/profile-activities/index.tsx @@ -0,0 +1,70 @@ +import React, { useEffect, useState } from "react" +import { getAllActiviies } from '../../api/hive' +import "./index.scss" + +export const ProfileActivites = () => { + + const [activities, setActivities] = useState([]) + + useEffect(() => { + getActivities(); + }, []) + + const getActivities = async () => { + try { + const response = await getAllActiviies("adesojisouljay") + console.log(response.reverse()) + const accountHistory = response.map((entry: [any, any]) => { + const [index, op] = entry; + const { timestamp, block } = op; + const type = op.op[0]; + const data = op.op[1]; + + return { + index, + timestamp, + block, + type, + data, + }; + }); + console.log(accountHistory.reverse()) + setActivities(accountHistory.reverse()) + return accountHistory; + + } catch (err) { + console.log(err) + } + } + + return ( +
+
+ {/*
+

The post body always

+
+ Authour: @adesojisouljay + Permlink: pidhjhxc + Post Link: @adesojisouljay/iuhdiu-dusdj-jhjh + Time: 4 days ago +
+
*/} + {activities?.map((a: any) => {return ( + <> + {a.type === "comment" ?
+
+

{a.data.body.substring(0, 100)}

+
+
+ Authour: {a.data.author} + Permlink: pidhjhxc + Post Link: @adesojisouljay/iuhdiu-dusdj-jhjh + Time: 4 days ago +
+
: null} + + )})} +
+
+ ) +} diff --git a/src/common/components/profile-menu/index.tsx b/src/common/components/profile-menu/index.tsx index e39f1c079ca..f9dbb5cef5c 100644 --- a/src/common/components/profile-menu/index.tsx +++ b/src/common/components/profile-menu/index.tsx @@ -32,7 +32,7 @@ export class ProfileMenu extends Component { render() { const { username, section, activeUser } = this.props; - const kebabMenuItems: MenuItem[] = ["trail", "replies", "communities"].map((x) => { + const kebabMenuItems: MenuItem[] = ["trail", "replies", "communities", "activities"].map((x) => { return { label: _t(`profile.section-${x}`), href: `/@${username}/${x}`, diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json index 79fb6d7da75..f824b1bce0c 100644 --- a/src/common/i18n/locales/en-US.json +++ b/src/common/i18n/locales/en-US.json @@ -849,6 +849,7 @@ "section-blog": "Blog", "section-posts": "Posts", "section-trail": "Likes", + "section-activities": "Activites", "section-comments": "Comments", "section-replies": "Replies", "section-communities": "Communities", diff --git a/src/common/pages/profile-functional.tsx b/src/common/pages/profile-functional.tsx index 3f81b2bc045..1ac8458d766 100644 --- a/src/common/pages/profile-functional.tsx +++ b/src/common/pages/profile-functional.tsx @@ -52,6 +52,7 @@ import WalletSpk from "../components/wallet-spk"; import "./profile.scss"; import { useQueryClient } from "@tanstack/react-query"; import { QueryIdentifiers } from "../core"; +import { ProfileActivites } from "../components/profile-activities"; interface MatchParams { username: string; @@ -585,6 +586,23 @@ export const Profile = (props: Props) => { ); } + if (section === "activities") { + return ( + <> +
+
+ +
+
+ + ); + } if (data !== undefined && section) { let entryList; diff --git a/src/common/routes.ts b/src/common/routes.ts index b79f4df04a3..ce2d14283d2 100644 --- a/src/common/routes.ts +++ b/src/common/routes.ts @@ -24,7 +24,7 @@ export default { USER_FEED: `/:username(@[\\w\\.\\d-]+)/:section(feed)`, USER_SECTION: `/:username(@[\\w\\.\\d-]+)/:section(${profileFilters.join( "|" - )}|wallet|points|engine|communities|settings|permissions|referrals|followers|following|spk|trail)`, + )}|wallet|points|engine|communities|settings|permissions|referrals|followers|following|spk|trail|activities)`, COMMUNITIES: `/communities`, COMMUNITIES_CREATE: `/communities/create`, COMMUNITIES_CREATE_HS: `/communities/create-hs`, From 2e345f8daed32532373acfd1a29f363647dec987 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Sat, 29 Jul 2023 23:59:36 +0100 Subject: [PATCH 02/17] load activities --- .../components/profile-activities/index.scss | 49 ++++++++-- .../components/profile-activities/index.tsx | 97 +++++++++++++++---- src/common/pages/profile-functional.tsx | 2 +- 3 files changed, 119 insertions(+), 29 deletions(-) diff --git a/src/common/components/profile-activities/index.scss b/src/common/components/profile-activities/index.scss index f901b795b94..da88c408fed 100644 --- a/src/common/components/profile-activities/index.scss +++ b/src/common/components/profile-activities/index.scss @@ -1,3 +1,8 @@ +@import "src/style/colors"; +@import "src/style/variables"; +@import "src/style/bootstrap_vars"; +@import "src/style/mixins"; + .activities-container{ display: flex; flex-direction: column; @@ -5,19 +10,49 @@ .activities{ display: flex; - // flex-direction: column; - justify-content: space-between; - // gap: 5px; - background: #161d26; + flex-direction: column; + justify-content: center; + gap: 5px; + // background: #161d26; width: 100%; height: fit-content; padding: 10px; border-radius: 5px; - .activities-details{ + @include themify(day) { + background: #f9f9f9; + // color: $steel-grey; + color: #535e65; + } + + @include themify(night) { + background: #161d26; + // color: $pinkish-grey; + color: #fcfcfc; + } + + .activities-header{ + justify-self: center; + align-self: center; + // font-size: 14px; + } + + .activities-info-wrapper{ display: flex; - flex-direction: column; - gap: 5px; + gap: 10px; + + .activities-body{ + // width: 500px; + flex: 2; + } + + .activities-details{ + flex: 1; + display: flex; + flex-direction: column; + gap: 5px; + } } + } } \ No newline at end of file diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index f945934ce53..64aacaf7593 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -1,18 +1,31 @@ import React, { useEffect, useState } from "react" -import { getAllActiviies } from '../../api/hive' +import { getAllActiviies } from "../../api/hive" +import { dateToFullRelative } from "../../helper/parse-date" import "./index.scss" +import { Link } from "react-router-dom" +import LinearProgress from "../linear-progress" +import { Account } from "../../store/accounts/types" +import { Button } from "react-bootstrap" -export const ProfileActivites = () => { +interface Props{ + account: Account +} + +export const ProfileActivites = (props: Props) => { - const [activities, setActivities] = useState([]) + const { account } = props; + + const [activities, setActivities] = useState([]); + const [loading, setLoading] = useState(false); useEffect(() => { getActivities(); - }, []) + },[]) const getActivities = async () => { + setLoading(true) try { - const response = await getAllActiviies("adesojisouljay") + const response = await getAllActiviies(account.name) console.log(response.reverse()) const accountHistory = response.map((entry: [any, any]) => { const [index, op] = entry; @@ -30,6 +43,7 @@ export const ProfileActivites = () => { }); console.log(accountHistory.reverse()) setActivities(accountHistory.reverse()) + setLoading(false) return accountHistory; } catch (err) { @@ -39,32 +53,73 @@ export const ProfileActivites = () => { return (
+ {loading && }
- {/*
-

The post body always

-
- Authour: @adesojisouljay - Permlink: pidhjhxc - Post Link: @adesojisouljay/iuhdiu-dusdj-jhjh - Time: 4 days ago -
-
*/} {activities?.map((a: any) => {return ( <> {a.type === "comment" ?
-
-

{a.data.body.substring(0, 100)}

+
+

Comment

+
+
+
+ Authour: @{a.data.author} + Body: {a.data.body.substring(0, 100)} + Permlink: {a.data.permlink} + Post Link: + {`/@${a.data.author}/${a.data.permlink}`} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : a.type === "effective_comment_vote" ?
+
+

Effective comment vote

+
+
+
+ Authour: @{a.data.author} + Pending payout: {a.data.pending_payout} + Post Link: {a.data.permlink} + Voter: {a.data.voter} + Time: {dateToFullRelative(a.timestamp)} +
+
: a.type === "vote" ?
+
+

Vote

+
+
- Authour: {a.data.author} - Permlink: pidhjhxc - Post Link: @adesojisouljay/iuhdiu-dusdj-jhjh - Time: 4 days ago + Authour: @{a.data.author} + Post permlink: {a.data.permlink} + Voter: {a.data.voter} + Weight: {a.data.weight / 100}% + Time: {dateToFullRelative(a.timestamp)}
-
: null} +
+
: a.type === "curation_reward" ?
+
+

Curation reward

+
+
+
+ Authour: @{a.data.comment_author} + Post permlink: {a.data.comment_permlink} + Curator: {a.data.curator} + Reward: {a.data.reward} + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : null} )})}
+
+ +
) } diff --git a/src/common/pages/profile-functional.tsx b/src/common/pages/profile-functional.tsx index 1ac8458d766..843445e9fb1 100644 --- a/src/common/pages/profile-functional.tsx +++ b/src/common/pages/profile-functional.tsx @@ -597,7 +597,7 @@ export const Profile = (props: Props) => { }` )} > - + From 04bf2381a1a78d1f4532c2af80eabed8d8d12dad Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Mon, 7 Aug 2023 20:04:31 +0100 Subject: [PATCH 03/17] sort activities --- .../components/profile-activities/index.scss | 15 +- .../components/profile-activities/index.tsx | 305 +++++++++++++++--- 2 files changed, 279 insertions(+), 41 deletions(-) diff --git a/src/common/components/profile-activities/index.scss b/src/common/components/profile-activities/index.scss index da88c408fed..acec429a83c 100644 --- a/src/common/components/profile-activities/index.scss +++ b/src/common/components/profile-activities/index.scss @@ -8,11 +8,15 @@ flex-direction: column; gap: 10px; + .activities-page-info{ + align-self: center; + } + .activities{ display: flex; flex-direction: column; justify-content: center; - gap: 5px; + gap: 3px; // background: #161d26; width: 100%; height: fit-content; @@ -50,7 +54,16 @@ flex: 1; display: flex; flex-direction: column; + // justify-content: center; + // align-items: center; gap: 5px; + + .auhtor-wrapper{ + display: flex; + // justify-content: center; + align-items: center; + gap: 5px; + } } } diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index 64aacaf7593..5c8f0993725 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -6,12 +6,16 @@ import { Link } from "react-router-dom" import LinearProgress from "../linear-progress" import { Account } from "../../store/accounts/types" import { Button } from "react-bootstrap" +import ProfileLink from "../profile-link"; +import UserAvatar from "../user-avatar"; +import activeUser from "../../store/active-user" +import { Transaction } from "@hiveio/dhive" +import { DynamicProps } from "../../store/dynamic-props/types" -interface Props{ - account: Account -} +// interface Props{ +// } -export const ProfileActivites = (props: Props) => { +export const ProfileActivites = (props: any) => { const { account } = props; @@ -19,9 +23,10 @@ export const ProfileActivites = (props: Props) => { const [loading, setLoading] = useState(false); useEffect(() => { - getActivities(); + console.log(props) + getActivities(); },[]) - + const getActivities = async () => { setLoading(true) try { @@ -41,8 +46,8 @@ export const ProfileActivites = (props: Props) => { data, }; }); - console.log(accountHistory.reverse()) - setActivities(accountHistory.reverse()) + console.log(accountHistory) + setActivities(accountHistory) setLoading(false) return accountHistory; @@ -51,75 +56,295 @@ export const ProfileActivites = (props: Props) => { } } + const handleCustomJson = (a: any): any => { + let jsonData; + try { + if(a?.data?.json){ + jsonData = JSON.parse(a?.data?.json) + console.log(jsonData) + }; + } catch (error) { + console.log(error) + } + return jsonData + } + return ( -
+ <> {loading && }
- {activities?.map((a: any) => {return ( - <> - {a.type === "comment" ?
+
+ All activities related to @{account?.name}'s account +
+ {activities?.map((a: any, i: number) => { + const jsonData = handleCustomJson(a) + return ( +
+ {a.type === "comment" && a.data.author === account?.name && a.data.parent_author !== "" ?

Comment

- Authour: @{a.data.author} - Body: {a.data.body.substring(0, 100)} - Permlink: {a.data.permlink} - Post Link: - {`/@${a.data.author}/${a.data.permlink}`} +
+ Author: + + {ProfileLink({ + ...props, + username: a.data.author, + children: + })} + + + {ProfileLink({ + ...props, + username: a.data.author, + children: {a.data.author} + })} + +
+ + @{a.data.author} + commented on + + {a.data.parent_permlink} + + by + @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} Time: {dateToFullRelative(a.timestamp)}
- : a.type === "effective_comment_vote" ?
+ : a.type === "comment" && a.data.parent_author === account?.name && a.data.author !== account?.name ?
-

Effective comment vote

+

Reply

- Authour: @{a.data.author} - Pending payout: {a.data.pending_payout} - Post Link: {a.data.permlink} - Voter: {a.data.voter} +
+ Author: + + {ProfileLink({ + ...props, + username: a.data.author, + children: + })} + + + {ProfileLink({ + ...props, + username: a.data.author, + children: {a.data.author} + })} + +
+ + @{a.data.author} + replied to + + {a.data.parent_permlink} + + by + @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} + Time: {dateToFullRelative(a.timestamp)} -
+
-
: a.type === "vote" ?
+
+ : a.type === "vote" && a.data.voter === account?.name ?

Vote

- Authour: @{a.data.author} - Post permlink: {a.data.permlink} - Voter: {a.data.voter} - Weight: {a.data.weight / 100}% +
+ Author: + + {ProfileLink({ + ...props, + username: a.data.author, + children: + })} + + + {ProfileLink({ + ...props, + username: a.data.author, + children: {a.data.author} + })} + +
+ + @{a.data.voter} + voted on + + {a.data.permlink} + + by + @{a.data.author} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : a.type === "proposal_pay" ?
+
+

Proposal pay

+
+
+
+ + @{a.data.receiver} + received {a.data.payment} from + @{a.data.payer} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ // Crashes page will check later + : (a.data.id === "follow" && jsonData[1]!?.what.includes("blog")) ?
+
+

Follow

+
+
+
+ + @{jsonData[1]?.follower} + started following + @{jsonData[1].following} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : (a.data.id === "follow" && !jsonData[1].what.includes("blog")) ?
+
+

Unfollow

+
+
+
+ + @{jsonData[1].follower} + unfollowed + @{jsonData[1].following} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : a.data.id === "community" && jsonData?.includes("subscribe") ?
+
+

Subscribe

+
+
+
+ + @{account?.name} + Subscribed to community + {jsonData[1]?.community} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : a.data.id === "community" && jsonData?.includes("unsubscribe") ?
+
+

Unsubscribe

+
+
+
+ + @{account?.name} + unsubscribed from community + {jsonData[1].community} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : (a.type === "account_witness_vote" && a.data.approve) ?
+
+

Witness Vote

+
+
+
+ + @{a.data.account} + voted witness + @{a.data.witness} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : (a.type === "account_witness_vote" && !a.data.approve) ?
+
+

Unapprove witness Vote

+
+
+
+ + @{a.data.account} + unvoted witness + @{a.data.witness} + Time: {dateToFullRelative(a.timestamp)}
-
: a.type === "curation_reward" ?
+
+ : (a.type === "update_proposal_votes" && a.data.approve) ?
-

Curation reward

+

Approve proposal

- Authour: @{a.data.comment_author} - Post permlink: {a.data.comment_permlink} - Curator: {a.data.curator} - Reward: {a.data.reward} + + @{a.data.voter} + approved + proposal#{a.data.proposal_ids} + Time: {dateToFullRelative(a.timestamp)}
+
+ : (a.type === "update_proposal_votes" && !a.data.approve) ?
+
+

Unapprove proposal

+
+
+
+ + @{a.data.voter} + unapproved + proposal#{a.data.proposal_ids} + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : a.type === "account_update2" ?
+
+

Account update

+
+
+
+ + @{a.data.account} + updated their account + + Time: {dateToFullRelative(a.timestamp)} +
+
+
+ : null}
- : null} - )})}
-
+ {!loading &&
-
-
+
} + ) } From fc3bef99d1f033fcc4f5cbc4f062e5b7a8efb407 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Wed, 9 Aug 2023 13:42:26 +0100 Subject: [PATCH 04/17] flow changes --- .../components/profile-activities/index.scss | 40 ++- .../components/profile-activities/index.tsx | 339 ++++++++++++------ 2 files changed, 244 insertions(+), 135 deletions(-) diff --git a/src/common/components/profile-activities/index.scss b/src/common/components/profile-activities/index.scss index acec429a83c..ba598abe8a7 100644 --- a/src/common/components/profile-activities/index.scss +++ b/src/common/components/profile-activities/index.scss @@ -17,28 +17,36 @@ flex-direction: column; justify-content: center; gap: 3px; - // background: #161d26; width: 100%; height: fit-content; padding: 10px; border-radius: 5px; - @include themify(day) { - background: #f9f9f9; - // color: $steel-grey; - color: #535e65; - } + // @include themify(day) { + // background: #f9f9f9; + // // color: $steel-grey; + // color: #535e65; + // } - @include themify(night) { - background: #161d26; - // color: $pinkish-grey; - color: #fcfcfc; + // @include themify(night) { + // background: #161d26; + // // color: $pinkish-grey; + // color: #fcfcfc; + // } + &:nth-child(odd) { + @include themify(day) { + background: $white-three; + } + + @include themify(night) { + background: $dark-two; + } } .activities-header{ justify-self: center; align-self: center; - // font-size: 14px; + font-size: 14px; } .activities-info-wrapper{ @@ -46,22 +54,18 @@ gap: 10px; .activities-body{ - // width: 500px; flex: 2; } .activities-details{ flex: 1; display: flex; - flex-direction: column; - // justify-content: center; - // align-items: center; + align-items: center; gap: 5px; - .auhtor-wrapper{ + .activity-info{ display: flex; - // justify-content: center; - align-items: center; + flex-direction: column; gap: 5px; } } diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index 5c8f0993725..77a482732b5 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -25,36 +25,52 @@ export const ProfileActivites = (props: any) => { useEffect(() => { console.log(props) getActivities(); - },[]) - + },[]); + const getActivities = async () => { - setLoading(true) + setLoading(true); + const types = [ + "comment", + "proposal_pay", + "vote", + "custom_json", + "account_witness_vote", + "update_proposal_votes", + "account_update2" + ]; + try { - const response = await getAllActiviies(account.name) - console.log(response.reverse()) + const response = await getAllActiviies(account.name); const accountHistory = response.map((entry: [any, any]) => { const [index, op] = entry; const { timestamp, block } = op; const type = op.op[0]; const data = op.op[1]; + console.log(type) - return { - index, - timestamp, - block, - type, - data, - }; + if (types.includes(type)) { + return { + index, + timestamp, + block, + type, + data, + }; + } else { + return null; + } }); - console.log(accountHistory) - setActivities(accountHistory) - setLoading(false) - return accountHistory; - + + const filteredAccountHistory = accountHistory.filter((entry: any) => entry !== null); + + console.log(accountHistory); + setActivities(filteredAccountHistory.reverse()); + setLoading(false); + return filteredAccountHistory; } catch (err) { - console.log(err) + console.log(err); } - } + }; const handleCustomJson = (a: any): any => { let jsonData; @@ -80,65 +96,50 @@ export const ProfileActivites = (props: any) => { const jsonData = handleCustomJson(a) return (
- {a.type === "comment" && a.data.author === account?.name && a.data.parent_author !== "" ?
+ {a?.type === "comment" && a.data.author === account?.name && a.data.parent_author !== "" ?

Comment

-
- Author: +
+ {ProfileLink({ + ...props, + username: a.data.author, + children: + })} +
+
- {ProfileLink({ - ...props, - username: a.data.author, - children: - })} - - - {ProfileLink({ - ...props, - username: a.data.author, - children: {a.data.author} - })} + @{a.data.author} + commented on + + {a.data.parent_permlink} + + by + @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} +
+ Time: {dateToFullRelative(a.timestamp)} +
- - @{a.data.author} - commented on - - {a.data.parent_permlink} - - by - @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} - - Time: {dateToFullRelative(a.timestamp)}
- : a.type === "comment" && a.data.parent_author === account?.name && a.data.author !== account?.name ?
+ : a?.type === "comment" && a.data.parent_author === account?.name && a.data.author !== account?.name ?

Reply

-
- Author: - - {ProfileLink({ - ...props, - username: a.data.author, - children: - })} - - - {ProfileLink({ - ...props, - username: a.data.author, - children: {a.data.author} - })} - +
+ {ProfileLink({ + ...props, + username: a.data.author, + children: + })}
+
@{a.data.author} replied to @@ -148,197 +149,301 @@ export const ProfileActivites = (props: any) => { by @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : a.type === "vote" && a.data.voter === account?.name ?
+ : a?.type === "vote" && a.data.voter === account?.name ?

Vote

-
- Author: - - {ProfileLink({ - ...props, - username: a.data.author, - children: - })} - - - {ProfileLink({ - ...props, - username: a.data.author, - children: {a.data.author} - })} - +
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+
+ @{a.data.voter} + voted on + + {a.data.permlink} + + by + @{a.data.author} +
+ Time: {dateToFullRelative(a.timestamp)}
- - @{a.data.voter} - voted on - - {a.data.permlink} - - by - @{a.data.author} - - Time: {dateToFullRelative(a.timestamp)}
- : a.type === "proposal_pay" ?
+ : a?.type === "proposal_pay" ?

Proposal pay

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
@{a.data.receiver} received {a.data.payment} from @{a.data.payer} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- // Crashes page will check later - : (a.data.id === "follow" && jsonData[1]!?.what.includes("blog")) ?
+ : (a?.data.id === "follow" && jsonData[1]!?.what?.includes("blog")) ?

Follow

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
@{jsonData[1]?.follower} started following @{jsonData[1].following} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : (a.data.id === "follow" && !jsonData[1].what.includes("blog")) ?
+ : (a?.data.id === "follow" && !jsonData[1]?.what?.includes("blog")) ?

Unfollow

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
@{jsonData[1].follower} unfollowed @{jsonData[1].following} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : a.data.id === "community" && jsonData?.includes("subscribe") ?
+ : (a?.data.id === "community" && jsonData?.includes("subscribe")) ?

Subscribe

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
- @{account?.name} + @{account?.name} Subscribed to community {jsonData[1]?.community} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : a.data.id === "community" && jsonData?.includes("unsubscribe") ?
+ :( a?.data.id === "community" && jsonData?.includes("unsubscribe")) ?

Unsubscribe

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
- @{account?.name} + @{account?.name} unsubscribed from community - {jsonData[1].community} + {jsonData[1]?.community} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
-
- : (a.type === "account_witness_vote" && a.data.approve) ?
+
+ : (a?.type === "account_witness_vote" && a?.data.approve) ?

Witness Vote

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
@{a.data.account} voted witness @{a.data.witness} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : (a.type === "account_witness_vote" && !a.data.approve) ?
+ : (a?.type === "account_witness_vote" && !a?.data.approve) ?

Unapprove witness Vote

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
@{a.data.account} unvoted witness @{a.data.witness} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : (a.type === "update_proposal_votes" && a.data.approve) ?
+ : (a?.type === "update_proposal_votes" && a?.data.approve) ?

Approve proposal

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
@{a.data.voter} approved proposal#{a.data.proposal_ids} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : (a.type === "update_proposal_votes" && !a.data.approve) ?
+ : (a?.type === "update_proposal_votes" && !a?.data.approve) ?

Unapprove proposal

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
@{a.data.voter} unapproved - proposal#{a.data.proposal_ids} + proposal#{a?.data.proposal_ids} - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : a.type === "account_update2" ?
+ : a?.type === "account_update2" ?

Account update

+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
- @{a.data.account} + @{a?.data.account} updated their account - Time: {dateToFullRelative(a.timestamp)} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
- : null} + : <>}
)})}
From 253dddfcd14a2b4fcd68918b5b8bce3199a78559 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Thu, 10 Aug 2023 01:26:28 +0100 Subject: [PATCH 05/17] background theme --- .../components/profile-activities/index.tsx | 490 +++++++++--------- 1 file changed, 246 insertions(+), 244 deletions(-) diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index 77a482732b5..054891ae34d 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -23,7 +23,6 @@ export const ProfileActivites = (props: any) => { const [loading, setLoading] = useState(false); useEffect(() => { - console.log(props) getActivities(); },[]); @@ -46,7 +45,7 @@ export const ProfileActivites = (props: any) => { const { timestamp, block } = op; const type = op.op[0]; const data = op.op[1]; - console.log(type) + // console.log(type) if (types.includes(type)) { return { @@ -63,7 +62,8 @@ export const ProfileActivites = (props: any) => { const filteredAccountHistory = accountHistory.filter((entry: any) => entry !== null); - console.log(accountHistory); + // console.log(response); + // console.log(filteredAccountHistory); setActivities(filteredAccountHistory.reverse()); setLoading(false); return filteredAccountHistory; @@ -77,7 +77,7 @@ export const ProfileActivites = (props: any) => { try { if(a?.data?.json){ jsonData = JSON.parse(a?.data?.json) - console.log(jsonData) + // console.log(jsonData) }; } catch (error) { console.log(error) @@ -95,8 +95,9 @@ export const ProfileActivites = (props: any) => { {activities?.map((a: any, i: number) => { const jsonData = handleCustomJson(a) return ( -
- {a?.type === "comment" && a.data.author === account?.name && a.data.parent_author !== "" ?
+ <> + { + a?.type === "comment" && a.data.author === account?.name && a.data.parent_author !== "" ?

Comment

@@ -156,12 +157,40 @@ export const ProfileActivites = (props: any) => {
- : a?.type === "vote" && a.data.voter === account?.name ?
-
-

Vote

-
-
-
+ : a?.type === "vote" && a.data.voter === account?.name ?
+
+

Vote

+
+
+
+
+ {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+
+ @{a.data.voter} + voted on + + {a.data.permlink} + + by + @{a.data.author} +
+ Time: {dateToFullRelative(a.timestamp)} +
+
+
+
+ : a?.type === "proposal_pay" ?
+
+

Proposal pay

+
+
+
{ProfileLink({ ...props, @@ -170,281 +199,254 @@ export const ProfileActivites = (props: any) => { })}
+ + @{a.data.receiver} + received {a.data.payment} from + @{a.data.payer} +
- @{a.data.voter} - voted on - - {a.data.permlink} - - by - @{a.data.author} + Time: {dateToFullRelative(a.timestamp)}
- Time: {dateToFullRelative(a.timestamp)} -
-
-
-
- : a?.type === "proposal_pay" ?
-
-

Proposal pay

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a.data.receiver} - received {a.data.payment} from - @{a.data.payer} - -
- Time: {dateToFullRelative(a.timestamp)}
-
- : (a?.data.id === "follow" && jsonData[1]!?.what?.includes("blog")) ?
-
-

Follow

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{jsonData[1]?.follower} - started following - @{jsonData[1].following} - + : (a?.data.id === "follow" && jsonData[1]!?.what?.includes("blog")) ?
+
+

Follow

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{jsonData[1]?.follower} + started following + @{jsonData[1].following} + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
-
- : (a?.data.id === "follow" && !jsonData[1]?.what?.includes("blog")) ?
-
-

Unfollow

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
- + : (a?.data.id === "follow" && !jsonData[1]?.what?.includes("blog")) ?
+
+

Unfollow

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{jsonData[1].follower} + unfollowed + @{jsonData[1].following} + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
-
- : (a?.data.id === "community" && jsonData?.includes("subscribe")) ?
-
-

Subscribe

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{account?.name} - Subscribed to community - {jsonData[1]?.community} - +
+ : (a?.data.id === "community" && jsonData?.includes("subscribe")) ?
+
+

Subscribe

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{account?.name} + Subscribed to community + {jsonData[1]?.community} + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
-
- :( a?.data.id === "community" && jsonData?.includes("unsubscribe")) ?
-
-

Unsubscribe

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{account?.name} - unsubscribed from community - {jsonData[1]?.community} - +
+ :( a?.data.id === "community" && jsonData?.includes("unsubscribe")) ?
+
+

Unsubscribe

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{account?.name} + unsubscribed from community + {jsonData[1]?.community} + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
- : (a?.type === "account_witness_vote" && a?.data.approve) ?
-
-

Witness Vote

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a.data.account} - voted witness - @{a.data.witness} - + : (a?.type === "account_witness_vote" && a?.data.approve) ?
+
+

Witness Vote

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{a.data.account} + voted witness + @{a.data.witness} + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
-
- : (a?.type === "account_witness_vote" && !a?.data.approve) ?
-
-

Unapprove witness Vote

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a.data.account} - unvoted witness - @{a.data.witness} - +
+ : (a?.type === "account_witness_vote" && !a?.data.approve) ?
+
+

Unapprove witness Vote

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{a.data.account} + unvoted witness + @{a.data.witness} + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
-
- : (a?.type === "update_proposal_votes" && a?.data.approve) ?
-
-

Approve proposal

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a.data.voter} - approved - proposal#{a.data.proposal_ids} - +
+ : (a?.type === "update_proposal_votes" && a?.data.approve) ?
+
+

Approve proposal

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{a.data.voter} + approved + proposal#{a.data.proposal_ids} + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
-
- : (a?.type === "update_proposal_votes" && !a?.data.approve) ?
-
-

Unapprove proposal

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a.data.voter} - unapproved - proposal#{a?.data.proposal_ids} - +
+ : (a?.type === "update_proposal_votes" && !a?.data.approve) ?
+
+

Unapprove proposal

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{a.data.voter} + unapproved + proposal#{a?.data.proposal_ids} + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
-
- : a?.type === "account_update2" ?
-
-

Account update

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a?.data.account} - updated their account - +
+ : a?.type === "account_update2" ?
+
+

Account update

+
+
+
- Time: {dateToFullRelative(a.timestamp)} + {ProfileLink({ + ...props, + username: account?.name, + children: + })} +
+
+ + @{a?.data.account} + updated their account + +
+ Time: {dateToFullRelative(a.timestamp)} +
-
-
- : <>} -
+
+ : <> + } + )})}
{!loading &&
From 9b3a11f83fa4fdbc477529daa66491dfe1a639bd Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Sat, 12 Aug 2023 23:10:59 +0100 Subject: [PATCH 06/17] Add filters --- .../components/profile-activities/index.scss | 145 ++-- .../components/profile-activities/index.tsx | 664 +++++++++--------- 2 files changed, 436 insertions(+), 373 deletions(-) diff --git a/src/common/components/profile-activities/index.scss b/src/common/components/profile-activities/index.scss index ba598abe8a7..4320218a10d 100644 --- a/src/common/components/profile-activities/index.scss +++ b/src/common/components/profile-activities/index.scss @@ -12,64 +12,125 @@ align-self: center; } - .activities{ + .activities-bottom{ display: flex; - flex-direction: column; - justify-content: center; - gap: 3px; width: 100%; - height: fit-content; - padding: 10px; - border-radius: 5px; + padding: 20px; + gap: 20px; - // @include themify(day) { - // background: #f9f9f9; - // // color: $steel-grey; - // color: #535e65; - // } + .activities-filter{ + position: sticky; + flex: 1; - // @include themify(night) { - // background: #161d26; - // // color: $pinkish-grey; - // color: #fcfcfc; - // } - &:nth-child(odd) { - @include themify(day) { - background: $white-three; - } - - @include themify(night) { - background: $dark-two; - } - } + .filter-dropdown{ + display: flex; + flex-direction: column; + padding: 5px; + margin-bottom: 15px; + + @include themify(day) { + border-bottom: 1px solid #f5f5f5; + } + + @include themify(night) { + border-bottom: 1px solid #161d26; + } - .activities-header{ - justify-self: center; - align-self: center; - font-size: 14px; - } + .dropdown-header{ + align-self: center; + } + } - .activities-info-wrapper{ + .filter-container{ display: flex; - gap: 10px; + flex-direction: column; - .activities-body{ - flex: 2; + .filter-header{ + align-self: center; } - - .activities-details{ - flex: 1; + + .filter-wrapper{ + padding: 5px; display: flex; - align-items: center; - gap: 5px; + flex-direction: column; + justify-content: space-between; - .activity-info{ + .filter-types{ display: flex; flex-direction: column; - gap: 5px; + gap: 10px; + padding: 10px; + + @include themify(day) { + border-bottom: 1px solid #f5f5f5; + } + + @include themify(night) { + border-bottom: 1px solid #161d26; + } } } + + } } + .activities-wrapper{ + flex: 4; + + .activities{ + display: flex; + flex-direction: column; + justify-content: center; + gap: 3px; + // width: 75%; + height: fit-content; + padding: 10px; + border-radius: 8px; + + &:nth-child(odd) { + @include themify(day) { + background: $white-three; + } + + @include themify(night) { + background: $dark-two; + } + } + + .activities-header{ + justify-self: center; + align-self: center; + font-size: 14px; + } + + .activities-info-wrapper{ + display: flex; + gap: 10px; + + .activities-body{ + flex: 2; + } + + .activities-details{ + flex: 1; + display: flex; + align-items: center; + gap: 15px; + + .activity-icon{ + width: 20px; + } + + .activity-info{ + display: flex; + flex-direction: column; + gap: 5px; + } + } + } + + } + } } + } \ No newline at end of file diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index 054891ae34d..0a4286f0d67 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -11,6 +11,9 @@ import UserAvatar from "../user-avatar"; import activeUser from "../../store/active-user" import { Transaction } from "@hiveio/dhive" import { DynamicProps } from "../../store/dynamic-props/types" +import { upvote, commentSvg, ticketSvg, starSvg, peopleSvg } from "../../img/svg" +import DropDown from "../dropdown" +import { _t } from "../../i18n" // interface Props{ // } @@ -21,6 +24,7 @@ export const ProfileActivites = (props: any) => { const [activities, setActivities] = useState([]); const [loading, setLoading] = useState(false); + const [label, setLabel] = useState("") useEffect(() => { getActivities(); @@ -45,7 +49,6 @@ export const ProfileActivites = (props: any) => { const { timestamp, block } = op; const type = op.op[0]; const data = op.op[1]; - // console.log(type) if (types.includes(type)) { return { @@ -77,381 +80,380 @@ export const ProfileActivites = (props: any) => { try { if(a?.data?.json){ jsonData = JSON.parse(a?.data?.json) - // console.log(jsonData) }; } catch (error) { console.log(error) } return jsonData - } + }; + + const dropDown = ( +
+
+ {(() => { + let dropDownConfig: any; + dropDownConfig = { + history: "", + label: label ? label : "All", + items: [ + { + label: Comments, + onClick: () => { + setLabel("Comments"); + } + }, + { + label: Replies, + onClick: () => { + setLabel("Replies"); + } + }, + { + label: Likes, + onClick: () => { + setLabel("Likes"); + } + }, + { + label: Follows, + onClick: () => { + setLabel("Follows"); + } + }, + { + label: Communities, + onClick: () => { + setLabel("Communities"); + } + }, + { + label: Curation rewards, + onClick: () => { + setLabel("Curation rewards"); + } + }, + { + label: Witness votes, + onClick: () => { + setLabel("Witness votes"); + } + }, + { + label: Proposal votes, + onClick: () => { + setLabel("Proposal votes"); + } + } + ] + }; + return ( +
+ +
+ ); + })()} +
+
+ ); return ( <> {loading && }
- All activities related to @{account?.name}'s account + Activities related to @{account?.name}'s account
- {activities?.map((a: any, i: number) => { - const jsonData = handleCustomJson(a) - return ( - <> - { - a?.type === "comment" && a.data.author === account?.name && a.data.parent_author !== "" ?
-
-

Comment

-
-
-
-
- {ProfileLink({ - ...props, - username: a.data.author, - children: - })} -
-
- - @{a.data.author} - commented on - - {a.data.parent_permlink} - - by - @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} - -
- Time: {dateToFullRelative(a.timestamp)} +
+
+ {activities?.map((a: any, i: number) => { + const jsonData = handleCustomJson(a) + return ( + <> + { + a?.type === "comment" && a.data.author === account?.name && a.data.parent_author !== "" ?
+
+
+
+ {commentSvg} +
+
+ + commented on + + {a.data.parent_permlink} + + by + @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} + +
+ {dateToFullRelative(a.timestamp)} +
+
-
-
-
- : a?.type === "comment" && a.data.parent_author === account?.name && a.data.author !== account?.name ?
-
-

Reply

-
-
-
-
- {ProfileLink({ - ...props, - username: a.data.author, - children: - })} -
-
- - @{a.data.author} - replied to - - {a.data.parent_permlink} - - by - @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} - -
- Time: {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : a?.type === "vote" && a.data.voter === account?.name ?
-
-

Vote

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
-
- @{a.data.voter} - voted on - - {a.data.permlink} - +
+ : a?.type === "comment" && a.data.parent_author === account?.name && a.data.author !== account?.name ?
+
+
+
+ {commentSvg} +
+
+ + replied to + + {a.data.parent_permlink} + by - @{a.data.author} + @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} + +
+ {dateToFullRelative(a.timestamp)} +
- Time: {dateToFullRelative(a.timestamp)}
-
-
-
- : a?.type === "proposal_pay" ?
-
-

Proposal pay

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })}
-
- - @{a.data.receiver} - received {a.data.payment} from - @{a.data.payer} - -
- Time: {dateToFullRelative(a.timestamp)} +
+ : a?.type === "vote" && a.data.voter === account?.name ?
+
+
+
+ {upvote} +
+
+
+ voted on + + {a.data.permlink} + + by + @{a.data.author} +
+ {dateToFullRelative(a.timestamp)} +
-
-
-
- : (a?.data.id === "follow" && jsonData[1]!?.what?.includes("blog")) ?
-
-

Follow

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{jsonData[1]?.follower} - started following - @{jsonData[1].following} - -
- Time: {dateToFullRelative(a.timestamp)} +
+ : a?.type === "proposal_pay" ?
+
+
+
+ {ticketSvg} +
+
+ + received {a.data.payment} from + @{a.data.payer} + +
+ {dateToFullRelative(a.timestamp)} +
+
-
-
- : (a?.data.id === "follow" && !jsonData[1]?.what?.includes("blog")) ?
-
-

Unfollow

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{jsonData[1].follower} - unfollowed - @{jsonData[1].following} - -
- Time: {dateToFullRelative(a.timestamp)} + : (a?.data.id === "follow" && jsonData[1]!?.what?.includes("blog")) ?
+
+
+
+ {starSvg} +
+
+ + started following + @{jsonData[1].following} + +
+ {dateToFullRelative(a.timestamp)} +
+
-
-
-
- : (a?.data.id === "community" && jsonData?.includes("subscribe")) ?
-
-

Subscribe

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{account?.name} - Subscribed to community - {jsonData[1]?.community} - -
- Time: {dateToFullRelative(a.timestamp)} +
+ : (a?.data.id === "follow" && !jsonData[1]?.what?.includes("blog")) ?
+
+
+
+ {starSvg} +
+
+ + unfollowed + @{jsonData[1].following} + +
+ {dateToFullRelative(a.timestamp)} +
+
-
-
-
- :( a?.data.id === "community" && jsonData?.includes("unsubscribe")) ?
-
-

Unsubscribe

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{account?.name} - unsubscribed from community - {jsonData[1]?.community} - -
- Time: {dateToFullRelative(a.timestamp)} +
+ : (a?.data.id === "community" && jsonData?.includes("subscribe")) ?
+
+
+
+ {peopleSvg} +
+
+ + Subscribed to community + {jsonData[1]?.community} + +
+ {dateToFullRelative(a.timestamp)} +
+
-
-
-
- : (a?.type === "account_witness_vote" && a?.data.approve) ?
-
-

Witness Vote

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a.data.account} - voted witness - @{a.data.witness} - -
- Time: {dateToFullRelative(a.timestamp)} +
+ :( a?.data.id === "community" && jsonData?.includes("unsubscribe")) ?
+
+
+
+ {peopleSvg} +
+
+ + unsubscribed from community + {jsonData[1]?.community} + +
+ {dateToFullRelative(a.timestamp)} +
+
-
-
- : (a?.type === "account_witness_vote" && !a?.data.approve) ?
-
-

Unapprove witness Vote

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a.data.account} - unvoted witness - @{a.data.witness} - -
- Time: {dateToFullRelative(a.timestamp)} + : (a?.type === "account_witness_vote" && a?.data.approve) ?
+
+
+
+ {upvote} +
+
+ voted witness + @{a.data.witness} + +
+ {dateToFullRelative(a.timestamp)} +
+
-
-
-
- : (a?.type === "update_proposal_votes" && a?.data.approve) ?
-
-

Approve proposal

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} +
+ : (a?.type === "account_witness_vote" && !a?.data.approve) ?
+
+
+
+ {upvote} +
+
+ unvoted witness + @{a.data.witness} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
-
- - @{a.data.voter} - approved - proposal#{a.data.proposal_ids} - -
- Time: {dateToFullRelative(a.timestamp)} +
+ : (a?.type === "update_proposal_votes" && a?.data.approve) ?
+
+
+
+ {upvote} +
+
+ + approved + proposal#{a.data.proposal_ids} + +
+ {dateToFullRelative(a.timestamp)} +
+
-
-
-
- : (a?.type === "update_proposal_votes" && !a?.data.approve) ?
-
-

Unapprove proposal

-
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} +
+ : (a?.type === "update_proposal_votes" && !a?.data.approve) ?
+
+
+
+ {upvote} +
+
+ + @{a.data.voter} + unapproved + proposal#{a?.data.proposal_ids} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
-
- - @{a.data.voter} - unapproved - proposal#{a?.data.proposal_ids} - -
- Time: {dateToFullRelative(a.timestamp)} +
+ : a?.type === "account_update2" ?
+
+
+
+ {starSvg} +
+
+ + @{a?.data.account} + updated their account + +
+ {dateToFullRelative(a.timestamp)} +
+
-
+
+ : <> + } + + )})} + {!loading &&
+ +
} +
+
+
+
+
Filter activities
-
- : a?.type === "account_update2" ?
-
-

Account update

+
+ {dropDown}
-
-
-
- {ProfileLink({ - ...props, - username: account?.name, - children: - })} -
-
- - @{a?.data.account} - updated their account - -
- Time: {dateToFullRelative(a.timestamp)} -
-
+
+
+
+
Activity Types
+
+
+
+ Comments + Replies + Votes + Follows +
+
+ Witness votes + Proposal votes + Communities +
+
+ Curation rewards
-
- : <> - } - - )})} +
+
+
- {!loading &&
- -
} ) } From 6b124e20d330302c356b342f115abc6cfbcbc08d Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Thu, 17 Aug 2023 14:03:13 +0100 Subject: [PATCH 07/17] fix key --- .../profile-activities/activities.tsx | 259 ++++++++++++++++ .../components/profile-activities/index.tsx | 288 ++---------------- src/common/components/profile-menu/index.tsx | 11 +- src/common/pages/profile-functional.tsx | 2 +- src/common/store/global/types.ts | 1 + 5 files changed, 289 insertions(+), 272 deletions(-) create mode 100644 src/common/components/profile-activities/activities.tsx diff --git a/src/common/components/profile-activities/activities.tsx b/src/common/components/profile-activities/activities.tsx new file mode 100644 index 00000000000..386126ea5ce --- /dev/null +++ b/src/common/components/profile-activities/activities.tsx @@ -0,0 +1,259 @@ +import React from 'react' +import { dateToFullRelative } from '../../helper/parse-date'; +import { Link } from 'react-router-dom'; +import { upvote, ticketSvg, starSvg, peopleSvg, commentSvg } from '../../img/svg'; + +const UserActivities = (props: any) => { + const { a, account, jsonData, i } = props; + + return ( +
+ {a?.type === "comment" && a?.data.parent_author === "" ? <> +
+
+
+ {commentSvg} +
+
+ + commented on + + {a.data.parent_permlink} + + by + @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : a?.type === "comment" && a?.data.author !== account?.name ? <> +
+
+
+ {commentSvg} +
+
+ + replied to + + {a.data.parent_permlink} + + by + @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : a?.type === "vote" ? <> +
+
+
+ {upvote} +
+
+
+ voted on + + {a.data.permlink} + + by + @{a.data.author} +
+ {dateToFullRelative(a.timestamp)} +
+
+
+ + : a?.type === "proposal_pay" ? <> +
+
+
+ {ticketSvg} +
+
+ + received {a.data.payment} from + @{a.data.payer} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : (a?.data.id === "follow" && jsonData[1]!?.what?.includes("blog")) ? <> +
+
+
+ {starSvg} +
+
+ + started following + @{jsonData[1].following} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : (a?.data.id === "follow" && !jsonData[1]?.what?.includes("blog")) ? <> +
+
+
+ {starSvg} +
+
+ + unfollowed + @{jsonData[1].following} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : (a?.data.id === "community" && jsonData?.includes("subscribe")) ? <> +
+
+
+ {peopleSvg} +
+
+ + Subscribed to community + {jsonData[1]?.community} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + :( a?.data.id === "community" && jsonData?.includes("unsubscribe")) ? <> +
+
+
+ {peopleSvg} +
+
+ + unsubscribed from community + {jsonData[1]?.community} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : (a?.type === "account_witness_vote" && a?.data.approve) ? <> +
+
+
+ {upvote} +
+
+ voted witness + @{a.data.witness} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : (a?.type === "account_witness_vote" && !a?.data.approve) ? <> +
+
+
+ {upvote} +
+
+ unvoted witness + @{a.data.witness} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : (a?.type === "update_proposal_votes" && a?.data.approve) ? <> +
+
+
+ {upvote} +
+
+ + approved + proposal#{a.data.proposal_ids} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : (a?.type === "update_proposal_votes" && !a?.data.approve) ? <> +
+
+
+ {upvote} +
+
+ + @{a.data.voter} + unapproved + proposal#{a?.data.proposal_ids} + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : a?.type === "account_update2" ? <> +
+
+
+ {starSvg} +
+
+ + @{a?.data.account} + updated their account + +
+ {dateToFullRelative(a.timestamp)} +
+
+
+
+ + : <>{jsonData[1][0]}} +
+ ) +} + +export default UserActivities; \ No newline at end of file diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index 0a4286f0d67..780f9fc89c9 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -14,6 +14,7 @@ import { DynamicProps } from "../../store/dynamic-props/types" import { upvote, commentSvg, ticketSvg, starSvg, peopleSvg } from "../../img/svg" import DropDown from "../dropdown" import { _t } from "../../i18n" +import UserActivities from "./activities" // interface Props{ // } @@ -44,32 +45,32 @@ export const ProfileActivites = (props: any) => { try { const response = await getAllActiviies(account.name); - const accountHistory = response.map((entry: [any, any]) => { + const filterResponse = response.filter((r: any) => { + const filterTypes = types.includes(r[1].op[0]); + // console.log(filterTypes, r[1].op[0]) + return filterTypes; + + }); + const accountHistory = filterResponse.map((entry: [any, any]) => { const [index, op] = entry; const { timestamp, block } = op; const type = op.op[0]; const data = op.op[1]; - - if (types.includes(type)) { - return { + + return { index, timestamp, block, type, data, }; - } else { - return null; - } }); - - const filteredAccountHistory = accountHistory.filter((entry: any) => entry !== null); - - // console.log(response); - // console.log(filteredAccountHistory); - setActivities(filteredAccountHistory.reverse()); + + const filterNotifications = accountHistory.filter((a: any) => a?.data.id !== "notify" && a?.data.id !== "ecency_notify") + + setActivities(filterNotifications.reverse()); setLoading(false); - return filteredAccountHistory; + return filterNotifications; } catch (err) { console.log(err); } @@ -159,263 +160,18 @@ export const ProfileActivites = (props: any) => { return ( <> {loading && } -
+
Activities related to @{account?.name}'s account
{activities?.map((a: any, i: number) => { - const jsonData = handleCustomJson(a) + // console.log(a) + const jsonData = handleCustomJson(a) + // console.log(jsonData) return ( - <> - { - a?.type === "comment" && a.data.author === account?.name && a.data.parent_author !== "" ?
-
-
-
- {commentSvg} -
-
- - commented on - - {a.data.parent_permlink} - - by - @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : a?.type === "comment" && a.data.parent_author === account?.name && a.data.author !== account?.name ?
-
-
-
- {commentSvg} -
-
- - replied to - - {a.data.parent_permlink} - - by - @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : a?.type === "vote" && a.data.voter === account?.name ?
-
-
-
- {upvote} -
-
-
- voted on - - {a.data.permlink} - - by - @{a.data.author} -
- {dateToFullRelative(a.timestamp)} -
-
-
-
- : a?.type === "proposal_pay" ?
-
-
-
- {ticketSvg} -
-
- - received {a.data.payment} from - @{a.data.payer} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : (a?.data.id === "follow" && jsonData[1]!?.what?.includes("blog")) ?
-
-
-
- {starSvg} -
-
- - started following - @{jsonData[1].following} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : (a?.data.id === "follow" && !jsonData[1]?.what?.includes("blog")) ?
-
-
-
- {starSvg} -
-
- - unfollowed - @{jsonData[1].following} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : (a?.data.id === "community" && jsonData?.includes("subscribe")) ?
-
-
-
- {peopleSvg} -
-
- - Subscribed to community - {jsonData[1]?.community} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- :( a?.data.id === "community" && jsonData?.includes("unsubscribe")) ?
-
-
-
- {peopleSvg} -
-
- - unsubscribed from community - {jsonData[1]?.community} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : (a?.type === "account_witness_vote" && a?.data.approve) ?
-
-
-
- {upvote} -
-
- voted witness - @{a.data.witness} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : (a?.type === "account_witness_vote" && !a?.data.approve) ?
-
-
-
- {upvote} -
-
- unvoted witness - @{a.data.witness} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : (a?.type === "update_proposal_votes" && a?.data.approve) ?
-
-
-
- {upvote} -
-
- - approved - proposal#{a.data.proposal_ids} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : (a?.type === "update_proposal_votes" && !a?.data.approve) ?
-
-
-
- {upvote} -
-
- - @{a.data.voter} - unapproved - proposal#{a?.data.proposal_ids} - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : a?.type === "account_update2" ?
-
-
-
- {starSvg} -
-
- - @{a?.data.account} - updated their account - -
- {dateToFullRelative(a.timestamp)} -
-
-
-
-
- : <> - } - + )})} {!loading &&
@@ -439,12 +195,12 @@ export const ProfileActivites = (props: any) => { Comments Replies Votes - Follows + Communities
+ Follows Witness votes Proposal votes - Communities
Curation rewards diff --git a/src/common/components/profile-menu/index.tsx b/src/common/components/profile-menu/index.tsx index f9dbb5cef5c..624e90fabca 100644 --- a/src/common/components/profile-menu/index.tsx +++ b/src/common/components/profile-menu/index.tsx @@ -32,7 +32,7 @@ export class ProfileMenu extends Component { render() { const { username, section, activeUser } = this.props; - const kebabMenuItems: MenuItem[] = ["trail", "replies", "communities", "activities"].map((x) => { + const kebabMenuItems: MenuItem[] = ["trail", "replies", "communities", "comments"].map((x) => { return { label: _t(`profile.section-${x}`), href: `/@${username}/${x}`, @@ -49,7 +49,7 @@ export class ProfileMenu extends Component { }; const menuItems: MenuItem[] = [ - ...[ProfileFilter.blog, ProfileFilter.posts, ProfileFilter.comments].map((x) => { + ...[ProfileFilter.blog, ProfileFilter.posts, ProfileFilter.activities].map((x) => { return { label: _t(`profile.section-${x}`), href: `/@${username}/${x}`, @@ -66,7 +66,8 @@ export class ProfileMenu extends Component { } = { history: this.props.history, label: ProfileFilter[section] ? _t(`profile.section-${section}`) : "", - items: [...menuItems, ...kebabMenuItems.filter((item) => item.selected)] + items: [...menuItems] + // items: [...menuItems, ...kebabMenuItems.filter((item) => item.selected)] }; const dropDownMenuItems: MenuItem[] = [ @@ -157,9 +158,9 @@ export class ProfileMenu extends Component { {_t(`profile.section-settings`)} )} -
+ {/*
-
+
*/}
diff --git a/src/common/pages/profile-functional.tsx b/src/common/pages/profile-functional.tsx index 843445e9fb1..0353afa4ccf 100644 --- a/src/common/pages/profile-functional.tsx +++ b/src/common/pages/profile-functional.tsx @@ -438,7 +438,7 @@ export const Profile = (props: Props) => {
{ProfileMenu({ ...props, username, section })} - {[...Object.keys(ProfileFilter), "communities"].includes(section) && + {[...Object.keys(ProfileFilter), "communities"].includes(section) && section !== "activities" && ProfileCover({ ...props, account })} {data && diff --git a/src/common/store/global/types.ts b/src/common/store/global/types.ts index b4c2a58b910..25b5a750475 100644 --- a/src/common/store/global/types.ts +++ b/src/common/store/global/types.ts @@ -26,6 +26,7 @@ export enum EntryFilter { export enum ProfileFilter { blog = "blog", posts = "posts", + activities = "activities", comments = "comments", replies = "replies" } From 37b225617aaf73836d5443558913febf6def8810 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Fri, 18 Aug 2023 10:06:39 +0100 Subject: [PATCH 08/17] new files and folder --- .../activities-dropdown.tsx | 91 ++++++++++++ .../profile-activities/activities-types.tsx | 37 +++++ .../profile-activities/activities.tsx | 20 ++- .../components/profile-activities/index.scss | 6 +- .../components/profile-activities/index.tsx | 134 +++--------------- .../profile-activities/types/types.ts | 22 +++ 6 files changed, 186 insertions(+), 124 deletions(-) create mode 100644 src/common/components/profile-activities/activities-dropdown.tsx create mode 100644 src/common/components/profile-activities/activities-types.tsx create mode 100644 src/common/components/profile-activities/types/types.ts diff --git a/src/common/components/profile-activities/activities-dropdown.tsx b/src/common/components/profile-activities/activities-dropdown.tsx new file mode 100644 index 00000000000..966018929d1 --- /dev/null +++ b/src/common/components/profile-activities/activities-dropdown.tsx @@ -0,0 +1,91 @@ +import React, { useState } from 'react' +import DropDown from "../dropdown" + +interface Props { + +} + +const ActivitiesDropdown = (props: Props) => { + + const [label, setLabel] = useState("") + + const dropDown = ( +
+
+ {(() => { + let dropDownConfig: any; + dropDownConfig = { + history: "", + label: label ? label : "All", + items: [ + { + label: Comments, + onClick: () => { + setLabel("Comments"); + } + }, + { + label: Replies, + onClick: () => { + setLabel("Replies"); + } + }, + { + label: Likes, + onClick: () => { + setLabel("Likes"); + } + }, + { + label: Follows, + onClick: () => { + setLabel("Follows"); + } + }, + { + label: Communities, + onClick: () => { + setLabel("Communities"); + } + }, + { + label: Curation rewards, + onClick: () => { + setLabel("Curation rewards"); + } + }, + { + label: Witness votes, + onClick: () => { + setLabel("Witness votes"); + } + }, + { + label: Proposal votes, + onClick: () => { + setLabel("Proposal votes"); + } + } + ] + }; + return ( +
+ +
+ ); + })()} +
+
+ ); + + return ( + <> +
+
Filter activities
+
+ {dropDown} + + ) +} + +export default ActivitiesDropdown \ No newline at end of file diff --git a/src/common/components/profile-activities/activities-types.tsx b/src/common/components/profile-activities/activities-types.tsx new file mode 100644 index 00000000000..3e96a0787a2 --- /dev/null +++ b/src/common/components/profile-activities/activities-types.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { Account } from "../../store/accounts/types" + +interface Props { + account: Account; +} + +const ActivitiesTypes = (props: Props) => { + + const { account } = props; + return ( +
+
+
Activity Types
+
+
+
+ Comments + Replies + Votes + Communities +
+
+ Follows + Witness votes + Proposal votes +
+
+ Curation rewards +
+
+
+ ) +} + +export default ActivitiesTypes \ No newline at end of file diff --git a/src/common/components/profile-activities/activities.tsx b/src/common/components/profile-activities/activities.tsx index 386126ea5ce..a6a6652ffe7 100644 --- a/src/common/components/profile-activities/activities.tsx +++ b/src/common/components/profile-activities/activities.tsx @@ -2,12 +2,22 @@ import React from 'react' import { dateToFullRelative } from '../../helper/parse-date'; import { Link } from 'react-router-dom'; import { upvote, ticketSvg, starSvg, peopleSvg, commentSvg } from '../../img/svg'; +import { Account } from '../../store/accounts/types'; +import { ActivityTypes } from './types/types'; + -const UserActivities = (props: any) => { - const { a, account, jsonData, i } = props; +interface Props { + a: ActivityTypes; + account: Account; + jsonData: any; +} + +const UserActivities = (props: Props) => { + + const { a, account, jsonData } = props; return ( -
+ <> {a?.type === "comment" && a?.data.parent_author === "" ? <>
@@ -251,8 +261,8 @@ const UserActivities = (props: any) => {
- : <>{jsonData[1][0]}} -
+ : <>} + ) } diff --git a/src/common/components/profile-activities/index.scss b/src/common/components/profile-activities/index.scss index 4320218a10d..b7f3568e1a4 100644 --- a/src/common/components/profile-activities/index.scss +++ b/src/common/components/profile-activities/index.scss @@ -41,15 +41,15 @@ } } - .filter-container{ + .types-container{ display: flex; flex-direction: column; - .filter-header{ + .types-header{ align-self: center; } - .filter-wrapper{ + .types-wrapper{ padding: 5px; display: flex; flex-direction: column; diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index 780f9fc89c9..f0a8b5c6549 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -1,31 +1,26 @@ import React, { useEffect, useState } from "react" import { getAllActiviies } from "../../api/hive" -import { dateToFullRelative } from "../../helper/parse-date" import "./index.scss" import { Link } from "react-router-dom" import LinearProgress from "../linear-progress" import { Account } from "../../store/accounts/types" import { Button } from "react-bootstrap" -import ProfileLink from "../profile-link"; -import UserAvatar from "../user-avatar"; -import activeUser from "../../store/active-user" -import { Transaction } from "@hiveio/dhive" -import { DynamicProps } from "../../store/dynamic-props/types" -import { upvote, commentSvg, ticketSvg, starSvg, peopleSvg } from "../../img/svg" -import DropDown from "../dropdown" import { _t } from "../../i18n" import UserActivities from "./activities" +import ActivitiesDropdown from "./activities-dropdown" +import ActivitiesTypes from "./activities-types" +import { ActivityTypes } from './types/types'; -// interface Props{ -// } +interface Props{ + account: Account; +} -export const ProfileActivites = (props: any) => { +export const ProfileActivites = (props: Props) => { const { account } = props; - const [activities, setActivities] = useState([]); + const [activities, setActivities] = useState([]); const [loading, setLoading] = useState(false); - const [label, setLabel] = useState("") useEffect(() => { getActivities(); @@ -47,11 +42,10 @@ export const ProfileActivites = (props: any) => { const response = await getAllActiviies(account.name); const filterResponse = response.filter((r: any) => { const filterTypes = types.includes(r[1].op[0]); - // console.log(filterTypes, r[1].op[0]) return filterTypes; }); - const accountHistory = filterResponse.map((entry: [any, any]) => { + const accountHistory = filterResponse.map((entry: any) => { const [index, op] = entry; const { timestamp, block } = op; const type = op.op[0]; @@ -66,7 +60,7 @@ export const ProfileActivites = (props: any) => { }; }); - const filterNotifications = accountHistory.filter((a: any) => a?.data.id !== "notify" && a?.data.id !== "ecency_notify") + const filterNotifications = accountHistory.filter((a: ActivityTypes) => a?.data.id !== "notify" && a?.data.id !== "ecency_notify") setActivities(filterNotifications.reverse()); setLoading(false); @@ -76,7 +70,7 @@ export const ProfileActivites = (props: any) => { } }; - const handleCustomJson = (a: any): any => { + const handleCustomJson = (a: ActivityTypes) => { let jsonData; try { if(a?.data?.json){ @@ -88,75 +82,6 @@ export const ProfileActivites = (props: any) => { return jsonData }; - const dropDown = ( -
-
- {(() => { - let dropDownConfig: any; - dropDownConfig = { - history: "", - label: label ? label : "All", - items: [ - { - label: Comments, - onClick: () => { - setLabel("Comments"); - } - }, - { - label: Replies, - onClick: () => { - setLabel("Replies"); - } - }, - { - label: Likes, - onClick: () => { - setLabel("Likes"); - } - }, - { - label: Follows, - onClick: () => { - setLabel("Follows"); - } - }, - { - label: Communities, - onClick: () => { - setLabel("Communities"); - } - }, - { - label: Curation rewards, - onClick: () => { - setLabel("Curation rewards"); - } - }, - { - label: Witness votes, - onClick: () => { - setLabel("Witness votes"); - } - }, - { - label: Proposal votes, - onClick: () => { - setLabel("Proposal votes"); - } - } - ] - }; - return ( -
- -
- ); - })()} -
-
- ); - return ( <> {loading && } @@ -166,12 +91,12 @@ export const ProfileActivites = (props: any) => {
- {activities?.map((a: any, i: number) => { - // console.log(a) + {activities?.map((a: ActivityTypes, i: number) => { const jsonData = handleCustomJson(a) - // console.log(jsonData) return ( - +
+ +
)})} {!loading &&
@@ -179,33 +104,10 @@ export const ProfileActivites = (props: any) => {
-
-
Filter activities
-
-
- {dropDown} -
+
-
-
-
Activity Types
-
-
-
- Comments - Replies - Votes - Communities -
-
- Follows - Witness votes - Proposal votes -
-
- Curation rewards -
-
+
+
diff --git a/src/common/components/profile-activities/types/types.ts b/src/common/components/profile-activities/types/types.ts new file mode 100644 index 00000000000..2a3cc98b18b --- /dev/null +++ b/src/common/components/profile-activities/types/types.ts @@ -0,0 +1,22 @@ +export interface ActivityTypes { + type: string; + data: { + parent_author?: string; + parent_permlink?: string; + author?: string; + permlink?: string; + payment?: number; + payer?: string; + following?: string; + community?: string; + approve?: boolean; + proposal_ids?: string; + account?: string; + id?: string; + what?: string[]; + voter?: string; + witness?: string; + json: string; + }; + timestamp: string; + } \ No newline at end of file From efe7b99ab2ea132f5a4cccd6c3dea6f890f8079e Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Tue, 22 Aug 2023 09:51:58 +0100 Subject: [PATCH 09/17] changed operations fetching logic --- src/common/api/hive.ts | 3 - .../activities-dropdown.tsx | 13 ++- .../profile-activities/activities.tsx | 59 ++++++------ .../components/profile-activities/index.tsx | 63 ++++-------- .../profile-activities/operations.ts | 96 +++++++++++++++++++ .../types/activities-group.ts | 8 ++ .../profile-activities/types/types.ts | 2 - 7 files changed, 165 insertions(+), 79 deletions(-) create mode 100644 src/common/components/profile-activities/operations.ts create mode 100644 src/common/components/profile-activities/types/activities-group.ts diff --git a/src/common/api/hive.ts b/src/common/api/hive.ts index 52f33855feb..5da3780c022 100644 --- a/src/common/api/hive.ts +++ b/src/common/api/hive.ts @@ -656,6 +656,3 @@ export const getRcOperationStats = (): Promise => client.call("rc_api", "ge export const getContentReplies = (author: string, permlink: string): Promise => client.call("condenser_api", "get_content_replies", { author, permlink }); - - export const getAllActiviies = async (username: string, limit = 100) => - client.call('condenser_api', 'get_account_history', [username, -1, limit, ]); diff --git a/src/common/components/profile-activities/activities-dropdown.tsx b/src/common/components/profile-activities/activities-dropdown.tsx index 966018929d1..6a873903741 100644 --- a/src/common/components/profile-activities/activities-dropdown.tsx +++ b/src/common/components/profile-activities/activities-dropdown.tsx @@ -1,12 +1,15 @@ import React, { useState } from 'react' import DropDown from "../dropdown" +import { ActivitiesGroup } from "./types/activities-group" interface Props { - + setFilter: React.Dispatch> } const ActivitiesDropdown = (props: Props) => { + const { setFilter } = props; + const [label, setLabel] = useState("") const dropDown = ( @@ -22,48 +25,56 @@ const ActivitiesDropdown = (props: Props) => { label: Comments, onClick: () => { setLabel("Comments"); + setFilter("comment"); } }, { label: Replies, onClick: () => { setLabel("Replies"); + setFilter("comment"); } }, { label: Likes, onClick: () => { setLabel("Likes"); + setFilter("customJson"); } }, { label: Follows, onClick: () => { setLabel("Follows"); + setFilter("customJson"); } }, { label: Communities, onClick: () => { setLabel("Communities"); + setFilter("customJson"); } }, { label: Curation rewards, onClick: () => { setLabel("Curation rewards"); + // setFilter("Curation rewards"); } }, { label: Witness votes, onClick: () => { setLabel("Witness votes"); + setFilter("witnessVote"); } }, { label: Proposal votes, onClick: () => { setLabel("Proposal votes"); + setFilter("proposalVote"); } } ] diff --git a/src/common/components/profile-activities/activities.tsx b/src/common/components/profile-activities/activities.tsx index a6a6652ffe7..12d38c905be 100644 --- a/src/common/components/profile-activities/activities.tsx +++ b/src/common/components/profile-activities/activities.tsx @@ -18,7 +18,7 @@ const UserActivities = (props: Props) => { return ( <> - {a?.type === "comment" && a?.data.parent_author === "" ? <> + {a?.type === "comment" && a?.parent_author === "" ? <>
@@ -27,11 +27,11 @@ const UserActivities = (props: Props) => {
commented on - - {a.data.parent_permlink} + + {a.parent_permlink} by - @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} + @{a.parent_author === "" ? a.author : a.parent_author}
{dateToFullRelative(a.timestamp)} @@ -40,7 +40,7 @@ const UserActivities = (props: Props) => {
- : a?.type === "comment" && a?.data.author !== account?.name ? <> + : a?.type === "comment" && a?.author !== account?.name ? <>
@@ -49,11 +49,11 @@ const UserActivities = (props: Props) => {
replied to - - {a.data.parent_permlink} + + {a.parent_permlink} by - @{a.data.parent_author === "" ? a.data.author : a.data.parent_author} + @{a.parent_author === "" ? a.author : a.parent_author}
{dateToFullRelative(a.timestamp)} @@ -71,11 +71,11 @@ const UserActivities = (props: Props) => {
voted on - - {a.data.permlink} + + {a.permlink} by - @{a.data.author} + @{a.author}
{dateToFullRelative(a.timestamp)}
@@ -90,8 +90,8 @@ const UserActivities = (props: Props) => {
- received {a.data.payment} from - @{a.data.payer} + received {a.payment} from + @{a.payer}
{dateToFullRelative(a.timestamp)} @@ -100,7 +100,7 @@ const UserActivities = (props: Props) => {
- : (a?.data.id === "follow" && jsonData[1]!?.what?.includes("blog")) ? <> + : (a?.id === "follow" && jsonData[1]!?.what?.includes("blog")) ? <>
@@ -118,7 +118,7 @@ const UserActivities = (props: Props) => {
- : (a?.data.id === "follow" && !jsonData[1]?.what?.includes("blog")) ? <> + : (a?.id === "follow" && !jsonData[1]?.what?.includes("blog")) ? <>
@@ -136,7 +136,7 @@ const UserActivities = (props: Props) => {
- : (a?.data.id === "community" && jsonData?.includes("subscribe")) ? <> + : (a?.id === "community" && jsonData?.includes("subscribe")) ? <>
@@ -154,7 +154,7 @@ const UserActivities = (props: Props) => {
- :( a?.data.id === "community" && jsonData?.includes("unsubscribe")) ? <> + :( a?.id === "community" && jsonData?.includes("unsubscribe")) ? <>
@@ -171,8 +171,8 @@ const UserActivities = (props: Props) => {
- - : (a?.type === "account_witness_vote" && a?.data.approve) ? <> + + : (a?.type === "account_witness_vote" && a?.approve) ? <>
@@ -180,7 +180,7 @@ const UserActivities = (props: Props) => {
voted witness - @{a.data.witness} + @{a.witness}
{dateToFullRelative(a.timestamp)} @@ -189,7 +189,7 @@ const UserActivities = (props: Props) => {
- : (a?.type === "account_witness_vote" && !a?.data.approve) ? <> + : (a?.type === "account_witness_vote" && !a?.approve) ? <>
@@ -197,7 +197,7 @@ const UserActivities = (props: Props) => {
unvoted witness - @{a.data.witness} + @{a.witness}
{dateToFullRelative(a.timestamp)} @@ -206,7 +206,7 @@ const UserActivities = (props: Props) => {
- : (a?.type === "update_proposal_votes" && a?.data.approve) ? <> + : (a?.type === "update_proposal_votes" && a?.approve) ? <>
@@ -215,7 +215,7 @@ const UserActivities = (props: Props) => {
approved - proposal#{a.data.proposal_ids} + proposal#{a.proposal_ids}
{dateToFullRelative(a.timestamp)} @@ -224,7 +224,7 @@ const UserActivities = (props: Props) => {
- : (a?.type === "update_proposal_votes" && !a?.data.approve) ? <> + : (a?.type === "update_proposal_votes" && !a?.approve) ? <>
@@ -232,9 +232,9 @@ const UserActivities = (props: Props) => {
- @{a.data.voter} + @{a.voter} unapproved - proposal#{a?.data.proposal_ids} + proposal#{a?.proposal_ids}
{dateToFullRelative(a.timestamp)} @@ -251,7 +251,7 @@ const UserActivities = (props: Props) => {
- @{a?.data.account} + @{a?.account} updated their account
@@ -261,7 +261,8 @@ const UserActivities = (props: Props) => {
- : <>} + //Comment needs proper checks and formating + : <>{a.type}} ) } diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index f0a8b5c6549..b1e0c566354 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react" -import { getAllActiviies } from "../../api/hive" import "./index.scss" import { Link } from "react-router-dom" import LinearProgress from "../linear-progress" @@ -10,6 +9,8 @@ import UserActivities from "./activities" import ActivitiesDropdown from "./activities-dropdown" import ActivitiesTypes from "./activities-types" import { ActivityTypes } from './types/types'; +import { fetchActvities } from "./operations" +import { ActivitiesGroup } from "./types/activities-group" interface Props{ account: Account; @@ -21,60 +22,31 @@ export const ProfileActivites = (props: Props) => { const [activities, setActivities] = useState([]); const [loading, setLoading] = useState(false); + const [filter, setFilter] = useState("") useEffect(() => { - getActivities(); - },[]); + newActivities(); + },[filter]); - const getActivities = async () => { - setLoading(true); - const types = [ - "comment", - "proposal_pay", - "vote", - "custom_json", - "account_witness_vote", - "update_proposal_votes", - "account_update2" - ]; - - try { - const response = await getAllActiviies(account.name); - const filterResponse = response.filter((r: any) => { - const filterTypes = types.includes(r[1].op[0]); - return filterTypes; + + const newActivities = async () => { + setLoading(true) - }); - const accountHistory = filterResponse.map((entry: any) => { - const [index, op] = entry; - const { timestamp, block } = op; - const type = op.op[0]; - const data = op.op[1]; - - return { - index, - timestamp, - block, - type, - data, - }; - }); + try { + const data = await fetchActvities(account!.name, filter, -1, 20); - const filterNotifications = accountHistory.filter((a: ActivityTypes) => a?.data.id !== "notify" && a?.data.id !== "ecency_notify") - - setActivities(filterNotifications.reverse()); + setActivities(data); setLoading(false); - return filterNotifications; } catch (err) { console.log(err); } - }; + } const handleCustomJson = (a: ActivityTypes) => { let jsonData; try { - if(a?.data?.json){ - jsonData = JSON.parse(a?.data?.json) + if(a?.json){ + jsonData = JSON.parse(a?.json) }; } catch (error) { console.log(error) @@ -99,12 +71,15 @@ export const ProfileActivites = (props: Props) => {
)})} {!loading &&
- +
}
- +
diff --git a/src/common/components/profile-activities/operations.ts b/src/common/components/profile-activities/operations.ts new file mode 100644 index 00000000000..1bea5bdf4f1 --- /dev/null +++ b/src/common/components/profile-activities/operations.ts @@ -0,0 +1,96 @@ +import { utils } from "@hiveio/dhive"; +import { getAccountHistory } from "../../api/hive"; +import { ActivitiesGroup } from "./types/activities-group"; + +const ops = utils.operationOrders; + +export const ACCOUNT_ACTIVITY_GROUPS: Record = { + comment: [ + ops.comment + ], + proposalPay: [ + ops.proposal_pay + ], + vote: [ + ops.vote + ], + customJson: [ + ops.custom_json, + ], + witnessVote: [ + ops.account_witness_vote + ], + proposalVote: [ + ops.update_proposal_votes + ], + update: [ + ops.account_update2 + ] + }; + + const ALL_ACCOUNT_OPERATIONS = [...Object.values(ACCOUNT_ACTIVITY_GROUPS)].reduce( + (acc, val) => acc.concat(val), + [] + ); + + export const fetchActvities = (username: string, group: ActivitiesGroup | "" = "", start: number = -1, limit: number = 20) => { + + const name = username.replace("@", ""); + + console.log(ops) + let filters: ActivitiesGroup[] | "" = []; + switch (group) { + case "comment": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["comment"]); + break; + case "proposalPay": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["proposalPay"]); + break; + case "vote": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["vote"]); + break; + case "customJson": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["customJson"]); + break; + case "witnessVote": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["witnessVote"]); + break; + case "proposalVote": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["proposalVote"]); + break; + case "update": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["update"]); + break; + default: + filters = utils.makeBitMaskFilter(ALL_ACCOUNT_OPERATIONS); + } + + const res = getAccountHistory(name, filters, start, limit) + .then((r) => { + const mapped: any = r.map((x: any) => { + const { op } = x[1]; + const { timestamp, trx_id } = x[1]; + const opName = op[0]; + const opData = op[1]; + + return { + num: x[0], + type: opName, + timestamp, + trx_id, + ...opData + }; + }); + + const activities = mapped + .filter((x: any) => x !== null) + .sort((a: any, b: any) => b.num - a.num); + + return activities + + }) + .catch((err) => { + console.log("catch", err); + }); + return res + }; \ No newline at end of file diff --git a/src/common/components/profile-activities/types/activities-group.ts b/src/common/components/profile-activities/types/activities-group.ts new file mode 100644 index 00000000000..156352b593f --- /dev/null +++ b/src/common/components/profile-activities/types/activities-group.ts @@ -0,0 +1,8 @@ +export type ActivitiesGroup = + | "comment" + | "vote" + | "proposalPay" + | "witnessVote" + | "customJson" + | "proposalVote" + | "update" \ No newline at end of file diff --git a/src/common/components/profile-activities/types/types.ts b/src/common/components/profile-activities/types/types.ts index 2a3cc98b18b..1a26fba47c8 100644 --- a/src/common/components/profile-activities/types/types.ts +++ b/src/common/components/profile-activities/types/types.ts @@ -1,6 +1,5 @@ export interface ActivityTypes { type: string; - data: { parent_author?: string; parent_permlink?: string; author?: string; @@ -17,6 +16,5 @@ export interface ActivityTypes { voter?: string; witness?: string; json: string; - }; timestamp: string; } \ No newline at end of file From feaf9ea3a2e59b76de1ce7c824b296b054151971 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Wed, 23 Aug 2023 20:43:48 +0100 Subject: [PATCH 10/17] handled load more --- .../components/profile-activities/index.tsx | 32 +++++++++++++----- .../profile-activities/types/types.ts | 33 ++++++++++--------- 2 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index b1e0c566354..eb59aa1d263 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -25,22 +25,36 @@ export const ProfileActivites = (props: Props) => { const [filter, setFilter] = useState("") useEffect(() => { - newActivities(); + userActivities(-1); },[filter]); - - const newActivities = async () => { - setLoading(true) - + const userActivities = async (start: number) => { + setLoading(true); + try { - const data = await fetchActvities(account!.name, filter, -1, 20); + const data = await fetchActvities(account!.name, filter, start, 20); + const filterNotifications = data?.filter((a: ActivityTypes) => a?.id !== "notify" && a?.id !== "ecency_notify"); + console.log(filterNotifications) + + if (filter === "") { + setActivities(prevActivities => [...prevActivities, ...filterNotifications]); + } else { + setActivities([...filterNotifications]); + } - setActivities(data); setLoading(false); } catch (err) { console.log(err); + setLoading(false); } - } + }; + + const handleLoadMore = () => { + const lastActivity = activities[activities.length - 1]; + if (lastActivity) { + userActivities(lastActivity.num); + } + }; const handleCustomJson = (a: ActivityTypes) => { let jsonData; @@ -73,7 +87,7 @@ export const ProfileActivites = (props: Props) => { {!loading &&
}
diff --git a/src/common/components/profile-activities/types/types.ts b/src/common/components/profile-activities/types/types.ts index 1a26fba47c8..cef5cefe97b 100644 --- a/src/common/components/profile-activities/types/types.ts +++ b/src/common/components/profile-activities/types/types.ts @@ -1,20 +1,21 @@ export interface ActivityTypes { type: string; - parent_author?: string; - parent_permlink?: string; - author?: string; - permlink?: string; - payment?: number; - payer?: string; - following?: string; - community?: string; - approve?: boolean; - proposal_ids?: string; - account?: string; - id?: string; - what?: string[]; - voter?: string; - witness?: string; - json: string; + parent_author?: string; + parent_permlink?: string; + author?: string; + permlink?: string; + payment?: number; + payer?: string; + following?: string; + community?: string; + approve?: boolean; + proposal_ids?: string; + account?: string; + id?: string; + what?: string[]; + voter?: string; + witness?: string; + json: string; timestamp: string; + num: number; } \ No newline at end of file From 1b9f763763e92b230202871a610001bcfa15bece Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Wed, 23 Aug 2023 21:18:16 +0100 Subject: [PATCH 11/17] fix comment and reply render logic --- src/common/components/profile-activities/activities.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/common/components/profile-activities/activities.tsx b/src/common/components/profile-activities/activities.tsx index 12d38c905be..e473f0b22f2 100644 --- a/src/common/components/profile-activities/activities.tsx +++ b/src/common/components/profile-activities/activities.tsx @@ -18,7 +18,7 @@ const UserActivities = (props: Props) => { return ( <> - {a?.type === "comment" && a?.parent_author === "" ? <> + {a?.type === "comment" && a?.author === account!.name ? <>
@@ -48,9 +48,10 @@ const UserActivities = (props: Props) => {
+ @{a?.author} replied to - {a.parent_permlink} + {a.parent_permlink} by @{a.parent_author === "" ? a.author : a.parent_author} From f6a38b46369afabdf1650c94cf495fc551488c8b Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Thu, 24 Aug 2023 09:53:57 +0100 Subject: [PATCH 12/17] added donwvote svg --- .../profile-activities/activities.tsx | 36 +++++++++++++------ .../components/profile-activities/index.scss | 12 +++++++ 2 files changed, 38 insertions(+), 10 deletions(-) diff --git a/src/common/components/profile-activities/activities.tsx b/src/common/components/profile-activities/activities.tsx index e473f0b22f2..084e269d555 100644 --- a/src/common/components/profile-activities/activities.tsx +++ b/src/common/components/profile-activities/activities.tsx @@ -1,7 +1,7 @@ import React from 'react' import { dateToFullRelative } from '../../helper/parse-date'; import { Link } from 'react-router-dom'; -import { upvote, ticketSvg, starSvg, peopleSvg, commentSvg } from '../../img/svg'; +import { upvote, ticketSvg, starSvg, peopleSvg, commentSvg, chevronDownSvgForSlider } from '../../img/svg'; import { Account } from '../../store/accounts/types'; import { ActivityTypes } from './types/types'; @@ -15,6 +15,7 @@ interface Props { const UserActivities = (props: Props) => { const { a, account, jsonData } = props; + console.log(account) return ( <> @@ -31,7 +32,11 @@ const UserActivities = (props: Props) => { {a.parent_permlink} by - @{a.parent_author === "" ? a.author : a.parent_author} + + @{a.parent_author === "" ? a.author : a.parent_author} +
{dateToFullRelative(a.timestamp)} @@ -48,13 +53,17 @@ const UserActivities = (props: Props) => {
- @{a?.author} + @{a?.author} replied to {a.parent_permlink} by - @{a.parent_author === "" ? a.author : a.parent_author} + + @{a.parent_author === "" ? a.author : a.parent_author} +
{dateToFullRelative(a.timestamp)} @@ -67,13 +76,13 @@ const UserActivities = (props: Props) => {
- {upvote} + {upvote}
voted on - {a.permlink} + {a.permlink} by @{a.author} @@ -194,7 +203,11 @@ const UserActivities = (props: Props) => {
- {upvote} +
+ + {chevronDownSvgForSlider} + +
unvoted witness @@ -229,7 +242,11 @@ const UserActivities = (props: Props) => {
- {upvote} +
+ + {chevronDownSvgForSlider} + +
@@ -262,8 +279,7 @@ const UserActivities = (props: Props) => {
- //Comment needs proper checks and formating - : <>{a.type}} + : <>} ) } diff --git a/src/common/components/profile-activities/index.scss b/src/common/components/profile-activities/index.scss index b7f3568e1a4..f33228e07b2 100644 --- a/src/common/components/profile-activities/index.scss +++ b/src/common/components/profile-activities/index.scss @@ -118,7 +118,19 @@ gap: 15px; .activity-icon{ + display: flex; width: 20px; + + .downvote-icon{ + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + height: 20px; + width: 20px; + color: red; + border: 1px solid red; + } } .activity-info{ From 0518b062407868971be0796a89cd364c5ce8b27f Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Thu, 24 Aug 2023 20:23:02 +0100 Subject: [PATCH 13/17] added proposal and witness link --- src/common/components/profile-activities/activities-types.tsx | 4 ++-- src/common/components/profile-activities/activities.tsx | 1 - src/common/components/profile-activities/operations.ts | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/common/components/profile-activities/activities-types.tsx b/src/common/components/profile-activities/activities-types.tsx index 3e96a0787a2..91ca52a82e1 100644 --- a/src/common/components/profile-activities/activities-types.tsx +++ b/src/common/components/profile-activities/activities-types.tsx @@ -23,8 +23,8 @@ const ActivitiesTypes = (props: Props) => {
Follows - Witness votes - Proposal votes + Witness votes + Proposal votes
Curation rewards diff --git a/src/common/components/profile-activities/activities.tsx b/src/common/components/profile-activities/activities.tsx index 084e269d555..0a28f695a73 100644 --- a/src/common/components/profile-activities/activities.tsx +++ b/src/common/components/profile-activities/activities.tsx @@ -15,7 +15,6 @@ interface Props { const UserActivities = (props: Props) => { const { a, account, jsonData } = props; - console.log(account) return ( <> diff --git a/src/common/components/profile-activities/operations.ts b/src/common/components/profile-activities/operations.ts index 1bea5bdf4f1..a32a8820b37 100644 --- a/src/common/components/profile-activities/operations.ts +++ b/src/common/components/profile-activities/operations.ts @@ -37,7 +37,6 @@ export const ACCOUNT_ACTIVITY_GROUPS: Record = { const name = username.replace("@", ""); - console.log(ops) let filters: ActivitiesGroup[] | "" = []; switch (group) { case "comment": From 94bbfc037c7c4fbf050f04b569fd48285e8ff7de Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Fri, 25 Aug 2023 12:29:06 +0100 Subject: [PATCH 14/17] fixed filtering activities --- .../activities-dropdown.tsx | 50 +++++++++---------- .../profile-activities/activities-types.tsx | 16 +++--- .../components/profile-activities/index.tsx | 35 +++++++++---- .../profile-activities/operations.ts | 24 ++++----- .../types/activities-group.ts | 8 +-- .../profile-activities/types/types.ts | 1 + 6 files changed, 72 insertions(+), 62 deletions(-) diff --git a/src/common/components/profile-activities/activities-dropdown.tsx b/src/common/components/profile-activities/activities-dropdown.tsx index 6a873903741..236b02aba94 100644 --- a/src/common/components/profile-activities/activities-dropdown.tsx +++ b/src/common/components/profile-activities/activities-dropdown.tsx @@ -21,6 +21,13 @@ const ActivitiesDropdown = (props: Props) => { history: "", label: label ? label : "All", items: [ + { + label: All, + onClick: () => { + setLabel("All"); + setFilter(""); + } + }, { label: Comments, onClick: () => { @@ -36,45 +43,38 @@ const ActivitiesDropdown = (props: Props) => { } }, { - label: Likes, - onClick: () => { - setLabel("Likes"); - setFilter("customJson"); - } - }, - { - label: Follows, + label: Custom json, onClick: () => { setLabel("Follows"); - setFilter("customJson"); - } - }, - { - label: Communities, - onClick: () => { - setLabel("Communities"); - setFilter("customJson"); - } - }, - { - label: Curation rewards, - onClick: () => { - setLabel("Curation rewards"); - // setFilter("Curation rewards"); + setFilter("custom_json"); } }, + // { + // label: Likes, + // onClick: () => { + // setLabel("Likes"); + // setFilter("custom_json"); + // } + // }, + // { + // label: Communities, + // onClick: () => { + // setLabel("Communities"); + // setFilter("custom_json"); + // } + // }, { label: Witness votes, onClick: () => { setLabel("Witness votes"); - setFilter("witnessVote"); + setFilter("account_witness_vote"); } }, { label: Proposal votes, onClick: () => { setLabel("Proposal votes"); - setFilter("proposalVote"); + setFilter("update_proposal_votes"); } } ] diff --git a/src/common/components/profile-activities/activities-types.tsx b/src/common/components/profile-activities/activities-types.tsx index 91ca52a82e1..495b54042bb 100644 --- a/src/common/components/profile-activities/activities-types.tsx +++ b/src/common/components/profile-activities/activities-types.tsx @@ -16,18 +16,14 @@ const ActivitiesTypes = (props: Props) => {
- Comments - Replies - Votes - Communities + Comments + Replies + Votes + Communities
- Follows - Witness votes - Proposal votes -
-
- Curation rewards + Witness votes + Proposal votes
diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index eb59aa1d263..3a672f814e0 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -21,8 +21,11 @@ export const ProfileActivites = (props: Props) => { const { account } = props; const [activities, setActivities] = useState([]); + const [filteredActivities, setFilteredActivities] = useState([]); const [loading, setLoading] = useState(false); - const [filter, setFilter] = useState("") + const [filter, setFilter] = useState(""); + const [isFiltered, setIsFiltered] = useState(false); + const [activityId, setActivityId] = useState("") useEffect(() => { userActivities(-1); @@ -34,12 +37,18 @@ export const ProfileActivites = (props: Props) => { try { const data = await fetchActvities(account!.name, filter, start, 20); const filterNotifications = data?.filter((a: ActivityTypes) => a?.id !== "notify" && a?.id !== "ecency_notify"); - console.log(filterNotifications) - - if (filter === "") { - setActivities(prevActivities => [...prevActivities, ...filterNotifications]); - } else { - setActivities([...filterNotifications]); + + if (filterNotifications?.length > 0) { + setActivityId(filterNotifications[0].trx_id); + if (!filter) { + setIsFiltered(false) + setActivities(prevActivities => [...prevActivities, ...filterNotifications]); + } else { + setIsFiltered(true) + + const filterNewActivities = [...filteredActivities, ...filterNotifications].filter((a: ActivityTypes) => a.type === filter) + setFilteredActivities(filterNewActivities); + } } setLoading(false); @@ -48,10 +57,10 @@ export const ProfileActivites = (props: Props) => { setLoading(false); } }; - + const handleLoadMore = () => { - const lastActivity = activities[activities.length - 1]; - if (lastActivity) { + const lastActivity = activitiesToMap[activitiesToMap?.length - 1]; + if (canLoadMore) { userActivities(lastActivity.num); } }; @@ -68,6 +77,9 @@ export const ProfileActivites = (props: Props) => { return jsonData }; + const activitiesToMap: ActivityTypes[] = !isFiltered ? activities : filteredActivities + const canLoadMore = activityId !== activitiesToMap[activitiesToMap?.length - 1]?.trx_id + return ( <> {loading && } @@ -77,7 +89,7 @@ export const ProfileActivites = (props: Props) => {
- {activities?.map((a: ActivityTypes, i: number) => { + {activitiesToMap?.map((a: ActivityTypes, i: number) => { const jsonData = handleCustomJson(a) return (
@@ -87,6 +99,7 @@ export const ProfileActivites = (props: Props) => { {!loading &&
} diff --git a/src/common/components/profile-activities/operations.ts b/src/common/components/profile-activities/operations.ts index a32a8820b37..5875fadbad3 100644 --- a/src/common/components/profile-activities/operations.ts +++ b/src/common/components/profile-activities/operations.ts @@ -8,19 +8,19 @@ export const ACCOUNT_ACTIVITY_GROUPS: Record = { comment: [ ops.comment ], - proposalPay: [ + proposal_pay: [ ops.proposal_pay ], vote: [ ops.vote ], - customJson: [ + custom_json: [ ops.custom_json, ], - witnessVote: [ + account_witness_vote: [ ops.account_witness_vote ], - proposalVote: [ + update_proposal_votes: [ ops.update_proposal_votes ], update: [ @@ -42,20 +42,20 @@ export const ACCOUNT_ACTIVITY_GROUPS: Record = { case "comment": filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["comment"]); break; - case "proposalPay": - filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["proposalPay"]); + case "proposal_pay": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["proposal_pay"]); break; case "vote": filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["vote"]); break; - case "customJson": - filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["customJson"]); + case "custom_json": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["custom_json"]); break; - case "witnessVote": - filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["witnessVote"]); + case "account_witness_vote": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["account_witness_vote"]); break; - case "proposalVote": - filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["proposalVote"]); + case "update_proposal_votes": + filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["update_proposal_votes"]); break; case "update": filters = utils.makeBitMaskFilter(ACCOUNT_ACTIVITY_GROUPS["update"]); diff --git a/src/common/components/profile-activities/types/activities-group.ts b/src/common/components/profile-activities/types/activities-group.ts index 156352b593f..dbab55fd123 100644 --- a/src/common/components/profile-activities/types/activities-group.ts +++ b/src/common/components/profile-activities/types/activities-group.ts @@ -1,8 +1,8 @@ export type ActivitiesGroup = | "comment" | "vote" - | "proposalPay" - | "witnessVote" - | "customJson" - | "proposalVote" + | "proposal_pay" + | "account_witness_vote" + | "custom_json" + | "update_proposal_votes" | "update" \ No newline at end of file diff --git a/src/common/components/profile-activities/types/types.ts b/src/common/components/profile-activities/types/types.ts index cef5cefe97b..78d52944aff 100644 --- a/src/common/components/profile-activities/types/types.ts +++ b/src/common/components/profile-activities/types/types.ts @@ -18,4 +18,5 @@ export interface ActivityTypes { json: string; timestamp: string; num: number; + trx_id: string; } \ No newline at end of file From ccc9e032c6ad0223db4d39dce601ecd6edb173b7 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Fri, 25 Aug 2023 20:40:05 +0100 Subject: [PATCH 15/17] set mobile view --- .../profile-activities/activities-types.tsx | 14 +- .../components/profile-activities/index.scss | 205 +++++++++--------- .../components/profile-activities/index.tsx | 8 +- src/common/pages/profile-functional.tsx | 2 +- 4 files changed, 122 insertions(+), 107 deletions(-) diff --git a/src/common/components/profile-activities/activities-types.tsx b/src/common/components/profile-activities/activities-types.tsx index 495b54042bb..db1ab50612c 100644 --- a/src/common/components/profile-activities/activities-types.tsx +++ b/src/common/components/profile-activities/activities-types.tsx @@ -1,27 +1,29 @@ import React from 'react' import { Link } from 'react-router-dom' import { Account } from "../../store/accounts/types" +import { Global } from '../../store/global/types' interface Props { account: Account; + global: Global; } const ActivitiesTypes = (props: Props) => { - const { account } = props; + const { account, global } = props; return (
-
-
Activity Types
+
+
Activity Types
-
-
+
+
Comments Replies Votes Communities
-
+
Witness votes Proposal votes
diff --git a/src/common/components/profile-activities/index.scss b/src/common/components/profile-activities/index.scss index f33228e07b2..4cbb67468cb 100644 --- a/src/common/components/profile-activities/index.scss +++ b/src/common/components/profile-activities/index.scss @@ -12,21 +12,67 @@ align-self: center; } + .activity-bottom-column{ + display: flex; + flex-direction: column-reverse; + @extend .activity-bottom-common; + + } + .activities-bottom{ display: flex; width: 100%; padding: 20px; gap: 20px; - .activities-filter{ - position: sticky; - flex: 1; + @extend .activity-bottom-common; + } + +} + +.activity-bottom-common{ + .activities-filter{ + position: sticky; + flex: 1; + + .filter-dropdown{ + display: flex; + flex-direction: column; + padding: 5px; + margin-bottom: 15px; + + @include themify(day) { + border-bottom: 1px solid #f5f5f5; + } + + @include themify(night) { + border-bottom: 1px solid #161d26; + } + + .dropdown-header{ + align-self: center; + } + } + + .types-container{ + display: flex; + flex-direction: column; - .filter-dropdown{ + .types-header{ + align-self: center; + } + + .types-wrapper{ + padding: 5px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .filter-types{ display: flex; flex-direction: column; - padding: 5px; - margin-bottom: 15px; + gap: 10px; + padding: 10px; @include themify(day) { border-bottom: 1px solid #f5f5f5; @@ -35,114 +81,79 @@ @include themify(night) { border-bottom: 1px solid #161d26; } - - .dropdown-header{ - align-self: center; - } } + } - .types-container{ - display: flex; - flex-direction: column; - - .types-header{ - align-self: center; - } + } + } - .types-wrapper{ - padding: 5px; - display: flex; - flex-direction: column; - justify-content: space-between; + .activities-wrapper{ + flex: 4; - .filter-types{ - display: flex; - flex-direction: column; - gap: 10px; - padding: 10px; - - @include themify(day) { - border-bottom: 1px solid #f5f5f5; - } - - @include themify(night) { - border-bottom: 1px solid #161d26; - } + .activities{ + display: flex; + flex-direction: column; + justify-content: center; + gap: 3px; + // width: 75%; + height: fit-content; + padding: 10px; + border-radius: 8px; + + &:nth-child(odd) { + @include themify(day) { + background: $white-three; } + + @include themify(night) { + background: $dark-two; + } + } + + .activities-header{ + justify-self: center; + align-self: center; + font-size: 14px; } - - } - } - - .activities-wrapper{ - flex: 4; - - .activities{ + + .activities-info-wrapper{ display: flex; - flex-direction: column; - justify-content: center; - gap: 3px; - // width: 75%; - height: fit-content; - padding: 10px; - border-radius: 8px; - - &:nth-child(odd) { - @include themify(day) { - background: $white-three; - } - - @include themify(night) { - background: $dark-two; - } - } - - .activities-header{ - justify-self: center; - align-self: center; - font-size: 14px; + gap: 10px; + + .activities-body{ + flex: 2; } - .activities-info-wrapper{ + .activities-details{ + flex: 1; display: flex; - gap: 10px; - - .activities-body{ - flex: 2; - } - - .activities-details{ - flex: 1; + align-items: center; + gap: 15px; + + .activity-icon{ display: flex; - align-items: center; - gap: 15px; - - .activity-icon{ - display: flex; - width: 20px; + width: 20px; - .downvote-icon{ - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - height: 20px; - width: 20px; - color: red; - border: 1px solid red; - } - } - - .activity-info{ + .downvote-icon{ display: flex; - flex-direction: column; - gap: 5px; + justify-content: center; + align-items: center; + border-radius: 50%; + height: 20px; + width: 20px; + color: red; + border: 1px solid red; } } + + .activity-info{ + display: flex; + flex-direction: column; + gap: 5px; + } } - } + } } - } \ No newline at end of file diff --git a/src/common/components/profile-activities/index.tsx b/src/common/components/profile-activities/index.tsx index 3a672f814e0..24fbb218944 100644 --- a/src/common/components/profile-activities/index.tsx +++ b/src/common/components/profile-activities/index.tsx @@ -11,14 +11,16 @@ import ActivitiesTypes from "./activities-types" import { ActivityTypes } from './types/types'; import { fetchActvities } from "./operations" import { ActivitiesGroup } from "./types/activities-group" +import { Global } from "../../store/global/types"; interface Props{ account: Account; + global: Global; } export const ProfileActivites = (props: Props) => { - const { account } = props; + const { account, global } = props; const [activities, setActivities] = useState([]); const [filteredActivities, setFilteredActivities] = useState([]); @@ -87,7 +89,7 @@ export const ProfileActivites = (props: Props) => {
Activities related to @{account?.name}'s account
-
+
{activitiesToMap?.map((a: ActivityTypes, i: number) => { const jsonData = handleCustomJson(a) @@ -109,7 +111,7 @@ export const ProfileActivites = (props: Props) => {
- +
diff --git a/src/common/pages/profile-functional.tsx b/src/common/pages/profile-functional.tsx index 0353afa4ccf..726ba2885d7 100644 --- a/src/common/pages/profile-functional.tsx +++ b/src/common/pages/profile-functional.tsx @@ -597,7 +597,7 @@ export const Profile = (props: Props) => { }` )} > - +
From 10e5a66c3fd4c93b70a644a2e3a00246f1fe12d9 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Thu, 31 Aug 2023 10:43:00 +0100 Subject: [PATCH 16/17] added text to translation file --- .../profile-activities/activities.tsx | 333 +++++++++--------- src/common/i18n/locales/en-US.json | 16 + 2 files changed, 184 insertions(+), 165 deletions(-) diff --git a/src/common/components/profile-activities/activities.tsx b/src/common/components/profile-activities/activities.tsx index 0a28f695a73..78a6cf766b9 100644 --- a/src/common/components/profile-activities/activities.tsx +++ b/src/common/components/profile-activities/activities.tsx @@ -4,8 +4,8 @@ import { Link } from 'react-router-dom'; import { upvote, ticketSvg, starSvg, peopleSvg, commentSvg, chevronDownSvgForSlider } from '../../img/svg'; import { Account } from '../../store/accounts/types'; import { ActivityTypes } from './types/types'; +import { _t } from '../../i18n'; - interface Props { a: ActivityTypes; account: Account; @@ -21,53 +21,53 @@ const UserActivities = (props: Props) => { {a?.type === "comment" && a?.author === account!.name ? <>
-
- {commentSvg} -
-
- - commented on - - {a.parent_permlink} - - by - - @{a.parent_author === "" ? a.author : a.parent_author} - - -
- {dateToFullRelative(a.timestamp)} +
+ {commentSvg} +
+
+
+ {_t("profile-activities.comment")} + + {a.parent_permlink} + + {_t("profile-activities.by")} + + @{a.parent_author === "" ? a.author : a.parent_author} + +
+
+ {dateToFullRelative(a.timestamp)} +
-
: a?.type === "comment" && a?.author !== account?.name ? <>
-
- {commentSvg} -
-
- - @{a?.author} - replied to - - {a.parent_permlink} - - by - - @{a.parent_author === "" ? a.author : a.parent_author} - - -
- {dateToFullRelative(a.timestamp)} -
-
+
+ {commentSvg} +
+
+
+ @{a?.author} + {_t("profile-activities.replied")} + + {a.parent_permlink} + + {_t("profile-activities.by")} + + @{a.parent_author === "" ? a.author : a.parent_author} + +
+
+ {dateToFullRelative(a.timestamp)} +
+
@@ -78,15 +78,17 @@ const UserActivities = (props: Props) => { {upvote}
-
- voted on - - {a.permlink} - - by - @{a.author} -
- {dateToFullRelative(a.timestamp)} +
+ {_t("profile-activities.voted")} + + {a.permlink} + + {_t("profile-activities.by")} + @{a.author} +
+
+ {dateToFullRelative(a.timestamp)} +
@@ -94,187 +96,188 @@ const UserActivities = (props: Props) => { : a?.type === "proposal_pay" ? <>
-
- {ticketSvg} -
-
- - received {a.payment} from - @{a.payer} - -
- {dateToFullRelative(a.timestamp)} +
+ {ticketSvg} +
+
+
+ {_t("profile-activities.received", {n: a.payment} )} + @{a.payer} +
+
+ {dateToFullRelative(a.timestamp)} +
-
: (a?.id === "follow" && jsonData[1]!?.what?.includes("blog")) ? <>
-
- {starSvg} -
-
- - started following - @{jsonData[1].following} - -
- {dateToFullRelative(a.timestamp)} +
+ {starSvg} +
+
+
+ {_t("profile-activities.follow")} + @{jsonData[1].following} +
+
+ {dateToFullRelative(a.timestamp)} +
-
: (a?.id === "follow" && !jsonData[1]?.what?.includes("blog")) ? <>
-
- {starSvg} -
-
- - unfollowed - @{jsonData[1].following} - -
- {dateToFullRelative(a.timestamp)} +
+ {starSvg} +
+
+
+ {_t("profile-activities.unfollow")} + @{jsonData[1].following} +
+
+ {dateToFullRelative(a.timestamp)} +
-
: (a?.id === "community" && jsonData?.includes("subscribe")) ? <>
-
- {peopleSvg} -
-
- - Subscribed to community - {jsonData[1]?.community} - -
- {dateToFullRelative(a.timestamp)} +
+ {peopleSvg} +
+
+
+ {_t("profile-activities.subscribed")} + {jsonData[1]?.community} +
+
+ {dateToFullRelative(a.timestamp)} +
-
:( a?.id === "community" && jsonData?.includes("unsubscribe")) ? <>
-
- {peopleSvg} -
-
- - unsubscribed from community - {jsonData[1]?.community} - -
- {dateToFullRelative(a.timestamp)} +
+ {peopleSvg} +
+
+
+ {_t("profile-activities.unsubscribed")} + {jsonData[1]?.community} +
+
+ {dateToFullRelative(a.timestamp)} +
-
: (a?.type === "account_witness_vote" && a?.approve) ? <>
-
- {upvote} -
-
- voted witness - @{a.witness} - -
- {dateToFullRelative(a.timestamp)} +
+ {upvote} +
+
+
+ {_t("profile-activities.witness-vote")} + @{a.witness} +
+
+ {dateToFullRelative(a.timestamp)} +
-
: (a?.type === "account_witness_vote" && !a?.approve) ? <>
-
-
- - {chevronDownSvgForSlider} - +
+
+ + {chevronDownSvgForSlider} + +
-
-
- unvoted witness - @{a.witness} - -
- {dateToFullRelative(a.timestamp)} +
+
+ {_t("profile-activities.witness-unvote")} + @{a.witness} +
+
+ {dateToFullRelative(a.timestamp)} +
-
: (a?.type === "update_proposal_votes" && a?.approve) ? <>
-
- {upvote} -
-
- - approved - proposal#{a.proposal_ids} - -
- {dateToFullRelative(a.timestamp)} +
+ {upvote} +
+
+
+ {_t("profile-activities.approved")} + proposal#{a.proposal_ids} +
+
+ {dateToFullRelative(a.timestamp)} +
-
: (a?.type === "update_proposal_votes" && !a?.approve) ? <>
-
-
- - {chevronDownSvgForSlider} - +
+
+ + {chevronDownSvgForSlider} + +
-
-
- - @{a.voter} - unapproved - proposal#{a?.proposal_ids} - -
- {dateToFullRelative(a.timestamp)} +
+
+ {_t("profile-activities.unapproved")} + proposal#{a?.proposal_ids} +
+
+ {dateToFullRelative(a.timestamp)} +
-
: a?.type === "account_update2" ? <>
-
- {starSvg} -
-
- - @{a?.account} - updated their account - -
- {dateToFullRelative(a.timestamp)} +
+ {starSvg} +
+
+
+ @{a?.account} + {_t("profile-activities.update")} +
+
+ {dateToFullRelative(a.timestamp)} +
-
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json index f824b1bce0c..2774922350b 100644 --- a/src/common/i18n/locales/en-US.json +++ b/src/common/i18n/locales/en-US.json @@ -2124,5 +2124,21 @@ "insufficient-resource-buy-hive": "Buy HIVE and Power it up", "insufficient-resource-wait": "Wait few hours for RC refill", "report": "Report" + }, + "profile-activities": { + "by": "by", + "comment": "commented on", + "replied": "replied to", + "voted": "voted on", + "received": "received {{n}} from", + "follow": "started following", + "unfollow": "unfollowed", + "subscribed": "subscribed to community", + "unsubscribed": "unsubscribed from community", + "witness-vote": "voted witness", + "witness-unvote": "unvoted witness", + "approved": "approved", + "unapproved": "unapproved", + "update": "updated thier account" } } From 3738409a1957bb162a0ed59aa2a134bfaac8fd56 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Thu, 31 Aug 2023 11:03:09 +0100 Subject: [PATCH 17/17] update setfilter type --- .../profile-activities/activities-dropdown.tsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/common/components/profile-activities/activities-dropdown.tsx b/src/common/components/profile-activities/activities-dropdown.tsx index 236b02aba94..475305ee2b9 100644 --- a/src/common/components/profile-activities/activities-dropdown.tsx +++ b/src/common/components/profile-activities/activities-dropdown.tsx @@ -3,7 +3,7 @@ import DropDown from "../dropdown" import { ActivitiesGroup } from "./types/activities-group" interface Props { - setFilter: React.Dispatch> + setFilter: (v: ActivitiesGroup | "") => void } const ActivitiesDropdown = (props: Props) => { @@ -49,20 +49,6 @@ const ActivitiesDropdown = (props: Props) => { setFilter("custom_json"); } }, - // { - // label: Likes, - // onClick: () => { - // setLabel("Likes"); - // setFilter("custom_json"); - // } - // }, - // { - // label: Communities, - // onClick: () => { - // setLabel("Communities"); - // setFilter("custom_json"); - // } - // }, { label: Witness votes, onClick: () => {