Merge pull request #861 from acelaya-forks/feature/update-web-component

Feature/update web component

.github/dependabot.yml

@@ -5,13 +5,17 @@ updates:
     schedule:
       interval: weekly
       day: saturday
-      time: '9:00'
+      time: '09:00'
       timezone: 'Europe/Madrid'
     open-pull-requests-limit: 10
+    ignore:
+      # Bootstrap can introduce visual breaking changes on styles
+      # Ignore it, since the plan is to remove it anyway
+      - dependency-name: 'bootstrap'
   - package-ecosystem: docker
     directory: '/'
     schedule:
       interval: weekly
       day: saturday
-      time: '9:01'
+      time: '09:00'
       timezone: 'Europe/Madrid'

package-lock.json

@@ -16,7 +16,7 @@
         "@json2csv/plainjs": "^7.0.1",
         "@reduxjs/toolkit": "^1.9.5",
         "@shlinkio/shlink-frontend-kit": "^0.2.0",
-        "@shlinkio/shlink-web-component": "^0.1.1",
+        "@shlinkio/shlink-web-component": "^0.3.0",
         "bootstrap": "5.2.3",
         "bottlejs": "^2.0.1",
         "classnames": "^2.3.2",
@@ -3024,9 +3024,9 @@
       }
     },
     "node_modules/@shlinkio/shlink-web-component": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.1.1.tgz",
-      "integrity": "sha512-N59LT9KCLPkPvPDPdS5EVvpPg0/eQUf1QuHewVZNK3Ee3XxAqoNK5ssHTuPX/xFDvzPmROEQWxIdcuma5+6e4w==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.0.tgz",
+      "integrity": "sha512-8zAcSF5j403pQrnScHBwPJpJbZDLTWxbuu9GZLJK77ZHDRQ0xYjc1iKZPAiwVWDYnr7SSHkeGq8DgrKs7n2K8Q==",
       "dependencies": {
         "@json2csv/plainjs": "^7.0.1",
         "bottlejs": "^2.0.1",
@@ -12630,9 +12630,9 @@
       }
     },
     "@shlinkio/shlink-web-component": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.1.1.tgz",
-      "integrity": "sha512-N59LT9KCLPkPvPDPdS5EVvpPg0/eQUf1QuHewVZNK3Ee3XxAqoNK5ssHTuPX/xFDvzPmROEQWxIdcuma5+6e4w==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.0.tgz",
+      "integrity": "sha512-8zAcSF5j403pQrnScHBwPJpJbZDLTWxbuu9GZLJK77ZHDRQ0xYjc1iKZPAiwVWDYnr7SSHkeGq8DgrKs7n2K8Q==",
       "requires": {
         "@json2csv/plainjs": "^7.0.1",
         "bottlejs": "^2.0.1",

package.json

@@ -32,7 +32,7 @@
     "@json2csv/plainjs": "^7.0.1",
     "@reduxjs/toolkit": "^1.9.5",
     "@shlinkio/shlink-frontend-kit": "^0.2.0",
-    "@shlinkio/shlink-web-component": "^0.1.1",
+    "@shlinkio/shlink-web-component": "^0.3.0",
     "bootstrap": "5.2.3",
     "bottlejs": "^2.0.1",
     "classnames": "^2.3.2",

src/app/App.tsx

@@ -1,5 +1,4 @@
 import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
-import type { Settings } from '@shlinkio/shlink-web-component';
 import classNames from 'classnames';
 import type { FC } from 'react';
 import { useEffect } from 'react';
@@ -7,13 +6,14 @@ import { Route, Routes, useLocation } from 'react-router-dom';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { ServersMap } from '../servers/data';
+import type { AppSettings } from '../settings/reducers/settings';
 import { forceUpdate } from '../utils/helpers/sw';
 import './App.scss';
 
 interface AppProps {
   fetchServers: () => void;
   servers: ServersMap;
-  settings: Settings;
+  settings: AppSettings;
   resetAppUpdate: () => void;
   appUpdated: boolean;
 }

src/settings/UserInterfaceSettings.tsx

@@ -2,12 +2,12 @@ import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import { changeThemeInMarkup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
-import type { Settings, UiSettings } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
+import type { AppSettings, UiSettings } from './reducers/settings';
 import './UserInterfaceSettings.scss';
 
 interface UserInterfaceProps {
-  settings: Settings;
+  settings: AppSettings;
   setUiSettings: (settings: UiSettings) => void;
 }
 

src/settings/reducers/settings.ts

@@ -1,11 +1,11 @@
 import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import type {
   Settings,
   ShortUrlCreationSettings,
   ShortUrlsListSettings,
   TagsSettings,
-  UiSettings,
   VisitsSettings,
 } from '@shlinkio/shlink-web-component';
 import { mergeDeepRight } from 'ramda';
@@ -18,7 +18,15 @@ export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
   dir: 'DESC',
 };
 
-const initialState: Settings = {
+export type UiSettings = {
+  theme: Theme;
+};
+
+export type AppSettings = Settings & {
+  ui?: UiSettings;
+};
+
+const initialState: AppSettings = {
   realTimeUpdates: {
     enabled: true,
   },
@@ -36,12 +44,12 @@ const initialState: Settings = {
   },
 };
 
-type SettingsAction = PayloadAction<Settings>;
-type SettingsPrepareAction = PrepareAction<Settings>;
+type SettingsAction = PayloadAction<AppSettings>;
+type SettingsPrepareAction = PrepareAction<AppSettings>;
 
-const commonReducer = (state: Settings, { payload }: SettingsAction) => mergeDeepRight(state, payload);
+const commonReducer = (state: AppSettings, { payload }: SettingsAction) => mergeDeepRight(state, payload);
 const toReducer = (prepare: SettingsPrepareAction) => ({ reducer: commonReducer, prepare });
-const toPreparedAction: SettingsPrepareAction = (payload: Settings) => ({ payload });
+const toPreparedAction: SettingsPrepareAction = (payload: AppSettings) => ({ payload });
 
 const { reducer, actions } = createSlice({
   name: 'shlink/settings',

src/utils/services/LocalStorage.ts

@@ -6,7 +6,6 @@ export class LocalStorage {
 
   public readonly get = <T>(key: string): T | undefined => {
     const item = this.localStorage.getItem(buildPath(key));
-
     return item ? JSON.parse(item) as T : undefined;
   };
 

test/settings/UserInterfaceSettings.test.tsx

@@ -1,7 +1,7 @@
 import type { Theme } from '@shlinkio/shlink-frontend-kit';
-import type { UiSettings } from '@shlinkio/shlink-web-component';
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
+import type { UiSettings } from '../../src/settings/reducers/settings';
 import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
 import { renderWithEvents } from '../__helpers__/setUpTest';