fix: delete tag api (#950)

* fix: delete tag api

* chore: update

server/tag.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"net/http"
+	"net/url"
 	"regexp"
 	"sort"
 
@@ -133,8 +134,10 @@ func (s *Server) registerTagRoutes(g *echo.Group) {
 			return echo.NewHTTPError(http.StatusUnauthorized, "Missing user in session")
 		}
 
-		tagName := c.Param("tagName")
-		if tagName == "" {
+		tagName, err := url.QueryUnescape(c.Param("tagName"))
+		if err != nil {
+			return echo.NewHTTPError(http.StatusBadRequest, "Invalid tag name").SetInternal(err)
+		} else if tagName == "" {
 			return echo.NewHTTPError(http.StatusBadRequest, "Tag name cannot be empty")
 		}
 

web/src/components/MemoResource.tsx

+import { getResourceUrl } from "../utils/resource";
 import Icon from "./Icon";
 
 interface Props {
@@ -7,7 +8,7 @@ interface Props {
 
 const MemoResource: React.FC<Props> = (props: Props) => {
   const { className, resource } = props;
-  const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
+  const resourceUrl = getResourceUrl(resource);
 
   const handlePreviewBtnClick = () => {
     window.open(resourceUrl);

web/src/components/MemoResources.tsx

 import { absolutifyLink } from "../helpers/utils";
+import { getResourceUrl } from "../utils/resource";
 import SquareDiv from "./common/SquareDiv";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import MemoResource from "./MemoResource";
@@ -27,7 +28,7 @@ const MemoResources: React.FC<Props> = (props: Props) => {
   const imgUrls = availableResourceList
     .filter((resource) => resource.type.startsWith("image"))
     .map((resource) => {
-      return `/o/r/${resource.id}/${resource.filename}`;
+      return getResourceUrl(resource);
     });
 
   const handleImageClick = (imgUrl: string) => {
@@ -41,7 +42,7 @@ const MemoResources: React.FC<Props> = (props: Props) => {
         {availableResourceList.length > 0 && (
           <div className="images-wrapper">
             {availableResourceList.map((resource) => {
-              const url = `/o/r/${resource.id}/${resource.filename}`;
+              const url = getResourceUrl(resource);
               if (resource.type.startsWith("image")) {
                 return (
                   <SquareDiv key={resource.id} className="memo-resource">

web/src/components/ResourcesDialog.tsx

 import { Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useLoading from "../hooks/useLoading";
 import { useResourceStore } from "../store/module";
+import { getResourceUrl } from "../utils/resource";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
 import Dropdown from "./common/Dropdown";
@@ -83,10 +84,6 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
     inputEl.click();
   };
 
-  const getResourceUrl = useCallback((resource: Resource) => {
-    return `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
-  }, []);
-
   const handlePreviewBtnClick = (resource: Resource) => {
     const resourceUrl = getResourceUrl(resource);
     if (resource.type.startsWith("image")) {
@@ -104,7 +101,8 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
   };
 
   const handleCopyResourceLinkBtnClick = (resource: Resource) => {
-    copy(`${window.location.origin}/o/r/${resource.id}/${resource.filename}`);
+    const url = getResourceUrl(resource);
+    copy(url);
     toastHelper.success(t("message.succeed-copy-resource-link"));
   };
 

web/src/components/ResourcesSelectorDialog.tsx

 import { Checkbox, Tooltip } from "@mui/joy";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useLoading from "../hooks/useLoading";
 import { useEditorStore, useResourceStore } from "../store/module";
+import { getResourceUrl } from "../utils/resource";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
 import { generateDialog } from "./Dialog";
@@ -47,10 +48,6 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
     });
   }, [resources]);
 
-  const getResourceUrl = useCallback((resource: Resource) => {
-    return `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
-  }, []);
-
   const handlePreviewBtnClick = (resource: Resource) => {
     const resourceUrl = getResourceUrl(resource);
     if (resource.type.startsWith("image")) {

web/src/helpers/api.ts

@@ -198,7 +198,7 @@ export function upsertTag(tagName: string) {
 }
 
 export function deleteTag(tagName: string) {
-  return axios.delete<ResponseObject<string>>(`/api/tag/${tagName}`);
+  return axios.delete<ResponseObject<string>>(`/api/tag/${encodeURI(tagName)}`);
 }
 
 export async function getRepoStarCount() {

web/src/utils/resource.ts

+export const getResourceUrl = (resource: Resource, withOrigin = true) => {
+  return `${withOrigin ? window.location.origin : ""}/o/r/${resource.id}/${encodeURI(resource.filename)}`;
+};