feat: finish favorite list page
This commit is contained in:
zerosoul
@@ -1,7 +1,7 @@
|
||||
// import React from "react";
|
||||
// import { useSelector } from "react-redux";
|
||||
import styled from "styled-components";
|
||||
import SavedMessage from "../../common/component/Message/SavedMessage";
|
||||
import FavoritedMessage from "../../common/component/Message/FavoritedMessage";
|
||||
import IconSurprise from "../../assets/icons/emoji.suprise.svg";
|
||||
// import IconForward from "../../../assets/icons/forward.svg";
|
||||
import IconBookmark from "../../assets/icons/bookmark.svg";
|
||||
@@ -93,7 +93,6 @@ export default function FavList({ cid = null, uid = null }) {
|
||||
return (
|
||||
<Styled>
|
||||
<h4 className="head">Saved Message({favorites.length})</h4>
|
||||
|
||||
{noFavs ? (
|
||||
<div className="none">
|
||||
<IconSurprise />
|
||||
@@ -107,7 +106,7 @@ export default function FavList({ cid = null, uid = null }) {
|
||||
console.log("favv", id);
|
||||
return (
|
||||
<li key={id} className="fav">
|
||||
<SavedMessage cid={cid} id={id} />
|
||||
<FavoritedMessage id={id} />
|
||||
<div className="opts">
|
||||
{/* <button
|
||||
className="btn"
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
// import React from "react";
|
||||
import styled from "styled-components";
|
||||
import iconSearch from "../../assets/icons/search.svg?url";
|
||||
const Styled = styled.div`
|
||||
width: 100%;
|
||||
padding: 6px 16px;
|
||||
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
&.embed {
|
||||
padding: 6px 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.search {
|
||||
outline: none;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 25px;
|
||||
padding: 10px 8px 10px 36px;
|
||||
color: #a1a1aa;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
background-image: url(${iconSearch});
|
||||
background-repeat: no-repeat;
|
||||
background-position: 8px center;
|
||||
}
|
||||
`;
|
||||
export default function Search({
|
||||
value = "",
|
||||
updateSearchValue = null,
|
||||
embed = false,
|
||||
}) {
|
||||
const handleChange = (evt) => {
|
||||
if (updateSearchValue) {
|
||||
updateSearchValue(evt.target.value);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Styled className={embed ? "embed" : ""}>
|
||||
<input
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
className="search"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</Styled>
|
||||
);
|
||||
}
|
||||
+158
-28
@@ -1,43 +1,173 @@
|
||||
// import { useState, useEffect, useRef, memo } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import Styled from "./styled";
|
||||
import { useSelector } from "react-redux";
|
||||
import SavedMessage from "../../common/component/Message/SavedMessage";
|
||||
import FavoritedMessage from "../../common/component/Message/FavoritedMessage";
|
||||
import dayjs from "dayjs";
|
||||
import IconAudio from "../../assets/icons/file.audio.svg";
|
||||
import IconVideo from "../../assets/icons/file.video.svg";
|
||||
import IconUnkown from "../../assets/icons/file.unkown.svg";
|
||||
// import IconDoc from "../../assets/icons/file.doc.svg";
|
||||
import IconImage from "../../assets/icons/file.image.svg";
|
||||
import IconChannel from "../../assets/icons/channel.svg";
|
||||
import { ContentTypes } from "../../app/config";
|
||||
const Filters = [
|
||||
{
|
||||
icon: <IconUnkown className="icon" />,
|
||||
title: "All Items",
|
||||
filter: "",
|
||||
},
|
||||
{
|
||||
icon: <IconImage className="icon" />,
|
||||
title: "Images",
|
||||
filter: "image",
|
||||
},
|
||||
// {
|
||||
// icon: <IconDoc className="icon" />,
|
||||
// title: "Files",
|
||||
// filter: "file",
|
||||
// },
|
||||
{
|
||||
icon: <IconVideo className="icon" />,
|
||||
title: "Videos",
|
||||
filter: "video",
|
||||
},
|
||||
{
|
||||
icon: <IconAudio className="icon" />,
|
||||
title: "Audios",
|
||||
filter: "audio",
|
||||
},
|
||||
];
|
||||
function FavsPage() {
|
||||
// const listContainerRef = useRef(null);
|
||||
// const [filter, setFilter] = useState({});
|
||||
const { favorites } = useSelector((store) => {
|
||||
const [filter, setFilter] = useState("");
|
||||
const [favs, setFavs] = useState([]);
|
||||
const { favorites, channelData, userData } = useSelector((store) => {
|
||||
console.log("favs", store.favorites);
|
||||
return {
|
||||
favorites: store.favorites,
|
||||
// channelMessage: store.channelMessage,
|
||||
// view: store.ui.fileListView,
|
||||
userData: store.contacts.byId,
|
||||
channelData: store.channels.byId,
|
||||
};
|
||||
});
|
||||
const handleFilter = (ftr) => {
|
||||
console.log("fff", ftr);
|
||||
setFilter(ftr);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!filter) {
|
||||
setFavs(favorites);
|
||||
} else {
|
||||
switch (filter) {
|
||||
case "audio":
|
||||
{
|
||||
setFavs(
|
||||
favorites.filter((f) => {
|
||||
const msgs = f.messages || [];
|
||||
return msgs.every((m) => {
|
||||
const file_type = m.properties?.content_type;
|
||||
return (
|
||||
m.content_type == ContentTypes.file &&
|
||||
file_type.startsWith("audio")
|
||||
);
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
break;
|
||||
case "video":
|
||||
{
|
||||
setFavs(
|
||||
favorites.filter((f) => {
|
||||
const msgs = f.messages || [];
|
||||
return msgs.every((m) => {
|
||||
const file_type = m.properties?.content_type;
|
||||
return (
|
||||
m.content_type == ContentTypes.file &&
|
||||
file_type.startsWith("video")
|
||||
);
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
break;
|
||||
// case "file":
|
||||
// {
|
||||
// const tmps = favorites.filter((f) => {
|
||||
// const msgs = f.messages || [];
|
||||
// return msgs.every((m) => {
|
||||
// return m.content_type == ContentTypes.file;
|
||||
// });
|
||||
// });
|
||||
// setFavs(tmps);
|
||||
// }
|
||||
// break;
|
||||
case "image":
|
||||
{
|
||||
const tmps = favorites.filter((f) => {
|
||||
const msgs = f.messages || [];
|
||||
return msgs.every((m) => {
|
||||
const file_type = m.properties?.content_type;
|
||||
return (
|
||||
m.content_type == ContentTypes.file &&
|
||||
file_type.startsWith("image")
|
||||
);
|
||||
});
|
||||
});
|
||||
setFavs(tmps);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, [filter, favorites]);
|
||||
|
||||
return (
|
||||
<Styled>
|
||||
{favorites.map(({ id, created_at, messages }) => {
|
||||
const [
|
||||
{
|
||||
source: { gid, uid },
|
||||
},
|
||||
] = messages;
|
||||
|
||||
return (
|
||||
<div className="fav" key={id}>
|
||||
<h4 className="tip">
|
||||
{gid ? `gid:${gid}` : `uid:${uid}`}{" "}
|
||||
{dayjs(created_at).format("YYYY-MM-DD")}
|
||||
</h4>
|
||||
<SavedMessage key={id} id={id} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="left">
|
||||
<ul className="filters">
|
||||
{Filters.map(({ icon, title, filter: f }) => {
|
||||
return (
|
||||
<li
|
||||
key={f}
|
||||
className={`filter ${f == filter ? "active" : ""}`}
|
||||
onClick={handleFilter.bind(null, f)}
|
||||
>
|
||||
{icon}
|
||||
<span className="txt">{title}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="right">
|
||||
{favs.map(({ id, created_at, messages }) => {
|
||||
const [
|
||||
{
|
||||
source: { gid, uid },
|
||||
},
|
||||
] = messages;
|
||||
const tip = gid ? (
|
||||
<span className="from channel">
|
||||
<IconChannel className="icon" /> {channelData[gid]?.name}
|
||||
</span>
|
||||
) : (
|
||||
<span className="from user">
|
||||
From <strong>{userData[uid]?.name}</strong>
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<div className="fav" key={id}>
|
||||
<h4 className="tip">
|
||||
{tip}
|
||||
{dayjs(created_at).format("YYYY-MM-DD")}
|
||||
</h4>
|
||||
<FavoritedMessage key={id} id={id} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Styled>
|
||||
);
|
||||
}
|
||||
export default FavsPage;
|
||||
// const equals = (a, b) => a.length === b.length && a.every((v, i) => v == b[i]);
|
||||
// export default memo(FavsPage, (prevs, nexts) => {
|
||||
// return equals(prevs.fileMessages, nexts.fileMessages);
|
||||
// });
|
||||
|
||||
+67
-12
@@ -1,24 +1,79 @@
|
||||
import styled from "styled-components";
|
||||
const Styled = styled.div`
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
background-color: #fff;
|
||||
margin: 8px 24px 10px 0;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
.fav {
|
||||
overflow: auto;
|
||||
.left {
|
||||
padding: 8px;
|
||||
width: 268px;
|
||||
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
.filter {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: var(--br);
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 20px;
|
||||
}
|
||||
.txt {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #667085;
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(116, 127, 141, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tip {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #bfbfbf;
|
||||
gap: 32px;
|
||||
overflow-y: scroll;
|
||||
.fav {
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
.tip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #bfbfbf;
|
||||
.from {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-right: 8px;
|
||||
&.channel,
|
||||
&.user strong {
|
||||
font-weight: 600;
|
||||
color: #344054;
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user