[DOP-22969] save selected group in localstorage (#60)

* [DOP-22969] save selected group in localstorage

* [DOP-22969] rewrite SelectedGroupProvider

---------

Co-authored-by: Zabilsya <[email protected]>

Author: Zabilsya

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,6 +12,8 @@ const SELECTED_GROUP_CONTEXT_INITIAL_VALUE: SelectedGroupContextProps = {
 
 export const SelectedGroupContext = createContext<SelectedGroupContextProps>(SELECTED_GROUP_CONTEXT_INITIAL_VALUE);
 
+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'],
   renderLabel: (data) => data,

src/entities/group/guards/checkIsGroup/index.ts

@@ -0,0 +1,18 @@
+import { Group } from '../../api';
+
+/**
+ * Guard for checking correctness of the type of the group variable read from localStorage
+ *
+ * @returns - Initial selected group or null
+ */
+export const checkIsGroup = (group: unknown): group is Group => {
+  const checkingGroup = group as Group;
+
+  return (
+    !!checkingGroup?.data &&
+    !!checkingGroup.data?.id &&
+    !!checkingGroup.data?.name &&
+    !!checkingGroup.data?.owner_id &&
+    !!checkingGroup?.role
+  );
+};

src/entities/group/guards/index.ts

@@ -0,0 +1 @@
+export * from './checkIsGroup';

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

@@ -1,15 +1,35 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 
-import { Group } from '../../api';
-import { SelectedGroupContext } from '../../constants';
+import { Group, useGetInitialGroup } from '../../api';
+import { SELECTED_GROUP_ID_LOCAL_STORAGE_KEY, SelectedGroupContext } from '../../constants';
 
 export const SelectedGroupProvider = ({ children }: PropsWithChildren) => {
+  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_ID_LOCAL_STORAGE_KEY, group.data.id.toString());
+  };
+
+  const handleCleanGroup = () => {
+    setSelectedGroup(null);
+    localStorage.removeItem(SELECTED_GROUP_ID_LOCAL_STORAGE_KEY);
+  };
+
   const contextValue = {
     group: selectedGroup,
-    selectGroup: setSelectedGroup,
-    cleanGroup: () => setSelectedGroup(null),
+    selectGroup: handleSelectGroup,
+    cleanGroup: handleCleanGroup,
   };
 
   return <SelectedGroupContext.Provider value={contextValue}>{children}</SelectedGroupContext.Provider>;