Skip to content

Commit

Permalink
Save
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikozet
mikozet committed Aug 27, 2023
1 parent 9426cfb commit 9aebed7
Show file tree
Hide file tree
Showing 8 changed files with 145 additions and 400 deletions.
90 changes: 43 additions & 47 deletions src/components/ActivityIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,61 +3,57 @@ import React from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';

import core from '~/services/core';
import { CATEGORIES } from '~/store/activity/reducers';
import { IconNotification } from '~/styles/icons';
const newsItems = core.news;

const DashboardActivityIcon = () => {
// const { categories, lastSeenAt } = useSelector((state) => {
// return state.activity;
// });
const { categories, lastSeenAt, news } = useSelector((state) => {
return state.activity;
});

// const NEWS = Symbol.for('NEWS');
// const categoriesWithNews = { ...categories, ...{ [NEWS]: newsItems } };
// let CATEGORIES_WITH_NEWS = [...CATEGORIES];
// CATEGORIES_WITH_NEWS.push(NEWS);
// Is there any pending transactions?
const isPending = CATEGORIES.find((category) => {
return !!categories[category].activities.find((activity) => {
return activity.isPending;
});
});

// // Is there any pending transactions?
// const isPending = CATEGORIES_WITH_NEWS.find((category) => {
// return !!categoriesWithNews[category].activities.find((activity) => {
// return activity.isPending;
// });
// });
// Count how many activities we haven't seen yet
const count = CATEGORIES.reduce((acc, category) => {
return (
acc +
categories[category].activities.reduce((itemAcc, activity) => {
return activity.createdAt > lastSeenAt ? itemAcc + 1 : itemAcc;
}, 0)
);
}, 0);

// // Count how many activities we haven't seen yet
// const count = CATEGORIES_WITH_NEWS.reduce((acc, category) => {
// return (
// acc +
// categoriesWithNews[category].activities.reduce((itemAcc, activity) => {
// return activity.createdAt > lastSeenAt ? itemAcc + 1 : itemAcc;
// }, 0)
// );
// }, 0);
const countNews = news.activities.reduce((itemAcc, activity) => {
return activity.createdAt > lastSeenAt ? itemAcc + 1 : itemAcc;
}, 0);

// return (
// <IconButton
// aria-label="Activities"
// component={Link}
// edge="end"
// size="large"
// to="/activities"
// >
// {isPending ? (
// <CircularProgress size={28} />
// ) : (
// <Badge
// badgeContent={count}
// color="primary"
// max={99}
// overlap="rectangular"
// >
// <IconNotification style={{ fontSize: 28 }} />
// </Badge>
// )}
// </IconButton>
// );
return <></>;
return (
<IconButton
aria-label="Activities"
component={Link}
edge="end"
size="large"
to="/activities"
>
{isPending ? (
<CircularProgress size={28} />
) : (
<Badge
badgeContent={count + countNews}
color="primary"
max={99}
overlap="rectangular"
>
<IconNotification style={{ fontSize: 28 }} />
</Badge>
)}
</IconButton>
);
};

export default DashboardActivityIcon;
138 changes: 48 additions & 90 deletions src/components/ActivityStreamItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
import {
Badge,
Box,
Card,
CardContent,
CardHeader,
CircularProgress,
Collapse,
Divider,
IconButton,
Avatar as MuiAvatar,
Typography,
Zoom,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import clsx from 'clsx';
import { DateTime } from 'luxon';
import PropTypes from 'prop-types';
import React, { Fragment, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';

import ActivityStreamItemAvatar from '~/components/ActivityStreamItemAvatar';
import Avatar from '~/components/Avatar';
import ExternalLink from '~/components/ExternalLink';
import Logo from '~/components/Logo';
import { usePaymentNote } from '~/hooks/transfer';
import { useRelativeProfileLink } from '~/hooks/url';
import { useUserdata } from '~/hooks/username';
Expand All @@ -34,18 +29,19 @@ import { FAQ_URL, ISSUANCE_RATE_MONTH, ZERO_ADDRESS } from '~/utils/constants';
const { ActivityTypes } = core.activity;

const useStyles = makeStyles((theme) => ({
// avatarTransparent: {
// width: theme.custom.components.avatarSize,
// height: theme.custom.components.avatarSize,
// backgroundColor: 'transparent',
// },
cardHeader: {
cursor: 'pointer',
background: theme.custom.colors.whiteAlmost,
cardContainer: {
'&:hover': {
background: theme.custom.colors.blackSqueeze,

'& .MuiCardHeader-root': {
background: theme.custom.colors.blackSqueeze,
},
},
},
cardHeader: {
cursor: 'pointer',
background: theme.custom.colors.whiteAlmost,
},
cardHeaderUnseen: {
position: 'relative',
'&::after': {
Expand All @@ -55,8 +51,8 @@ const useStyles = makeStyles((theme) => ({
display: 'block',
content: '""',
borderRadius: '50%',
width: 7,
height: 7,
width: '13px',
height: '13px',
background: theme.custom.gradients.purple,
},
},
Expand All @@ -66,7 +62,9 @@ const useStyles = makeStyles((theme) => ({
alignSelf: 'center',
},
cardContent: {
paddingTop: 0,
padding: '15px 0 15px',
margin: '5px 15px 0 15px',
borderTop: `1px solid ${theme.custom.colors.oldLavender}`,
' &.MuiCardContent-root': {
paddingBottom: `${theme.spacing(1.5)}`,
},
Expand All @@ -88,29 +86,6 @@ const useStyles = makeStyles((theme) => ({
},
}));

// const ActivityStreamItemAvatar = (props) => {
// return (
// <Link to={profilePath}>
// {props.isPending ? (
// <MuiAvatar className={classes.avatarTransparent}>
// <CircularProgress size={40} />
// </MuiAvatar>
// ) : isUBIPayout ? (
// <MuiAvatar className={classes.avatarTransparent}>
// <Logo size="tiny" />
// </MuiAvatar>
// ) : (
// <Box className={classes.avatarTransparent}>
// <ActivityStreamAvatars
// addressOrigin={addressOrigin}
// addressTarget={addressTarget}
// />
// </Box>
// )}
// </Link>
// );
// };

const ActivityStreamItem = (props) => {
const classes = useStyles();
const [isExpanded, setIsExanded] = useState(false);
Expand All @@ -120,7 +95,7 @@ const ActivityStreamItem = (props) => {
};

// Reformat the message for the user
const {
let {
addressActor,
addressOrigin,
addressTarget,
Expand All @@ -129,6 +104,13 @@ const ActivityStreamItem = (props) => {
messageId,
} = props.type !== 'NEWS' ? formatMessage(props) : props;

if (!formattedDate) {
// // TODO which one? data.createdAt || data.date
formattedDate = DateTime.fromISO(
props.data.createdAt || props.data.date,
).toFormat('dd.LL.yyyy');
}

const actor = useUserdata(addressActor).username;
const profilePath = useRelativeProfileLink(
addressActor ? addressActor : props.safeAddress,
Expand Down Expand Up @@ -160,11 +142,12 @@ const ActivityStreamItem = (props) => {
...data,
actor,
})
: data.message.en;
: // TODO remove || 'This is test title'
data.title?.en || 'This is test title';
}, [actor, data, messageId]);

return (
<Card>
<Card classes={{ root: classes.cardContainer }}>
<CardHeader
action={value}
avatar={
Expand All @@ -176,24 +159,6 @@ const ActivityStreamItem = (props) => {
profilePath={profilePath}
type={props.type}
/>
// <Link to={profilePath}>
// {props.isPending ? (
// <MuiAvatar className={classes.avatarTransparent}>
// <CircularProgress size={40} />
// </MuiAvatar>
// ) : isUBIPayout ? (
// <MuiAvatar className={classes.avatarTransparent}>
// <Logo size="tiny" />
// </MuiAvatar>
// ) : (
// <Box className={classes.avatarTransparent}>
// <ActivityStreamAvatars
// addressOrigin={addressOrigin}
// addressTarget={addressTarget}
// />
// </Box>
// )}
// </Link>
}
classes={{
root: clsx(classes.cardHeader, {
Expand All @@ -216,6 +181,7 @@ const ActivityStreamItem = (props) => {
<ActivityStreamExplained
actor={actor}
data={data}
extendedMsg={data.message?.en}
isExpanded={isExpanded}
messageId={messageId}
txHash={props.txHash}
Expand Down Expand Up @@ -244,6 +210,8 @@ const ActivityStreamExplained = ({
type,
txHash,
isExpanded,
extendedMsg,
url,
}) => {
const classes = useStyles();

Expand All @@ -260,20 +228,28 @@ const ActivityStreamExplained = ({
{type === ActivityTypes.HUB_TRANSFER && isExpanded && (
<ActivityStreamPaymentNote txHash={txHash} />
)}
{messageId && (
<Typography
className={classes.cardContentText}
component="p"
variant="body4"
>
{text}
</Typography>
)}
<Typography
className={classes.cardContentText}
component="p"
variant="body4"
>
{text}
</Typography>
<Typography
className={classes.cardContentText}
component="p"
variant="body4"
>
{translate('ActivityStream.bodyExplainSecondary')}{' '}
<ExternalLink href={FAQ_URL} variant="body5">
<span
dangerouslySetInnerHTML={{
__html:
extendedMsg || translate('ActivityStream.bodyExplainSecondary'),
}}
style={{ display: 'inline' }}
></span>{' '}
<ExternalLink href={url || FAQ_URL} variant="body5">
{translate('ActivityStream.linkLearnMore')}
</ExternalLink>
</Typography>
Expand Down Expand Up @@ -304,21 +280,6 @@ const ActivityStreamPaymentNote = ({ txHash }) => {
);
};

// const ActivityStreamAvatars = ({ addressOrigin, addressTarget }) => {
// return (
// <Badge
// anchorOrigin={{
// vertical: 'bottom',
// horizontal: 'right',
// }}
// badgeContent={<Avatar address={addressTarget} size="tiny" />}
// overlap="circular"
// >
// <Avatar address={addressOrigin} size="tiny" />
// </Badge>
// );
// };

ActivityStreamItem.propTypes = {
createdAt: PropTypes.string,
data: PropTypes.object.isRequired,
Expand All @@ -337,19 +298,16 @@ ActivityStreamItem.propTypes = {
ActivityStreamExplained.propTypes = {
actor: PropTypes.string.isRequired,
data: PropTypes.object.isRequired,
extendedMsg: PropTypes.string,
isExpanded: PropTypes.bool.isRequired,
messageId: PropTypes.string,
txHash: PropTypes.string,
type: PropTypes.oneOfType([PropTypes.symbol, PropTypes.string]),
url: PropTypes.string,
};

ActivityStreamPaymentNote.propTypes = {
txHash: PropTypes.string.isRequired,
};

// ActivityStreamAvatars.propTypes = {
// addressOrigin: PropTypes.string.isRequired,
// addressTarget: PropTypes.string.isRequired,
// };

export default ActivityStreamItem;
Loading

0 comments on commit 9aebed7

Please sign in to comment.