Flatten model holding list of servers

src/common/Home.js

@@ -10,9 +10,9 @@ const propTypes = {
   servers: PropTypes.object,
 };
 
-const Home = ({ resetSelectedServer, servers: { list, loading } }) => {
+const Home = ({ resetSelectedServer, servers }) => {
-  const servers = values(list);
+  const serversList = values(servers);
-  const hasServers = !isEmpty(servers);
+  const hasServers = !isEmpty(serversList);
 
   useEffect(() => {
     resetSelectedServer();
@@ -21,10 +21,9 @@ const Home = ({ resetSelectedServer, servers: { list, loading } }) => {
   return (
     <div className="home">
       <h1 className="home__title">Welcome to Shlink</h1>
-      <ServersListGroup servers={servers}>
+      <ServersListGroup servers={serversList}>
-        {!loading && hasServers && <span>Please, select a server.</span>}
+        {hasServers && <span>Please, select a server.</span>}
-        {!loading && !hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+        {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
-        {loading && <span>Trying to load servers...</span>}
       </ServersListGroup>
     </div>
   );

src/servers/ServersDropdown.js

@@ -15,22 +15,18 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
   };
 
   renderServers = () => {
-    const { servers: { list, loading }, selectedServer } = this.props;
+    const { servers, selectedServer } = this.props;
-    const servers = values(list);
+    const serversList = values(servers);
     const { push } = this.props.history;
     const loadServer = (id) => push(`/server/${id}/list-short-urls/1`);
 
-    if (loading) {
+    if (isEmpty(serversList)) {
-      return <DropdownItem disabled><i>Trying to load servers...</i></DropdownItem>;
-    }
-
-    if (isEmpty(servers)) {
       return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
     }
 
     return (
       <React.Fragment>
-        {servers.map(({ name, id }) => (
+        {serversList.map(({ name, id }) => (
           <DropdownItem key={id} active={selectedServer && selectedServer.id === id} onClick={() => loadServer(id)}>
             {name}
           </DropdownItem>

src/servers/helpers/ServerError.js

@@ -13,7 +13,7 @@ const propTypes = {
 };
 
 export const ServerError = (DeleteServerButton) => {
-  const ServerErrorComp = ({ type, servers: { list }, selectedServer }) => (
+  const ServerErrorComp = ({ type, servers, selectedServer }) => (
     <div className="server-error__container flex-column">
       <div className="row w-100 mb-3 mb-md-5">
         <Message type="error">
@@ -27,7 +27,7 @@ export const ServerError = (DeleteServerButton) => {
         </Message>
       </div>
 
-      <ServersListGroup servers={Object.values(list)}>
+      <ServersListGroup servers={Object.values(servers)}>
         These are the Shlink servers currently configured. Choose one of
         them or <Link to="/server/create">add a new one</Link>.
       </ServersListGroup>

src/servers/reducers/server.js

@@ -3,25 +3,17 @@ import { pipe, isEmpty, assoc, map, prop } from 'ramda';
 import { v4 as uuid } from 'uuid';
 import { homepage } from '../../../package.json';
 
-/* eslint-disable padding-line-between-statements */
-export const FETCH_SERVERS_START = 'shlink/servers/FETCH_SERVERS_START';
 export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
-/* eslint-enable padding-line-between-statements */
 
-const initialState = {
+const initialState = {};
-  list: {},
-  loading: false,
-};
 
 const assocId = (server) => assoc('id', server.id || uuid(), server);
 
 export default handleActions({
-  [FETCH_SERVERS_START]: (state) => ({ ...state, loading: true }),
+  [FETCH_SERVERS]: (state, { list }) => list,
-  [FETCH_SERVERS]: (state, { list }) => ({ list, loading: false }),
 }, initialState);
 
 export const listServers = ({ listServers, createServers }, { get }) => () => async (dispatch) => {
-  dispatch({ type: FETCH_SERVERS_START });
   const localList = listServers();
 
   if (!isEmpty(localList)) {

test/common/Home.test.js

@@ -6,7 +6,7 @@ describe('<Home />', () => {
   let wrapped;
   const defaultProps = {
     resetSelectedServer: jest.fn(),
-    servers: { loading: false, list: {} },
+    servers: {},
   };
   const createComponent = (props) => {
     const actualProps = { ...defaultProps, ...props };
@@ -24,20 +24,12 @@ describe('<Home />', () => {
     expect(wrapped.find('Link')).toHaveLength(1);
   });
 
-  it('shows message when loading servers', () => {
+  it('asks to select a server when servers exist', () => {
-    const wrapped = createComponent({ servers: { loading: true } });
+    const servers = {
-    const span = wrapped.find('span');
+      1: { name: 'foo', id: '1' },
-
+      2: { name: 'bar', id: '2' },
-    expect(span).toHaveLength(1);
+    };
-    expect(span.text()).toContain('Trying to load servers...');
+    const wrapped = createComponent({ servers });
-  });
-
-  it('Asks to select a server when not loadign and servers exist', () => {
-    const list = [
-      { name: 'foo', id: '1' },
-      { name: 'bar', id: '2' },
-    ];
-    const wrapped = createComponent({ servers: { list } });
     const span = wrapped.find('span');
 
     expect(span).toHaveLength(1);

test/servers/ServersDropdown.test.js

@@ -8,12 +8,9 @@ describe('<ServersDropdown />', () => {
   let wrapped;
   let ServersDropdown;
   const servers = {
-    list: {
     '1a': { name: 'foo', id: 1 },
     '2b': { name: 'bar', id: 2 },
     '3c': { name: 'baz', id: 3 },
-    },
-    loading: false,
   };
   const history = {
     push: jest.fn(),
@@ -26,7 +23,7 @@ describe('<ServersDropdown />', () => {
   afterEach(() => wrapped.unmount());
 
   it('contains the list of servers, the divider and the export button', () =>
-    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers.list).length + 2));
+    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 2));
 
   it('contains a toggle with proper title', () =>
     expect(wrapped.find(DropdownToggle)).toHaveLength(1));
@@ -40,7 +37,7 @@ describe('<ServersDropdown />', () => {
 
   it('shows a message when no servers exist yet', () => {
     wrapped = shallow(
-      <ServersDropdown servers={{ loading: false, list: {} }} listServers={identity} history={history} />
+      <ServersDropdown servers={{}} listServers={identity} history={history} />
     );
     const item = wrapped.find(DropdownItem);
 
@@ -48,15 +45,4 @@ describe('<ServersDropdown />', () => {
     expect(item.prop('disabled')).toEqual(true);
     expect(item.find('i').text()).toEqual('Add a server first...');
   });
-
-  it('shows a message when loading', () => {
-    wrapped = shallow(
-      <ServersDropdown servers={{ loading: true, list: {} }} listServers={identity} history={history} />
-    );
-    const item = wrapped.find(DropdownItem);
-
-    expect(item).toHaveLength(1);
-    expect(item.prop('disabled')).toEqual(true);
-    expect(item.find('i').text()).toEqual('Trying to load servers...');
-  });
 });

test/servers/helpers/ServerError.test.js

@@ -32,7 +32,7 @@ describe('<ServerError />', () => {
   ])('renders expected information for type "%s"', (type, textsToFind) => {
     wrapper = shallow(
       <BrowserRouter>
-        <ServerError type={type} servers={{ list: [] }} selectedServer={selectedServer} />
+        <ServerError type={type} servers={{}} selectedServer={selectedServer} />
       </BrowserRouter>
     );
     const wrapperText = wrapper.html();

test/servers/reducers/server.test.js

@@ -6,7 +6,6 @@ import reducer, {
   createServers,
   editServer,
   FETCH_SERVERS,
-  FETCH_SERVERS_START,
 } from '../../../src/servers/reducers/server';
 
 describe('serverReducer', () => {
@@ -27,7 +26,7 @@ describe('serverReducer', () => {
 
   describe('reducer', () => {
     it('returns servers when action is FETCH_SERVERS', () =>
-      expect(reducer({}, { type: FETCH_SERVERS, list })).toEqual({ loading: false, list }));
+      expect(reducer({}, { type: FETCH_SERVERS, list })).toEqual(list));
   });
 
   describe('action creators', () => {
@@ -39,9 +38,8 @@ describe('serverReducer', () => {
       it('fetches servers from local storage when found', async () => {
         await listServers(ServersServiceMock, axios)()(dispatch);
 
-        expect(dispatch).toHaveBeenCalledTimes(2);
+        expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS_START });
+        expect(dispatch).toHaveBeenNthCalledWith(1, expectedFetchServersResult);
-        expect(dispatch).toHaveBeenNthCalledWith(2, expectedFetchServersResult);
         expect(ServersServiceMock.listServers).toHaveBeenCalledTimes(1);
         expect(ServersServiceMock.createServer).not.toHaveBeenCalled();
         expect(ServersServiceMock.editServer).not.toHaveBeenCalled();
@@ -90,9 +88,8 @@ describe('serverReducer', () => {
 
         await listServers(NoListServersServiceMock, axios)()(dispatch);
 
-        expect(dispatch).toHaveBeenCalledTimes(2);
+        expect(dispatch).toHaveBeenCalledTimes(1);
-        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS_START });
+        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS, list: expectedList });
-        expect(dispatch).toHaveBeenNthCalledWith(2, { type: FETCH_SERVERS, list: expectedList });
         expect(NoListServersServiceMock.listServers).toHaveBeenCalledTimes(1);
         expect(NoListServersServiceMock.createServer).not.toHaveBeenCalled();
         expect(NoListServersServiceMock.editServer).not.toHaveBeenCalled();