From 894d5e0978f027a83a299a5ce477317c6a93c47f Mon Sep 17 00:00:00 2001
From: Shruti Kapoor <shrkapoor@paypal.com>
Date: Mon, 12 Aug 2019 23:01:19 -0700
Subject: [PATCH 1/2] cleanup in progress.

---
 src/components/Home.js     |  5 ++++-
 src/components/SongItem.js | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/components/SongItem.js

diff --git a/src/components/Home.js b/src/components/Home.js
index a8d680e..880ed90 100755
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,8 +1,11 @@
 import React, { useEffect, useContext} from "react";
-import {graphql} from "react-apollo";
+import {graphql, Mutation} from "react-apollo";
 import Container from "muicss/lib/react/container";
 import { singleActor } from '../graphql/queries'
 import AddSong from './AddSong'
+import { DELETE_SONG } from '../graphql/mutations'
+
+import SongItem from './SongItem'
 import Context from '../context'
 
 const Home = ({ data: { loading, error, songs } }) => {
diff --git a/src/components/SongItem.js b/src/components/SongItem.js
new file mode 100644
index 0000000..a174652
--- /dev/null
+++ b/src/components/SongItem.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const SongItem = (song) => (
+    <div className={'text-wrapper'}>
+        <h1>{song.name}</h1>
+        <h3>{song.actor}</h3>
+        <p>{song.lyrics}</p>
+    </div>
+);
+
+export default SongItem
\ No newline at end of file

From 97859c9bf89c22ff5fac61c95c644993a47fb343 Mon Sep 17 00:00:00 2001
From: Shruti Kapoor <shrkapoor@paypal.com>
Date: Tue, 1 Oct 2019 22:18:10 +0800
Subject: [PATCH 2/2] code cleanup

---
 package-lock.json      |  5 +++++
 package.json           |  7 ++++++-
 src/components/Home.js | 13 +------------
 src/graphql/queries.js |  6 ++++--
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9df969b..9ecc23d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4679,6 +4679,11 @@
         "jsx-ast-utils": "^1.3.4"
       }
     },
+    "eslint-plugin-react-hooks": {
+      "version": "1.7.0",
+      "resolved": "http://npm.paypal.com/artifactory/api/npm/npm-all/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
+      "integrity": "sha1-YhC21aNyBfC5KFj4laToJwIKfQQ="
+    },
     "espree": {
       "version": "3.5.4",
       "resolved": "https://npm.paypal.com/repository/npm-all/espree/-/espree-3.5.4.tgz",
diff --git a/package.json b/package.json
index 28d68fa..d807866 100755
--- a/package.json
+++ b/package.json
@@ -2,7 +2,11 @@
   "name": "hooks-graphql",
   "version": "0.0.38",
   "description": "A sample integration of React hooks into graphql",
-  "keywords": ["hooks", "react", "graphql"],
+  "keywords": [
+    "hooks",
+    "react",
+    "graphql"
+  ],
   "author": "Shruti Kapoor",
   "main": "index.js",
   "dependencies": {
@@ -11,6 +15,7 @@
     "apollo-client": "^2.6.0",
     "apollo-client-preset": "1.0.5",
     "apollo-link-http": "^1.5.14",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "graphiql": "^0.13.0",
     "graphql": "0.11.7",
     "graphql-tag": "^2.10.1",
diff --git a/src/components/Home.js b/src/components/Home.js
index 880ed90..8e1a11d 100755
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useContext} from "react";
 import {graphql, Mutation} from "react-apollo";
 import Container from "muicss/lib/react/container";
-import { singleActor } from '../graphql/queries'
+import { GET_SONGS } from '../graphql/queries'
 import AddSong from './AddSong'
 import { DELETE_SONG } from '../graphql/mutations'
 
@@ -29,17 +29,6 @@ const Home = ({ data: { loading, error, songs } }) => {
                         <h3>{song.actor}</h3>
                         <p>{song.lyrics}</p>
                         </div>
-                       {/*<Mutation*/}
-                           {/*mutation={DELETE_SONG}>*/}
-                           {/*{ (deleteSong) =>*/}
-                           {/*<button onClick={() => {*/}
-                               {/*dispatch({type: "DELETE_CONTENT", payload: {id: song.id}});*/}
-                               {/*deleteSong({variables: {id: {id: song.id}}});*/}
-                           {/*}}>*/}
-                               {/*Remove song*/}
-                           {/*</button>*/}
-                           {/*}*/}
-                       {/*</Mutation>*/}
                     </div>
                 ))}
             </div>
diff --git a/src/graphql/queries.js b/src/graphql/queries.js
index 185d7bb..1ef3ada 100644
--- a/src/graphql/queries.js
+++ b/src/graphql/queries.js
@@ -1,7 +1,9 @@
 import gql from "graphql-tag";
 
-export const singleActor = gql`
-  query songs($actor: String) {
+export const GET_SONGS = gql`
+  query albums($actor: String) {
+    date
+    artwork
     songs(where: { actor: $actor }) {
       name
       id