[PB-4450]: refactor/extract Share Dialog logic to custom hooks

src/app/drive/components/ShareDialog/components/Header.tsx

@@ -1,18 +1,20 @@
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { ArrowLeft, X } from '@phosphor-icons/react';
-import { Views } from '../types';
+import { useShareDialogContext } from '../context';
+import { setView } from '../context/ShareDialogContext.actions';
 import { ItemToShare } from 'app/store/slices/storage/types';
 
 interface HeaderProps {
   itemToShare: ItemToShare | null;
-  isLoading: boolean;
-  headerView: Views;
-  setView: (view: Views) => void;
   onClose: () => void;
 }
 
-export const Header = ({ headerView, isLoading, itemToShare, onClose, setView }: HeaderProps): JSX.Element => {
+export const Header = ({ itemToShare, onClose }: HeaderProps): JSX.Element => {
   const { translate } = useTranslationContext();
+  const {
+    state: { view, isLoading },
+    dispatch: actionDispatch,
+  } = useShareDialogContext();
 
   const headers = {
     general: (
@@ -30,21 +32,21 @@ export const Header = ({ headerView, isLoading, itemToShare, onClose, setView }:
     ),
     invite: (
       <div className="flex items-center space-x-4">
-        <ArrowLeft className="cursor-pointer" onClick={() => setView('general')} size={24} />
+        <ArrowLeft className="cursor-pointer" onClick={() => actionDispatch(setView('general'))} size={24} />
         <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-medium">
           {translate('modals.shareModal.invite.title')}
         </span>
       </div>
     ),
     requests: (
       <div className="flex items-center space-x-4">
-        <ArrowLeft className="cursor-pointer" onClick={() => setView('general')} size={24} />
+        <ArrowLeft className="cursor-pointer" onClick={() => actionDispatch(setView('general'))} size={24} />
         <span className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-medium">
           {translate('modals.shareModal.requests.title')}
         </span>
       </div>
     ),
   };
 
-  return headers[headerView];
+  return headers[view];
 };

src/app/drive/components/ShareDialog/context/index.ts

@@ -0,0 +1,4 @@
+export { ShareDialogProvider, useShareDialogContext } from './ShareDialogContextProvider';
+export { ShareDialogContext, ActionTypes } from './ShareDialogContext';
+export type { ShareDialogState, ShareDialogAction, ShareDialogContextProps } from './ShareDialogContext';
+export * as ShareDialogActions from './ShareDialogContext.actions';

src/app/drive/components/ShareDialog/hooks/useShareItemActions.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useShareDialogContext } from '../context/ShareDialogContextProvider';
+import { useShareDialogContext } from '../context';
 import {
   removeUser,
   setIsLoading,

src/app/drive/components/ShareDialog/hooks/useShareItemInvitations.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import shareService from 'app/share/services/share.service';
 import { setInvitedUsers, setSelectedUserListIndex, setView } from '../context/ShareDialogContext.actions';
 import { getLocalUserData } from '../utils';
-import { useShareDialogContext } from '../context/ShareDialogContextProvider';
+import { useShareDialogContext } from '../context';
 import { ItemToShare } from 'app/store/slices/storage/types';
 
 interface ShareItemInvitationsProps {

src/app/drive/components/ShareDialog/hooks/useShareItemUserRoles.ts

@@ -11,7 +11,7 @@ import {
 import { AccessMode, UserRole } from '../types';
 import notificationsService, { ToastType } from 'app/notifications/services/notifications.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import { useShareDialogContext } from '../context/ShareDialogContextProvider';
+import { useShareDialogContext } from '../context';
 import { ItemToShare } from 'app/store/slices/storage/types';
 import errorService from 'services/error.service';
 

test/e2e/tests/pages/loginPage.ts

@@ -35,7 +35,7 @@ export class LoginPage {
     this.needHelp = this.page.getByRole('link', { name: 'Need help?' });
     this.wrongCredentials = this.page.locator('[class="flex flex-row items-start pt-1"] span');
     //drive
-    this.driveTitle = this.page.locator('span[class="max-w-sm flex-1 cursor-pointer truncate undefined"]');
+    this.driveTitle = this.page.locator('span.max-w-sm.flex-1.truncate').first();
     //account recovery
     this.accountRecoveryTitle = this.page.locator(
       'h1[class="text-3xl font-medium text-gray-100"]:has-text("Account recovery")',

test/e2e/tests/pages/signUpPage.ts

@@ -41,7 +41,7 @@ export class SignUpPage {
     //LOGIN PAGE
     this.loginTitle = this.page.getByRole('heading', { level: 1 });
     //DRIVE PAGE
-    this.driveTitle = this.page.locator('[class="max-w-sm flex-1 cursor-pointer truncate undefined"]');
+    this.driveTitle = this.page.locator('span.max-w-sm.flex-1.truncate').first();
   }
 
   async typeInEmail(email: string) {