Skip to content

Commit f3b84e2

Browse files
happylolonlyhappylolonly
authored
fix(sense): optimizations (#1208)
2 parents 19d8607 + f8515dd commit f3b84e2

File tree

6 files changed

+205
-205
lines changed

6 files changed

+205
-205
lines changed

‎src/features/sense/ui/SenseViewer/Messages/Message/Message.container.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { selectCurrentAddress } from 'src/redux/features/pocket';
22
import { useAppSelector } from 'src/redux/hooks';
33

4-
import Message from './Message';
5-
import useParticleDetails from '../../../../../particle/useParticleDetails';
64
import ContentIpfs from 'src/components/contentIpfs/contentIpfs';
75
import { Account, Dots } from 'src/components';
86
import { SenseItem } from 'src/features/sense/redux/sense.redux';
9-
import { formatSenseItemDataToUI } from '../../../utils/format';
107
import { getIpfsHash } from 'src/utils/ipfs/helpers';
118
import { useEffect, useState } from 'react';
129
import { PATTERN_IPFS_HASH } from 'src/constants/patterns';
10+
import { formatSenseItemDataToUI } from '../../../utils/format';
11+
import useParticleDetails from '../../../../../particle/useParticleDetails';
12+
import Message from './Message';
1313
import styles from './Message.container.module.scss';
1414

1515
type Props = {
@@ -61,11 +61,14 @@ function MessageContainer({ senseItem, currentChatId }: Props) {
6161
);
6262
} else if (data) {
6363
if (isFollow) {
64-
const address = data.content;
64+
// some CIDs are not addresses
65+
// /sense/@master
66+
const address = data.content?.includes('bostrom') && data.content;
6567

6668
content = (
6769
<div className={styles.follow}>
68-
<span>💚</span> <Account address={address} avatar sizeAvatar={20} />
70+
<span>💚</span>{' '}
71+
{address && <Account address={address} avatar sizeAvatar={20} />}
6972
</div>
7073
);
7174
} else {

‎src/features/sense/ui/SenseViewer/Messages/Messages.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import dateFormat from 'dateformat';
22
import { SenseItem } from 'src/features/sense/redux/sense.redux';
3-
import MessageContainer from './Message/Message.container';
43
import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
5-
import styles from './Messages.module.scss';
64
import InfiniteScroll from 'react-infinite-scroll-component';
5+
import MessageContainer from './Message/Message.container';
6+
import styles from './Messages.module.scss';
77
import DateTitle from './DateTitle/DateTitle';
88

99
type Props = {
1010
messages: SenseItem[];
1111
currentChatId: string;
1212
};
1313

14-
const DEFAULT_ITEMS_LENGTH = 15;
15-
const LOAD_MORE_ITEMS_LENGTH = 15;
14+
// lengths in days
15+
const DEFAULT_ITEMS_LENGTH = 5;
16+
const LOAD_MORE_ITEMS_LENGTH = 3;
1617

1718
function Messages({ messages, currentChatId }: Props) {
1819
const [showItemsLength, setShowItemsLength] = useState(DEFAULT_ITEMS_LENGTH);

‎src/features/sense/ui/SenseViewer/SenseViewer.module.scss‎

Lines changed: 2 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
.wrapper {
22
width: 100%;
3+
34
// Display
45
> div {
56
> div {
67
display: flex;
78
overflow-x: hidden;
89
flex-direction: column;
10+
911
// height: auto !important;
1012
}
1113

@@ -21,120 +23,6 @@
2123
}
2224
}
2325

24-
.header {
25-
// display: grid;
26-
// grid-template-areas:
27-
// 'avatar title'
28-
// 'avatar text';
29-
30-
display: flex;
31-
flex-direction: column;
32-
width: 100%;
33-
34-
padding: 10px 15px;
35-
36-
gap: 0 10px;
37-
38-
position: relative;
39-
&::before {
40-
content: '';
41-
bottom: -10px;
42-
position: absolute;
43-
left: -25px;
44-
height: 20%;
45-
pointer-events: none;
46-
right: -10px;
47-
filter: blur(10px);
48-
background-image: linear-gradient(
49-
to bottom,
50-
rgba(0, 0, 0, 0.484),
51-
rgba(0, 0, 0, 1)
52-
);
53-
}
54-
55-
img {
56-
width: auto;
57-
max-height: 100px;
58-
}
59-
60-
.meta {
61-
> div {
62-
min-width: unset;
63-
padding: 0;
64-
65-
> :nth-child(1) {
66-
> :nth-child(1) {
67-
display: none;
68-
}
69-
70-
> :nth-child(2) {
71-
> span:nth-of-type(1) {
72-
display: none;
73-
}
74-
}
75-
}
76-
77-
> :nth-child(2) {
78-
// justify-content: left;
79-
}
80-
81-
> :last-child {
82-
> :last-child {
83-
display: none;
84-
}
85-
}
86-
}
87-
}
88-
89-
& > :nth-child(1) {
90-
grid-area: avatar;
91-
}
92-
93-
.title {
94-
font-size: 16px;
95-
text-transform: none;
96-
grid-area: title;
97-
98-
margin-top: 15px;
99-
max-height: 150px;
100-
overflow: hidden;
101-
color: white;
102-
103-
> div {
104-
display: flex;
105-
justify-content: center;
106-
overflow: hidden;
107-
}
108-
109-
> div > div {
110-
// display: -webkit-box;
111-
// -webkit-line-clamp: 5;
112-
// -webkit-box-orient: vertical;
113-
* {
114-
line-height: normal;
115-
}
116-
min-height: 50px;
117-
}
118-
}
119-
120-
> p {
121-
grid-area: text;
122-
font-size: 14px;
123-
124-
button {
125-
color: rgba(255, 255, 255, 0.5);
126-
}
127-
}
128-
}
129-
130-
.header_Neuron {
131-
width: 100%;
132-
display: flex;
133-
justify-content: space-between;
134-
align-items: center;
135-
gap: 0 5px;
136-
}
137-
13826
.noData {
13927
margin: auto;
14028
color: #616161;

‎src/features/sense/ui/SenseViewer/SenseViewer.tsx‎

Lines changed: 5 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
11
import Display from 'src/components/containerGradient/Display/Display';
22
import DisplayTitle from 'src/components/containerGradient/DisplayTitle/DisplayTitle';
33
import { useBackend } from 'src/contexts/backend/backend';
4-
import { Account } from 'src/components';
54
import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
6-
import { routes } from 'src/routes';
7-
import { Link } from 'react-router-dom';
8-
import { useEffect, useState } from 'react';
5+
import { useEffect } from 'react';
96
import Loader2 from 'src/components/ui/Loader2';
10-
import { isParticle as isParticleFunc } from 'src/features/particle/utils';
7+
118
import { markAsRead } from 'src/features/sense/redux/sense.redux';
12-
import Karma from 'src/containers/application/Karma/Karma';
13-
import HydrogenBalance from 'src/components/HydrogenBalance/HydrogenBalance';
149

15-
import ContentIpfs from 'src/components/contentIpfs/contentIpfs';
16-
import AdviserMeta from 'src/containers/ipfs/components/AdviserMeta/AdviserMeta';
17-
import cx from 'classnames';
1810
import { useRobotContext } from 'src/pages/robot/robot.context';
1911
import Messages from './Messages/Messages';
2012
import { AdviserProps } from '../Sense';
21-
import useParticleDetails from '../../../particle/useParticleDetails';
2213
import styles from './SenseViewer.module.scss';
14+
import SenseViewerHeader from './SenseViewerHeader/SenseViewerHeader';
2315

2416
type Props = {
2517
selected: string | undefined;
@@ -29,28 +21,14 @@ function SenseViewer({ adviser, selected }: Props) {
2921
const { senseApi } = useBackend();
3022
const { isOwner } = useRobotContext();
3123

32-
// const selected = 'QmZ4b5kbCV9K9Jd2ZXpfUAKiPSkzPfD558wBbebYFpztKY';
33-
34-
const isParticle = isParticleFunc(selected || '');
35-
3624
const chat = useAppSelector((store) => {
3725
return selected && store.sense.chats[selected];
3826
});
3927

40-
const { data: particleData } = useParticleDetails(selected!, {
41-
skip: !isParticle && !selected,
42-
});
43-
4428
const dispatch = useAppDispatch();
4529

46-
const [particleContentOpen, setParticleContentOpen] = useState(false);
47-
4830
const { error, isLoading: loading, data: messages } = chat || {};
4931

50-
const text = particleData?.text;
51-
52-
// console.log(particleData);
53-
5432
useEffect(() => {
5533
if (selected && senseApi) {
5634
dispatch(
@@ -70,61 +48,10 @@ function SenseViewer({ adviser, selected }: Props) {
7048
adviser.setError(error || '');
7149
}, [error, adviser]);
7250

73-
const largeContent = text?.length > 200;
74-
7551
let title;
7652

7753
if (selected) {
78-
title = (
79-
<DisplayTitle
80-
title={
81-
isParticle ? (
82-
<header className={styles.header}>
83-
{/* <ParticleAvatar particleId={selected} /> */}
84-
85-
{/* {cutSenseItem(selected)} */}
86-
87-
<div className={styles.meta}>
88-
<AdviserMeta
89-
cid={selected}
90-
type={particleData?.type}
91-
size={particleData?.content?.length}
92-
/>
93-
</div>
94-
95-
<Link
96-
className={cx(styles.title, {
97-
[styles.largeContent]: largeContent,
98-
[styles.fullContent]: largeContent && particleContentOpen,
99-
})}
100-
to={routes.oracle.ask.getLink(selected)}
101-
>
102-
<ContentIpfs
103-
// search
104-
cid={selected}
105-
details={particleData}
106-
/>
107-
</Link>
108-
</header>
109-
) : (
110-
<header className={styles.header_Neuron}>
111-
{/* need this wrapper to prevent jump */}
112-
<div className={styles.karma}>
113-
<Karma address={selected} />
114-
</div>
115-
116-
{/* fix this check in parent */}
117-
{selected?.includes('bostrom') && (
118-
<Account address={selected} avatar />
119-
)}
120-
<Link to={routes.neuron.getLink(selected)}>
121-
<HydrogenBalance address={selected} />
122-
</Link>
123-
</header>
124-
)
125-
}
126-
/>
127-
);
54+
title = <DisplayTitle title={<SenseViewerHeader selected={selected} />} />;
12855
}
12956

13057
if (selected && !isOwner) {
@@ -141,11 +68,7 @@ function SenseViewer({ adviser, selected }: Props) {
14168
<Loader2 />
14269
</div>
14370
) : (
144-
<p className={styles.noData}>
145-
{/* post to your log, <br /> */}
146-
{/* or */}
147-
select chat to start messaging
148-
</p>
71+
<p className={styles.noData}>select chat to start messaging</p>
14972
)}
15073
</Display>
15174
</div>

0 commit comments

Comments
 (0)