remove old language directory attempt and clean up

Author: tsammeow

src/commons/application/ApplicationTypes.ts

@@ -9,7 +9,6 @@ import { PlaybackStatus, RecordingStatus } from '../../features/sourceRecorder/S
 import type { StoriesEnvState, StoriesState } from '../../features/stories/StoriesTypes';
 import { freshSortState } from '../../pages/academy/grading/subcomponents/GradingSubmissionsTable';
 import { WORKSPACE_BASE_PATHS } from '../../pages/fileSystem/createInBrowserFileSystem';
-import { getSupportedLanguages, ILanguageDefinition } from '../directory/language';
 import { defaultFeatureFlags, FeatureFlagsState } from '../featureFlags';
 import type { FileSystemState } from '../fileSystem/FileSystemTypes';
 import type { SideContentManagerState, SideContentState } from '../sideContent/SideContentTypes';
@@ -372,16 +371,9 @@ const getDefaultLanguageConfig = (): SALanguage => {
 };
 export const defaultLanguageConfig: SALanguage = getDefaultLanguageConfig();
 
-export const defaultConductorLanguage: ILanguageDefinition = getSupportedLanguages()[0] || {
-  id: '',
-  name: '',
-  evaluators: []
-};
-
 export const defaultPlayground: PlaygroundState = {
   githubSaveInfo: { repoName: '', filePath: '' },
-  languageConfig: defaultLanguageConfig,
-  conductorLanguage: defaultConductorLanguage
+  languageConfig: defaultLanguageConfig
 };
 
 export const defaultEditorValue = '// Type your program in here!';
@@ -626,7 +618,8 @@ export const defaultVscode: VscodeState = {
 export const defaultLanguageDirectory: LanguageDirectoryState = {
   selectedLanguageId: null,
   selectedEvaluatorId: null,
-  languages: []
+  languages: [],
+  languageMap: {}
 };
 
 export const defaultState: OverallState = {

src/commons/controlBar/ControlBarChapterSelect.tsx

@@ -2,12 +2,12 @@ import { Button, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { ItemListRenderer, ItemRenderer, Select } from '@blueprintjs/select';
 import { Chapter, Variant } from 'js-slang/dist/types';
+import { IEvaluatorDefinition } from 'language-directory/dist/types';
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { flagDirectoryLanguageEnable } from '../../features/directory/flagDirectoryLanguageEnable';
 import LanguageDirectoryActions from '../../features/directory/LanguageDirectoryActions';
-import type { IEvaluatorDefinition } from '../../features/directory/LanguageDirectoryTypes';
 import { SALanguage } from '../application/ApplicationTypes';
 import { useFeature } from '../featureFlags/useFeature';
 import { useTypedSelector } from '../utils/Hooks';

src/commons/directory/flagLangDirUrl.ts

@@ -1,8 +1,10 @@
+import { SagaIterator } from 'redux-saga';
+
 export class FeatureFlag<T> {
   private readonly _flagName: string;
   private readonly _defaultValue: T;
   private readonly _flagDesc?: string;
-  private readonly _callback?: Function;
+  private readonly _callback?: (newValue: any) => SagaIterator; // using any as the action wipes out type-param
 
   get flagName(): string {
     return this._flagName;
@@ -21,12 +23,11 @@ export class FeatureFlag<T> {
     flagName: string,
     defaultValue: T,
     flagDesc?: string,
-    callback?: (newValue: T) => void
+    callback?: (newValue: T) => SagaIterator
   ) {
     this._flagName = flagName;
     this._defaultValue = defaultValue;
     this._flagDesc = flagDesc;
     this._callback = callback;
-    this.onChange(defaultValue);
   }
 }

src/commons/directory/language.ts

@@ -1,5 +1,6 @@
 import { OverallState } from '../application/ApplicationTypes';
 import { FeatureFlag } from './FeatureFlag';
 
-export const featureSelector = (featureFlag: FeatureFlag<any>) => (state: OverallState) =>
-  state.featureFlags.modifiedFlags[featureFlag.flagName];
+export function featureSelector<T>(featureFlag: FeatureFlag<T>) {
+  return (state: OverallState) => state.featureFlags.modifiedFlags[featureFlag.flagName] as T;
+}

src/commons/featureFlags/FeatureFlag.ts

@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { SagaIterator } from 'redux-saga';
 
 import { FeatureFlag } from './FeatureFlag';
 
@@ -19,11 +20,9 @@ const featureFlagsSlice = createSlice({
       action: { payload: { featureFlag: FeatureFlag<T>; value: T } }
     ) {
       state.modifiedFlags[action.payload.featureFlag.flagName] = action.payload.value;
-      action.payload.featureFlag.onChange(action.payload.value);
     },
     resetFlag<T>(state: FeatureFlagsState, action: { payload: { featureFlag: FeatureFlag<T> } }) {
       delete state.modifiedFlags[action.payload.featureFlag.flagName];
-      action.payload.featureFlag.onChange(action.payload.featureFlag.defaultValue);
     }
   }
 });
@@ -36,7 +35,7 @@ export function createFeatureFlag<T>(
   flagName: string,
   defaultValue: T,
   flagDesc?: string,
-  callback?: (newValue: T) => void
+  callback?: (newValue: T) => SagaIterator
 ): FeatureFlag<T> {
   return new FeatureFlag<T>(flagName, defaultValue, flagDesc, callback);
 }

src/commons/featureFlags/featureSelector.ts

@@ -1,5 +1,5 @@
 import { Position } from '@blueprintjs/core';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useFeature } from 'src/commons/featureFlags/useFeature';
 import SimpleDropdown from 'src/commons/SimpleDropdown';
@@ -21,12 +21,6 @@ const NavigationBarLangSelectButton = () => {
 
   const dispatch = useDispatch();
   const dirOptions = useDirectoryOptions();
-  const languagesLoaded = useTypedSelector(s => s.languageDirectory.languages.length > 0);
-  useEffect(() => {
-    if (!languagesLoaded) {
-      dispatch(LanguageDirectoryActions.fetchLanguages());
-    }
-  }, [languagesLoaded, dispatch]);
 
   const directoryEnabled = useFeature(flagDirectoryLanguageEnable);
   if (!directoryEnabled) {

src/commons/featureFlags/index.ts

@@ -0,0 +1,15 @@
+import { call } from 'redux-saga/effects';
+
+import { FeatureFlagsActions } from '../featureFlags';
+import { combineSagaHandlers } from '../redux/utils';
+
+const FeatureFlagSaga = combineSagaHandlers({
+  [FeatureFlagsActions.setFlag.type]: function* ({ payload: { featureFlag, value } }) {
+    yield call([featureFlag, 'onChange'], value);
+  },
+  [FeatureFlagsActions.resetFlag.type]: function* ({ payload: { featureFlag } }) {
+    yield call([featureFlag, 'onChange'], featureFlag.defaultValue);
+  }
+});
+
+export default FeatureFlagSaga;

src/commons/navigationBar/subcomponents/NavigationBarLangSelectButton.tsx

@@ -1,66 +1,59 @@
-import { call, put, select } from 'redux-saga/effects';
-import type { OverallState } from 'src/commons/application/ApplicationTypes';
-import { flagConductorEnable } from 'src/features/conductor/flagConductorEnable';
-import { flagConductorEvaluatorUrl } from 'src/features/conductor/flagConductorEvaluatorUrl';
-import { staticLanguageDirectoryProvider } from 'src/features/directory/LanguageDirectoryTypes';
+import { ILanguageDefinition } from 'language-directory/dist/types';
+import { getEvaluatorDefinition } from 'language-directory/dist/util';
+import { call, fork, put, select } from 'redux-saga/effects';
+import { selectDirectoryLanguageUrl } from 'src/features/directory/flagDirectoryLanguageUrl';
 
 import LanguageDirectoryActions from '../../features/directory/LanguageDirectoryActions';
+import { LanguageDirectoryState } from '../../features/directory/LanguageDirectoryTypes';
+import type { OverallState } from '../application/ApplicationTypes';
 import { combineSagaHandlers } from '../redux/utils';
-import { actions } from '../utils/ActionsHelper';
 
-const LanguageDirectorySaga = combineSagaHandlers({
+export function* getLanguageDefinitionSaga() {
+  const directory: LanguageDirectoryState = yield select(
+    (state: OverallState) => state.languageDirectory
+  );
+  if (!directory.selectedLanguageId) return undefined;
+  return directory.languageMap[directory.selectedLanguageId];
+}
+
+export function* getEvaluatorDefinitionSaga() {
+  const directory: LanguageDirectoryState = yield select(
+    (state: OverallState) => state.languageDirectory
+  );
+  if (!directory.selectedEvaluatorId) return undefined;
+  const language: ILanguageDefinition = yield call(getLanguageDefinitionSaga);
+  if (!language) return undefined;
+  return getEvaluatorDefinition(language, directory.selectedEvaluatorId);
+}
+
+const languageDirectoryHandlers = combineSagaHandlers({
   [LanguageDirectoryActions.setLanguages.type]: function* () {
-    const state = yield select((s: OverallState) => s.languageDirectory);
-    if (state.selectedLanguageId === null && state.languages.length > 0) {
-      yield put(actions.setSelectedLanguage(state.languages[0].id));
-    }
-    if (state.selectedEvaluatorId === null && state.languages.length > 0) {
-      yield put(actions.setSelectedEvaluator(state.languages[0].evaluators[0].id));
+    const directory = yield select((state: OverallState) => state.languageDirectory);
+    if (directory.languages.length > 0) {
+      yield put(LanguageDirectoryActions.setSelectedLanguage(directory.languages[0].id));
     }
   },
   [LanguageDirectoryActions.fetchLanguages.type]: function* () {
-    const langs = yield call(
-      staticLanguageDirectoryProvider.getLanguages.bind(staticLanguageDirectoryProvider)
-    );
-    yield put(actions.setLanguages(langs));
+    const url = yield select(selectDirectoryLanguageUrl);
+    const response = yield call(fetch, url);
+    if (!response.ok) {
+      throw new Error(`Can't retrieve language directory: ${response.status}`);
+    }
+    const result: ILanguageDefinition[] = yield call([response, 'json']);
+    yield put(LanguageDirectoryActions.setLanguages(result));
   },
-  [LanguageDirectoryActions.setSelectedLanguage.type]: function* (action) {
-    const {
-      payload: { languageId, evaluatorId }
-    } = action;
-    if (evaluatorId) return; // already explicitly set
-    const language = yield call(
-      staticLanguageDirectoryProvider.getLanguageById.bind(staticLanguageDirectoryProvider),
-      languageId
-    );
+  [LanguageDirectoryActions.setSelectedLanguage.type]: function* () {
+    const language = yield call(getLanguageDefinitionSaga);
     if (!language) return;
-    const defaultEvaluatorId: string | null =
-      language.evaluators.length > 0 ? language.evaluators[0].id : null;
-    if (!defaultEvaluatorId) return;
-    // If state still matches the same language, set evaluator
-    const currentLanguageId: string | null = yield select(
-      (s: OverallState) => s.languageDirectory.selectedLanguageId
-    );
-    if (currentLanguageId !== languageId) return;
-    yield put(actions.setSelectedEvaluator(defaultEvaluatorId));
-  },
-  [LanguageDirectoryActions.setSelectedEvaluator.type]: function* (action) {
-    const {
-      payload: { evaluatorId }
-    } = action;
-    const selectedLanguageId: string | null = yield select(
-      (s: OverallState) => s.languageDirectory.selectedLanguageId
-    );
-    if (!selectedLanguageId) return;
-    const evaluator = yield call(
-      staticLanguageDirectoryProvider.getEvaluatorDefinition.bind(staticLanguageDirectoryProvider),
-      selectedLanguageId,
-      evaluatorId
-    );
-    if (!evaluator) return;
-    yield put(actions.setFlag({ featureFlag: flagConductorEnable, value: true }));
-    yield put(actions.setFlag({ featureFlag: flagConductorEvaluatorUrl, value: evaluator.path }));
+    if (language.evaluators.length > 0) {
+      yield put(LanguageDirectoryActions.setSelectedEvaluator(language.evaluators[0].id));
+    }
   }
 });
 
+function* LanguageDirectorySaga() {
+  yield fork(languageDirectoryHandlers);
+  yield put(LanguageDirectoryActions.fetchLanguages());
+}
+
 export default LanguageDirectorySaga;