From e33ff83aaa8a522edaaee1476f0c4dc67a6aeb35 Mon Sep 17 00:00:00 2001
From: Ishan Masdekar <imasdekar@disroot.org>
Date: Fri, 31 May 2024 12:25:53 +0530
Subject: [PATCH] refactor: use links to navigate to library detail

Makes the library card in the library list page, which navigate to a
different page on click, to appear as links i.e. making the navigation
address visible on hover.

closes #414

- Signed-off by: Ishan Masdekar <imasdekar@disroot.org>
---
 .../list-libraries/LibraryListPage.jsx                 | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/library-authoring/list-libraries/LibraryListPage.jsx b/src/library-authoring/list-libraries/LibraryListPage.jsx
index 922f099c..2dc2cce3 100644
--- a/src/library-authoring/list-libraries/LibraryListPage.jsx
+++ b/src/library-authoring/list-libraries/LibraryListPage.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import {
-  Breadcrumb, Button, Pagination, ActionRow, Card,
+  Breadcrumb, Button, Pagination, ActionRow, Card
 } from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -70,10 +71,6 @@ export class LibraryListPage extends React.Component {
     });
   };
 
-  goToLibraryItem = (library) => {
-    this.props.navigate(library.url);
-  };
-
   renderError() {
     const { intl, errorMessage } = this.props;
 
@@ -141,10 +138,11 @@ export class LibraryListPage extends React.Component {
                   <ul className="list-unstyled">
                     {libraries.data.map(library => (
                       <Card
+                        as={Link}
                         isClickable
                         key={library.id}
                         className="library-item mt-2 p-1"
-                        onClick={() => this.goToLibraryItem(library)}
+                        to={library.url}
                       >
                         <Card.Section title={<h4 className="text-primary-500">{library.title}</h4>}>
                           <span className="small text-gray-500">