[DOP-22969] rewrite SelectedGroupProvider

src/entities/group/api/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useGetGroup';
 export * from './useDeleteGroupUser';
+export * from './useGetInitialGroup';

src/entities/group/api/hooks/useGetInitialGroup/index.ts

@@ -0,0 +1,14 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+
+import { GetGroupRequest, Group } from '../../types';
+import { GroupQueryKey } from '../../keys';
+import { groupService } from '../../groupService';
+
+/** Hook for getting group info from backend */
+export const useGetInitialGroup = ({ id }: GetGroupRequest): UseQueryResult<Group> => {
+  return useQuery({
+    queryKey: [GroupQueryKey.GET_GROUP, id],
+    queryFn: () => groupService.getGroup({ id }),
+    enabled: !!id,
+  });
+};

src/entities/group/constants.ts

@@ -12,7 +12,7 @@ const SELECTED_GROUP_CONTEXT_INITIAL_VALUE: SelectedGroupContextProps = {
 
 export const SelectedGroupContext = createContext<SelectedGroupContextProps>(SELECTED_GROUP_CONTEXT_INITIAL_VALUE);
 
-export const SELECTED_GROUP_LOCAL_STORAGE_KEY = 'SELECTED_GROUP';
+export const SELECTED_GROUP_ID_LOCAL_STORAGE_KEY = 'SELECTED_GROUP';
 
 export const USER_ROLE_IN_GROUP_SELECT_OPTIONS = prepareOptionsForSelect<keyof typeof UserRole>({
   data: ['Guest', 'Developer', 'Maintainer'],

src/entities/group/providers/SelectedGroupProvider/index.tsx

@@ -1,20 +1,29 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 
-import { getInitialSelectedGroup } from '../../utils';
-import { Group } from '../../api';
-import { SELECTED_GROUP_LOCAL_STORAGE_KEY, SelectedGroupContext } from '../../constants';
+import { Group, useGetInitialGroup } from '../../api';
+import { SELECTED_GROUP_ID_LOCAL_STORAGE_KEY, SelectedGroupContext } from '../../constants';
 
 export const SelectedGroupProvider = ({ children }: PropsWithChildren) => {
-  const [selectedGroup, setSelectedGroup] = useState<Group | null>(() => getInitialSelectedGroup());
+  const { data: initialGroup } = useGetInitialGroup({
+    id: Number(localStorage.getItem(SELECTED_GROUP_ID_LOCAL_STORAGE_KEY)),
+  });
+
+  const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
+
+  useEffect(() => {
+    if (initialGroup) {
+      setSelectedGroup(initialGroup);
+    }
+  }, [initialGroup]);
 
   const handleSelectGroup = (group: Group) => {
     setSelectedGroup(group);
-    localStorage.setItem(SELECTED_GROUP_LOCAL_STORAGE_KEY, JSON.stringify(group));
+    localStorage.setItem(SELECTED_GROUP_ID_LOCAL_STORAGE_KEY, group.data.id.toString());
   };
 
   const handleCleanGroup = () => {
     setSelectedGroup(null);
-    localStorage.removeItem(SELECTED_GROUP_LOCAL_STORAGE_KEY);
+    localStorage.removeItem(SELECTED_GROUP_ID_LOCAL_STORAGE_KEY);
   };
 
   const contextValue = {