All files / libs/lti/components/src/lib/header/breadcrumbs LtiPlansBreadcrumb.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { IconPlus } from '@tabler/icons-react';
import { memo, useCallback, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { generatePath } from 'react-router-dom';
import { match } from 'ts-pattern';

import { Breadcrumbs, Dropdown, type SimpleSelectOption } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { useNavigate } from '@amalia/ext/react-router-dom';
import { objectToQs } from '@amalia/ext/web';
import { canEditLtiPlans } from '@amalia/kernel/auth/shared';
import { useAbilityContext } from '@amalia/kernel/auth/state';
import { useLtiPlans } from '@amalia/lti/state';
import { type LtiPlan } from '@amalia/lti/types';

import { type LtiPlanDetailsTab } from '../LtiPlanDetailsHeader.types';

type LtiPlanOption = SimpleSelectOption<LtiPlan['id']>;

export type LtiPlansBreadcrumbProps = {
  readonly selectedLtiPlanId: LtiPlan['id'];
  readonly currentTab: LtiPlanDetailsTab;
};

export const LtiPlansBreadcrumb = memo(function LtiPlansBreadcrumb({
  selectedLtiPlanId,
  currentTab,
}: LtiPlansBreadcrumbProps) {
  const { data: ltiPlans } = useLtiPlans();
  const navigate = useNavigate();
  const ability = useAbilityContext();

  const ltiPlansOptions = useMemo(
    () =>
      (ltiPlans ?? []).map(
        ({ ltiPlan }): LtiPlanOption => ({
          value: ltiPlan.id,
          label: ltiPlan.name,
        }),
      ),
    [ltiPlans],
  );

  const handleSelectLtiPlan = useCallback(
    (ltiPlanId: LtiPlanOption['value']) => {
      match(currentTab)
        .with('participant-dashboard', () => {
          navigate(generatePath(routes.LTI_PLAN_DETAILS_CUSTOMIZATION, { ltiPlanId }));
        })
        .otherwise(() => {
          navigate({
            pathname: generatePath(routes.LTI_PLAN_DETAILS, { ltiPlanId }),
            search: objectToQs({ tab: currentTab }),
          });
        });
    },
    [currentTab, navigate],
  );

  return (
    <Breadcrumbs.SelectItem<LtiPlanOption>
      options={ltiPlansOptions}
      value={selectedLtiPlanId}
      action={
        canEditLtiPlans(ability) ? (
          <Dropdown.ActionLink
            icon={<IconPlus />}
            to={generatePath(routes.LTI_PLAN_CREATE)}
          >
            <FormattedMessage defaultMessage="Create plan" />
          </Dropdown.ActionLink>
        ) : undefined
      }
      onChange={handleSelectLtiPlan}
    />
  );
});