From 4a69907ca34f00567856b143a2eefcf43daa6ca4 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 8 Mar 2020 10:16:45 +0100
Subject: [PATCH] Fixed generation of component keys to make them render
 properly

---
 src/servers/prop-types/index.js | 8 ++++----
 src/short-urls/ShortUrls.js     | 8 ++++++--
 src/short-urls/ShortUrlsList.js | 2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/servers/prop-types/index.js b/src/servers/prop-types/index.js
index ddd725c7..6dc0eaa1 100644
--- a/src/servers/prop-types/index.js
+++ b/src/servers/prop-types/index.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 
 export const serverType = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired,
-  apiKey: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  url: PropTypes.string,
+  apiKey: PropTypes.string,
   version: PropTypes.string,
   printableVersion: PropTypes.string,
   serverNotFound: PropTypes.bool,
diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js
index 3efe9868..e9aa96d6 100644
--- a/src/short-urls/ShortUrls.js
+++ b/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>
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 94fb0b10..94d63894 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/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}
       />