summaryrefslogtreecommitdiff
path: root/frontend/src/components/settings/pages/general/StoreSelect.tsx
blob: 40e703016aa745008001f7673f7c4a33049ca4fd (plain)
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
import { Dropdown, Field, TextField } from 'decky-frontend-lib';
import { FunctionComponent } from 'react';
import { FaShapes } from 'react-icons/fa';

import Logger from '../../../../logger';
import { Store } from '../../../../store';
import { useSetting } from '../../../../utils/hooks/useSetting';

const logger = new Logger('StoreSelect');

const StoreSelect: FunctionComponent<{}> = () => {
  const [selectedStore, setSelectedStore] = useSetting<Store>('store', Store.Default);
  const [selectedStoreURL, setSelectedStoreURL] = useSetting<string | null>('store-url', null);

  // Returns numerical values from 0 to 2 (with current branch setup as of 8/28/22)
  // 0 being Default, 1 being Testing and 2 being Custom
  return (
    <>
      <Field label="Plugin Store Channel" childrenContainerWidth={'fixed'}>
        <Dropdown
          rgOptions={Object.values(Store)
            .filter((store) => typeof store == 'string')
            .map((store) => ({
              label: store,
              data: Store[store],
            }))}
          selectedOption={selectedStore}
          onChange={async (newVal) => {
            await setSelectedStore(newVal.data);
            logger.log('switching stores!');
          }}
        />
      </Field>
      {selectedStore == Store.Custom && (
        <Field
          label="Custom Store"
          indentLevel={1}
          description={
            <TextField
              label={'URL'}
              value={selectedStoreURL || undefined}
              onChange={(e) => setSelectedStoreURL(e?.target.value || null)}
            />
          }
          icon={<FaShapes style={{ display: 'block' }} />}
        ></Field>
      )}
    </>
  );
};

export default StoreSelect;