feat: finish favorite list page
This commit is contained in:
zerosoul
+15
-30
@@ -1,41 +1,33 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import dayjs from "dayjs";
|
||||
// import dayjs from "dayjs";
|
||||
|
||||
import styled from "styled-components";
|
||||
import StyledMsg from "./styled";
|
||||
import renderContent from "./renderContent";
|
||||
import Avatar from "../Avatar";
|
||||
import useFavMessage from "../../hook/useFavMessage";
|
||||
const StyledSaved = styled.div`
|
||||
const StyledFav = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--br);
|
||||
background-color: #f4f4f5;
|
||||
padding: 8px;
|
||||
`;
|
||||
const SavedMessage = ({ cid, id }) => {
|
||||
const { favorites } = useFavMessage({ cid });
|
||||
const [fav, setFav] = useState(null);
|
||||
const [messages, setMessages] = useState(null);
|
||||
useEffect(() => {
|
||||
if (id && favorites) {
|
||||
const msgs = favorites.find((f) => f.id == id)?.messages;
|
||||
console.log("favv", favorites, id, msgs);
|
||||
setMessages(msgs);
|
||||
}
|
||||
}, [id, favorites]);
|
||||
const FavoritedMessage = ({ id }) => {
|
||||
const { favorites } = useFavMessage({});
|
||||
const [msgs, setMsgs] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const current = favorites.find((f) => f.id == id);
|
||||
const { messages } = current || {};
|
||||
if (messages) {
|
||||
const fav_mids = messages.map(({ from_mid }) => from_mid) || [];
|
||||
const favorite_mids = messages.map(({ from_mid }) => from_mid) || [];
|
||||
|
||||
setFav(
|
||||
<StyledSaved data-fav-mids={fav_mids.join(",")}>
|
||||
setMsgs(
|
||||
<StyledFav data-favorite-mids={favorite_mids.join(",")}>
|
||||
<div className="list">
|
||||
{messages.map((msg, idx) => {
|
||||
const {
|
||||
user = {},
|
||||
created_at,
|
||||
download,
|
||||
content,
|
||||
content_type,
|
||||
@@ -43,7 +35,7 @@ const SavedMessage = ({ cid, id }) => {
|
||||
thumbnail,
|
||||
} = msg;
|
||||
return (
|
||||
<StyledMsg className="favorite" key={idx}>
|
||||
<StyledMsg className="archive" key={idx}>
|
||||
{user && (
|
||||
<div className="avatar">
|
||||
<Avatar url={user.avatar} name={user.name} />
|
||||
@@ -52,16 +44,10 @@ const SavedMessage = ({ cid, id }) => {
|
||||
<div className="details">
|
||||
<div className="up">
|
||||
<span className="name">{user?.name}</span>
|
||||
<i className="time">
|
||||
{dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
|
||||
</i>
|
||||
</div>
|
||||
<div className="down">
|
||||
{renderContent({
|
||||
download,
|
||||
context: "channel",
|
||||
to: null,
|
||||
from_uid: null,
|
||||
content,
|
||||
content_type,
|
||||
properties,
|
||||
@@ -73,15 +59,14 @@ const SavedMessage = ({ cid, id }) => {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</StyledSaved>
|
||||
</StyledFav>
|
||||
);
|
||||
}
|
||||
}, [messages]);
|
||||
}, [favorites, id]);
|
||||
|
||||
if (!id) return null;
|
||||
console.log("archive data", messages, fav);
|
||||
|
||||
return fav;
|
||||
return msgs;
|
||||
};
|
||||
|
||||
export default SavedMessage;
|
||||
export default FavoritedMessage;
|
||||
@@ -1,6 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import styled from "styled-components";
|
||||
import StyledMsg from "./styled";
|
||||
import renderContent from "./renderContent";
|
||||
@@ -12,8 +10,8 @@ const StyledForward = styled.div`
|
||||
flex-direction: column;
|
||||
border-radius: var(--br);
|
||||
background-color: #f4f4f5;
|
||||
padding: 8px;
|
||||
> .tip {
|
||||
padding: 8px 8px 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
@@ -53,7 +51,7 @@ const ForwardedMessage = ({ context, to, from_uid, id }) => {
|
||||
{messages.map((msg, idx) => {
|
||||
const {
|
||||
user = {},
|
||||
created_at,
|
||||
// created_at,
|
||||
download,
|
||||
content,
|
||||
content_type,
|
||||
@@ -61,7 +59,7 @@ const ForwardedMessage = ({ context, to, from_uid, id }) => {
|
||||
thumbnail,
|
||||
} = msg;
|
||||
return (
|
||||
<StyledMsg key={idx}>
|
||||
<StyledMsg className="archive" key={idx}>
|
||||
{user && (
|
||||
<div className="avatar">
|
||||
<Avatar url={user.avatar} name={user.name} />
|
||||
@@ -70,9 +68,6 @@ const ForwardedMessage = ({ context, to, from_uid, id }) => {
|
||||
<div className="details">
|
||||
<div className="up">
|
||||
<span className="name">{user?.name}</span>
|
||||
<i className="time">
|
||||
{dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
|
||||
</i>
|
||||
</div>
|
||||
<div className="down">
|
||||
{renderContent({
|
||||
|
||||
@@ -11,8 +11,8 @@ import URLPreview from "./URLPreview";
|
||||
|
||||
import reactStringReplace from "react-string-replace";
|
||||
const renderContent = ({
|
||||
context,
|
||||
to,
|
||||
context = null,
|
||||
to = null,
|
||||
from_uid,
|
||||
created_at,
|
||||
properties,
|
||||
|
||||
@@ -1,94 +1,111 @@
|
||||
import styled from 'styled-components';
|
||||
import styled from "styled-components";
|
||||
const StyledMsg = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 4px 8px;
|
||||
margin: 8px 0;
|
||||
border-radius: 8px;
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 150px;
|
||||
&.in_view {
|
||||
content-visibility: visible;
|
||||
}
|
||||
&[data-highlight='true'] {
|
||||
background: #f5f6f7;
|
||||
}
|
||||
&:hover,
|
||||
&.preview {
|
||||
content-visibility: inherit;
|
||||
contain-intrinsic-size: inherit;
|
||||
background: #f5f6f7;
|
||||
.cmds {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
&.readonly:hover {
|
||||
background: none;
|
||||
}
|
||||
.avatar {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
> .details {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.up {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
.name {
|
||||
color: #06b6d4;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.time {
|
||||
color: #bfbfbf;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 4px 8px;
|
||||
margin: 8px 0;
|
||||
border-radius: 8px;
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 150px;
|
||||
&.in_view {
|
||||
content-visibility: visible;
|
||||
}
|
||||
.down {
|
||||
user-select: text;
|
||||
color: #374151;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
.edited {
|
||||
margin-left: 5px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
}
|
||||
&.sending {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.img {
|
||||
max-width: 480px;
|
||||
&[data-highlight="true"] {
|
||||
background: #f5f6f7;
|
||||
}
|
||||
&:hover,
|
||||
&.preview {
|
||||
content-visibility: inherit;
|
||||
contain-intrinsic-size: inherit;
|
||||
background: #f5f6f7;
|
||||
.cmds {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
&.readonly:hover {
|
||||
background: none;
|
||||
}
|
||||
.avatar {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .link {
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
/* background-color: #f5feff; */
|
||||
padding: 2px;
|
||||
color: #1fe1f9;
|
||||
}
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
> .details {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.up {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
.name {
|
||||
color: #06b6d4;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.time {
|
||||
color: #bfbfbf;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
.down {
|
||||
user-select: text;
|
||||
color: #374151;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
.edited {
|
||||
margin-left: 5px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
}
|
||||
&.sending {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.img {
|
||||
max-width: 480px;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .link {
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
/* background-color: #f5feff; */
|
||||
padding: 2px;
|
||||
color: #1fe1f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.archive {
|
||||
gap: 8px;
|
||||
.avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
> .details {
|
||||
gap: 0;
|
||||
.up .name {
|
||||
font-weight: 600;
|
||||
color: #475467;
|
||||
}
|
||||
.down {
|
||||
color: #475467;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledMsg;
|
||||
|
||||
Reference in New Issue
Block a user