All files / src/views/Package LanguageSelection.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { FunctionComponent, useEffect } from "react";
import { LanguageBar } from "./LanguageBar";
import { usePackageState } from "./PackageState";
import { Language, LANGUAGES } from "../../constants/languages";
import { useLanguage } from "../../hooks/useLanguage";
 
const languageSet = new Set(LANGUAGES);
 
export const LanguageSelection: FunctionComponent = () => {
  const state = usePackageState();
  const assembly = state.assembly.data;
  const language = state.language;
 
  const [, setLanguage] = useLanguage({
    updateSaved: true,
    updateUrl: true,
  });
 
  const [, changeLanguage] = useLanguage({ updateUrl: true });
 
  const targets = [
    ...Object.keys(assembly?.targets ?? {}),
    // typescript is the source language and hence always supported.
    // (it doesn't appear in spec.targets)
    Language.TypeScript,
  ] as Language[];
 
  const selectedIsValid = targets.includes(language);
 
  useEffect(() => {
    if (!selectedIsValid) {
      changeLanguage(Language.TypeScript);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedIsValid]);
 
  const props = {
    selectedLanguage: selectedIsValid ? language : Language.TypeScript,
    setSelectedLanguage: setLanguage,
    targetLanguages: targets.filter((target) => languageSet.has(target)),
  };
 
  return <LanguageBar {...props} />;
};