feat/revert like (#429)

package.json

@@ -205,4 +205,4 @@
     "minimumChangeThreshold": 0,
     "showDetails": true
   }
-}
+}

public/locales/ja/common.json

@@ -38,6 +38,11 @@
   "Got it, thanks!": "了解しました、ありがとうございます！",
   "Like List": "いいねリスト",
   "Mint List": "ミントリスト",
+  "Revert": "退会済み",
+  "Confirm to revert": "退会確認",
+  "like revert": "このライクアクションを撤回したい場合は、チェックしてください。",
+  "Cancel": "キャンセル",
+  "Confirm": "確認",
   "No Content Yet.": "まだ何もありません。",
   "Close": "閉じる",
   "Dashboard": "ダッシュボード",

public/locales/zh-TW/common.json

@@ -44,6 +44,11 @@
     "Got it, thanks!": "知道啦，感恩的心～",
     "Like List": "按讚列表",
     "Mint List": "珍藏列表",
+    "Revert": "撤銷",
+    "Confirm to revert": "確認撤銷",
+    "like revert": "請確認您是否想要撤銷這個點贊操作？",
+    "Cancel": "取消",
+    "Confirm": "確認",
     "No Content Yet.": "什麼都沒",
     "Close": "關閉",
     "Dashboard": "主控臺",

public/locales/zh/common.json

@@ -44,6 +44,11 @@
   "Got it, thanks!": "好的，谢谢！",
   "Like List": "点赞列表",
   "Mint List": "珍藏列表",
+  "Revert": "撤销",
+  "Confirm to revert": "确认撤销",
+  "like revert": "请确认您是否想要撤销这个点赞操作？",
+  "Cancel": "取消",
+  "Confirm": "确认",
   "No Content Yet.": "暂无内容",
   "Close": "关闭",
   "Dashboard": "仪表盘",

src/components/common/Reactions.tsx

@@ -51,6 +51,8 @@ export const Reactions: React.FC<{
   })
   const { data: likeCount = 0 } = useGetLikeCounts({ pageId })
 
+  const [isUnlikeOpen, setIsUnlikeOpen] = useState(false)
+
   const like = () => {
     if (pageId) {
       if (likeStatus.isLiked) {
@@ -61,9 +63,18 @@ export const Reactions: React.FC<{
     }
   }
 
+  const unlike = () => {
+    if (pageId) {
+      setIsUnlikeOpen(false)
+      if (likeStatus.isLiked) {
+        toggleLikePage.mutate({ ...parsePageId(pageId), action: "unlink" })
+      } // else do nothing
+    }
+  }
+
   useEffect(() => {
     if (toggleLikePage.isSuccess) {
-      if (likeRef.current?.getBoundingClientRect()) {
+      if (likeRef.current?.getBoundingClientRect() && likeStatus.isLiked) {
         confetti({
           particleCount: 150,
           spread: 70,
@@ -347,10 +358,39 @@ export const Reactions: React.FC<{
               </UniLink>
             </Trans>
           </div>
-          <div className="h-16 border-t flex items-center px-5">
+          <div className="border-t flex flex-col md:flex-row gap-4 items-center px-5 py-4">
             <Button isBlock onClick={() => setIsLikeOpen(false)}>
               {t("Got it, thanks!")}
             </Button>
+            <Button
+              variant="secondary"
+              isBlock
+              onClick={() => {
+                setIsUnlikeOpen(true)
+                setIsLikeOpen(false)
+              }}
+            >
+              {t("Revert")}
+            </Button>
+          </div>
+        </Modal>
+        <Modal
+          open={isUnlikeOpen}
+          setOpen={setIsUnlikeOpen}
+          title={t("Confirm to revert")}
+        >
+          <div className="p-5">
+            <Trans i18nKey="like revert">
+              Do you really want to revert this like action?
+            </Trans>
+          </div>
+          <div className="border-t flex flex-col md:flex-row gap-4 items-center px-5 py-4">
+            <Button isBlock onClick={() => setIsUnlikeOpen(false)}>
+              {t("Cancel")}
+            </Button>
+            <Button variant="secondary" isBlock onClick={() => unlike()}>
+              {t("Confirm")}
+            </Button>
           </div>
         </Modal>
         <Modal

src/middleware.ts

@@ -4,14 +4,16 @@ import { IS_PROD } from "~/lib/constants"
 import { DISCORD_LINK } from "~/lib/env"
 
 // HTTPWhiteListPaths: White list of path for plain http request, no HTTPS redirect
-const HTTPWhitelistPaths = [
-  "/api/healthcheck",
-]
+const HTTPWhitelistPaths = ["/api/healthcheck"]
 
 export default async function middleware(req: NextRequest) {
   const { pathname } = req.nextUrl
 
-  if (IS_PROD && req.headers.get("x-forwarded-proto") !== "https" && !HTTPWhitelistPaths.includes(req.nextUrl.pathname)) {
+  if (
+    IS_PROD &&
+    req.headers.get("x-forwarded-proto") !== "https" &&
+    !HTTPWhitelistPaths.includes(req.nextUrl.pathname)
+  ) {
     let cfHttps = false
     try {
       if (