From 77ce1bedd46b78b1c61ae393a1c6565cf3b4d55e 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>
---
 src/library-authoring/list-libraries/LibraryListPage.jsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/library-authoring/list-libraries/LibraryListPage.jsx b/src/library-authoring/list-libraries/LibraryListPage.jsx
index 922f099c..d3287e8d 100644
--- a/src/library-authoring/list-libraries/LibraryListPage.jsx
+++ b/src/library-authoring/list-libraries/LibraryListPage.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import {
@@ -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">