|
1 | 1 | 'use client';
|
2 | 2 |
|
3 | 3 | import { useTranslations } from 'next-intl';
|
4 |
| -import { useContext } from 'react'; |
| 4 | +import { useContext, useEffect, useMemo } from 'react'; |
5 | 5 | import type { FC } from 'react';
|
6 | 6 |
|
7 | 7 | import Select from '@/components/Common/Select';
|
8 | 8 | import { ReleaseContext } from '@/providers/releaseProvider';
|
9 | 9 | import type { PackageManager } from '@/types/release';
|
10 |
| -import { PACKAGE_MANAGERS } from '@/util/downloadUtils'; |
| 10 | +import { nextItem, PACKAGE_MANAGERS, parseCompat } from '@/util/downloadUtils'; |
11 | 11 |
|
12 | 12 | const PackageManagerDropdown: FC = () => {
|
13 | 13 | const release = useContext(ReleaseContext);
|
14 | 14 | const t = useTranslations();
|
15 | 15 |
|
| 16 | + // Prevents the Package Manager from being set during OS loading state |
| 17 | + const setManager = (manager: PackageManager | '') => { |
| 18 | + if (release.os !== 'LOADING') { |
| 19 | + release.setPackageManager(manager); |
| 20 | + } |
| 21 | + }; |
| 22 | + |
| 23 | + // We parse the compatibility of the dropdown items |
| 24 | + const parsedPackageManagers = useMemo( |
| 25 | + () => parseCompat(PACKAGE_MANAGERS, release), |
| 26 | + // We only want to react on the change of the Version |
| 27 | + // eslint-disable-next-line react-hooks/exhaustive-deps |
| 28 | + [release.version] |
| 29 | + ); |
| 30 | + |
| 31 | + // We set the Package Manager to the next available Package Manager when the current |
| 32 | + // one is not valid anymore due to Version changes |
| 33 | + useEffect( |
| 34 | + () => setManager(nextItem(release.packageManager, parsedPackageManagers)), |
| 35 | + // We only want to react on the change of the Version |
| 36 | + // eslint-disable-next-line react-hooks/exhaustive-deps |
| 37 | + [release.version] |
| 38 | + ); |
| 39 | + |
16 | 40 | return (
|
17 | 41 | <Select<PackageManager | ''>
|
18 |
| - values={PACKAGE_MANAGERS} |
| 42 | + values={parsedPackageManagers} |
19 | 43 | defaultValue={release.packageManager}
|
20 | 44 | loading={release.os === 'LOADING' || release.platform === ''}
|
21 | 45 | ariaLabel={t('layouts.download.dropdown.packageManager')}
|
22 |
| - onChange={manager => release.setPackageManager(manager)} |
| 46 | + onChange={manager => manager && setManager(manager)} |
23 | 47 | className="min-w-28"
|
24 | 48 | inline={true}
|
25 | 49 | />
|
|
0 commit comments