refactor: reduce verbose variables

2026-07-15 04:53:48 +02:00 · 2026-02-04 13:35:32 +00:00
parent bb2b457c1c
commit 3a29f8b48f
15 changed files with 178 additions and 159 deletions
--- a/src/features/background/components/BackgroundImage.jsx
+++ b/src/features/background/components/BackgroundImage.jsx
@@ -11,7 +11,7 @@ import { getAllBackgrounds } from 'utils/customBackgroundDB';
 function BackgroundImage({ photoInfo, currentAPI, url }) {
  const isCustomType = localStorage.getItem('backgroundType') === 'custom';
  const [customBackgrounds, setCustomBackgrounds] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadCustomBackgrounds = async () => {
@@ -24,14 +24,14 @@ function BackgroundImage({ photoInfo, currentAPI, url }) {
          setCustomBackgrounds([]);
        }
      }
-      setIsLoading(false);
+      setLoading(false);
    };

    loadCustomBackgrounds();
  }, [isCustomType]);

  const hasNoCustomImages =
-    isCustomType && !isLoading && (!customBackgrounds || customBackgrounds.length === 0);
+    isCustomType && !loading && (!customBackgrounds || customBackgrounds.length === 0);

  const handleOpenSettings = () => {
    updateHash('#settings/background/source');
--- a/src/features/background/options/Custom.jsx
+++ b/src/features/background/options/Custom.jsx
@@ -51,10 +51,10 @@ const CustomSettings = memo(() => {
  const [folderTaggingModal, setFolderTaggingModal] = useState(false);
  const [pendingFiles, setPendingFiles] = useState([]);
  const [urlError, setUrlError] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isUploading, setIsUploading] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState({ current: 0, total: 0 });
-  const [isDragging, setIsDragging] = useState(false);
+  const [dragging, setDragging] = useState(false);
  const [selectedImages, setSelectedImages] = useState(new Set());
  const [sortBy, setSortBy] = useState(localStorage.getItem('customImageSort') || 'date_desc');
  const [storageQuotaModal, setStorageQuotaModal] = useState(false);
@@ -109,7 +109,7 @@ const CustomSettings = memo(() => {
        console.error('Error loading backgrounds:', error);
        toast(variables.getMessage('toasts.error'));
      } finally {
-        setIsLoading(false);
+        setLoading(false);
      }
    };

@@ -246,7 +246,7 @@ const CustomSettings = memo(() => {
  };

  const handleBatchUpload = async (files, folderName = '') => {
-    setIsUploading(true);
+    setUploading(true);
    setUploadProgress({ current: 0, total: files.length });

    const errors = [];
@@ -271,7 +271,7 @@ const CustomSettings = memo(() => {

    EventBus.emit('refresh', 'background');

-    setIsUploading(false);
+    setUploading(false);
    setUploadProgress({ current: 0, total: 0 });
  };

@@ -463,7 +463,7 @@ const CustomSettings = memo(() => {
      e.stopPropagation();
      dragCounter.current++;
      if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
-        setIsDragging(true);
+        setDragging(true);
      }
    };

@@ -472,14 +472,14 @@ const CustomSettings = memo(() => {
      e.stopPropagation();
      dragCounter.current--;
      if (dragCounter.current === 0) {
-        setIsDragging(false);
+        setDragging(false);
      }
    };

    const handleDrop = async (e) => {
      e.preventDefault();
      e.stopPropagation();
-      setIsDragging(false);
+      setDragging(false);
      dragCounter.current = 0;

      const files = Array.from(e.dataTransfer.files);
@@ -513,7 +513,7 @@ const CustomSettings = memo(() => {

  const hasVideo = sortedBackgrounds.filter((bg) => bg && videoCheck(bg.url)).length > 0;

-  if (isLoading) {
+  if (loading) {
    return (
      <div className="photosEmpty">
        <div className="loaderHolder">
@@ -524,7 +524,7 @@ const CustomSettings = memo(() => {
    );
  }

-  if (isUploading) {
+  if (uploading) {
    return (
      <div className="photosEmpty">
        <div className="loaderHolder">
@@ -546,10 +546,10 @@ const CustomSettings = memo(() => {
  return (
    <>
      <div
-        className={`dropzone ${isDragging ? 'dragging' : ''}`}
+        className={`dropzone ${dragging ? 'dragging' : ''}`}
        ref={customDnd}
        style={
-          isDragging
+          dragging
            ? {
                outline: '2px dashed #ff5c25',
                outlineOffset: '-2px',
@@ -923,7 +923,7 @@ const CustomSettings = memo(() => {
      <Modal
        closeTimeoutMS={100}
        onRequestClose={() => setCustomURLModal(false)}
-        isOpen={customURLModal}
+        open={customURLModal}
        className="Modal resetmodal mainModal"
        overlayClassName="Overlay resetoverlay"
        ariaHideApp={false}
@@ -941,7 +941,7 @@ const CustomSettings = memo(() => {
          setFolderTaggingModal(false);
          setPendingFiles([]);
        }}
-        isOpen={folderTaggingModal}
+        open={folderTaggingModal}
        className="Modal resetmodal mainModal"
        overlayClassName="Overlay resetoverlay"
        ariaHideApp={false}
@@ -959,7 +959,7 @@ const CustomSettings = memo(() => {
      <Modal
        closeTimeoutMS={100}
        onRequestClose={() => setStorageQuotaModal(false)}
-        isOpen={storageQuotaModal}
+        open={storageQuotaModal}
        className="Modal resetmodal mainModal"
        overlayClassName="Overlay resetoverlay"
        ariaHideApp={false}
--- a/src/features/marketplace/components/Items/Items.jsx
+++ b/src/features/marketplace/components/Items/Items.jsx
@@ -73,7 +73,7 @@ function ItemCard({
  const isPhotoPack = item.type === 'photos' || item.type === 'photo_packs';
  const hasSettings = isPhotoPack && item.settings_schema && item.settings_schema.length > 0;

-  const [isEnabled, setIsEnabled] = useState(() => {
+  const [enabled, setEnabled] = useState(() => {
    const enabledPacks = JSON.parse(localStorage.getItem('enabledPacks') || '{}');
    return enabledPacks[packId] !== false;
  });
@@ -89,9 +89,9 @@ function ItemCard({

  const handleTogglePack = (e) => {
    e.stopPropagation();
-    const newState = !isEnabled;
+    const newState = !enabled;

-    setIsEnabled(newState);
+    setEnabled(newState);

    const enabledPacks = JSON.parse(localStorage.getItem('enabledPacks') || '{}');
    enabledPacks[packId] = newState;
@@ -117,7 +117,7 @@ function ItemCard({

  return (
    <div
-      className={`item ${isSideloaded ? 'item-sideloaded' : ''} ${!isEnabled && isAdded ? 'item-disabled' : ''}`}
+      className={`item ${isSideloaded ? 'item-sideloaded' : ''} ${!enabled && isAdded ? 'item-disabled' : ''}`}
      onClick={handleCardClick}
      key={item.name}
    >
@@ -130,17 +130,17 @@ function ItemCard({
          <label className="switch-track" style={{ cursor: 'pointer' }}>
            <input
              type="checkbox"
-              checked={isEnabled}
+              checked={enabled}
              onChange={handleTogglePack}
              style={{ display: 'none' }}
            />
            <div
-              className={`switch-track ${isEnabled ? 'checked' : ''}`}
+              className={`switch-track ${enabled ? 'checked' : ''}`}
              style={{
                width: '52px',
                height: '32px',
                borderRadius: '16px',
-                backgroundColor: isEnabled
+                backgroundColor: enabled
                  ? 'var(--linkColor, #ff5c25)'
                  : 'rgba(128, 128, 128, 0.3)',
                position: 'relative',
@@ -157,7 +157,7 @@ function ItemCard({
                  backgroundColor: 'white',
                  position: 'absolute',
                  top: '4px',
-                  left: isEnabled ? '24px' : '4px',
+                  left: enabled ? '24px' : '4px',
                  transition: 'left 0.2s',
                  boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
                }}
@@ -250,9 +250,9 @@ function ItemCard({
      {isAdded && (
        <ItemSettingsModal
          pack={item}
-          isOpen={showSettingsModal}
+          open={showSettingsModal}
          onClose={() => setShowSettingsModal(false)}
-          isEnabled={isEnabled}
+          enabled={enabled}
        />
      )}
    </div>
--- a/src/features/marketplace/components/Modals/ItemSettingsModal.jsx
+++ b/src/features/marketplace/components/Modals/ItemSettingsModal.jsx
@@ -17,7 +17,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
  });

  const [dynamicOptions, setDynamicOptions] = useState({});
-  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
  const [validationErrors, setValidationErrors] = useState([]);

  const validateSettings = useCallback(() => {
@@ -87,16 +87,16 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
      localStorage.setItem('api_pack_cache', JSON.stringify(apiPackCache));
    }

-    setIsRefreshing(true);
+    setRefreshing(true);
    await refreshAPIPackCache(pack.id);
-    setIsRefreshing(false);
+    setRefreshing(false);
    EventBus.emit('refresh', 'background');
  };

  const handleManualRefresh = async () => {
-    setIsRefreshing(true);
+    setRefreshing(true);
    await refreshAPIPackCache(pack.id);
-    setIsRefreshing(false);
+    setRefreshing(false);
    EventBus.emit('refresh', 'background');
  };

@@ -253,7 +253,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
                  label={variables.getMessage(
                    'modals.main.settings.sections.background.photo_pack_settings.refresh_photos',
                  )}
-                  disabled={isRefreshing || validationErrors.length > 0}
+                  disabled={refreshing || validationErrors.length > 0}
                />
              </div>
            )}
--- a/src/features/misc/sections/Changelog.jsx
+++ b/src/features/misc/sections/Changelog.jsx
@@ -3,7 +3,7 @@ import { useState, useRef } from 'react';
 import { MdOutlineWifiOff } from 'react-icons/md';

 const Changelog = () => {
-  const [isLoading, setIsLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
  const iframeRef = useRef(null);

  const offlineMode = localStorage.getItem('offlineMode') === 'true';
@@ -20,7 +20,7 @@ const Changelog = () => {
  };

  const handleLoad = () => {
-    setIsLoading(false);
+    setLoading(false);

    if (iframeRef.current?.contentWindow) {
      const theme = getResolvedTheme();
@@ -51,7 +51,7 @@ const Changelog = () => {

  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
-      {isLoading && (
+      {loading && (
        <div
          className="loaderHolder"
          style={{
@@ -77,7 +77,7 @@ const Changelog = () => {
          width: '100%',
          height: '100%',
          border: 'none',
-          opacity: isLoading ? 0 : 1,
+          opacity: loading ? 0 : 1,
          transition: 'opacity 0.2s ease-in-out',
        }}
        title="Changelog"
--- a/src/features/misc/views/Discover.jsx
+++ b/src/features/misc/views/Discover.jsx
@@ -10,7 +10,7 @@ import Lightbox from 'features/marketplace/components/Elements/Lightbox/Lightbox

 function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
  const iframeRef = useRef(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
  const [showLightbox, setShowLightbox] = useState(false);
  const [lightboxImg, setLightboxImg] = useState(null);
  const { installItem, uninstallItem } = useMarketplaceInstall();
@@ -43,7 +43,7 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
      return;
    }

-    setIsLoading(true);
+    setLoading(true);
    if (onBreadcrumbsChange) {
      onBreadcrumbsChange([]);
    }
@@ -67,7 +67,7 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
      const itemId = urlParams.get('item');

      if (itemId && iframeRef.current) {
-        setIsLoading(true);
+        setLoading(true);

        const theme = getResolvedTheme();
        const themeParam = `&theme=${theme}`;
@@ -105,7 +105,7 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {

  useEffect(() => {
    if (deepLinkData?.itemId && iframeRef.current) {
-      setIsLoading(true);
+      setLoading(true);
      const theme = getResolvedTheme();
      const themeParam = `&theme=${theme}`;

@@ -232,7 +232,7 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
  }, [installItem, uninstallItem, onBreadcrumbsChange]);

  const handleLoad = () => {
-    setIsLoading(false);
+    setLoading(false);

    if (onBreadcrumbsChange) {
      onBreadcrumbsChange([]);
@@ -269,14 +269,14 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
      <Modal
        closeTimeoutMS={300}
        onRequestClose={() => setShowLightbox(false)}
-        isOpen={showLightbox}
+        open={showLightbox}
        className="Modal lightBoxModal"
        overlayClassName="Overlay"
        ariaHideApp={false}
      >
        <Lightbox modalClose={() => setShowLightbox(false)} img={lightboxImg} />
      </Modal>
-      {isLoading && (
+      {loading && (
        <div
          className="loaderHolder"
          style={{
@@ -318,7 +318,7 @@ function DiscoverContent({ category, onBreadcrumbsChange, deepLinkData }) {
          height: '1500px',
          minHeight: '100vh',
          border: 'none',
-          opacity: isLoading ? 0 : 1,
+          opacity: loading ? 0 : 1,
          transition: 'opacity 0.2s ease-in-out',
        }}
        title={variables.getMessage('modals.main.marketplace.title')}
--- a/src/features/navbar/options/NavbarOptions.jsx
+++ b/src/features/navbar/options/NavbarOptions.jsx
@@ -40,9 +40,9 @@ function NavbarOptions() {

  const NavbarOptions = () => {
    const NavbarButton = ({ icon, messageKey, settingName }) => {
-      const [isDisabled, setIsDisabled] = useState(localStorage.getItem(settingName) !== 'true');
+      const [disabled, setDisabled] = useState(localStorage.getItem(settingName) !== 'true');
      const handleClick = () => {
-        localStorage.setItem(settingName, isDisabled);
+        localStorage.setItem(settingName, disabled);

        if (settingName === 'refresh') {
          setShowRefreshOptions(!showRefreshOptions);
@@ -50,11 +50,11 @@ function NavbarOptions() {
          setAppsEnabled(!appsEnabled);
        }

-        setIsDisabled(!isDisabled);
+        setDisabled(!disabled);

        variables.stats.postEvent(
          'setting',
-          `${settingName} ${!isDisabled === true ? 'enabled' : 'disabled'}`,
+          `${settingName} ${!disabled === true ? 'enabled' : 'disabled'}`,
        );

        EventBus.emit('refresh', 'navbar');
@@ -63,7 +63,7 @@ function NavbarOptions() {
      return (
        <button
          onClick={handleClick}
-          className={`navbarButtonOption ${isDisabled === true ? 'disabled' : ''}`}
+          className={`navbarButtonOption ${disabled === true ? 'disabled' : ''}`}
        >
          {icon}
          <span className="subtitle">{t(messageKey)}</span>
--- a/src/features/quote/Quote.jsx
+++ b/src/features/quote/Quote.jsx
@@ -28,7 +28,7 @@ export default function Quote() {
  const [authorDetails, setAuthorDetails] = useState(
    localStorage.getItem('authorDetails') === 'true',
  );
-  const [isLegacyStyle, setIsLegacyStyle] = useState(
+  const [legacyStyle, setLegacyStyle] = useState(
    localStorage.getItem('widgetStyle') === 'legacy',
  );

@@ -55,7 +55,7 @@ export default function Quote() {
        setDisplay(quoteSetting === 'false' ? 'none' : 'block');
        setFontSize(`${1.2 * Number((zoomQuote || 100) / 100)}em`);
        setAuthorDetails(authorDetailsSetting === 'true');
-        setIsLegacyStyle(widgetStyle === 'legacy');
+        setLegacyStyle(widgetStyle === 'legacy');
      } else if (data === 'marketplacequoteuninstall' || data === 'quoterefresh') {
        localStorage.removeItem('quoteQueue');
        localStorage.removeItem('currentQuote');
@@ -86,7 +86,7 @@ export default function Quote() {
    <div className="quotediv" style={{ display, fontSize }}>
      <Modal
        closeTimeoutMS={300}
-        isOpen={uiState.shareModal}
+        open={uiState.shareModal}
        className="Modal mainModal"
        overlayClassName="Overlay"
        ariaHideApp={false}
@@ -104,7 +104,7 @@ export default function Quote() {

      {authorDetails &&
        quoteData.author &&
-        (isLegacyStyle ? (
+        (legacyStyle ? (
          <AuthorInfoLegacy
            author={quoteData.author}
            authorlink={quoteData.authorlink}