refactor: changes to weather cache

2026-07-24 09:17:24 +02:00 · 2024-05-21 17:56:59 +01:00
parent df6c42f526
commit 500aded0b0
19 changed files with 224 additions and 87 deletions
--- a/src/features/marketplace/views/ItemPage.jsx
+++ b/src/features/marketplace/views/ItemPage.jsx
@@ -5,7 +5,7 @@ import {
  MdIosShare,
  MdFlag,
  MdAccountCircle,
-  MdBugReport,
+  MdCalendarMonth,
  MdFormatQuote,
  MdImage,
  MdTranslate,
@@ -156,6 +156,9 @@ class ItemPage extends PureComponent {
      </div>
    );

+    const dateObj = new Date(this.props.data.data.updated_at);
+    const formattedDate = new Intl.DateTimeFormat(shortLocale, { year: 'numeric', month: 'long', day: '2-digit' }).format(dateObj);
+
    return (
      <>
        <Modal
@@ -181,7 +184,11 @@ class ItemPage extends PureComponent {
                ? this.props.data.data.in_collections[0].display_name
                : variables.getMessage('modals.main.navbar.marketplace')
          }
-          secondaryTitle={this.props.data.data.sideload ? this.props.data.data.name : this.props.data.data.display_name}
+          secondaryTitle={
+            this.props.data.data.sideload
+              ? this.props.data.data.name
+              : this.props.data.data.display_name
+          }
          report={false}
          goBack={this.props.toggleFunction}
        />
@@ -280,15 +287,9 @@ class ItemPage extends PureComponent {
              </span>
              <div className="moreInfo">
                {moreInfoItem(
-                  <MdBugReport />,
-                  variables.getMessage('modals.main.marketplace.product.version'),
-                  updateButton ? (
-                    <span>
-                      {this.props.data.version} (Installed: {this.props.data.addonInstalledVersion})
-                    </span>
-                  ) : (
-                    <span>{this.props.data.version}</span>
-                  ),
+                  <MdCalendarMonth />,
+                  variables.getMessage('modals.main.marketplace.product.updated_at'),
+                  formattedDate,
                )}
                {this.props.data.data.quotes &&
                  moreInfoItem(
@@ -336,31 +337,37 @@ class ItemPage extends PureComponent {
                  e.target.src = placeholderIcon;
                }}
              />
-              {this.props.button}
-              <div className="iconButtons">
-                <Button
-                  type="icon"
-                  onClick={() => this.setState({ shareModal: true })}
-                  icon={<MdIosShare />}
-                  tooltipTitle={variables.getMessage('widgets.quote.share')}
-                  tooltipKey="share"
-                />
-                <Button
-                  type="icon"
-                  onClick={() =>
-                    window.open(
-                      variables.constants.REPORT_ITEM +
-                        this.props.data.data.display_name.split(' ').join('+'),
-                      '_blank',
-                    )
-                  }
-                  icon={<MdFlag />}
-                  tooltipTitle={variables.getMessage(
-                    'modals.main.marketplace.product.buttons.report',
-                  )}
-                  tooltipKey="report"
-                />
-              </div>
+              {localStorage.getItem('welcomePreview') !== 'true' ? (
+                this.props.button
+              ) : (
+                <p style={{ textAlign: 'center' }}>{variables.getMessage('modals.main.marketplace.product.buttons.not_available_preview')}</p>
+              )}
+              {this.props.data.data.sideload !== true && (
+                <div className="iconButtons">
+                  <Button
+                    type="icon"
+                    onClick={() => this.setState({ shareModal: true })}
+                    icon={<MdIosShare />}
+                    tooltipTitle={variables.getMessage('widgets.quote.share')}
+                    tooltipKey="share"
+                  />
+                  <Button
+                    type="icon"
+                    onClick={() =>
+                      window.open(
+                        variables.constants.REPORT_ITEM +
+                          this.props.data.data.display_name.split(' ').join('+'),
+                        '_blank',
+                      )
+                    }
+                    icon={<MdFlag />}
+                    tooltipTitle={variables.getMessage(
+                      'modals.main.marketplace.product.buttons.report',
+                    )}
+                    tooltipKey="report"
+                  />
+                </div>
+              )}
              {this.props.data.data.in_collections?.length > 0 && (
                <div>
                  <div className="inCollection">
--- a/src/features/misc/sections/Advanced.jsx
+++ b/src/features/misc/sections/Advanced.jsx
@@ -6,6 +6,7 @@ import {
  MdDownload as ExportIcon,
  MdRestartAlt as ResetIcon,
  MdDataUsage,
+  MdError,
 } from 'react-icons/md';

 import { exportSettings, importSettings } from 'utils/settings';
@@ -23,28 +24,55 @@ function AdvancedOptions() {
  const ADVANCED_SECTION = 'modals.main.settings.sections.advanced';

  const Data = () => {
-    return (
-      localStorage.getItem('welcomePreview') !== 'true' && (
-        <Row final={true}>
-          <Content
-            title={variables.getMessage('modals.main.settings.sections.advanced.data')}
-            subtitle={variables.getMessage(
-              'modals.main.settings.sections.advanced.data_description',
-            )}
+    return localStorage.getItem('welcomePreview') !== 'true' ? (
+      <Row final={true}>
+        <Content
+          title={variables.getMessage('modals.main.settings.sections.advanced.data')}
+          subtitle={variables.getMessage('modals.main.settings.sections.advanced.data_description')}
+        />
+        <div className="resetDataButtonsLayout">
+          <Button
+            onClick={() => setResetModal(true)}
+            icon={<ResetIcon />}
+            label={variables.getMessage('modals.main.settings.buttons.reset')}
          />
-          <div className="resetDataButtonsLayout">
-            <Button onClick={() => setResetModal(true)} icon={<ResetIcon />} label={variables.getMessage('modals.main.settings.buttons.reset')} />
-            <Button onClick={() => exportSettings()} icon={<ExportIcon />} label={variables.getMessage('modals.main.settings.buttons.export')} />
-            <Button onClick={() => document.getElementById('file-input').click()} icon={<ImportIcon />} label={variables.getMessage('modals.main.settings.buttons.import')} />
+          <Button
+            onClick={() => exportSettings()}
+            icon={<ExportIcon />}
+            label={variables.getMessage('modals.main.settings.buttons.export')}
+          />
+          <Button
+            onClick={() => document.getElementById('file-input').click()}
+            icon={<ImportIcon />}
+            label={variables.getMessage('modals.main.settings.buttons.import')}
+          />
+        </div>
+        <FileUpload
+          id="file-input"
+          accept="application/json"
+          type="settings"
+          loadFunction={(e) => importSettings(e)}
+        />
+      </Row>
+    ) : (
+      <div className="emptyItems">
+        <div className="emptyMessage">
+          <div className="loaderHolder">
+            <MdError />
+
+            <span className="title">
+              {variables.getMessage(
+                'modals.main.settings.sections.advanced.preview_data_disabled.title',
+              )}
+            </span>
+            <span className="subtitle">
+              {variables.getMessage(
+                'modals.main.settings.sections.advanced.preview_data_disabled.description',
+              )}
+            </span>
          </div>
-          <FileUpload
-            id="file-input"
-            accept="application/json"
-            type="settings"
-            loadFunction={(e) => importSettings(e)}
-          />
-        </Row>
-      )
+        </div>
+      </div>
    );
  };

--- a/src/features/weather/api/getWeather.js
+++ b/src/features/weather/api/getWeather.js
@@ -14,6 +14,15 @@ export const getWeather = async (location, done) => {
    return;
  }

+  let cached = localStorage.getItem('currentWeather');
+  if (cached) {
+    cached = JSON.parse(cached);
+    // 300 seconds (in ms) = 5 minutes
+    if (Date.now() - cached.cachedAt < 3e5) {
+      return cached.data;
+    }
+  }
+
  try {
    const response = await fetch(
      variables.constants.API_URL + `/weather?city=${location}&language=${variables.languagecode}`,
@@ -41,7 +50,7 @@ export const getWeather = async (location, done) => {
      fahrenheit: '°F',
    };

-    return {
+    const cacheable = {
      icon: data.weather[0].icon,
      temp_text: tempSymbols[tempFormat] || 'K',
      weather: {
@@ -59,6 +68,8 @@ export const getWeather = async (location, done) => {
      },
      done: true,
    };
+    localStorage.setItem('currentWeather', JSON.stringify({ data: cacheable, cachedAt: Date.now() }));
+    return cacheable 
  } catch (error) {
    console.error('Fetch Error: ', error);
  }
--- a/src/features/weather/options/WeatherOptions.jsx
+++ b/src/features/weather/options/WeatherOptions.jsx
@@ -26,6 +26,7 @@ class WeatherOptions extends PureComponent {
  }

  changeLocation(e) {
+    localStorage.removeItem('currentWeather');
    this.setState({
      location: e.target.value,
    });