All files / libs/lti/components/src/lib/header/breadcrumbs LtiUserBreadcrumb.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { uniqBy } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { generatePath } from 'react-router-dom';

import { Breadcrumbs, type SimpleSelectOption } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { useNavigate, useParams, useQueryString } from '@amalia/ext/react-router-dom';
import { objectToQs } from '@amalia/ext/web';
import { useLtiPlanGrants } from '@amalia/lti/state';
import { type LtiPlan } from '@amalia/lti/types';
import { formatUserFullName, type UserContract } from '@amalia/tenants/users/types';

type LtiUserOption = SimpleSelectOption<UserContract['id']>;

export const LtiUserBreadcrumb = memo(function LtiUserBreadcrumb() {
  const navigate = useNavigate();

  const { ltiPlanId } = useParams<{ ltiPlanId: LtiPlan['id']; userId: UserContract['id'] }>();
  const { userId } = useQueryString();

  const { data: grants } = useLtiPlanGrants(ltiPlanId);

  const userOptions: LtiUserOption[] = useMemo(
    () =>
      uniqBy(
        (grants ?? [])
          .filter((grant) => !!grant.acceptedAt)
          .map(({ user }) => ({
            value: user.id,
            label: formatUserFullName(user),
          })),
        'value',
      ),
    [grants],
  );

  const handleSelectUser = useCallback(
    (userId: LtiUserOption['value']) => {
      navigate({
        pathname: generatePath(routes.LTI_PLAN_DETAILS_CUSTOMIZATION, { ltiPlanId }),
        search: objectToQs({ userId }),
      });
    },
    [navigate, ltiPlanId],
  );

  return (
    <Breadcrumbs.SelectItem<LtiUserOption>
      options={userOptions}
      value={userId}
      onChange={handleSelectUser}
    />
  );
});