Merge pull request #320 from calisio/fixes

UI Fixes Pt3
UnlockedLabs · Jul 25, 2024 · 65ad4be · 65ad4be
2 parents 552e59c + 5145c32
commit 65ad4be
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 27 deletions.
diff --git a/backend/src/database/users.go b/backend/src/database/users.go
@@ -19,11 +19,12 @@ func (db *DB) GetCurrentUsers(page, itemsPerPage int, facilityId uint, order str
 	var count int64
 	var users []models.User
 	if err := db.Conn.Model(models.User{}).
+		Where("facility_id = ?", facilityId).
+		Count(&count).
 		Offset(offset).
 		Limit(itemsPerPage).
 		Order(order).
-		Find(&users, "facility_id = ?", facilityId).
-		Count(&count).
+		Find(&users).
 		Error; err != nil {
 		log.Printf("Error fetching users: %v", err)
 		return 0, nil, err

diff --git a/frontend/src/Components/CatalogCourseCard.tsx b/frontend/src/Components/CatalogCourseCard.tsx
@@ -6,6 +6,7 @@ import YellowPill from "./pill-labels/YellowPill";
 import axios from "axios";
 import { ViewType } from "./ToggleView";
 import GreyPill from "./pill-labels/GreyPill";
+import { MouseEvent } from "react";
 
 export interface CatalogCourseCard {
   name: string;
@@ -39,7 +40,8 @@ export default function CatalogCourseCard({
   const coverImage = course.thumbnail_url;
   const program_type: PillTagType = course.program_type as PillTagType;
 
-  function updateFavorite() {
+  function updateFavorite(e: MouseEvent) {
+    e.preventDefault();
     axios
       .put(`/api/programs/${course.program_id}/save`)
       .then((response) => {
@@ -87,32 +89,38 @@ export default function CatalogCourseCard({
   return (
     <>
       {view == ViewType.List ? (
-        <div className="card bg-base-teal body-small p-6 flex flex-row items-center">
+        <a
+          className="card bg-base-teal body-small p-6 flex flex-row items-center"
+          href={course.external_url}
+          target="_blank"
+        >
           <div className="flex flex-col justify-between gap-3">
             <div className="flex flex-row gap-3 items-center">
-              <div onClick={() => updateFavorite()}>{bookmark}</div>
+              <div onClick={(e) => updateFavorite(e)}>{bookmark}</div>
               <h2>{course.program_name}</h2>
               <p className="body">|</p>
-              <a href={course.provider_platform_url} className="body">
-                {course.provider_name}
-              </a>
+              <p className="body">{course.provider_name}</p>
               {programPill}
               {outcomePills}
             </div>
             <p className="body-small h-[1rem] line-clamp-2 overflow-hidden">
               {course.description}
             </p>
           </div>
-        </div>
+        </a>
       ) : (
         <div className="card card-compact bg-base-teal overflow-hidden relative">
           <div
             className="absolute top-2 right-2"
-            onClick={() => updateFavorite()}
+            onClick={(e) => updateFavorite(e)}
           >
             {bookmark}
           </div>
-          <a href={course.url} target="_blank" rel="noopener noreferrer">
+          <a
+            href={course.external_url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <figure className="h-[124px]">
               {coverImage !== "" ? (
                 <img

diff --git a/frontend/src/Components/EnrolledCourseCard.tsx b/frontend/src/Components/EnrolledCourseCard.tsx
@@ -30,7 +30,8 @@ export default function EnrolledCourseCard({
   let status: CourseStatus;
   if (course.course_progress == 100) status = CourseStatus.Completed;
 
-  function updateFavorite() {
+  function updateFavorite(e) {
+    e.preventDefault();
     axios
       .put(`/api/programs/${course.id}/save`)
       .then((response) => {
@@ -45,19 +46,24 @@ export default function EnrolledCourseCard({
   return (
     <>
       {view == ViewType.List ? (
-        <div className="card bg-inner-background flex flex-row items-center justify-between body-small p-6">
+        <a
+          className="card bg-inner-background flex flex-row items-center justify-between body-small p-6"
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <div className="flex flex-row gap-3 items-center">
-            {!recent &&
-              (course.is_favorited ? (
-                <StarIcon className="h-5 text-primary-yellow"></StarIcon>
-              ) : (
-                <StarIconOutline className="h-5 text-header-text"></StarIconOutline>
-              ))}
+            <div onClick={(e) => updateFavorite(e)}>
+              {!recent &&
+                (course.is_favorited ? (
+                  <StarIcon className="h-5 text-primary-yellow"></StarIcon>
+                ) : (
+                  <StarIconOutline className="h-5 text-header-text"></StarIconOutline>
+                ))}
+            </div>
             <h2>{course.program_name}</h2>
             <p className="body">|</p>
-            <a href={course.provider_platform_url} className="body">
-              {course.provider_platform_name}
-            </a>
+            <p className="body">{course.provider_platform_name}</p>
           </div>
           {status == CourseStatus.Completed ? (
             <div className="flex flex-row gap-2 body-small text-teal-3">
@@ -72,16 +78,14 @@ export default function EnrolledCourseCard({
               <ProgressBar percent={Math.floor(course.course_progress)} />
             </div>
           )}
-        </div>
+        </a>
       ) : (
         <div
           className={`card card-compact ${recent ? "bg-inner-background" : "bg-base-teal"} overflow-hidden relative`}
         >
           <div
             className="absolute top-2 right-2"
-            onClick={() => {
-              updateFavorite();
-            }}
+            onClick={(e) => updateFavorite(e)}
           >
             {!recent &&
               (course.is_favorited ? (

diff --git a/frontend/src/Components/ResourcesSideBar.tsx b/frontend/src/Components/ResourcesSideBar.tsx
@@ -34,7 +34,7 @@ const KolibriCard = () => {
           for all learning levels.
         </p>
         {/* Temporary-- replace with external link to Kolibri */}
-        <ExternalLink url="https://learningequality.org/kolibri/">
+        <ExternalLink url="https://kolibri.v2.unlockedlabs.xyz">
           Explore Kolibri's Content
         </ExternalLink>
       </div>