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

chore: tweak tag store

Browse Source
This commit is contained in:
Steven
2024-04-14 22:20:09 +08:00
parent 1f0bfd2169
commit f9dd29ae07
6 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server/route/api/v2/tag_service.go
View File

@@ -50,7 +50,7 @@ func (s *APIV2Service) BatchUpsertTag(ctx context.Context, request *apiv2pb.Batc
return &apiv2pb.BatchUpsertTagResponse{}, nil return &apiv2pb.BatchUpsertTagResponse{}, nil
} }
func (s *APIV2Service) ListTags(ctx context.Context, request *apiv2pb.ListTagsRequest) (*apiv2pb.ListTagsResponse, error) { func (s *APIV2Service) ListTags(ctx context.Context, _ *apiv2pb.ListTagsRequest) (*apiv2pb.ListTagsResponse, error) {
user, err := getCurrentUser(ctx, s.Store) user, err := getCurrentUser(ctx, s.Store)
if err != nil { if err != nil {
return nil, status.Errorf(codes.Internal, "failed to get user") return nil, status.Errorf(codes.Internal, "failed to get user")

48
web/src/components/CreateTagDialog.tsx
View File

@@ -26,10 +26,10 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
const currentUser = useCurrentUser(); const currentUser = useCurrentUser();
const tagStore = useTagStore(); const tagStore = useTagStore();
const [tagName, setTagName] = useState<string>(""); const [tagName, setTagName] = useState<string>("");
const [suggestTagNameList, setSuggestTagNameList] = useState<string[]>([]); const [suggestTags, setSuggestTags] = useState<string[]>([]);
const [showTagSuggestions, setShowTagSuggestions] = useState<boolean>(false); const [showTagSuggestions, setShowTagSuggestions] = useState<boolean>(false);
const tagNameList = tagStore.getState().tags; const tags = Array.from(tagStore.getState().tags);
const shownSuggestTagNameList = suggestTagNameList.filter((tag) => !tagNameList.has(tag)); const shownSuggestTags = suggestTags.filter((tag) => !tags.includes(tag));
useEffect(() => { useEffect(() => {
tagServiceClient tagServiceClient
@@ -37,9 +37,9 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
user: currentUser.name, user: currentUser.name,
}) })
.then(({ tags }) => { .then(({ tags }) => {
setSuggestTagNameList(tags.filter((tag) => validateTagName(tag))); setSuggestTags(tags.filter((tag) => validateTagName(tag)));
}); });
}, [tagNameList]); }, [tags]);
const handleTagNameInputKeyDown = (event: React.KeyboardEvent) => { const handleTagNameInputKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Enter") { if (event.key === "Enter") {
@@ -48,12 +48,12 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
}; };
const handleTagNameChanged = (event: React.ChangeEvent<HTMLInputElement>) => { const handleTagNameChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
const tagName = event.target.value; const tag = event.target.value;
setTagName(tagName.trim()); setTagName(tag.trim());
}; };
const handleUpsertTag = async (tagName: string) => { const handleUpsertTag = async (tag: string) => {
await tagStore.upsertTag(tagName); await tagStore.upsertTag(tag);
}; };
const handleToggleShowSuggestionTags = () => { const handleToggleShowSuggestionTags = () => {
@@ -80,7 +80,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
}; };
const handleSaveSuggestTagList = async () => { const handleSaveSuggestTagList = async () => {
for (const tagName of suggestTagNameList) { for (const tagName of suggestTags) {
if (validateTagName(tagName)) { if (validateTagName(tagName)) {
await tagStore.upsertTag(tagName); await tagStore.upsertTag(tagName);
} }
@@ -107,27 +107,25 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
startDecorator={<Icon.Hash className="w-4 h-auto" />} startDecorator={<Icon.Hash className="w-4 h-auto" />}
endDecorator={<Icon.Check onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />} endDecorator={<Icon.Check onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />}
/> />
{tagNameList.size > 0 && ( {tags.length > 0 && (
<> <>
<p className="w-full mt-2 mb-1 text-sm text-gray-400">{t("tag.all-tags")}</p> <p className="w-full mt-2 mb-1 text-sm text-gray-400">{t("tag.all-tags")}</p>
<div className="w-full flex flex-row justify-start items-start flex-wrap"> <div className="w-full flex flex-row justify-start items-start flex-wrap">
{Array.from(tagNameList) {tags.sort().map((tag) => (
.sort() <OverflowTip
.map((tag) => ( key={tag}
<OverflowTip className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60 hover:line-through"
key={tag} >
className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60 hover:line-through" <span className="w-full" onClick={() => handleDeleteTag(tag)}>
> #{tag}
<span className="w-full" onClick={() => handleDeleteTag(tag)}> </span>
#{tag} </OverflowTip>
</span> ))}
</OverflowTip>
))}
</div> </div>
</> </>
)} )}
{shownSuggestTagNameList.length > 0 && ( {shownSuggestTags.length > 0 && (
<> <>
<div className="mt-4 mb-1 text-sm w-full flex flex-row justify-start items-center"> <div className="mt-4 mb-1 text-sm w-full flex flex-row justify-start items-center">
<span className="text-gray-400 mr-2">{t("tag.tag-suggestions")}</span> <span className="text-gray-400 mr-2">{t("tag.tag-suggestions")}</span>
@@ -141,7 +139,7 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
{showTagSuggestions && ( {showTagSuggestions && (
<> <>
<div className="w-full flex flex-row justify-start items-start flex-wrap mb-2"> <div className="w-full flex flex-row justify-start items-start flex-wrap mb-2">
{shownSuggestTagNameList.map((tag) => ( {shownSuggestTags.map((tag) => (
<OverflowTip <OverflowTip
key={tag} key={tag}
className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60" className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60"

4
web/src/components/HomeSidebar/TagsSection.tsx
View File

@@ -25,7 +25,7 @@ const TagsSection = () => {
const filterStore = useFilterStore(); const filterStore = useFilterStore();
const tagStore = useTagStore(); const tagStore = useTagStore();
const memoList = useMemoList(); const memoList = useMemoList();
const tagsText = tagStore.getState().tags; const tagsText = Array.from(tagStore.getState().tags);
const filter = filterStore.state; const filter = filterStore.state;
const [tags, setTags] = useState<Tag[]>([]); const [tags, setTags] = useState<Tag[]>([]);
@@ -38,7 +38,7 @@ const TagsSection = () => {
); );
useEffect(() => { useEffect(() => {
const sortedTags = Array.from(tagsText).sort(); const sortedTags = tagsText.sort();
const root: KVObject<any> = { const root: KVObject<any> = {
subTags: [], subTags: [],
}; };

6
web/src/components/MemoEditor/ActionButton/TagSelector.tsx
View File

@@ -17,7 +17,7 @@ const TagSelector = (props: Props) => {
const tagStore = useTagStore(); const tagStore = useTagStore();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const tags = tagStore.getState().tags; const tags = Array.from(tagStore.getState().tags);
useEffect(() => { useEffect(() => {
(async () => { (async () => {
@@ -60,9 +60,9 @@ const TagSelector = (props: Props) => {
</MenuButton> </MenuButton>
<Menu className="relative text-sm" component="div" size="sm" placement="bottom-start"> <Menu className="relative text-sm" component="div" size="sm" placement="bottom-start">
<div ref={containerRef}> <div ref={containerRef}>
{tags.size > 0 ? ( {tags.length > 0 ? (
<div className="flex-row justify-start items-start flex-wrap px-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto font-mono"> <div className="flex-row justify-start items-start flex-wrap px-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto font-mono">
{Array.from(tags).map((tag) => { {tags.map((tag) => {
return ( return (
<div <div
key={tag} key={tag}

2
web/src/components/MemoEditor/MemoEditorDialog.tsx
View File

@@ -16,7 +16,7 @@ const MemoEditorDialog: React.FC<Props> = ({ memoName: memo, cacheKey, relationL
const tagStore = useTagStore(); const tagStore = useTagStore();
useEffect(() => { useEffect(() => {
tagStore.fetchTags(); tagStore.fetchTags({ skipCache: false });
}, []); }, []);
const handleCloseBtnClick = () => { const handleCloseBtnClick = () => {

10
web/src/store/v1/tag.ts
View File

@@ -14,9 +14,13 @@ export const useTagStore = create(
combine(getDefaultState(), (set, get) => ({ combine(getDefaultState(), (set, get) => ({
setState: (state: State) => set(state), setState: (state: State) => set(state),
getState: () => get(), getState: () => get(),
fetchTags: async () => { fetchTags: async (options?: { skipCache: boolean }) => {
const { tags } = await tagServiceClient.listTags({}); const { tags } = get();
set({ tags: new Set(tags.map((tag) => tag.name)) }); if (tags.size && !options?.skipCache) {
return tags;
}
const res = await tagServiceClient.listTags({});
set({ tags: new Set(res.tags.map((tag) => tag.name)) });
return tags; return tags;
}, },
upsertTag: async (tagName: string) => { upsertTag: async (tagName: string) => {