feat: add initial react-query loaders and selectors

Author: muselesscreator

src/data/services/lms/api.js

@@ -0,0 +1,8 @@
+import { StrictDict } from '@edx/react-unit-test-utils';
+
+export const queryKeys = StrictDict({
+  oraConfig: 'oraConfig',
+  submissionData: 'submissionData',
+});
+
+export default { queryKeys };

src/data/services/lms/constants.js

@@ -0,0 +1,127 @@
+// ORA Config loaders
+export const loadAssessmentConfig = ({
+  assessmentSteps: {
+    order,
+    settings: {
+      peer,
+      self,
+      training,
+      staff,
+    },
+  },
+}) => ({
+  order,
+  peer: peer && {
+    startTime: peer.startTime,
+    endTime: peer.endTime,
+    required: peer.required,
+    data: {
+      minNumberToGrade: peer.data.minNumberToGrade,
+      minNumberToBeGradedBy: peer.data.minNumberToBeGradedBy,
+      enableFlexibleGrading: peer.data.enableFlexibleGrading,
+    },
+  },
+  self: self && {
+    startTime: self.startTime,
+    endTime: self.endTime,
+    required: self.required,
+  },
+  training: training && {
+    required: training.required,
+    data: { examples: training.data.examples },
+  },
+  staff: staff && { required: staff.required },
+});
+
+export const loadSubmissionConfig = ({
+  submissionConfig: {
+    textResponseConfig: text,
+    fileResponseConfig: file,
+    teamsConfig,
+    ...config
+  },
+}) => ({
+  startDatetime: config.startDatetime,
+  endDatetime: config.endDatetime,
+  textResponseConfig: text && {
+    enabled: text.enabled,
+    optional: text.optional,
+    editorType: text.editorType,
+    allowLatexPreview: text.allowLatexPreview,
+  },
+  fileResponseConfig: file && {
+    enabled: file.enabled,
+    optional: file.optional,
+    fileUploadType: file.fileUploadType,
+    allowedExtensions: file.allowedExtensions,
+    blockedExtensions: file.blockedExtensions,
+    fileTypeDescription: file.fileTypeDescription,
+  },
+  teamsConfig: teamsConfig && {
+    enabled: teamsConfig.enabled,
+    teamsetName: teamsConfig.teamsetName,
+  },
+});
+
+export const loadRubricConfig = ({ rubric }) => ({
+  showDuringResponse: rubric.showDuringResponse,
+  feedbackConfig: {
+    description: rubric.feedbackConfig.description,
+    defaultText: rubric.feedbackConfig.defaultText,
+  },
+  criteria: rubric.criteria.map(criterion => ({
+    name: criterion.name,
+    description: criterion.description,
+    feedbackEnabled: criterion.feedbackEnabled,
+    feedbackRequired: criterion.feedbackRequired,
+    options: criterion.options.map(option => ({
+      name: option.name,
+      points: option.points,
+      description: option.description,
+    })),
+  })),
+});
+
+export const loadORAConfigData = (data) => {
+  console.log({ oraConfig: data });
+  return {
+    title: data.title,
+    prompts: data.prompts,
+    baseAssetUrl: data.baseAssetUrl,
+    submissionConfig: loadSubmissionConfig(data),
+    assessmentSteps: loadAssessmentConfig(data),
+    rubric: loadRubricConfig(data),
+    leaderboardConfig: {
+      enabled: data.leaderboardConfig.enabled,
+      numberOfEntries: data.leaderboardConfig.numberOfEntries,
+    },
+  };
+};
+
+// Submission loaders
+export const loadFile = (file) => ({
+  url: file.fileUrl,
+  description: file.fileDescription,
+  name: file.fileName,
+  size: file.fileSize,
+  uploadedBy: file.uploadedBy,
+});
+
+export const loadSubmissionData = ({ teamInfo, submissionStatus, submission }) => ({
+  teamInfo: {
+    teamName: teamInfo.teamName,
+    teamUsernames: teamInfo.teamUsernames,
+    previousTeamName: teamInfo.previousTeamName,
+    hasSubmitted: teamInfo.hasSubmitted,
+    uploadedFiles: teamInfo.teamUploadedFiles.map(loadFile),
+  },
+  submissionStatus: {
+    hasSubmitted: submissionStatus.hasSubmitted,
+    hasCancelled: submissionStatus.hasCancelled,
+    hasReceivedGrade: submissionStatus.hasReceivedGrade,
+  },
+  submission: {
+    textResponses: submission.textResponses,
+    uploadedFiles: submission.uploadedFiles.map(loadFile),
+  },
+});

src/data/services/lms/dataLoaders.js

@@ -1,7 +1,7 @@
-import assessment from './assessment';
+import oraConfig from './oraConfig';
 import submission from './submission';
 
 export default {
-  assessment,
+  oraConfig,
   submission,
 };

src/data/services/lms/fakeData/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable camelcase */
+
 const submissionConfig = {
   start_datetime: '2023-04-14T20:00:00Z',
   end_datetime: '2023-04-14T20:00:00Z',
@@ -92,7 +93,7 @@ const assessmentSteps = {
   },
 };
 
-export const createAssessment = ({
+export const createORAConfig = ({
   title = 'Assessment title',
   prompts = ['<h1>ORA Prompt</h1>', '<p>ORA Prompt</p>'],
   base_asset_url = '/assets',
@@ -111,8 +112,8 @@ export const createAssessment = ({
 });
 
 export default {
-  assessmentText: createAssessment(),
-  assessmentTinyMCE: createAssessment({
+  assessmentText: createORAConfig(),
+  assessmentTinyMCE: createORAConfig({
     submission_config: {
       ...submissionConfig,
       text_response_config: {

src/data/services/lms/fakeData/assessment.js renamed to src/data/services/lms/fakeData/oraConfig.js

@@ -43,7 +43,7 @@ const createSubmission = ({
   team_info = createTeamInfo(),
   submission_status = createSubmissionStatus(),
   submission = createSubmissionResponse(),
-}) => ({
+} = {}) => ({
   team_info,
   submission_status,
   submission,

src/data/services/lms/fakeData/submission.js

@@ -0,0 +1,47 @@
+import { useQuery } from 'react-query';
+
+import { camelCaseObject } from '@edx/frontend-platform';
+
+import { queryKeys } from '../constants';
+import { loadORAConfigData, loadSubmissionData } from '../dataLoaders';
+import fakeData from '../fakeData';
+
+/**
+ *  A react-query data object
+ *  @typedef {Object} ReactQueryData
+ *  @property {boolean} isLoading
+ *  @property {boolean} isFetching
+ *  @property {boolean} isInitialLoading
+ *  @property {Object} error
+ *  @property {Object} data
+ */
+
+/**
+ * @return {ReactQueryData} ORA config data
+ */
+export const useORAConfig = () => {
+  const { data, ...status } = useQuery({
+    queryKey: [queryKeys.oraConfig],
+    // queryFn: () => getAuthenticatedClient().get(...),
+    queryFn: () => Promise.resolve(fakeData.oraConfig.assessmentText),
+  });
+  return {
+    ...status,
+    ...(data && { data: loadORAConfigData(camelCaseObject(data)) }),
+  };
+};
+
+/**
+ * @return {ReactQueryData} Learner Submission data
+ */
+export const useSubmissionData = () => {
+  const { data, ...status } = useQuery({
+    queryKey: [queryKeys.submissionData],
+    // queryFn: () => getAuthenticatedClient().get(...),
+    queryFn: () => Promise.resolve(fakeData.submission.teamAssessment),
+  });
+  return {
+    ...status,
+    ...(data && { data: loadSubmissionData(camelCaseObject(data)) }),
+  };
+};

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

@@ -0,0 +1,37 @@
+import * as api from './api';
+
+export const useORAConfigDataStatus = () => {
+  const queryStatus = api.useORAConfig();
+  return {
+    isLoading: queryStatus.isLoading,
+    isFetching: queryStatus.isFetching,
+    isInitialLoading: queryStatus.isInitialLoading,
+    error: queryStatus.error,
+  };
+};
+export const useORAConfigData = () => api.useORAConfig().data;
+
+export const useSubmissionConfig = () => useORAConfigData().submissionConfig;
+
+export const useAssessmentStepConfig = () => useORAConfigData().assessmentSteps;
+
+export const useRubricConfig = () => useORAConfigData().rubric;
+
+export const useLeaderboardConfig = () => useORAConfigData().leaderboardConfig;
+
+export const useSubmissionDataStatus = () => {
+  const queryStatus = api.useSubmissionData();
+  return {
+    isLoading: queryStatus.isLoading,
+    isFetching: queryStatus.isFetching,
+    isInitialLoading: queryStatus.isInitialLoading,
+    error: queryStatus.error,
+  };
+};
+export const useSubmissionData = () => api.useSubmissionData().data;
+
+export const useSubmissionTeamInfo = () => useSubmissionData().teamInfo;
+
+export const useSubmissionStatus = () => useSubmissionData().submissionStatus;
+
+export const useSubmissionResponse = () => useSubmissionData().submission;

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

@@ -1,8 +1,10 @@
-import { StrictDict } from 'utils';
-import api from './api';
+import { StrictDict } from '@edx/react-unit-test-utils';
 import urls from './urls';
+import api from './hooks/api';
+import selectors from './hooks/selectors';
 
 export default StrictDict({
   api,
+  selectors,
   urls,
 });

src/data/services/lms/index.js

@@ -1,4 +1,4 @@
-import { StrictDict } from 'utils';
+import { StrictDict } from '@edx/react-unit-test-utils';
 import { getConfig } from '@edx/frontend-platform';
 
 const baseUrl = () => getConfig().LMS_BASE_URL;