From b486bb8e7fbf8395b8bbd30d8114d17470fee784 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Wed, 16 Jan 2019 17:52:09 -0800
Subject: [PATCH] Use hooks!

---
 components/ChecklistItem/Apps.js | 70 ++++++++++++++------------------
 1 file changed, 30 insertions(+), 40 deletions(-)

diff --git a/components/ChecklistItem/Apps.js b/components/ChecklistItem/Apps.js
index da0dd46..e0a18e0 100644
--- a/components/ChecklistItem/Apps.js
+++ b/components/ChecklistItem/Apps.js
@@ -1,5 +1,6 @@
 // @flow
-import React from 'react';
+// $FlowIssue
+import React, { useState } from 'react';
 import { AppsContainer, SectionHeading, ExpandContainer } from './style';
 import { Button } from '../Button';
 import type { ChecklistResource } from '../../types';
@@ -9,45 +10,34 @@ type Props = {
   resource: ChecklistResource,
 };
 
-type State = {
-  overflowExpanded: boolean,
-};
+export const Apps = ({ resource }: Props) => {
+  const [overflowExpanded, setOverflowExpanded] = useState(false);
 
-export class Apps extends React.Component<Props, State> {
-  state = { overflowExpanded: false };
+  if (!resource.apps) return null;
 
-  expand = () => this.setState({ overflowExpanded: true });
-
-  render() {
-    const { resource } = this.props;
-    const { overflowExpanded } = this.state;
-
-    if (!resource.apps) return null;
-
-    let appList = resource.apps;
-    let overflowAppList;
-    if (appList.length > 3) {
-      overflowAppList = appList.slice(3, appList.length);
-      appList = appList.slice(0, 3);
-    }
-
-    return (
-      <AppsContainer overflowExpanded={overflowExpanded}>
-        <SectionHeading>Apps</SectionHeading>
-        {appList.map(app => (
-          <AppRow key={app.name} app={app} />
-        ))}
-
-        {overflowAppList && !overflowExpanded && (
-          <ExpandContainer onClick={this.expand}>
-            <Button>Show more choices</Button>
-          </ExpandContainer>
-        )}
-
-        {overflowAppList &&
-          overflowExpanded &&
-          overflowAppList.map(app => <AppRow key={app.name} app={app} />)}
-      </AppsContainer>
-    );
+  let appList = resource.apps;
+  let overflowAppList;
+  if (appList.length > 3) {
+    overflowAppList = appList.slice(3, appList.length);
+    appList = appList.slice(0, 3);
   }
-}
+
+  return (
+    <AppsContainer overflowExpanded={overflowExpanded}>
+      <SectionHeading>Apps</SectionHeading>
+      {appList.map(app => (
+        <AppRow key={app.name} app={app} />
+      ))}
+
+      {overflowAppList && !overflowExpanded && (
+        <ExpandContainer onClick={() => setOverflowExpanded(true)}>
+          <Button>Show more choices</Button>
+        </ExpandContainer>
+      )}
+
+      {overflowAppList &&
+        overflowExpanded &&
+        overflowAppList.map(app => <AppRow key={app.name} app={app} />)}
+    </AppsContainer>
+  );
+};