feat: add force update to change design without reload

src/app/App.tsx

@@ -16,8 +16,10 @@ export function App() {
   const inited = useSelector(getUserInited);
 
   useEffect(() => {
-    dispatch(initAuthData());
-  }, [dispatch]);
+    if (!inited) {
+      dispatch(initAuthData());
+    }
+  }, [dispatch, inited]);
 
   if (!inited) {
     return <PageLoader />;

src/features/authByUsername/ui/LoginForm/LoginForm.tsx

@@ -17,6 +17,7 @@ import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch
 import { useTheme } from '@/shared/lib/hooks/useTheme/useTheme';
 import { ToggleFeatures } from '@/shared/lib/features';
 import { VStack } from '@/shared/ui/redesigned/Stack';
+import { useForceUpdate } from '@/shared/render/forceUpdate';
 
 import { getLoginUsername } from '../../model/selectors/getLoginUsername/getLoginUsername';
 import { getLoginPassword } from '../../model/selectors/getLoginPassword/getLoginPassword';
@@ -46,6 +47,7 @@ export const LoginForm = memo((props: LoginFormProps) => {
   const password = useSelector(getLoginPassword);
   const isLoading = useSelector(getLoginIsLoading);
   const error = useSelector(getLoginError);
+  const forceUpdate = useForceUpdate();
   const { setTheme } = useTheme();
 
   const onChangeUsername = useCallback(
@@ -70,8 +72,9 @@ export const LoginForm = memo((props: LoginFormProps) => {
         setTheme?.(result.payload.jsonSettings.theme);
       }
       onSuccess();
+      forceUpdate();
     }
-  }, [onSuccess, dispatch, password, username, setTheme]);
+  }, [onSuccess, dispatch, password, username, setTheme, forceUpdate]);
 
   return (
     <DynamicModuleLoader reducers={initialReducers} removeAfterUnmount>

src/features/uiDesignSwitcher/ui/UiDesignSwitcher.tsx

@@ -9,6 +9,7 @@ import { getUserAuthData } from '@/entities/User';
 import { HStack } from '@/shared/ui/redesigned/Stack';
 import { Text } from '@/shared/ui/redesigned/Text';
 import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
+import { useForceUpdate } from '@/shared/render/forceUpdate';
 
 interface UiDesignSwitcherProps {
   className?: string;
@@ -20,6 +21,7 @@ export const UiDesignSwitcher = memo((props: UiDesignSwitcherProps) => {
   const dispatch = useAppDispatch();
   const authData = useSelector(getUserAuthData);
   const [isLoading, setIsLoading] = useState(false);
+  const forceUpdate = useForceUpdate();
 
   const isAppRedesigned = getFeatureFlag('isAppRedesigned');
   const items = useMemo(
@@ -50,10 +52,12 @@ export const UiDesignSwitcher = memo((props: UiDesignSwitcherProps) => {
           }),
         ).unwrap();
 
+        forceUpdate();
+
         setIsLoading(false);
       }
     },
-    [authData?.id, dispatch],
+    [authData?.id, dispatch, forceUpdate],
   );
 
   return (

src/index.tsx

@@ -5,9 +5,9 @@ import { App } from '@/app/App';
 import { ThemeProvider } from '@/app/providers/ThemeProvider';
 import { ErrorBoundary } from '@/app/providers/ErrorBoundary';
 import { StoreProvider } from '@/app/providers/StoreProvider';
-
 import '@/app/styles/index.scss';
 import '@/shared/config/i18n/i18n';
+import { ForceUpdateProvider } from '@/shared/render/forceUpdate';
 
 const container = document.getElementById('root');
 
@@ -20,9 +20,11 @@ root.render(
   <BrowserRouter>
     <StoreProvider>
       <ErrorBoundary>
-        <ThemeProvider>
-          <App />
-        </ThemeProvider>
+        <ForceUpdateProvider>
+          <ThemeProvider>
+            <App />
+          </ThemeProvider>
+        </ForceUpdateProvider>
       </ErrorBoundary>
     </StoreProvider>
   </BrowserRouter>,

src/shared/lib/features/services/updateFeatureFlags.ts

@@ -3,7 +3,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import { ThunkConfig } from '@/app/providers/StoreProvider';
 import { updateFeatureFlagsMutation } from '@/shared/lib/features/api/featureFlagsApi';
 import { FeatureFlags } from '@/shared/types/featureFlags';
-import { getAllFeatureFlags } from '@/shared/lib/features/lib/setGetFeatures';
+import { getAllFeatureFlags, setFeatureFlags } from '@/shared/lib/features/lib/setGetFeatures';
 
 interface UpdateFeatureFlagsArg {
   userId: string;
@@ -17,18 +17,20 @@ export const updateFeatureFlags = createAsyncThunk<
 >('features/updateFeatureFlags', async ({ userId, newFeatures }, thunkAPI) => {
   const { rejectWithValue, dispatch } = thunkAPI;
 
+  const allFeatures = {
+    ...getAllFeatureFlags(),
+    ...newFeatures,
+  };
+
   try {
     await dispatch(
       updateFeatureFlagsMutation({
         userId,
-        features: {
-          ...getAllFeatureFlags(),
-          ...newFeatures,
-        },
+        features: allFeatures,
       }),
     );
 
-    window.location.reload();
+    setFeatureFlags(allFeatures);
 
     return undefined;
   } catch (e) {

src/shared/render/forceUpdate.tsx

@@ -0,0 +1,31 @@
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
+
+const ForceUpdateContext = createContext({
+  value: true,
+  forceUpdate: () => {},
+});
+
+export const useForceUpdate = () => {
+  const { forceUpdate } = useContext(ForceUpdateContext);
+
+  return forceUpdate;
+};
+
+export function ForceUpdateProvider({ children }: { children: ReactNode }) {
+  const [value, setValue] = useState(true);
+
+  const forceUpdate = useCallback(() => {
+    setValue((prev) => !prev);
+    setTimeout(() => {
+      setValue((prev) => !prev);
+    }, 0);
+  }, []);
+
+  const contextValue = useMemo(() => ({ value, forceUpdate }), [value, forceUpdate]);
+
+  if (!value) {
+    return null;
+  }
+
+  return <ForceUpdateContext.Provider value={contextValue}>{children}</ForceUpdateContext.Provider>;
+}

src/widgets/Sidebar/model/selectors/getSidebarItems.ts → src/widgets/Sidebar/model/selectors/useSidebarItems.ts

@@ -1,4 +1,4 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { useSelector } from 'react-redux';
 
 import { getUserAuthData } from '@/entities/User';
 import MainIconDeprecated from '@/shared/assets/icons/main-20-20.svg';
@@ -20,7 +20,9 @@ import { toggleFeatures } from '@/shared/lib/features';
 
 import { SidebarItemType } from '../types/sidebar';
 
-export const getSidebarItems = createSelector(getUserAuthData, (userData) => {
+export const useSidebarItems = () => {
+  const userData = useSelector(getUserAuthData);
+
   const sidebarItemsList: SidebarItemType[] = [
     {
       path: getRouteMain(),
@@ -72,4 +74,4 @@ export const getSidebarItems = createSelector(getUserAuthData, (userData) => {
   }
 
   return sidebarItemsList;
-});
+};

src/widgets/Sidebar/ui/Sidebar/Sidebar.tsx

@@ -1,5 +1,4 @@
 import { memo, useState } from 'react';
-import { useSelector } from 'react-redux';
 
 import { classNames } from '@/shared/lib/classNames';
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/deprecated/Button';
@@ -11,7 +10,7 @@ import { AppLogo } from '@/shared/ui/redesigned/AppLogo';
 import { Icon } from '@/shared/ui/redesigned/Icon';
 import ArrowIcon from '@/shared/assets/icons/arrow-bottom.svg';
 
-import { getSidebarItems } from '../../model/selectors/getSidebarItems';
+import { useSidebarItems } from '../../model/selectors/useSidebarItems';
 import { SidebarItem } from '../SidebarItem/SidebarItem';
 import cls from './Sidebar.module.scss';
 
@@ -21,7 +20,7 @@ interface SidebarProps {
 
 export const Sidebar = memo(({ className }: SidebarProps) => {
   const [collapsed, setCollapsed] = useState(false);
-  const sidebarItemsList = useSelector(getSidebarItems);
+  const sidebarItemsList = useSidebarItems();
 
   const onToggle = () => {
     setCollapsed((prev) => !prev);