chore: use conditional rendering instead of OnlyWhen

web/src/components/AboutSiteDialog.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import * as api from "../helpers/api";
-import Only from "./common/OnlyWhen";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import GitHubBadge from "./GitHubBadge";
@@ -50,7 +49,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
         <br />
         <div className="addtion-info-container">
           <GitHubBadge />
-          <Only when={profile !== undefined}>
+          {profile !== undefined && (
             <>
               {t("common.version")}:
               <span className="pre-text">
@@ -58,7 +57,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
               </span>
               🎉
             </>
-          </Only>
+          )}
         </div>
       </div>
     </>

web/src/components/Editor/Editor.tsx

@@ -1,7 +1,6 @@
 import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import useRefresh from "../../hooks/useRefresh";
-import Only from "../common/OnlyWhen";
 import "../../less/editor.less";
 
 export interface EditorRefActions {
@@ -125,15 +124,13 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
         onKeyDown={handleEditorKeyDown}
       ></textarea>
       <div className="common-tools-wrapper">
-        <div className="common-tools-container">
+        <div className="common-tools-container">{props.tools !== undefined && props.tools}</div>
-          <Only when={props.tools !== undefined}>{props.tools}</Only>
-        </div>
         <div className="btns-container">
-          <Only when={showConfirmBtn}>
+          {showConfirmBtn && (
             <button className="action-btn confirm-btn" disabled={editorRef.current?.value === ""} onClick={handleCommonConfirmBtnClick}>
               {t("editor.save")} <span className="icon-text">✍️</span>
             </button>
-          </Only>
+          )}
         </div>
       </div>
     </div>

web/src/components/Memo.tsx

@@ -8,7 +8,6 @@ import { UNKNOWN_ID } from "../helpers/consts";
 import { DONE_BLOCK_REG, TODO_BLOCK_REG } from "../helpers/marked";
 import { editorStateService, locationService, memoService, userService } from "../services";
 import Icon from "./Icon";
-import Only from "./common/OnlyWhen";
 import toastHelper from "./Toast";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
@@ -168,9 +167,9 @@ const Memo: React.FC<Props> = (props: Props) => {
       <div className="memo-top-wrapper">
         <div className="status-text-container" onClick={handleShowMemoStoryDialog}>
           <span className="time-text">{createdAtStr}</span>
-          <Only when={memo.visibility !== "PRIVATE" && !isVisitorMode}>
+          {memo.visibility !== "PRIVATE" && !isVisitorMode && (
             <span className={`status-text ${memo.visibility.toLocaleLowerCase()}`}>{memo.visibility}</span>
-          </Only>
+          )}
         </div>
         <div className={`btns-container ${userService.isVisitorMode() ? "!hidden" : ""}`}>
           <span className="btn more-action-btn">

web/src/components/MemoCardDialog.tsx

@@ -5,7 +5,6 @@ import { useAppSelector } from "../store";
 import { UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import { formatMemoContent, MEMO_LINK_REG, parseHtmlToRawText } from "../helpers/marked";
-import Only from "./common/OnlyWhen";
 import toastHelper from "./Toast";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
@@ -146,7 +145,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <Only when={!userService.isVisitorMode()}>
+      {!userService.isVisitorMode() && (
         <div className="card-header-container">
           <div className="visibility-selector-container">
             <Icon.Eye className="icon-img" />
@@ -158,14 +157,14 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
             />
           </div>
         </div>
-      </Only>
+      )}
       <div className="memo-card-container">
         <div className="header-container">
           <p className="time-text" onClick={handleMemoCreatedAtClick}>
             {utils.getDateTimeString(memo.createdTs)}
           </p>
           <div className="btns-container">
-            <Only when={!userService.isVisitorMode()}>
+            {!userService.isVisitorMode() && (
               <>
                 <button className="btn edit-btn" onClick={handleGotoMemoLinkBtnClick}>
                   <Icon.ExternalLink className="icon-img" />
@@ -175,7 +174,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
                 </button>
                 <span className="split-line">/</span>
               </>
-            </Only>
+            )}
             <button className="btn close-btn" onClick={props.destroy}>
               <Icon.X className="icon-img" />
             </button>

web/src/components/MemoList.tsx

@@ -6,7 +6,6 @@ import { IMAGE_URL_REG, LINK_URL_REG, MEMO_LINK_REG, TAG_REG } from "../helpers/
 import * as utils from "../helpers/utils";
 import { checkShouldShowMemoWithFilters } from "../helpers/filter";
 import toastHelper from "./Toast";
-import Only from "./common/OnlyWhen";
 import Memo from "./Memo";
 import "../less/memo-list.less";
 
@@ -98,19 +97,18 @@ const MemoList = () => {
 
   return (
     <div className={`memo-list-container ${isFetching ? "" : "completed"}`} ref={wrapperElement}>
-      <Only when={isFetching}>
-        <div className="status-text-container fetching-tip">
-          <p className="status-text">{t("memo-list.fetching-data")}</p>
-        </div>
-      </Only>
       {sortedMemos.map((memo) => (
         <Memo key={`${memo.id}-${memo.createdTs}-${memo.updatedTs}`} memo={memo} />
       ))}
-      <Only when={!isFetching}>
+      {isFetching ? (
+        <div className="status-text-container fetching-tip">
+          <p className="status-text">{t("memo-list.fetching-data")}</p>
+        </div>
+      ) : (
         <div className="status-text-container">
           <p className="status-text">{sortedMemos.length === 0 ? t("message.no-memos") : showMemoFilter ? "" : t("message.memos-ready")}</p>
         </div>
-      </Only>
+      )}
     </div>
   );
 };

web/src/components/MemoResources.tsx

@@ -1,5 +1,4 @@
 import { IMAGE_URL_REG } from "../helpers/marked";
-import Only from "./common/OnlyWhen";
 import Image from "./Image";
 import "../less/memo-resources.less";
 
@@ -14,13 +13,13 @@ const MemoResources: React.FC<Props> = (props: Props) => {
 
   return (
     <div className="resource-wrapper">
-      <Only when={imageUrls.length > 0}>
+      {imageUrls.length > 0 && (
         <div className={`images-wrapper ${className ?? ""}`}>
           {imageUrls.map((imgUrl, idx) => (
             <Image className="memo-img" key={idx} imgUrl={imgUrl} />
           ))}
         </div>
-      </Only>
+      )}
     </div>
   );
 };

web/src/components/ShareMemoImageDialog.tsx

@@ -5,7 +5,6 @@ import toImage from "../labs/html2image";
 import { ANIMATION_DURATION } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import { IMAGE_URL_REG } from "../helpers/marked";
-import Only from "./common/OnlyWhen";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import toastHelper from "./Toast";
@@ -88,18 +87,16 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
           <p className="tip-text">{shortcutImgUrl ? "Click to save the image 👇" : "Generating the screenshot..."}</p>
         </div>
         <div className="memo-container" ref={memoElRef}>
-          <Only when={shortcutImgUrl !== ""}>
+          {shortcutImgUrl !== "" && <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={shortcutImgUrl} />}
-            <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={shortcutImgUrl} />
-          </Only>
           <span className="time-text">{memo.createdAtStr}</span>
           <MemoContent className="memo-content-wrapper" content={memo.content} displayConfig={{ enableExpand: false }} />
-          <Only when={imageUrls.length > 0}>
+          {imageUrls.length > 0 && (
             <div className="images-container">
               {imageUrls.map((imgUrl, idx) => (
                 <img decoding="async" key={idx} src={imgUrl} onLoad={handleImageOnLoad} onError={handleImageOnLoad} />
               ))}
             </div>
-          </Only>
+          )}
           <div className="watermark-container">
             <span className="normal-text">
               <span className="icon-text">✍️</span> by <span className="name-text">{userinfo?.name}</span>

web/src/components/Sidebar.tsx

@@ -2,7 +2,6 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { userService } from "../services";
 import Icon from "./Icon";
-import Only from "./common/OnlyWhen";
 import showDailyReviewDialog from "./DailyReviewDialog";
 import showSettingDialog from "./SettingDialog";
 import UserBanner from "./UserBanner";
@@ -31,18 +30,18 @@ const Sidebar = () => {
         <button className="btn action-btn" onClick={() => showDailyReviewDialog()}>
           <span className="icon">📅</span> {t("sidebar.daily-review")}
         </button>
-        <Only when={!userService.isVisitorMode()}>
+        {!userService.isVisitorMode() && (
-          <Link to="/explore" className="btn action-btn">
+          <>
-            <span className="icon">🏂</span> {t("common.explore")}
+            <Link to="/explore" className="btn action-btn">
-          </Link>
+              <span className="icon">🏂</span> {t("common.explore")}
-          <button className="btn action-btn" onClick={handleSettingBtnClick}>
+            </Link>
-            <span className="icon">⚙️</span> {t("sidebar.setting")}
+            <button className="btn action-btn" onClick={handleSettingBtnClick}>
-          </button>
+              <span className="icon">⚙️</span> {t("sidebar.setting")}
-        </Only>
+            </button>
+          </>
+        )}
       </div>
-      <Only when={!userService.isVisitorMode()}>
+      {!userService.isVisitorMode() && <ShortcutList />}
-        <ShortcutList />
-      </Only>
       <TagList />
     </aside>
   );

web/src/components/TagList.tsx

@@ -4,7 +4,6 @@ import { useAppSelector } from "../store";
 import { locationService, memoService, userService } from "../services";
 import useToggle from "../hooks/useToggle";
 import Icon from "./Icon";
-import Only from "./common/OnlyWhen";
 import "../less/tag-list.less";
 
 interface Tag {
@@ -73,9 +72,7 @@ const TagList = () => {
         {tags.map((t, idx) => (
           <TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={query?.tag} />
         ))}
-        <Only when={!userService.isVisitorMode() && tags.length === 0}>
+        {!userService.isVisitorMode() && tags.length === 0 && <p className="tip-text">{t("tag-list.tip-text")}</p>}
-          <p className="tip-text">{t("tag-list.tip-text")}</p>
-        </Only>
       </div>
     </div>
   );

web/src/components/UserBanner.tsx

@@ -7,7 +7,6 @@ import { locationService } from "../services";
 import { useAppSelector } from "../store";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
-import Only from "./common/OnlyWhen";
 import showResourcesDialog from "./ResourcesDialog";
 import showArchivedMemoDialog from "./ArchivedMemoDialog";
 import showAboutSiteDialog from "./AboutSiteDialog";
@@ -74,31 +73,33 @@ const UserBanner = () => {
           actionsClassName="!w-36"
           actions={
             <>
-              <Only when={!userService.isVisitorMode()}>
+              {!userService.isVisitorMode() && (
-                <button
+                <>
-                  className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                  <button
-                  onClick={handleResourcesBtnClick}
+                    className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
-                >
+                    onClick={handleResourcesBtnClick}
-                  <span className="mr-1">🌄</span> {t("sidebar.resources")}
+                  >
-                </button>
+                    <span className="mr-1">🌄</span> {t("sidebar.resources")}
-                <button
+                  </button>
-                  className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
+                  <button
-                  onClick={handleArchivedBtnClick}
+                    className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
-                >
+                    onClick={handleArchivedBtnClick}
-                  <span className="mr-1">🗂</span> {t("sidebar.archived")}
+                  >
-                </button>
+                    <span className="mr-1">🗂</span> {t("sidebar.archived")}
-              </Only>
+                  </button>
+                </>
+              )}
               <button className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100" onClick={handleAboutBtnClick}>
                 <span className="mr-1">🤠</span> {t("common.about")}
               </button>
-              <Only when={!userService.isVisitorMode()}>
+              {!userService.isVisitorMode() && (
                 <button
                   className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100"
                   onClick={handleSignOutBtnClick}
                 >
                   <span className="mr-1">👋</span> {t("common.sign-out")}
                 </button>
-              </Only>
+              )}
             </>
           }
         />

web/src/components/common/OnlyWhen.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-
-interface OnlyWhenProps {
-  children: ReactNode;
-  when: boolean;
-}
-
-const OnlyWhen: React.FC<OnlyWhenProps> = (props: OnlyWhenProps) => {
-  const { children, when } = props;
-  return when ? <>{children}</> : null;
-};
-
-const Only = OnlyWhen;
-
-export default Only;

web/src/pages/Auth.tsx

@@ -6,7 +6,6 @@ import { validate, ValidatorConfig } from "../helpers/validator";
 import useLoading from "../hooks/useLoading";
 import { globalService, userService } from "../services";
 import Icon from "../components/Icon";
-import Only from "../components/common/OnlyWhen";
 import toastHelper from "../components/Toast";
 import "../less/auth.less";
 
@@ -139,17 +138,15 @@ const Auth = () => {
             </div>
           </div>
           <div className="action-btns-container">
-            <Only when={!pageLoadingState.isLoading}>
+            {!pageLoadingState.isLoading && (
               <button
                 className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
                 onClick={() => (siteHost ? handleSigninBtnsClick() : handleSignUpAsHostBtnsClick())}
               >
-                <Only when={actionBtnLoadingState.isLoading}>
+                {actionBtnLoadingState.isLoading && <Icon.Loader className="img-icon" />}
-                  <Icon.Loader className="img-icon" />
-                </Only>
                 {siteHost ? t("common.sign-in") : t("auth.signup-as-host")}
               </button>
-            </Only>
+            )}
           </div>
           <p className={`tip-text ${siteHost || pageLoadingState.isLoading ? "" : "host-tip"}`}>
             {siteHost || pageLoadingState.isLoading ? t("auth.not-host-tip") : t("auth.host-tip")}

web/src/pages/Explore.tsx

@@ -6,7 +6,6 @@ import { memoService, userService } from "../services";
 import { isNullorUndefined } from "../helpers/utils";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
-import Only from "../components/common/OnlyWhen";
 import MemoContent from "../components/MemoContent";
 import MemoResources from "../components/MemoResources";
 import "../less/explore.less";
@@ -49,20 +48,18 @@ const Explore = () => {
             <span className="title-text">Explore</span>
           </div>
           <div className="action-button-container">
-            <Only when={!loadingState.isLoading}>
+            {!loadingState.isLoading && user ? (
-              {user ? (
+              <Link to="/" className="btn">
-                <Link to="/" className="btn">
+                <span className="icon">🏠</span> {t("common.back-to-home")}
-                  <span className="icon">🏠</span> {t("common.back-to-home")}
+              </Link>
-                </Link>
+            ) : (
-              ) : (
+              <Link to="/auth" className="btn">
-                <Link to="/auth" className="btn">
+                <span className="icon">👉</span> {t("common.sign-in")}
-                  <span className="icon">👉</span> {t("common.sign-in")}
+              </Link>
-                </Link>
+            )}
-              )}
-            </Only>
           </div>
         </div>
-        <Only when={!loadingState.isLoading}>
+        {!loadingState.isLoading && (
           <main className="memos-wrapper">
             {state.memos.length > 0 ? (
               state.memos.map((memo) => {
@@ -85,7 +82,7 @@ const Explore = () => {
               <p className="w-full text-center mt-12 text-gray-600">{t("message.no-memos")}</p>
             )}
           </main>
-        </Only>
+        )}
       </div>
     </section>
   );

web/src/pages/Home.tsx

@@ -4,7 +4,6 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { globalService, userService } from "../services";
 import { useAppSelector } from "../store";
 import { isNullorUndefined } from "../helpers/utils";
-import Only from "../components/common/OnlyWhen";
 import toastHelper from "../components/Toast";
 import Sidebar from "../components/Sidebar";
 import MemosHeader from "../components/MemosHeader";
@@ -51,13 +50,11 @@ function Home() {
         <main className="memos-wrapper">
           <div className="memos-editor-wrapper">
             <MemosHeader />
-            <Only when={!userService.isVisitorMode()}>
+            {!userService.isVisitorMode() && <MemoEditor />}
-              <MemoEditor />
-            </Only>
             <MemoFilter />
           </div>
           <MemoList />
-          <Only when={userService.isVisitorMode()}>
+          {userService.isVisitorMode() && (
             <div className="addtion-btn-container">
               {user ? (
                 <button className="btn" onClick={() => (window.location.href = "/")}>
@@ -69,7 +66,7 @@ function Home() {
                 </button>
               )}
             </div>
-          </Only>
+          )}
         </main>
       </div>
     </section>

web/src/pages/MemoDetail.tsx

@@ -7,7 +7,6 @@ import { UNKNOWN_ID } from "../helpers/consts";
 import { isNullorUndefined } from "../helpers/utils";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
-import Only from "../components/common/OnlyWhen";
 import MemoContent from "../components/MemoContent";
 import MemoResources from "../components/MemoResources";
 import "../less/explore.less";
@@ -55,17 +54,19 @@ const MemoDetail = () => {
             <img className="logo-img" src="/logo-full.webp" alt="" />
           </div>
           <div className="action-button-container">
-            <Only when={!loadingState.isLoading}>
+            {!loadingState.isLoading && (
-              {user ? (
+              <>
-                <Link to="/" className="btn">
+                {user ? (
-                  <span className="icon">🏠</span> {t("common.back-to-home")}
+                  <Link to="/" className="btn">
-                </Link>
+                    <span className="icon">🏠</span> {t("common.back-to-home")}
-              ) : (
+                  </Link>
-                <Link to="/auth" className="btn">
+                ) : (
-                  <span className="icon">👉</span> {t("common.sign-in")}
+                  <Link to="/auth" className="btn">
-                </Link>
+                    <span className="icon">👉</span> {t("common.sign-in")}
-              )}
+                  </Link>
-            </Only>
+                )}
+              </>
+            )}
           </div>
         </div>
         {!loadingState.isLoading && (