course mapping connection to backend

src/config/endpoints.js

@@ -13,8 +13,10 @@ export const login_url = `${host}${api}auth/login`
 export const register_url = `${host}${api}auth/register`
 
 //configs
-
 export const configUrl = `${host}${api}config/catalogs/`
 
 //sso configs
 export const ssoURL = `${host}${api}config/sso/`
+
+//UI information mappings
+export const uiConfigUrl = `${host}${api}config/info-mapping/`;

src/hooks/useInfoMappings.js

@@ -0,0 +1,19 @@
+import { axiosInstance } from '../config/axiosInstance';
+import { uiConfigUrl } from '../config/endpoints';
+import { twentyFourHours } from '../config/timeConstants';
+import { useQuery } from 'react-query';
+
+/**
+ * @description Reaches out to the backend and gets the configuration data required for the application. Valid for 24hrs
+ */
+
+export function useInfoMappings() {
+  return useQuery(
+    'ui-config',
+    () => axiosInstance.get(uiConfigUrl).then((res) => res.data),
+    {
+      staleTime: twentyFourHours,
+      cacheTime: twentyFourHours,
+    }
+  );
+}

src/pages/dashboard/Courses/CourseList/CourseList.js

@@ -2,9 +2,13 @@
 
 import CourseListHeader from "../CourseHeader/CourseListHeader";
 import { useRouter } from "next/router";
+import { useInfoMappings } from "@/hooks/useInfoMappings";
+import { getDeeplyNestedData } from "@/utils/getDeeplyNestedData";
+import { data } from "browserslist";
 
 const CourseList = (props) => {
   const router = useRouter();
+  const config = useInfoMappings();
 
   const courses = props.data?.experiences.results || [];
   // Creates the individual rows of the table.
@@ -16,10 +20,10 @@ const CourseList = (props) => {
        onClick={() => router.push(`/dashboard/${data.provider_name}/${data.metadata_key_hash}`)} >
         <td className="px-6 py-4 text-sm text-gray-900">
            <div className="font-medium">
-             {data.metadata?.Course?.CourseTitle}
+            {getDeeplyNestedData(config.data?.course_title, data)}
            </div>
            <div className="font-light">
-             {data.metadata?.Course?.CourseCode}
+            {getDeeplyNestedData(config.data?.course_code, data)}
            </div>
          </td>
 

src/pages/dashboard/[catalogTitle]/[courseMetadataKey].js

@@ -1,13 +1,15 @@
 'use strict';
 
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { updateDeeplyNestedJson } from "../../../utils/utils";
 import { catalog_courses_url } from "../../../config/endpoints";
 import { axiosInstance } from "../../../config/axiosInstance";
 import { TrashIcon } from '@heroicons/react/outline';
 import DefaultLayout from "@/components/layouts/DefaultLayout";
+import { getDeeplyNestedData } from "@/utils/getDeeplyNestedData";
+import { useInfoMappings } from "@/hooks/useInfoMappings";
 
 export function getServerSideProps(context) {
   const { catalogTitle, courseMetadataKey } = context.query;
@@ -121,17 +123,19 @@ export default function CourseDataContainerV2({catalogTitle, courseMetadataKey})
       });
   }
 
+
+
   // title and basic info
-  function courseHeader() {
-    const title = course.data?.metadata?.Metadata_Ledger.Course.CourseTitle;
+  function courseHeader() { 
+
     return (
       <div
-        title={title}
+        title={getDeeplyNestedData(config.data?.course_title.replace("metadata.", "metadata.Metadata_Ledger."), course.data)}
         className={
           "w-full flex flex-row my-2 py-2 px-2 space-x-1 justify-start "
         }
       >
-        <div className={"text-xl font-bold w-full"}>{title}</div>
+        <div className={"text-xl font-bold w-full"}>{getDeeplyNestedData(config.data?.course_title.replace("metadata.", "metadata.Metadata_Ledger."), course.data)}</div>
         <div
           className={
             "px-2 mt-1 text-xs leading-5 self-center font-semibold rounded-full bg-green-100 text-green-800"
@@ -376,6 +380,8 @@ export default function CourseDataContainerV2({catalogTitle, courseMetadataKey})
     };
   }, [id]);
 
+  const config = useInfoMappings();
+
   return (
     <DefaultLayout>
     <div className="bg-white shadow rounded-md pb-4 mb-6">

src/utils/getDeeplyNestedData.js

@@ -0,0 +1,20 @@
+// Functions to render data
+export const getDeeplyNestedData = (strKey, data) => {
+  if (!strKey) return null;
+
+  // gets the keys for the data mapping
+  const objKeys = strKey.split('.');
+
+  // inits with all the data
+  let valueToReturn = data;
+
+  // Reduces it down to the specific value
+  objKeys.forEach((key) => {
+    if (valueToReturn) {
+      valueToReturn = valueToReturn[key];
+    }
+  });
+
+  // Returning the desired value.
+  return valueToReturn;
+};