packages/mail/contacts/contactHooks.ts

   1 import { useCallback, useEffect } from 'react';
   2
   3 import { type Action, type ThunkDispatch, createSelector } from '@reduxjs/toolkit';
   4
   5 import { baseUseDispatch, baseUseSelector } from '@proton/react-redux-store';
   6 import type { ProtonThunkArguments } from '@proton/redux-shared-store-types';
   7 import type { Contact } from '@proton/shared/lib/interfaces/contacts';
   8
   9 import { type ContactState, contactThunk, selectContact } from './contactSlice';
  10
  11 export const useGetContact = () => {
  12     const dispatch = baseUseDispatch<ThunkDispatch<ContactState, ProtonThunkArguments, Action>>();
  13     return useCallback((contactID: string) => dispatch(contactThunk({ contactID })), [dispatch]);
  14 };
  15
  16 type Result = { value: Contact | undefined; loading: boolean };
  17
  18 const selector = createSelector(
  19     [(state: ContactState) => selectContact(state), (_, id: string | undefined) => id],
  20     (contactState, id): Result => {
  21         const contact = contactState[id || ''];
  22         if (!contact) {
  23             return { value: undefined, loading: false };
  24         }
  25         return {
  26             value: contact.value,
  27             loading: !contact.value,
  28         };
  29     }
  30 );
  31
  32 export const useContact = (contactID?: string) => {
  33     const dispatch = baseUseDispatch<ThunkDispatch<ContactState, ProtonThunkArguments, Action>>();
  34     const selectedValue = baseUseSelector<ContactState, Result>((state) => selector(state, contactID));
  35     useEffect(() => {
  36         if (!contactID) {
  37             return;
  38         }
  39         dispatch(contactThunk({ contactID }));
  40     }, [contactID]);
  41     return [selectedValue.value, selectedValue.loading] as const;
  42 };