[ui-adminpage] Port usage analytics endpoints to public (#4126)

Author: ananya-agarwal

desktop/core/src/desktop/js/apps/admin/Components/utils.ts

@@ -16,7 +16,7 @@
 
 export const SERVER_LOGS_API_URL = '/api/v1/logs';
 export const CHECK_CONFIG_EXAMPLES_API_URL = '/api/v1/check_config';
-export const ANALYTICS_PREFERENCES_API_URL = '/about/update_preferences';
 export const INSTALL_APP_EXAMPLES_API_URL = '/api/v1/install_app_examples';
 export const INSTALL_AVAILABLE_EXAMPLES_API_URL = '/api/v1/available_app_examples';
 export const HUE_DOCS_CONFIG_URL = 'https://docs.gethue.com/administrator/configuration/';
+export const USAGE_ANALYTICS_API_URL = '/api/v1/usage_analytics';

desktop/core/src/desktop/js/apps/admin/Overview/Analytics.tsx

@@ -14,63 +14,81 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useState } from 'react';
+import React from 'react';
 import huePubSub from '../../../utils/huePubSub';
 import { i18nReact } from '../../../utils/i18nReact';
 import Input from 'cuix/dist/components/Input';
-import { post } from '../../../api/utils';
-import { ANALYTICS_PREFERENCES_API_URL } from '../Components/utils';
+import { USAGE_ANALYTICS_API_URL } from '../Components/utils';
+import { HueAlert } from '../../../reactComponents/GlobalAlert/types';
+import { GLOBAL_INFO_TOPIC } from '../../../reactComponents/GlobalAlert/events';
+import useLoadData from '../../../utils/hooks/useLoadData/useLoadData';
+import useSaveData from '../../../utils/hooks/useSaveData/useSaveData';
+import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper';
+import { HttpMethod } from '../../../api/utils';
 import './Overview.scss';
 
-interface UpdatePreferences {
-  status: number;
-  message?: string;
+interface UsageAnalyticsResponse {
+  collectUsage?: boolean;
 }
 
 const Analytics = (): JSX.Element => {
-  const [collectUsage, setCollectUsage] = useState<boolean>(false);
   const { t } = i18nReact.useTranslation();
+  const {
+    data: usageAnalyticsData,
+    loading: loadingAnalytics,
+    error: usageAnalyticsError,
+    reloadData
+  } = useLoadData<UsageAnalyticsResponse>(USAGE_ANALYTICS_API_URL);
 
-  const saveCollectUsagePreference = async (collectUsage: boolean) => {
-    const response = await post<UpdatePreferences>(ANALYTICS_PREFERENCES_API_URL, {
-      collect_usage: collectUsage
-    });
-
-    if (response.status === 0) {
-      const successMessage = collectUsage
+  const {
+    save: updateAnalyticsPreference,
+    loading: updatingAnalyticsPreference,
+    error: updateAnalyticsPreferenceError
+  } = useSaveData<{ collect_usage: boolean }>(USAGE_ANALYTICS_API_URL, {
+    method: HttpMethod.PUT,
+    onSuccess: response => {
+      reloadData();
+      const successMessage = response.collect_usage
         ? t('Analytics have been activated.')
         : t('Analytics have been deactivated.');
-      huePubSub.publish('hue.global.info', { message: successMessage });
-    } else {
-      const errorMessage = collectUsage
-        ? t('Failed to activate analytics.')
-        : t('Failed to deactivate analytics.');
-      huePubSub.publish('hue.global.error', { message: errorMessage });
+      huePubSub.publish<HueAlert>(GLOBAL_INFO_TOPIC, { message: successMessage });
     }
-  };
+  });
+
+  const errors = [
+    {
+      enabled: !!usageAnalyticsError,
+      message: usageAnalyticsError ?? t('An unknown error occurred while fetching data.')
+    },
+    {
+      enabled: !!updateAnalyticsPreferenceError,
+      message: updateAnalyticsPreferenceError ?? t('Failed to update analytics.')
+    }
+  ];
 
-  const handleCheckboxChange = event => {
-    const newPreference = event.target.checked;
-    setCollectUsage(newPreference);
-    saveCollectUsagePreference(newPreference);
+  const handleAnalyticsCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateAnalyticsPreference({ collect_usage: event.target.checked });
   };
 
   return (
-    <div className="overview-analytics">
-      <h3>{t('Anonymous usage analytics')}</h3>
-      <div className="analytics-checkbox-container">
-        <Input
-          type="checkbox"
-          className="analytics__checkbox-icon"
-          id="usage_analytics"
-          checked={collectUsage}
-          onChange={handleCheckboxChange}
-        />
-        <label htmlFor="usage_analytics" className="usage__analytics">
-          {t('Help improve Hue with anonymous usage analytics.')}
-        </label>
+    <LoadingErrorWrapper loading={loadingAnalytics || updatingAnalyticsPreference} errors={errors}>
+      <div className="overview-analytics">
+        <h3>{t('Anonymous usage analytics')}</h3>
+        <div className="analytics-checkbox-container">
+          <Input
+            type="checkbox"
+            className="analytics__checkbox-icon"
+            id="usage_analytics"
+            checked={!!usageAnalyticsData?.collectUsage}
+            onChange={handleAnalyticsCheckboxChange}
+            disabled={loadingAnalytics || updatingAnalyticsPreference}
+          />
+          <label htmlFor="usage_analytics" className="usage__analytics">
+            {t('Help improve Hue with anonymous usage analytics.')}
+          </label>
+        </div>
       </div>
-    </div>
+    </LoadingErrorWrapper>
   );
 };