env.config.jsx file for learning MFE to test progress page plugins

env.config.jsx

import {getConfig} from '@edx/frontend-platform';
import {getAuthenticatedHttpClient, getAuthenticatedUser} from '@edx/frontend-platform/auth';
import {PLUGIN_OPERATIONS} from '@openedx/frontend-plugin-framework';
import {useEffect, useState} from 'react';
import {useSelector} from 'react-redux';
import {useModel} from "./src/generic/model-store";
import GradeSummary from "./src/course-home/progress-tab/grades/grade-summary/GradeSummary";
import DetailedGrades from "./src/course-home/progress-tab/grades/detailed-grades/DetailedGrades";

function useComponentVisibility(componentName) {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
  const [showComponent, setShowComponent] = useState(false);
  useEffect(async () => {
    const authenticatedUser = getAuthenticatedUser();
    const url = new URL(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/`);
    url.searchParams.append('course_id', courseId);
    url.searchParams.append('username', authenticatedUser ? authenticatedUser.username : '');
    url.searchParams.append('requested_fields', 'other_course_settings');
    const {data} = await getAuthenticatedHttpClient().get(url.href, {});
    setShowComponent(data.blocks[data.root]?.other_course_settings?.progressPage?.[componentName] ?? true);
  }, [courseId]);
  return showComponent;
}

const showHideComponent = (componentName) => ({component}) => {
  const showComponent = useComponentVisibility(componentName);
  console.log({componentName:showComponent})
  return showComponent
    ? <div className="border border-danger">{component}</div>
    : null;
};

const GradeBreakdownWrapper = (courseId) => {
  const {gradesFeatureIsFullyLocked} = useModel('progress', courseId);
  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
  const showGradeSummary = useComponentVisibility('showGradeSummary');
  const showGradeDetails = useComponentVisibility('showGradeDetails');
  return (showGradeSummary || showGradeDetails) && (
    <div
      className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`}
      aria-hidden={gradesFeatureIsFullyLocked}
    >
      {showGradeSummary && <GradeSummary/>}
      {showGradeDetails && <DetailedGrades/>}
    </div>
  );
}

const baseSlotConfig = {
  certificate_status: 'CertificateStatus',
  course_grade: 'Grades',
  related_links: 'RelatedLinks'
}

// Load environment variables from .env file
const config = {
  ...process.env,
  pluginSlots: {
    progress_tab_grade_breakdown_slot: {
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Wrap,
          widgetId: 'default_contents',
          wrapper: GradeBreakdownWrapper,
        },
      ],
    },

  },
};

Object.entries(baseSlotConfig).forEach(([slot, settingName] )=> {
  config.pluginSlots[`progress_tab_${slot}_slot`] = {
    keepDefault: true,
    plugins: [
      {
        op: PLUGIN_OPERATIONS.Wrap,
        widgetId: 'default_contents',
        wrapper: showHideComponent(`show${settingName}`),
      },
    ],
  }
});

export default config;