@strapi/admin 4.3.4 → 4.4.0-alpha.0

package/admin/src/StrapiApp.js

@@ -8,7 +8,7 @@ import invariant from 'invariant';
 import { Helmet } from 'react-helmet';
 import { basename, createHook } from './core/utils';
 import configureStore from './core/store/configureStore';
-import { Plugin } from './core/apis';
+import { customFields, Plugin } from './core/apis';
 import App from './pages/App';
 import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
 import MenuLogo from './assets/images/logo_strapi_menu.png';
@@ -47,6 +47,7 @@ class StrapiApp {
     this.admin = {
       injectionZones,
     };
+    this.customFields = customFields;
 
     this.menu = [];
     this.settings = {
@@ -61,15 +62,15 @@ class StrapiApp {
     };
   }
 
-  addComponents = components => {
+  addComponents = (components) => {
     if (Array.isArray(components)) {
-      components.map(compo => this.library.components.add(compo));
+      components.map((compo) => this.library.components.add(compo));
     } else {
       this.library.components.add(components);
     }
   };
 
-  addCorePluginMenuLink = link => {
+  addCorePluginMenuLink = (link) => {
     const stringifiedLink = JSON.stringify(link);
 
     invariant(link.to, `link.to should be defined for ${stringifiedLink}`);
@@ -89,15 +90,15 @@ class StrapiApp {
     this.menu.push(link);
   };
 
-  addFields = fields => {
+  addFields = (fields) => {
     if (Array.isArray(fields)) {
-      fields.map(field => this.library.fields.add(field));
+      fields.map((field) => this.library.fields.add(field));
     } else {
       this.library.fields.add(fields);
     }
   };
 
-  addMenuLink = link => {
+  addMenuLink = (link) => {
     const stringifiedLink = JSON.stringify(link);
 
     invariant(link.to, `link.to should be defined for ${stringifiedLink}`);
@@ -121,14 +122,14 @@ class StrapiApp {
     this.menu.push(link);
   };
 
-  addMiddlewares = middlewares => {
-    middlewares.forEach(middleware => {
+  addMiddlewares = (middlewares) => {
+    middlewares.forEach((middleware) => {
       this.middlewares.add(middleware);
     });
   };
 
-  addReducers = reducers => {
-    Object.keys(reducers).forEach(reducerName => {
+  addReducers = (reducers) => {
+    Object.keys(reducers).forEach((reducerName) => {
       this.reducers.add(reducerName, reducers[reducerName]);
     });
   };
@@ -156,13 +157,13 @@ class StrapiApp {
     invariant(this.settings[sectionId], 'The section does not exist');
     invariant(Array.isArray(links), 'TypeError expected links to be an array');
 
-    links.forEach(link => {
+    links.forEach((link) => {
       this.addSettingsLink(sectionId, link);
     });
   };
 
   async bootstrap() {
-    Object.keys(this.appPlugins).forEach(plugin => {
+    Object.keys(this.appPlugins).forEach((plugin) => {
       const bootstrap = this.appPlugins[plugin].bootstrap;
 
       if (bootstrap) {
@@ -208,7 +209,7 @@ class StrapiApp {
     if (this.customConfigurations?.locales) {
       this.configurations.locales = [
         'en',
-        ...this.customConfigurations.locales?.filter(loc => loc !== 'en'),
+        ...(this.customConfigurations.locales?.filter((loc) => loc !== 'en') || []),
       ];
     }
 
@@ -237,7 +238,7 @@ class StrapiApp {
     }
   };
 
-  createHook = name => {
+  createHook = (name) => {
     this.hooksDict[name] = createHook();
   };
 
@@ -253,7 +254,7 @@ class StrapiApp {
 
     this.settings[section.id] = { ...section, links: [] };
 
-    links.forEach(link => {
+    links.forEach((link) => {
       this.addSettingsLink(section.id, link);
     });
   };
@@ -274,23 +275,13 @@ class StrapiApp {
     }
   };
 
-  getPlugin = pluginId => {
+  getPlugin = (pluginId) => {
     return this.plugins[pluginId];
   };
 
   async initialize() {
-    Object.keys(this.appPlugins).forEach(plugin => {
-      this.appPlugins[plugin].register({
-        addComponents: this.addComponents,
-        addCorePluginMenuLink: this.addCorePluginMenuLink,
-        addFields: this.addFields,
-        addMenuLink: this.addMenuLink,
-        addMiddlewares: this.addMiddlewares,
-        addReducers: this.addReducers,
-        createHook: this.createHook,
-        createSettingSection: this.createSettingSection,
-        registerPlugin: this.registerPlugin,
-      });
+    Object.keys(this.appPlugins).forEach((plugin) => {
+      this.appPlugins[plugin].register(this);
     });
   }
 
@@ -319,7 +310,7 @@ class StrapiApp {
    * @returns {Object} The imported admin translations
    */
   async loadAdminTrads() {
-    const arrayOfPromises = this.configurations.locales.map(locale => {
+    const arrayOfPromises = this.configurations.locales.map((locale) => {
       return import(/* webpackChunkName: "[request]" */ `./translations/${locale}.json`)
         .then(({ default: data }) => {
           return { data, locale };
@@ -350,7 +341,7 @@ class StrapiApp {
     const adminTranslations = await this.loadAdminTrads();
 
     const arrayOfPromises = Object.keys(this.appPlugins)
-      .map(plugin => {
+      .map((plugin) => {
         const registerTrads = this.appPlugins[plugin].registerTrads;
 
         if (registerTrads) {
@@ -359,7 +350,7 @@ class StrapiApp {
 
         return null;
       })
-      .filter(a => a);
+      .filter((a) => a);
 
     const pluginsTrads = await Promise.all(arrayOfPromises);
     const mergedTrads = pluginsTrads.reduce((acc, currentPluginTrads) => {
@@ -369,7 +360,7 @@ class StrapiApp {
         return acc1;
       }, {});
 
-      Object.keys(pluginTrads).forEach(locale => {
+      Object.keys(pluginTrads).forEach((locale) => {
         acc[locale] = { ...acc[locale], ...pluginTrads[locale] };
       });
 
@@ -399,7 +390,7 @@ class StrapiApp {
     this.hooksDict[name].register(fn);
   };
 
-  registerPlugin = pluginConf => {
+  registerPlugin = (pluginConf) => {
     const plugin = Plugin(pluginConf);
 
     this.plugins[plugin.pluginId] = plugin;
@@ -414,7 +405,7 @@ class StrapiApp {
       : this.hooksDict[name].runWaterfall(initialValue, store);
   };
 
-  runHookParallel = name => this.hooksDict[name].runParallel();
+  runHookParallel = (name) => this.hooksDict[name].runParallel();
 
   render() {
     const store = this.createStore();
@@ -430,6 +421,7 @@ class StrapiApp {
         authLogo={this.configurations.authLogo}
         components={components}
         fields={fields}
+        customFields={this.customFields}
         localeNames={localeNames}
         getAdminInjectedComponents={this.getAdminInjectedComponents}
         getPlugin={this.getPlugin}

package/admin/src/components/AuthenticatedApp/index.js

@@ -56,9 +56,10 @@ const AuthenticatedApp = () => {
     },
   ]);
 
-  const shouldUpdateStrapi = useMemo(() => checkLatestStrapiVersion(strapiVersion, tag_name), [
-    tag_name,
-  ]);
+  const shouldUpdateStrapi = useMemo(
+    () => checkLatestStrapiVersion(strapiVersion, tag_name),
+    [tag_name]
+  );
 
   useEffect(() => {
     if (userRoles) {
@@ -77,6 +78,16 @@ const AuthenticatedApp = () => {
 
   const shouldShowLoader = isLoading || shouldShowNotDependentQueriesLoader;
 
+  const appInfosValue = useMemo(() => {
+    return {
+      ...appInfos,
+      latestStrapiReleaseTag: tag_name,
+      setUserDisplayName,
+      shouldUpdateStrapi,
+      userDisplayName,
+    };
+  }, [appInfos, tag_name, shouldUpdateStrapi, userDisplayName]);
+
   if (shouldShowLoader) {
     return <LoadingIndicatorPage />;
   }
@@ -87,15 +98,7 @@ const AuthenticatedApp = () => {
   }
 
   return (
-    <AppInfosContext.Provider
-      value={{
-        ...appInfos,
-        latestStrapiReleaseTag: tag_name,
-        setUserDisplayName,
-        shouldUpdateStrapi,
-        userDisplayName,
-      }}
-    >
+    <AppInfosContext.Provider value={appInfosValue}>
       <RBACProvider permissions={permissions} refetchPermissions={refetch}>
         <PluginsInitializer />
       </RBACProvider>

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -6,7 +6,7 @@ import packageJSON from '../../../../../package.json';
 const strapiVersion = packageJSON.version;
 const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
 
-const fetchStrapiLatestRelease = async toggleNotification => {
+const fetchStrapiLatestRelease = async (toggleNotification) => {
   try {
     const {
       data: { tag_name },

package/admin/src/components/AutoReloadOverlayBlockerProvider/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { AutoReloadOverlayBockerContext } from '@strapi/helper-plugin';
 import Blocker from './Blocker';
@@ -13,7 +13,7 @@ const AutoReloadOverlayBlockerProvider = ({ children }) => {
   const lockAppWithAutoreload = (config = undefined) => {
     setIsOpen(true);
     setConfig(config);
-    setState(prev => ({ ...prev, start: Date.now() }));
+    setState((prev) => ({ ...prev, start: Date.now() }));
   };
 
   const unlockAppWithAutoreload = () => {
@@ -36,7 +36,7 @@ const AutoReloadOverlayBlockerProvider = ({ children }) => {
           return null;
         }
 
-        setState(prev => ({ ...prev, elapsed: Math.round(Date.now() - prev.start) / 1000 }));
+        setState((prev) => ({ ...prev, elapsed: Math.round(Date.now() - prev.start) / 1000 }));
 
         return null;
       }, 1000);
@@ -75,10 +75,12 @@ const AutoReloadOverlayBlockerProvider = ({ children }) => {
     };
   }
 
+  const autoReloadValue = useMemo(() => {
+    return { lockApp: lockApp.current, unlockApp: unlockApp.current };
+  }, [lockApp, unlockApp]);
+
   return (
-    <AutoReloadOverlayBockerContext.Provider
-      value={{ lockApp: lockApp.current, unlockApp: unlockApp.current }}
-    >
+    <AutoReloadOverlayBockerContext.Provider value={autoReloadValue}>
       <Blocker
         displayedIcon={displayedIcon}
         isOpen={isOpen}

package/admin/src/components/ConfigurationsProvider/index.js

@@ -1,4 +1,4 @@
-import React, { useReducer, useRef } from 'react';
+import React, { useMemo, useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { ConfigurationsContext } from '../../contexts';
 import reducer, { initialState } from './reducer';
@@ -23,18 +23,27 @@ const ConfigurationsProvider = ({
 
   const updateProjectSettingsRef = useRef(updateProjectSettings);
 
+  const configurationValue = useMemo(() => {
+    return {
+      logos: {
+        menu: { custom: menuLogo, default: defaultMenuLogo },
+        auth: { custom: null, default: authLogo },
+      },
+      updateProjectSettings: updateProjectSettingsRef.current,
+      showReleaseNotification,
+      showTutorials,
+    };
+  }, [
+    authLogo,
+    menuLogo,
+    showReleaseNotification,
+    showTutorials,
+    updateProjectSettingsRef,
+    defaultMenuLogo,
+  ]);
+
   return (
-    <ConfigurationsContext.Provider
-      value={{
-        logos: {
-          menu: { custom: menuLogo, default: defaultMenuLogo },
-          auth: { custom: null, default: authLogo },
-        },
-        updateProjectSettings: updateProjectSettingsRef.current,
-        showReleaseNotification,
-        showTutorials,
-      }}
-    >
+    <ConfigurationsContext.Provider value={configurationValue}>
       {children}
     </ConfigurationsContext.Provider>
   );

package/admin/src/components/ConfigurationsProvider/reducer.js

@@ -12,7 +12,7 @@ const initialState = {
 };
 
 const reducer = (state = initialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'UPDATE_PROJECT_SETTINGS': {
         Object.assign(draftState, action.values);

package/admin/src/components/GuidedTour/Homepage/components/Stepper.js

@@ -19,7 +19,7 @@ const getType = (activeSectionIndex, index) => {
 };
 
 const StepperHomepage = ({ sections, currentSectionKey }) => {
-  const activeSectionIndex = sections.findIndex(section => section.key === currentSectionKey);
+  const activeSectionIndex = sections.findIndex((section) => section.key === currentSectionKey);
 
   return (
     <Box>

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -29,12 +29,12 @@ const GuidedTourHomepage = () => {
     ),
   }));
 
-  const enrichedSections = sections.map(section => ({
+  const enrichedSections = sections.map((section) => ({
     isDone: Object.entries(guidedTourState[section.key]).every(([, value]) => value),
     ...section,
   }));
 
-  const activeSection = enrichedSections.find(section => !section.isDone)?.key;
+  const activeSection = enrichedSections.find((section) => !section.isDone)?.key;
 
   const handleSkip = () => {
     setSkipped(true);

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -18,7 +18,7 @@ const Content = ({ id, defaultMessage }) => {
       {formatMessage(
         { id, defaultMessage },
         {
-          documentationLink: children => (
+          documentationLink: (children) => (
             <a
               target="_blank"
               rel="noopener noreferrer"
@@ -27,15 +27,15 @@ const Content = ({ id, defaultMessage }) => {
               {children}
             </a>
           ),
-          b: children => <Typography fontWeight="semiBold">{children}</Typography>,
-          p: children => <Typography>{children}</Typography>,
-          light: children => <Typography textColor="neutral600">{children}</Typography>,
-          ul: children => (
+          b: (children) => <Typography fontWeight="semiBold">{children}</Typography>,
+          p: (children) => <Typography>{children}</Typography>,
+          light: (children) => <Typography textColor="neutral600">{children}</Typography>,
+          ul: (children) => (
             <Box paddingLeft={6}>
               <ul>{children}</ul>
             </Box>
           ),
-          li: children => <LiStyled>{children}</LiStyled>,
+          li: (children) => <LiStyled>{children}</LiStyled>,
         }
       )}
     </Stack>

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -36,7 +36,7 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
             spacing={8}
             role="dialog"
             aria-modal
-            onClick={e => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
           >
             <Flex justifyContent="flex-end">
               <IconButton

package/admin/src/components/GuidedTour/Modal/index.js

@@ -16,10 +16,8 @@ const GuidedTourModal = () => {
     setSkipped,
   } = useGuidedTour();
   const [isVisible, setIsVisible] = useState(currentStep);
-  const [
-    { stepContent, sectionIndex, stepIndex, hasSectionAfter, hasStepAfter },
-    dispatch,
-  ] = useReducer(reducer, initialState);
+  const [{ stepContent, sectionIndex, stepIndex, hasSectionAfter, hasStepAfter }, dispatch] =
+    useReducer(reducer, initialState);
   const { trackUsage } = useTracking();
 
   useEffect(() => {

package/admin/src/components/GuidedTour/Modal/reducer.js

@@ -10,7 +10,7 @@ export const initialState = {
 };
 
 const reducer = (state = initialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'UPDATE_MODAL': {
         draftState.stepContent = action.content;

package/admin/src/components/GuidedTour/index.js

@@ -15,7 +15,7 @@ const GuidedTour = ({ children }) => {
     init
   );
 
-  const setCurrentStep = step => {
+  const setCurrentStep = (step) => {
     // if step is null it is intentional, we need to dispatch it
     if (step !== null) {
       const isStepAlreadyDone = get(guidedTourState, step);
@@ -34,7 +34,7 @@ const GuidedTour = ({ children }) => {
     });
   };
 
-  const setGuidedTourVisibility = value => {
+  const setGuidedTourVisibility = (value) => {
     dispatch({
       type: 'SET_GUIDED_TOUR_VISIBILITY',
       value,
@@ -51,7 +51,7 @@ const GuidedTour = ({ children }) => {
     });
   };
 
-  const startSection = sectionName => {
+  const startSection = (sectionName) => {
     const sectionSteps = guidedTourState[sectionName];
 
     if (sectionSteps) {
@@ -67,7 +67,7 @@ const GuidedTour = ({ children }) => {
     return null;
   };
 
-  const setSkipped = value => {
+  const setSkipped = (value) => {
     persistStateToLocaleStorage.setSkipped(value);
 
     dispatch({

package/admin/src/components/GuidedTour/init.js

@@ -5,14 +5,14 @@ import persistStateToLocaleStorage, {
   SKIPPED,
 } from './utils/persistStateToLocaleStorage';
 
-const init = initialState => {
+const init = (initialState) => {
   const copyInitialState = { ...initialState };
   const guidedTourLocaleStorage = persistStateToLocaleStorage.get(COMPLETED_STEPS);
   const currentStepLocaleStorage = persistStateToLocaleStorage.get(CURRENT_STEP);
   const skippedLocaleStorage = persistStateToLocaleStorage.get(SKIPPED);
 
   if (guidedTourLocaleStorage) {
-    guidedTourLocaleStorage.forEach(step => {
+    guidedTourLocaleStorage.forEach((step) => {
       const [sectionName, stepName] = step.split('.');
       set(copyInitialState, ['guidedTourState', sectionName, stepName], true);
     });

package/admin/src/components/GuidedTour/reducer.js

@@ -22,7 +22,7 @@ export const initialState = {
 };
 
 const reducer = (state = initialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'SET_CURRENT_STEP': {
         draftState.currentStep = action.step;

package/admin/src/components/GuidedTour/utils/isGuidedTourCompleted.js

@@ -1,4 +1,4 @@
-const isGuidedTourCompleted = guidedTourState =>
+const isGuidedTourCompleted = (guidedTourState) =>
   Object.entries(guidedTourState).every(([, section]) =>
     Object.entries(section).every(([, step]) => step)
   );

package/admin/src/components/GuidedTour/utils/persistStateToLocaleStorage.js

@@ -9,7 +9,7 @@ const persistStateToLocaleStorage = {
     localStorage.removeItem(CURRENT_STEP);
     localStorage.removeItem(COMPLETED_STEPS);
   },
-  addCompletedStep: completedStep => {
+  addCompletedStep(completedStep) {
     const currentSteps = parse(localStorage.getItem(COMPLETED_STEPS))?.slice() || [];
     const isAlreadyStored = currentSteps.includes(completedStep);
 
@@ -20,13 +20,13 @@ const persistStateToLocaleStorage = {
     currentSteps.push(completedStep);
     localStorage.setItem(COMPLETED_STEPS, stringify(currentSteps));
   },
-  addCurrentStep: currentStep => {
+  addCurrentStep(currentStep) {
     localStorage.setItem(CURRENT_STEP, stringify(currentStep));
   },
-  setSkipped: value => {
+  setSkipped(value) {
     localStorage.setItem(SKIPPED, stringify(value));
   },
-  get: item => {
+  get(item) {
     return parse(localStorage.getItem(item));
   },
 };

package/admin/src/components/LanguageProvider/index.js

@@ -23,7 +23,7 @@ const LanguageProvider = ({ children, localeNames, messages }) => {
     window.localStorage.setItem(localStorageKey, locale);
   }, [locale]);
 
-  const changeLocale = locale => {
+  const changeLocale = (locale) => {
     dispatch({
       type: 'CHANGE_LOCALE',
       locale,

package/admin/src/components/LanguageProvider/init.js

@@ -1,6 +1,6 @@
 import localStorageKey from './utils/localStorageKey';
 
-const init = localeNames => {
+const init = (localeNames) => {
   const languageFromLocaleStorage = window.localStorage.getItem(localStorageKey);
   const appLanguage = localeNames[languageFromLocaleStorage] ? languageFromLocaleStorage : 'en';
 

package/admin/src/components/LeftMenu/index.js

@@ -62,18 +62,18 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
 
   const initials = userDisplayName
     .split(' ')
-    .map(name => name.substring(0, 1))
+    .map((name) => name.substring(0, 1))
     .join('')
     .substring(0, 2);
 
-  const handleToggleUserLinks = () => setUserLinksVisible(prev => !prev);
+  const handleToggleUserLinks = () => setUserLinksVisible((prev) => !prev);
 
   const handleLogout = () => {
     auth.clearAppStorage();
     handleToggleUserLinks();
   };
 
-  const handleBlur = e => {
+  const handleBlur = (e) => {
     if (
       !e.currentTarget.contains(e.relatedTarget) &&
       e.relatedTarget?.parentElement?.id !== 'main-nav-user-button'
@@ -121,7 +121,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               defaultMessage: 'Plugins',
             })}
           >
-            {pluginsSectionLinks.map(link => {
+            {pluginsSectionLinks.map((link) => {
               const Icon = link.icon;
 
               return (
@@ -140,7 +140,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               defaultMessage: 'General',
             })}
           >
-            {generalSectionLinks.map(link => {
+            {generalSectionLinks.map((link) => {
               const LinkIcon = link.icon;
 
               return (
@@ -201,7 +201,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         </LinkUserWrapper>
       )}
 
-      <NavCondense onClick={() => setCondensed(s => !s)}>
+      <NavCondense onClick={() => setCondensed((s) => !s)}>
         {condensed
           ? formatMessage({
               id: 'app.components.LeftMenu.expand',

package/admin/src/components/Notifications/Notification/index.js

@@ -8,7 +8,8 @@ const Notification = ({ dispatch, notification }) => {
   const { formatMessage } = useIntl();
   const { message, link, type, id, onClose, timeout, blockTransition } = notification;
 
-  const formattedMessage = msg => (typeof msg === 'string' ? msg : formatMessage(msg, msg.values));
+  const formattedMessage = (msg) =>
+    typeof msg === 'string' ? msg : formatMessage(msg, msg.values);
   const handleClose = useCallback(() => {
     if (onClose) {
       onClose();
@@ -66,9 +67,7 @@ const Notification = ({ dispatch, notification }) => {
               defaultMessage: link.label?.defaultMessage || link.label?.id || link.label,
             })}
           </Link>
-        ) : (
-          undefined
-        )
+        ) : undefined
       }
       onClose={handleClose}
       closeLabel="Close"

package/admin/src/components/Notifications/index.js

@@ -8,7 +8,7 @@ import reducer, { initialState } from './reducer';
 const Notifications = ({ children }) => {
   const [{ notifications }, dispatch] = useReducer(reducer, initialState);
 
-  const displayNotification = config => {
+  const displayNotification = (config) => {
     dispatch({
       type: 'SHOW_NOTIFICATION',
       config,
@@ -26,7 +26,7 @@ const Notifications = ({ children }) => {
         width={`${500 / 16}rem`}
         zIndex={10}
       >
-        {notifications.map(notification => {
+        {notifications.map((notification) => {
           return (
             <Notification key={notification.id} dispatch={dispatch} notification={notification} />
           );

package/admin/src/components/Notifications/reducer.js

@@ -8,7 +8,7 @@ const initialState = {
 
 const notificationReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'SHOW_NOTIFICATION': {
         draftState.notifications.push({
@@ -28,7 +28,7 @@ const notificationReducer = (state = initialState, action) =>
         break;
       }
       case 'HIDE_NOTIFICATION': {
-        const indexToRemove = state.notifications.findIndex(notif => notif.id === action.id);
+        const indexToRemove = state.notifications.findIndex((notif) => notif.id === action.id);
 
         if (indexToRemove !== -1) {
           draftState.notifications.splice(indexToRemove, 1);