From 44bf24c5a8c18481a1a993b9e0e9c7067a5bf2c5 Mon Sep 17 00:00:00 2001
From: yzhX <10969mart1n@gmail.com>
Date: Sat, 13 Jan 2024 15:07:02 -0800
Subject: [PATCH 1/2] feat: add CourseCard Link in CourseList component add
 REACT_APP_API_URL in build script

---
 package.json                   |  2 +-
 src/components/CoursesList.tsx | 55 +++++++++++++++-------------------
 2 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 81f703c5..d8bf6f35 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "cross-env REACT_APP_API_URL='http://features-testing-env.eba-mau9qkgr.us-east-1.elasticbeanstalk.com/' docusaurus start",
-    "build": "docusaurus build",
+    "build": "cross-env REACT_APP_API_URL='http://features-testing-env.eba-mau9qkgr.us-east-1.elasticbeanstalk.com/' docusaurus build",
     "build:preview": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
diff --git a/src/components/CoursesList.tsx b/src/components/CoursesList.tsx
index c00b2979..26396dbb 100644
--- a/src/components/CoursesList.tsx
+++ b/src/components/CoursesList.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useHistory } from "@docusaurus/router";
 import { useQuery } from "react-query";
 import Tag from "@site/src/components/ui/Tag";
 import { Skeleton } from "@site/src/components/ui/Skeleton";
@@ -7,6 +6,7 @@ import { getCourses } from "@site/src/api/course";
 import { TCourse } from "../typings/course";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Translate from "@docusaurus/Translate";
+import Link from "@docusaurus/Link";
 
 type TProps = {
   course: TCourse;
@@ -14,42 +14,35 @@ type TProps = {
 
 const CourseCard = (props: TProps) => {
   const { course } = props;
-  const history = useHistory();
-
-  const viewCourse = (path: string) => {
-    if (path.startsWith("http")) {
-      window.location.href = path;
-    } else {
-      history.push(path);
-    }
-  };
 
   return (
-    <div
-      onClick={() => viewCourse(course.route_path)}
-      className="w-full overflow-hidden border border-solid md:w-[300px] rounded-md shadow-sm transition-shadow hover:shadow-lg"
+    <Link
+      to={`/${course.route_path}`}
+      className="hover:no-underline hover:text-gray-900"
     >
-      <div className="w-full bg-background-subtle h-[150px]">
-        <img
-          src={course.cover_img}
-          alt=""
-          className="object-cover w-full h-full"
-        />
-      </div>
-      <div className="flex flex-col p-4">
-        <div className="flex items-center justify-between font-bold text-[22px] leading-[25px] font-ubuntu">
-          <span>{course.title}</span>
+      <div className="w-full overflow-hidden border border-solid md:w-[300px] rounded-md shadow-sm transition-shadow hover:shadow-lg">
+        <div className="w-full bg-background-subtle h-[150px]">
+          <img
+            src={course.cover_img}
+            alt=""
+            className="object-cover w-full h-full"
+          />
         </div>
-        <div className="text-sm leading-[17px] mt-[10px]">
-          {course.description}
-        </div>
-        {Boolean(course.user_cnt) && (
-          <div className="flex gap-2 mt-[14px]">
-            <Tag className="bg-brand-muted">{`${course.user_cnt} learners`}</Tag>
+        <div className="flex flex-col p-4">
+          <div className="flex items-center justify-between font-bold text-[22px] leading-[25px] font-ubuntu">
+            <span>{course.title}</span>
           </div>
-        )}
+          <div className="text-sm leading-[17px] mt-[10px]">
+            {course.description}
+          </div>
+          {Boolean(course.user_cnt) && (
+            <div className="flex gap-2 mt-[14px]">
+              <Tag className="bg-brand-muted">{`${course.user_cnt} learners`}</Tag>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </Link>
   );
 };
 

From 7ed803d34f01a6d75d406226a89555030bb1a1fa Mon Sep 17 00:00:00 2001
From: yzhX <10969mart1n@gmail.com>
Date: Sat, 13 Jan 2024 23:40:34 -0800
Subject: [PATCH 2/2] fix: refactor course link as suggested

---
 package.json                   |  2 +-
 src/components/CoursesList.tsx | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d8bf6f35..81f703c5 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "cross-env REACT_APP_API_URL='http://features-testing-env.eba-mau9qkgr.us-east-1.elasticbeanstalk.com/' docusaurus start",
-    "build": "cross-env REACT_APP_API_URL='http://features-testing-env.eba-mau9qkgr.us-east-1.elasticbeanstalk.com/' docusaurus build",
+    "build": "docusaurus build",
     "build:preview": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
diff --git a/src/components/CoursesList.tsx b/src/components/CoursesList.tsx
index 26396dbb..12db47a7 100644
--- a/src/components/CoursesList.tsx
+++ b/src/components/CoursesList.tsx
@@ -15,9 +15,17 @@ type TProps = {
 const CourseCard = (props: TProps) => {
   const { course } = props;
 
+  const courseRoutePath = (path: string) => {
+    if (path.startsWith("http")) {
+      return path;
+    } else {
+      return `/${path}`;
+    }
+  };
+
   return (
     <Link
-      to={`/${course.route_path}`}
+      to={courseRoutePath(course.route_path)}
       className="hover:no-underline hover:text-gray-900"
     >
       <div className="w-full overflow-hidden border border-solid md:w-[300px] rounded-md shadow-sm transition-shadow hover:shadow-lg">