Bump directory to React 17 (oblador#1387)

ianharoldonwater · Oct 24, 2021 · 27f177f · 27f177f
1 parent bf943c3
commit 27f177f
Show file tree

Hide file tree

Showing 8 changed files with 4,673 additions and 4,084 deletions.
diff --git a/directory/README.md b/directory/README.md
@@ -1,3 +1,5 @@
+# Getting Started with Create React App
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts
@@ -6,23 +8,23 @@ In the project directory, you can run:
 
 ### `yarn start`
 
-Runs the app in the development mode.<br />
+Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br />
+The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
 ### `yarn test`
 
-Launches the test runner in the interactive watch mode.<br />
+Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ### `yarn build`
 
-Builds the app for production to the `build` folder.<br />
+Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.<br />
+The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
@@ -45,24 +47,24 @@ To learn React, check out the [React documentation](https://reactjs.org/).
 
 ### Code Splitting
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
 
 ### Analyzing the Bundle Size
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
 
 ### Making a Progressive Web App
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
 
 ### Advanced Configuration
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
 
 ### Deployment
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
 
 ### `yarn build` fails to minify
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
diff --git a/directory/package.json b/directory/package.json
@@ -4,12 +4,12 @@
   "private": true,
   "homepage": "https://oblador.github.io/react-native-vector-icons",
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.3"
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/directory/public/index.html b/directory/public/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>react-native-vector-icons directory</title>
   </head>
   <body>

diff --git a/directory/src/App.js b/directory/src/App.js
@@ -1,28 +1,17 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-
+/* eslint-disable react/prop-types, jsx-a11y/label-has-associated-control */
+import * as React from 'react';
 import './App.css';
-
 import IconFamilies from './generated/glyphmapIndex.json';
 
 const WAITING_INTERVAL = 300;
 
-class Icon extends PureComponent {
-  static propTypes = {
-    family: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-  };
+const Icon = React.memo(({ family, name, ...props }) => (
+  <span style={{ fontFamily: family }} {...props}>
+    {String.fromCodePoint(IconFamilies[family][name])}
+  </span>
+));
 
-  render() {
-    return (
-      <span style={{ fontFamily: this.props.family }} {...this.props}>
-        {String.fromCodePoint(IconFamilies[this.props.family][this.props.name])}
-      </span>
-    );
-  }
-}
-
-const HeaderBar = props => {
+const HeaderBar = () => {
   return (
     <div className="Header-Container">
       <div className="Header-Content">
@@ -32,128 +21,105 @@ const HeaderBar = props => {
   );
 };
 
-class SearchBar extends PureComponent {
-  timer = null;
-
-  state = {
-    keyword: '',
-  };
-
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.onSubmit(this.inputRef.value);
-  };
-
-  handleChange = e => {
-    e.preventDefault();
-    clearInterval(this.timer);
-
-    this.setState({ keyword: this.inputRef.value });
+const SearchBar = ({ onSubmit }) => {
+  const inputRef = React.useRef();
+  const timerRef = React.useRef(null);
+  const handleSubmit = React.useCallback(
+    e => {
+      e.preventDefault();
+      onSubmit(inputRef.current.value);
+    },
+    [inputRef, onSubmit]
+  );
 
-    this.timer = setTimeout(
-      () => this.props.onSubmit(this.state.keyword),
-      WAITING_INTERVAL
-    );
-  };
+  const handleChange = React.useCallback(
+    e => {
+      e.preventDefault();
+      clearInterval(timerRef.current);
+
+      timerRef.current = setTimeout(
+        () => onSubmit(inputRef.current.value),
+        WAITING_INTERVAL
+      );
+    },
+    [timerRef, inputRef, onSubmit]
+  );
 
-  render() {
-    return (
-      <div className="Search-Container">
-        <div className="Search-Content">
-          <form className="Search-Form" onSubmit={this.handleSubmit}>
-            {/* Clicking the Label focuses the cursor onto the form input */}
-            <label htmlFor="Search-Input" className="Search-Label">
-              <Icon
-                family="FontAwesome"
-                name="search"
-                className="Search-Icon"
-              />
-            </label>
-            <input
-              type="text"
-              id="Search-Input"
-              className="Search-Input"
-              ref={ref => (this.inputRef = ref)}
-              onChange={this.handleChange}
-              placeholder="Search for an icon..."
-            />
-          </form>
-        </div>
+  return (
+    <div className="Search-Container">
+      <div className="Search-Content">
+        <form className="Search-Form" onSubmit={handleSubmit}>
+          {/* Clicking the Label focuses the cursor onto the form input */}
+          <label htmlFor="Search-Input" className="Search-Label">
+            <Icon family="FontAwesome" name="search" className="Search-Icon" />
+          </label>
+          <input
+            type="text"
+            id="Search-Input"
+            className="Search-Input"
+            ref={inputRef}
+            onChange={handleChange}
+            placeholder="Search for an icon..."
+          />
+        </form>
       </div>
-    );
-  }
-}
-
-class App extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      matches: [],
-    };
-  }
-
-  componentDidMount() {
-    this.handleSubmit('');
-  }
-
-  handleSubmit = text => {
-    let matches = [];
-    Object.keys(IconFamilies)
-      .sort()
-      .forEach(family => {
-        const icons = IconFamilies[family];
-        const names = Object.keys(icons);
-        const results = names.filter(name => name.indexOf(text) >= 0);
-        if (results.length) {
-          matches = [...matches, { family, names: results }];
-        }
-      });
-
-    this.setState({ matches });
-  };
+    </div>
+  );
+};
 
-  renderMatch = match => {
-    const { family, names } = match;
-    return (
-      <div className="Result-Row" key={family}>
-        <h2 className="Result-Title">{family}</h2>
+const renderIcon = (family, name) => (
+  <div className="Result-Icon-Container" key={name}>
+    <Icon family={family} name={name} className="Result-Icon" />
+    <h4 className="Result-Icon-Name">{name}</h4>
+  </div>
+);
 
-        <div className="Result-List">
-          {names.map(name => this.renderIcon(family, name))}
-        </div>
-      </div>
-    );
-  };
+const renderMatch = match => {
+  const { family, names } = match;
+  return (
+    <div className="Result-Row" key={family}>
+      <h2 className="Result-Title">{family}</h2>
 
-  renderIcon(family, name) {
-    return (
-      <div className="Result-Icon-Container" key={name}>
-        <Icon family={family} name={name} className="Result-Icon" />
-        <h4 className="Result-Icon-Name">{name}</h4>
+      <div className="Result-List">
+        {names.map(name => renderIcon(family, name))}
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-  renderNotFound() {
-    return (
-      <div className="Result-Row">
-        <h2 className="Result-Title">Icon not found.</h2>
-      </div>
-    );
-  }
+const renderNotFound = () => (
+  <div className="Result-Row">
+    <h2 className="Result-Title">Icon not found.</h2>
+  </div>
+);
+
+const getMatches = query =>
+  Object.keys(IconFamilies)
+    .sort()
+    .map(family => {
+      const icons = IconFamilies[family];
+      const names = Object.keys(icons);
+      const results = names.filter(name => name.indexOf(query) >= 0);
+      return { family, names: results };
+    })
+    .filter(({ names }) => names.length);
+
+const App = () => {
+  const [matches, setMatches] = React.useState([]);
+  const handleSubmit = React.useCallback(text => {
+    setMatches(getMatches(text));
+  });
+  React.useLayoutEffect(() => handleSubmit(''), []);
 
-  render() {
-    return (
-      <div className="App">
-        <HeaderBar />
-        <SearchBar onSubmit={this.handleSubmit} />
-        <div className="Container">
-          {this.state.matches.map(this.renderMatch)}
-          {this.state.matches.length === 0 && this.renderNotFound()}
-        </div>
+  return (
+    <div className="App">
+      <HeaderBar />
+      <SearchBar onSubmit={handleSubmit} />
+      <div className="Container">
+        {matches.length === 0 ? renderNotFound() : matches.map(renderMatch)}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default App;
diff --git a/directory/src/App.test.js b/directory/src/App.test.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 

diff --git a/directory/src/index.css b/directory/src/index.css
@@ -1,7 +1,16 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
   overflow-x: hidden;
   overflow-y: scroll;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
diff --git a/directory/src/setupTests.js b/directory/src/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';