YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-22 06:07:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: tweak view checks

Browse Source
This commit is contained in:
Steven 2024-02-08 13:37:38 +08:00
parent d86f0bac8c
commit c7822515a1
4 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/MemoReactionistView.tsx → web/src/components/MemoReactionListView.tsx
View File

@ -1,5 +1,6 @@
import { uniq } from "lodash-es"; import { uniq } from "lodash-es";
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useState } from "react";
import useCurrentUser from "@/hooks/useCurrentUser";
import { extractUsernameFromName, useUserStore } from "@/store/v1"; import { extractUsernameFromName, useUserStore } from "@/store/v1";
import { Memo } from "@/types/proto/api/v2/memo_service"; import { Memo } from "@/types/proto/api/v2/memo_service";
import { Reaction, Reaction_Type } from "@/types/proto/api/v2/reaction_service"; import { Reaction, Reaction_Type } from "@/types/proto/api/v2/reaction_service";
@ -14,6 +15,7 @@ interface Props {
const MemoReactionListView = (props: Props) => { const MemoReactionListView = (props: Props) => {
const { memo, reactions } = props; const { memo, reactions } = props;
const currentUser = useCurrentUser();
const userStore = useUserStore(); const userStore = useUserStore();
const [reactionGroup, setReactionGroup] = useState<Map<Reaction_Type, User[]>>(new Map()); const [reactionGroup, setReactionGroup] = useState<Map<Reaction_Type, User[]>>(new Map());
@ -31,8 +33,8 @@ const MemoReactionListView = (props: Props) => {
}, [reactions]); }, [reactions]);
return ( return (
<div className="w-full mt-2 flex flex-row justify-start items-start flex-wrap gap-1"> <div className="w-full mt-2 flex flex-row justify-start items-start flex-wrap gap-1 select-none">
<ReactionSelector memo={memo} /> {currentUser && <ReactionSelector memo={memo} />}
{Array.from(reactionGroup).map(([reactionType, users]) => { {Array.from(reactionGroup).map(([reactionType, users]) => {
return <ReactionView key={`${reactionType.toString()} ${users.length}`} memo={memo} reactionType={reactionType} users={users} />; return <ReactionView key={`${reactionType.toString()} ${users.length}`} memo={memo} reactionType={reactionType} users={users} />;
})} })}

2
web/src/components/MemoView.tsx
View File

@ -20,7 +20,7 @@ import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon"; import Icon from "./Icon";
import MemoContent from "./MemoContent"; import MemoContent from "./MemoContent";
import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog"; import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
import MemoReactionistView from "./MemoReactionistView"; import MemoReactionistView from "./MemoReactionListView";
import MemoRelationListView from "./MemoRelationListView"; import MemoRelationListView from "./MemoRelationListView";
import MemoResourceListView from "./MemoResourceListView"; import MemoResourceListView from "./MemoResourceListView";
import showPreviewImageDialog from "./PreviewImageDialog"; import showPreviewImageDialog from "./PreviewImageDialog";

4
web/src/components/ReactionSelector.tsx
View File

@ -14,11 +14,11 @@ interface Props {
const REACTION_TYPES = [ const REACTION_TYPES = [
Reaction_Type.THUMBS_UP, Reaction_Type.THUMBS_UP,
Reaction_Type.THUMBS_DOWN,
Reaction_Type.LAUGH,
Reaction_Type.HEART, Reaction_Type.HEART,
Reaction_Type.ROCKET, Reaction_Type.ROCKET,
Reaction_Type.LAUGH,
Reaction_Type.EYES, Reaction_Type.EYES,
Reaction_Type.THUMBS_DOWN,
]; ];
const ReactionSelector = (props: Props) => { const ReactionSelector = (props: Props) => {

4
web/src/components/ReactionView.tsx
View File

@ -40,9 +40,9 @@ const stringifyUsers = (users: User[]): string => {
return users.map((user) => user.nickname || user.username).join(", "); return users.map((user) => user.nickname || user.username).join(", ");
} }
return `${users return `${users
.slice(0, 5) .slice(0, 4)
.map((user) => user.nickname || user.username) .map((user) => user.nickname || user.username)
.join(", ")} and ${users.length - 5} others`; .join(", ")} and ${users.length - 4} others`;
}; };
const ReactionView = (props: Props) => { const ReactionView = (props: Props) => {