chore: attempt at fixing query to CPR endpoint

2023-05-16 11:04:25 +02:00
parent 69e7c71885
commit bdf3870808
4 changed files with 220 additions and 40 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -5909,6 +5909,8 @@
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "json-schema-traverse": "^1.0.0",
@@ -5924,7 +5926,9 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "node_modules/ajv-keywords": {
      "version": "3.5.2",
@@ -19107,7 +19111,179 @@
        "treeverse",
        "validate-npm-package-name",
        "which",
-        "write-file-atomic"
+        "write-file-atomic",
+        "@gar/promisify",
+        "@npmcli/disparity-colors",
+        "@npmcli/fs",
+        "@npmcli/git",
+        "@npmcli/installed-package-contents",
+        "@npmcli/metavuln-calculator",
+        "@npmcli/move-file",
+        "@npmcli/name-from-folder",
+        "@npmcli/node-gyp",
+        "@npmcli/promise-spawn",
+        "@tootallnate/once",
+        "agent-base",
+        "agentkeepalive",
+        "aggregate-error",
+        "ajv",
+        "ansi-regex",
+        "ansi-styles",
+        "aproba",
+        "are-we-there-yet",
+        "asap",
+        "asn1",
+        "assert-plus",
+        "asynckit",
+        "aws-sign2",
+        "aws4",
+        "balanced-match",
+        "bcrypt-pbkdf",
+        "bin-links",
+        "binary-extensions",
+        "brace-expansion",
+        "builtins",
+        "caseless",
+        "cidr-regex",
+        "clean-stack",
+        "clone",
+        "cmd-shim",
+        "code-point-at",
+        "color-convert",
+        "color-name",
+        "color-support",
+        "colors",
+        "combined-stream",
+        "common-ancestor-path",
+        "concat-map",
+        "console-control-strings",
+        "core-util-is",
+        "dashdash",
+        "debug",
+        "debuglog",
+        "defaults",
+        "delayed-stream",
+        "delegates",
+        "depd",
+        "dezalgo",
+        "diff",
+        "ecc-jsbn",
+        "emoji-regex",
+        "encoding",
+        "env-paths",
+        "err-code",
+        "extend",
+        "extsprintf",
+        "fast-deep-equal",
+        "fast-json-stable-stringify",
+        "forever-agent",
+        "fs-minipass",
+        "fs.realpath",
+        "function-bind",
+        "gauge",
+        "getpass",
+        "har-schema",
+        "har-validator",
+        "has",
+        "has-flag",
+        "has-unicode",
+        "http-cache-semantics",
+        "http-proxy-agent",
+        "http-signature",
+        "https-proxy-agent",
+        "humanize-ms",
+        "iconv-lite",
+        "ignore-walk",
+        "imurmurhash",
+        "indent-string",
+        "infer-owner",
+        "inflight",
+        "inherits",
+        "ip",
+        "ip-regex",
+        "is-core-module",
+        "is-fullwidth-code-point",
+        "is-lambda",
+        "is-typedarray",
+        "isexe",
+        "isstream",
+        "jsbn",
+        "json-schema",
+        "json-schema-traverse",
+        "json-stringify-nice",
+        "json-stringify-safe",
+        "jsonparse",
+        "jsprim",
+        "just-diff",
+        "just-diff-apply",
+        "lru-cache",
+        "mime-db",
+        "mime-types",
+        "minimatch",
+        "minipass-collect",
+        "minipass-fetch",
+        "minipass-flush",
+        "minipass-json-stream",
+        "minipass-sized",
+        "minizlib",
+        "mute-stream",
+        "negotiator",
+        "normalize-package-data",
+        "npm-bundled",
+        "npm-normalize-package-bin",
+        "npm-packlist",
+        "number-is-nan",
+        "oauth-sign",
+        "object-assign",
+        "once",
+        "p-map",
+        "path-is-absolute",
+        "performance-now",
+        "proc-log",
+        "promise-all-reject-late",
+        "promise-call-limit",
+        "promise-inflight",
+        "promise-retry",
+        "promzard",
+        "psl",
+        "punycode",
+        "qs",
+        "read-cmd-shim",
+        "readable-stream",
+        "request",
+        "retry",
+        "safe-buffer",
+        "safer-buffer",
+        "set-blocking",
+        "signal-exit",
+        "smart-buffer",
+        "socks",
+        "socks-proxy-agent",
+        "spdx-correct",
+        "spdx-exceptions",
+        "spdx-expression-parse",
+        "spdx-license-ids",
+        "sshpk",
+        "string_decoder",
+        "string-width",
+        "stringify-package",
+        "strip-ansi",
+        "supports-color",
+        "tunnel-agent",
+        "tweetnacl",
+        "typedarray-to-buffer",
+        "unique-filename",
+        "unique-slug",
+        "uri-js",
+        "util-deprecate",
+        "uuid",
+        "validate-npm-package-license",
+        "verror",
+        "walk-up-path",
+        "wcwidth",
+        "wide-align",
+        "wrappy",
+        "yallist"
      ],
      "dev": true,
      "dependencies": {
@@ -21682,11 +21858,6 @@
        "safer-buffer": "^2.0.2",
        "tweetnacl": "~0.14.0"
      },
-      "bin": {
-        "sshpk-conv": "bin/sshpk-conv",
-        "sshpk-sign": "bin/sshpk-sign",
-        "sshpk-verify": "bin/sshpk-verify"
-      },
      "engines": {
        "node": ">=0.10.0"
      }
@@ -34397,15 +34568,14 @@
      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
      "dev": true,
-      "requires": {
-        "ajv": "^8.0.0"
-      },
+      "requires": {},
      "dependencies": {
        "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "version": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
          "dev": true,
+          "optional": true,
+          "peer": true,
          "requires": {
            "fast-deep-equal": "^3.1.1",
            "json-schema-traverse": "^1.0.0",
@@ -34417,7 +34587,9 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
+          "dev": true,
+          "optional": true,
+          "peer": true
        }
      }
    },
--- a/src/widgets/ProductRecommendations/api.js
+++ b/src/widgets/ProductRecommendations/api.js
@@ -1,9 +1,9 @@
 import { get, stringifyUrl } from 'data/services/lms/utils';
 import urls from 'data/services/lms/urls';

-export const getCrossProductRecommendationsUrl = (courseId) => `${urls.api}/learner_recommendations/cross_product/${courseId}`;
+export const crossProductRecommendationsUrl = (courseId) => `${urls.api}/learner_recommendations/cross_product/${courseId}`;

-const fetchCrossProductCourses = (courseId) => get(stringifyUrl(getCrossProductRecommendationsUrl(courseId)));
+const fetchCrossProductCourses = (courseId) => get(stringifyUrl(crossProductRecommendationsUrl(courseId)));

 export default {
  fetchCrossProductCourses,
--- a/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductRecommendationsContainer.jsx
@@ -4,18 +4,18 @@ import { useIntl } from '@edx/frontend-platform/i18n';

 import './index.scss';
 import messages from '../messages';
-import useFetchCrossProductCourses from '../hooks';
+import useCrossProductRecommendationsData from '../hooks';
 import ProductCardContainer from './ProductCardContainer';
 import mockCrossProductRecommendations from '../mockData';

 const ProductRecommendationsContainer = () => {
  const { formatMessage } = useIntl();
  const mockRecommendations = mockCrossProductRecommendations.courses;
-  const { productRecommendations, isProductRecommendationsLoading } = useFetchCrossProductCourses();
+  const { courses, isLoading } = useCrossProductRecommendationsData();

  return (
    <div className="bg-light-200">
-      {!isProductRecommendationsLoading && (
+      {!isLoading && (
        <Container
          size="lg"
          className="recommendations-container pt-sm-5 pt-4.5 pb-2 pb-sm-4.5"
@@ -23,7 +23,7 @@ const ProductRecommendationsContainer = () => {
          <h2 className="mb-4">
            {formatMessage(messages.recommendationsHeading)}
          </h2>
-          <ProductCardContainer courses={productRecommendations} />
+          <ProductCardContainer courses={mockRecommendations} />
        </Container>
      )}
    </div>
--- a/src/widgets/ProductRecommendations/hooks.js
+++ b/src/widgets/ProductRecommendations/hooks.js
@@ -1,13 +1,14 @@
 import { useState, useEffect } from "react";
 import { StrictDict } from 'utils';

+import { RequestStates } from 'data/constants/requests';
 import api from './api';
 import * as module from './hooks';

-// export const state = StrictDict({
-//   requestState: (val) => useState(val), // eslint-disable-line
-//   courses: (val) => useState(val), // eslint-disable-line
-// });
+export const state = StrictDict({
+  requestState: (val) => useState(val), // eslint-disable-line
+  courses: (val) => useState(val), // eslint-disable-line
+});

 const useFetchMostRecentCourse = () => {
  // Gets the most recent course a user is enrolled in
@@ -15,39 +16,46 @@ const useFetchMostRecentCourse = () => {
  // Can we assume that the order the courses are listed on the Dashbaord is the order that the course was enrolled in?
 };

-const useFetchCrossProductCourses = () => {
-  const [productRecommendations, setProductRecommendations] = useState([]);
-  const [isProductRecommendationsLoading, setIsProductRecommendationsLoading] = useState(false);
+const useFetchCrossProductCourses = (setRequestState, setCourses) => {

-  // Uses the data from the most recently enrolled course to get the courseId to query our cross product endpoint
-  // const mostRecentCourse = useFetchMostRecentCourse()
  useEffect(() => {
    let isMounted = true;
-    setIsProductRecommendationsLoading(true);
    if (isMounted) {
-      api
+      setTimeout(() => {
+        console.log("timing")
+        api
        .fetchCrossProductCourses('course-v1:IBM+IBMBCC001+1T2022')
        .then((response) => {
          console.log("Here is the response", response)
          if (response.status === 200) {
-            setIsProductRecommendationsLoading(false);
-            setProductRecommendations(response.data.courses);
+            setRequestState(RequestStates.completed);
+            setCourses(response.data.courses);
          }
        }).catch(err => {
-          console.log("here is the error", err)
+          console.log("here is the error", err);
        });
+      }, 5000);
+      
    }
    return () => { isMounted = false; };
-  }, []); // most recent course ID will be the dependancy
-
-  return {
-    productRecommendations,
-    isProductRecommendationsLoading,
-  };
+  /* eslint-disable */
+  }, []); // most recent course ID will be the dependancy;
 };

 const useFetchAlgoliaRecommendations = () => {
  // This hook will fetch algolia reccs and return the reccs
 }

-export default useFetchCrossProductCourses;
+const useCrossProductRecommendationsData = () => {
+  const [requestState, setRequestState] = state.requestState(RequestStates.pending);
+  const [courses, setCourses] = state.courses([]);
+  useFetchCrossProductCourses(setRequestState, setCourses);
+
+  return {
+    courses,
+    isLoading: requestState === RequestStates.pending
+  }
+
+}
+
+export default useCrossProductRecommendationsData;