Update components to functional components with hooks

Omegapoint · Mar 1, 2021 · 78c35da · 78c35da
1 parent 7ca8dfa
commit 78c35da
Show file tree

Hide file tree

Showing 7 changed files with 42,237 additions and 13,628 deletions.
diff --git a/lab2/package-lock.json b/lab2/package-lock.json
diff --git a/lab2/package.json b/lab2/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "^4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/lab2/src/components/App/App.js b/lab2/src/components/App/App.js
@@ -1,46 +1,46 @@
-import React, {Component} from 'react';
-import {getUsers} from '../../api';
-import List from '../List/List';
-import BackgroundColorPicker from '../BackgroundColorPicker/BackgroundColorPicker';
+import React, { useState, useEffect } from "react";
+import { getUsers } from "../../api";
+import List from "../List/List";
+import BackgroundColorPicker from "../BackgroundColorPicker/BackgroundColorPicker";
 
-import './App.css';
+import "./App.css";
 
-class App extends Component {
-  state = {
-    users: [],
-    bgColor: 'lavender'
-  };
+const App = () => {
+  const [users, setUsers] = useState([]);
+  const [bgColor, setBackgroundColor] = useState("lavender");
 
-  componentDidMount() {
-    getUsers().then(users => {
-      this.setState(() => {
-        return {
-          users: users
-        }
-      })
-    })
-  }
+  useEffect(() => {
+    getUsers().then((users) => {
+      setUsers(users);
+    });
+  }, []);
 
-  changeBackgroundColor = (e) => {
+  const changeBackgroundColor = (e) => {
     // const color = e.target.value;
     // TODO: Task 3 - change background color by setting state.
   };
 
-  render() {
-    return (
-        <div className="App container" style={{background: this.state.bgColor}}>
-          <div className="App-header">
-            <p>Lab 2</p>
-            <p className="App-header-description">
-              <span role="img" aria-label="female technologist">👩‍💻</span> Öppna upp README.md och
-              följ instruktionerna <span role="img" aria-label="male technologist">👨‍💻</span>
-            </p>
-          </div>
-          <BackgroundColorPicker onChange={(this.changeBackgroundColor)}/>
-          <List title={/*TODO: Task 2*/'*Insert title'} items={/*TODO: Task 4 */[]}/>
-        </div>
-    );
-  }
-}
+  return (
+    <div className="App container" style={{ background: bgColor }}>
+      <div className="App-header">
+        <p>Lab 2</p>
+        <p className="App-header-description">
+          <span role="img" aria-label="female technologist">
+            👩‍💻
+          </span>{" "}
+          Öppna upp README.md och följ instruktionerna{" "}
+          <span role="img" aria-label="male technologist">
+            👨‍💻
+          </span>
+        </p>
+      </div>
+      <BackgroundColorPicker onChange={changeBackgroundColor} />
+      <List
+        title={/*TODO: Task 2*/ "*Insert title"}
+        items={/*TODO: Task 4 */ []}
+      />
+    </div>
+  );
+};
 
 export default App;
diff --git a/lab2/src/components/BackgroundColorPicker/BackgroundColorPicker.js b/lab2/src/components/BackgroundColorPicker/BackgroundColorPicker.js
@@ -1,41 +1,40 @@
-import React, {Component} from 'react';
+import React, { Component } from "react";
 import "./BackgroundColorPicker.css";
 
-class BackgroundColorPicker extends Component {
-
-  colors = [
+const BackgroundColorPicker = ({ onChange }) => {
+  const colors = [
     {
-      hex: 'lavender',
-      name: 'lavender'
+      hex: "lavender",
+      name: "lavender",
     },
     {
-      hex: 'gold',
-      name: 'gold'
+      hex: "gold",
+      name: "gold",
     },
     {
-      hex: '#f48c42',
-      name: '🎃'
+      hex: "#f48c42",
+      name: "🎃",
     },
     {
-      hex: 'rebeccapurple',
-      name: 'Beautiful purple'
-    }
+      hex: "rebeccapurple",
+      name: "Beautiful purple",
+    },
   ];
 
-  render() {
-    return (
-        <div className="BackgroundColorPicker">
-          <h5>Välj bakgrundsfärg</h5>
-          <select className="custom-select" onChange={this.props.onChange}>
-            {this.colors.map((color, index) => {
-              return (
-                  <option key={index} value={color.hex}>{color.name}</option>
-              )
-            })}
-          </select>
-        </div>
-    );
-  }
-}
+  return (
+    <div className="BackgroundColorPicker">
+      <h5>Välj bakgrundsfärg</h5>
+      <select className="custom-select" onChange={onChange}>
+        {colors.map((color, index) => {
+          return (
+            <option key={index} value={color.hex}>
+              {color.name}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+};
 
 export default BackgroundColorPicker;
diff --git a/lab2/src/components/List/List.js b/lab2/src/components/List/List.js
@@ -1,57 +1,41 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import SearchBar from '../SearchBar/SearchBar';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import SearchBar from "../SearchBar/SearchBar";
 
 import "./List.css";
 
-class List extends Component {
+const List = ({ items = [], title }) => {
+  const [searchTerm, getSearchTerm] = useState("");
 
-  static defaultProps = {
-    items: []
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchTerm: ''
-    }
-  }
-
-  onKeyPressed = (e) => {
+  const onKeyPressed = (e) => {
     // const searchTerm = e.target.value;
     // TODO: Task 7. Implement callback logic.
   };
 
-  filterListItemsBySearchTerm = (searchTerm) => {
-    return this.props.items
-        .filter(item => {
-          return item.name.toLowerCase().includes(searchTerm.toLowerCase())
-        })
-  };
-
-  render() {
-    // TODO: Task 8: Set up filtering by declaring filteredItems.
-    // const filteredItems = ...
-    return (
-        <div className="List">
-          <h2 className="List-title">{this.props.title}</h2>
-          <SearchBar value={this.state.searchTerm} onKeyPressed={this.onKeyPressed}/>
-          {this.props.items.length === 0 ? (<div>Empty list...</div>) : (
-              <ul className="list-group">
-                {
-                  // TODO: Task 6. Map (see react-examples.md if stuck :D) over items and return <li>-tags.
-                  // <li className="list-group-item">A list item</li>
-                  console.log("ITEMS", this.props.items)
-                }
-              </ul>
-          )}
-        </div>
+  const filterListItemsBySearchTerm = (searchTerm) =>
+    items.filter((item) =>
+      item.name.toLowerCase().includes(searchTerm.toLowerCase())
     );
-  }
-}
 
-List.propTypes = {
-  items: PropTypes.array
+  // TODO: Task 8: Set up filtering by declaring filteredItems.
+  // const filteredItems = ...
+  return (
+    <div className="List">
+      <h2 className="List-title">{title}</h2>
+      <SearchBar value={searchTerm} onKeyPressed={onKeyPressed} />
+      {items.length === 0 ? (
+        <div>Empty list...</div>
+      ) : (
+        <ul className="list-group">
+          {
+            // TODO: Task 6. Map (see react-examples.md if stuck :D) over items and return <li>-tags.
+            // <li className="list-group-item">A list item</li>
+            console.log("ITEMS", items)
+          }
+        </ul>
+      )}
+    </div>
+  );
 };
 
 export default List;
diff --git a/lab2/src/components/SearchBar/SearchBar.js b/lab2/src/components/SearchBar/SearchBar.js
@@ -1,23 +1,28 @@
-import React from 'react';
+import React from "react";
 
-const SearchBar = props => (
-    <div className="input-group mb-12">
-      <div className="input-group-prepend">
-            <span className="input-group-text"
-                  id="basic-addon1" role="img"
-                  aria-label="search">
-                    🔎
-            </span>
-      </div>
-      <input type="text"
-             className="form-control"
-             placeholder="Sökterm"
-             aria-label="Sökterm"
-             aria-describedby="basic-addon1"
-             autoFocus
-             value={props.value}
-             onChange={props.onKeyPressed}/>
+const SearchBar = ({ value, onKeyPressed }) => (
+  <div className="input-group mb-12">
+    <div className="input-group-prepend">
+      <span
+        className="input-group-text"
+        id="basic-addon1"
+        role="img"
+        aria-label="search"
+      >
+        🔎
+      </span>
     </div>
+    <input
+      type="text"
+      className="form-control"
+      placeholder="Sökterm"
+      aria-label="Sökterm"
+      aria-describedby="basic-addon1"
+      autoFocus
+      value={value}
+      onChange={onKeyPressed}
+    />
+  </div>
 );
 
 export default SearchBar;