Fixed generation of component keys to make them render properly

src/servers/prop-types/index.js

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 
 export const serverType = PropTypes.shape({
-  id: PropTypes.string.isRequired,
+  id: PropTypes.string,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
-  url: PropTypes.string.isRequired,
+  url: PropTypes.string,
-  apiKey: PropTypes.string.isRequired,
+  apiKey: PropTypes.string,
   version: PropTypes.string,
   printableVersion: PropTypes.string,
   serverNotFound: PropTypes.bool,

src/short-urls/ShortUrls.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Paginator from './Paginator';
 
@@ -14,9 +14,13 @@ const ShortUrls = (SearchBar, ShortUrlsList) => {
     const { match: { params }, shortUrlsList } = props;
     const { page, serverId } = params;
     const { data = [], pagination } = shortUrlsList;
+    const [ urlsListKey, setUrlsListKey ] = useState(`${serverId}_${page}`);
 
     // Using a key on a component makes react to create a new instance every time the key changes
-    const urlsListKey = `${serverId}_${page}`;
+    // Without it, pagination on the URL will not make the component to be refreshed
+    useEffect(() => {
+      setUrlsListKey(`${serverId}_${page}`);
+    }, [ serverId, page ]);
 
     return (
       <React.Fragment>

src/short-urls/ShortUrlsList.js

@@ -112,9 +112,9 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
 
     return shortUrlsList.map((shortUrl) => (
       <ShortUrlsRow
+        key={shortUrl.shortUrl}
         shortUrl={shortUrl}
         selectedServer={selectedServer}
-        key={shortUrl.shortCode}
         refreshList={this.refreshList}
         shortUrlsListParams={shortUrlsListParams}
       />