feat: add typescript support to api and selectors

Author: muselesscreator

.eslintignore

@@ -1,4 +1,6 @@
 coverage/*
 dist/
 node_modules/
-jest.config.js
+jest.config.js
+webpack.*.js
+.eslintrc.js

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
-      run: npm ci
+      run: npm ci --legacy-peer-deps
     - name: Lint
       run: npm run lint
     - name: Test

.github/workflows/commitlint.yml

@@ -7,4 +7,14 @@ on:
 
 jobs:
   commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: remove tsconfig.json # see issue https://github.com/conventional-changelog/commitlint/issues/3256
+        run: |
+          rm tsconfig.json
+      - name: Check commits
+        uses: wagoid/commitlint-github-action@v5

package-lock.json

@@ -40,6 +40,7 @@
     "@edx/paragon": "^20.20.0",
     "@edx/react-unit-test-utils": "1.5.3",
     "@edx/tinymce-language-selector": "1.1.0",
+    "@edx/typescript-config": "^1.0.1",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -65,10 +66,11 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.4",
+    "@edx/frontend-build": "12.9.0-alpha.6",
     "@edx/reactifex": "^2.1.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
-    "jest": "29.6.2"
+    "jest": "29.6.2",
+    "ts-jest": "^26.5.6"
   }
 }

package.json

@@ -4,10 +4,11 @@ import { useRouteMatch } from 'react-router-dom';
 import { camelCaseObject } from '@edx/frontend-platform';
 
 import routes from 'routes';
+import * as types from '../types';
 import { queryKeys } from '../constants';
 import fakeData from '../fakeData';
 
-export const useORAConfig = () => {
+export const useORAConfig = (): types.QueryData<types.ORAConfig> => {
   const { data, ...status } = useQuery({
     queryKey: [queryKeys.oraConfig],
     // queryFn: () => getAuthenticatedClient().get(...),
@@ -19,13 +20,12 @@ export const useORAConfig = () => {
   };
 };
 
-export const usePageData = () => {
+export const usePageData = (): types.QueryData<types.PageData> => {
   const route = useRouteMatch();
   const isAssessment = route.path === routes.assessment;
   const returnData = isAssessment
     ? fakeData.pageData.shapes.peerAssessment
     : fakeData.pageData.shapes.emptySubmission;
-  console.log({ returnData, isAssessment, route });
   const { data, ...status } = useQuery({
     queryKey: [queryKeys.submissionData, isAssessment],
     // queryFn: () => getAuthenticatedClient().get(...),
@@ -36,15 +36,3 @@ export const usePageData = () => {
     data: data ? camelCaseObject(data) : {},
   };
 };
-
-export const useAssessmentData = () => {
-  const { data, ...status } = useQuery({
-    queryKey: [queryKeys.submissionData],
-    // queryFn: () => getAuthenticatedClient().get(...),
-    queryFn: () => Promise.resolve(fakeData.submission.teamAssessment),
-  });
-  return {
-    ...status,
-    data: data ? camelCaseObject(data) : {},
-  };
-};

src/data/services/lms/hooks/api.js renamed to src/data/services/lms/hooks/api.ts

@@ -0,0 +1,69 @@
+import * as api from './api';
+
+import * as types from '../types';
+
+export const useORAConfigDataStatus = (): types.QueryStatus => {
+  const queryStatus = api.useORAConfig();
+  return {
+    isLoading: queryStatus.isLoading,
+    isFetching: queryStatus.isFetching,
+    isInitialLoading: queryStatus.isInitialLoading,
+    status: queryStatus.status,
+    error: queryStatus.error,
+  };
+};
+
+export const useIsORAConfigLoaded = (): boolean => (
+  api.useORAConfig().status === 'success'
+);
+
+export const useORAConfigData = (): types.ORAConfig => (
+  api.useORAConfig().data
+);
+
+export const useSubmissionConfig = (): types.SubmissionConfig => (
+  useORAConfigData().submissionConfig
+);
+
+export const useAssessmentStepConfig = (): types.AssessmentStepConfig => (
+  useORAConfigData().assessmentSteps
+);
+
+export const useRubricConfig = (): types.RubricConfig => useORAConfigData().rubric;
+
+export const useLeaderboardConfig = (): types.LeaderboardConfig => useORAConfigData().leaderboardConfig;
+
+export const usePageDataStatus = () => {
+  const queryStatus = api.usePageData();
+  return {
+    isLoading: queryStatus.isLoading,
+    isFetching: queryStatus.isFetching,
+    isInitialLoading: queryStatus.isInitialLoading,
+    status: queryStatus.status,
+    error: queryStatus.error,
+  };
+};
+export const useIsPageDataLoaded = (): boolean => (
+  api.usePageData().status === 'success'
+);
+
+export const usePageData = (): types.PageData => api.usePageData().data;
+
+export const useSubmissionTeamInfo = (): types.SubmissionTeamData => usePageData().submission.teamInfo;
+
+export const useSubmissionStatus = (): types.SubmissionStatusData => {
+  const {
+    hasCancelled,
+    hasReceivedGrade,
+    hasSubmitted,
+  } = usePageData().submission;
+  return {
+    hasCancelled,
+    hasReceivedGrade,
+    hasSubmitted,
+  };
+};
+
+export const useSubmissionResponse = (): types.SubmissionResponseData => (
+  usePageData().submission.response
+);

src/data/services/lms/hooks/selectors.js

@@ -0,0 +1,104 @@
+// Block Info fields
+export interface CriterionConfig {
+  name: string,
+  description: string,
+  feedbackEnabled: boolean,
+  feedbackRequired: boolean,
+  options: {
+    name: string,
+    points: number,
+    description: string,
+  }[],
+}
+
+export interface TextResponseConfig {
+  enabled: boolean,
+  optional: boolean,
+  editorType: 'text' | 'tinymce',
+  allowLatexPreviews: boolean,
+}
+
+export interface FileResponseConfig {
+  enabled: boolean,
+  optional: boolean,
+  fileUploadLimit: number,
+  allowedExtensions: string[],
+  blockedExtensions: string[],
+  fileTypeDescription: string,
+}
+
+export interface SubmissionConfig {
+  startDatetime: number,
+  endDatetime: number,
+  textResponseConfig: TextResponseConfig,
+  fileResponseConfig: FileResponseConfig,
+  teamsConfig: {
+    enabled: boolean,
+    teamsetName: string,
+  },
+}
+
+export interface PeerStepSettings {
+  startTime: number,
+  endTime: number,
+  required: boolean,
+  data: {
+    minNumberToGrade: number,
+    minNumberToBeGradedBy: number,
+    enableFlexibleGrading: boolean,
+  },
+}
+
+export interface StaffStepSettings {
+  required: boolean,
+}
+
+export interface SelfStepSettings {
+  startTime: number,
+  endTime: number,
+  required: boolean,
+}
+
+export interface TrainingStepSettings {
+  required: boolean,
+  data: {
+    examples: {
+      response: string,
+      criteria: { name: string, selection: string }[],
+    }[],
+  },
+}
+
+export interface AssessmentStepConfig {
+  order: string[],
+  settings: {
+    peer: PeerStepSettings,
+    staff: StaffStepSettings,
+    self: SelfStepSettings,
+    training: TrainingStepSettings
+  },
+}
+
+export interface RubricConfig {
+  showDuringResponse: boolean,
+  feedbackConfig: {
+    description: string,
+    defaultText: string,
+  },
+  criteria: CriterionConfig[],
+}
+
+export interface LeaderboardConfig {
+  enabled: boolean,
+  numberOfEntries: number,
+}
+
+export interface ORAConfig {
+  title: string,
+  prompts: string[],
+  baseAssetUrl: string,
+  submissionConfig: SubmissionConfig,
+  assessmentSteps: AssessmentStepConfig,
+  rubric: RubricConfig,
+  leaderboardConfig: LeaderboardConfig,
+}

src/data/services/lms/hooks/selectors.ts

@@ -0,0 +1,3 @@
+export * from './react-query';
+export * from './blockInfo';
+export * from './pageData';