Refactor

src/components/App.js

@@ -1,13 +1,11 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/no-deprecated */
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import Search from './Search';
 import Results from './Results';
 import Footer from './Footer';
-import Privacy from './Privacy';
-import Terms from './Terms';
 import LandingPage from './Landing';
 
+import { APP_STATES } from '../constants';
+
 import 'antd/dist/antd.css';
 import '../styles/App.css';
 
@@ -17,72 +15,51 @@ export default function App({ match }) {
   const { page } = match.params;
   const [services, setServices] = useState([]);
   const [username, setUsername] = useState('');
-
-  const fetchServices = async () => {
-    const response = await fetch(window.apiUrl + '/services');
-    const responseJSON = await response.json();
-    setServices(responseJSON);
-  };
+  const [appState, setAppState] = useState(APP_STATES.EMPTY);
 
   useEffect(() => {
-    fetchServices();
-  }, []);
+    const fetchServices = async () => {
+      const response = await fetch(window.apiUrl + '/services');
+      const responseJSON = await response.json();
+      setServices(responseJSON);
+    };
+    console.log('fetchServices');
 
-  // handle while user types
-  const inputChanged = text => {
-    setUsername(text);
-  };
+    // fetch services if not already fetched (due to a network issue etc.)
+    if (services.length === 0) {
+      fetchServices();
+    }
+  }, [appState, services]);
 
-  return useMemo(() => {
-    // main content of page
-    let content;
+  let content;
 
-    if (username.length > 0) {
-      content = (
-        <div className="container" id="content">
-          <Results username={username} services={services} />
-        </div>
-      );
-    } else {
-      // search is empty, show the page content
-      switch (page) {
-        case 'privacy':
-          content = (
-            <div className="container" id="content">
-              <Privacy />
-            </div>
-          );
-          break;
-        case 'terms':
-          //terms and conditions
-          content = (
-            <div className="container" id="content">
-              <Terms />
-            </div>
-          );
-          break;
-        default:
-          content = <LandingPage />;
-          break;
-      }
-    }
+  switch (appState) {
+    case APP_STATES.USER_TYPING:
+      content = 'loading';
+      break;
+    case APP_STATES.SEARCH:
+      content = <Results username={username} services={services} />;
+      break;
+    case APP_STATES.EMPTY:
+    default:
+      content = <LandingPage page={page} />;
+      break;
+  }
 
-    return (
-      <>
-        <div className="jumbotron">
-          <div className="container" id="jumbotron">
-            <Search input={username} onChange={inputChanged} />
-          </div>
+  return (
+    <>
+      <div className="jumbotron">
+        <div className="container" id="jumbotron">
+          <Search onInputChange={setUsername} onStateChange={setAppState} />
         </div>
-        {content}
-        <div id="footer">
-          <hr />
-          <div className="container">
-            <Footer page={page} />
-          </div>
+      </div>
+      {content}
+      <div id="footer">
+        <hr />
+        <div className="container">
+          <Footer page={page} />
         </div>
-      </>
-    );
-    // eslint-disable-next-line
-  }, [username, services, page]);
+      </div>
+    </>
+  );
 }

src/components/Landing.js

@@ -1,5 +1,6 @@
 import React from 'react';
-
+import Privacy from './Privacy';
+import Terms from './Terms';
 import WhyUs from './WhyUs';
 import NewsletterSubscription from './NewsletterSubscription';
 import Donations from './Donation';
@@ -36,20 +37,37 @@ const whyUsRows = [
   },
 ];
 
-export default function Landing() {
-  return (
-    <div className="landing">
-      <div className="container" id="whyUs">
-        <WhyUs headerConfig={whyUsHeader} rows={whyUsRows} />
-      </div>
-      <div id="newsletter-wrapper">
-        <div className="container" id="newsLetter">
-          <NewsletterSubscription illustrationEnabled />
+export default function Landing({ page }) {
+  switch (page) {
+    case 'privacy':
+      return (
+        <div className="container" id="content">
+          <Privacy />
+        </div>
+      );
+
+    case 'terms':
+      return (
+        <div className="container" id="content">
+          <Terms />
+        </div>
+      );
+
+    default:
+      return (
+        <div className="landing">
+          <div className="container" id="whyUs">
+            <WhyUs headerConfig={whyUsHeader} rows={whyUsRows} />
+          </div>
+          <div id="newsletter-wrapper">
+            <div className="container" id="newsLetter">
+              <NewsletterSubscription illustrationEnabled />
+            </div>
+          </div>
+          <div className="container" id="donations">
+            <Donations />
+          </div>
         </div>
-      </div>
-      <div className="container" id="donations">
-        <Donations />
-      </div>
-    </div>
-  );
+      );
+  }
 }

src/components/Results.js

@@ -45,7 +45,11 @@ export default function Results({ username, services }) {
 
   // render cards
   return useMemo(() => {
-    return <div className="results">{services.length > 0 ? cards : <CubeSpinner />}</div>;
+    return (
+      <div className="container" id="content">
+        <div className="results">{services.length > 0 ? cards : <CubeSpinner />}</div>
+      </div>
+    );
   }, [cards, services]);
 }
 

src/components/Search.js

@@ -1,44 +1,58 @@
-import React, { useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Input, Icon } from 'antd';
 import { Link } from 'react-router-dom';
-// TODO: use styled components instead
+import isEmpty from 'lodash/isEmpty';
+import debounce from 'debounce';
+
 import '../styles/Search.css';
 
-export default function Search({ input, onChange }) {
-  const inputChanged = ({ target }) => {
-    // niceInput is the url friendly version of the input
-    let niceInput = target.value.replace(/[^a-zA-Z0-9-_.]/g, '');
-    onChange(niceInput);
-  };
+export default function Search({ onInputChange, onStateChange }) {
+  const [input, setInput] = useState('');
+
+  const debouncedSearchHandler = useCallback(
+    debounce(input => {
+      onInputChange(input);
+      onStateChange('search');
+    }, 800),
+    [],
+  );
+
+  const handleChange = text => {
+    if (isEmpty(text)) {
+      debouncedSearchHandler.clear();
+      setInput('');
+      onInputChange('');
+      onStateChange('empty');
+      return;
+    }
+    onStateChange('userTyping');
 
-  const clearInput = () => {
-    onChange('');
+    let urlFriendlyInput = text.replace(/[^a-zA-Z0-9-_.]/g, '');
+    setInput(urlFriendlyInput);
+    debouncedSearchHandler(urlFriendlyInput);
   };
 
-  return useMemo(() => {
-    return (
-      <div className="search">
-        <Link
-          to={'/'}
-          onClick={() => {
-            clearInput();
-          }}
-        >
-          <div className="header">
-            <Icon type="thunderbolt" theme="filled" />
-            <h1>{'Instant Username Search'}</h1>
-          </div>
-        </Link>
-        <Input
-          placeholder={'Search username'}
-          size="large"
-          allowClear
-          value={input}
-          onChange={inputChanged}
-          autoFocus
-        />
-      </div>
-    );
-    // eslint-disable-next-line
-  }, [input]);
+  return (
+    <div className="search">
+      <Link
+        to={'/'}
+        onClick={() => {
+          handleChange('');
+        }}
+      >
+        <div className="header">
+          <Icon type="thunderbolt" theme="filled" />
+          <h1>Instant Username Search</h1>
+        </div>
+      </Link>
+      <Input
+        placeholder={'Search username'}
+        size="large"
+        allowClear
+        value={input}
+        onChange={event => handleChange(event.target.value)}
+        autoFocus
+      />
+    </div>
+  );
 }

src/constants/index.js

@@ -0,0 +1,5 @@
+export const APP_STATES = {
+  EMPTY: 'empty', // no search input
+  USER_TYPING: 'userTyping', // user is typing
+  SEARCH: 'search', // user has searched
+};