Merge pull request #14 from LibrariesHacked/13-look-at-issue-with-can…

…celled-requests

Cancelling search requests and showing loading indicator

README.md

@@ -6,7 +6,7 @@ This is a widget that helps users find libraries in their area.
 
 [LibraryOn](https://libraryon.org/) is a project to connect libraries and people. The project goal is "to increase the number of people who use libraries, both in person and online."
 
-The website includes a library finder, with details of the library locations in England. The underlying data that is used in the library finder is published as part of an API. The API is available at [https://libraryon.org/api-docs/v1](https://libraryon.org/api-docs/v1).
+The website includes a library finder, with details of the library locations in England. The underlying data used in the library finder is published as part of an API. The API is available at [https://libraryon.org/api-docs/v1](https://libraryon.org/api-docs/v1).
 
 ## Getting Started
 

index.html

@@ -44,7 +44,7 @@
     <span class="govuk-caption-l">Add a library finder to your website</span>
     <h1 class="govuk-heading-l">Introduction</h1>
 
-    <p class="govuk-body">
+    <p class="govuk-body" id="main-content">
       A widget is a small component that can be placed on any website. This widget helps users find their nearest public
       library.
     </p>

src/App.jsx

@@ -14,8 +14,7 @@ import useLibraries from './hooks/useLibraries'
 
 import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'
 
-const App = props => {
-  const { width, height, service, region } = props
+const App = ({ width = '100%', height = '500px', service, region }) => {
   const [firstSearchCompleted, setFirstSearchCompleted] = useState(false)
   const {
     loadingLibraries,
@@ -117,9 +116,4 @@ App.propTypes = {
   region: PropTypes.string
 }
 
-App.defaultProps = {
-  width: '100%',
-  height: '100%'
-}
-
 export default App

src/Footer.jsx

@@ -7,7 +7,7 @@ function Footer () {
     <Typography
       variant='body1'
       component='p'
-      sx={{ marginTop: theme => theme.spacing(2) }}
+      sx={{ marginTop: theme => theme.spacing(1) }}
     >
       Powered by{' '}
       <a href='https://www.libraryon.org/' target='_blank' rel='noreferrer'>

src/LibraryList.jsx

@@ -23,14 +23,17 @@ const LibraryList = props => {
         backgroundColor: 'white'
       }}
     >
-      <ListSubheader>
+      <ListSubheader key='li_subheader'>
         {firstSearchCompleted &&
           `Found ${filteredLibraries.length} nearby libraries`}
       </ListSubheader>
       {firstSearchCompleted && (
         <>
           {filteredLibraries.map(library => (
-            <LibraryListItem key={library.id} library={library} />
+            <LibraryListItem
+              key={`li_library_${library.libraryId}`}
+              library={library}
+            />
           ))}
         </>
       )}