cleanup

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "hooks state management",
+  "name": "State management using hooks and graphql",
   "icons": [
     {
       "src": "favicon.ico",

src/components/AddSong.js

@@ -7,7 +7,7 @@ import Context from '../context';
 
 const AddSong = () => {
     const [name, setName] = useState("");
-    const [actor, setActor] = useState("");
+    const [artist, setArtist] = useState("");
     const [lyrics, setLyrics] = useState("");
     const {dispatch} = useContext(Context);
 
@@ -18,24 +18,24 @@ const AddSong = () => {
             e.preventDefault();
             addSong({ variables: { song: {
                         name,
-                        actor,
+                        artist,
                         lyrics
                         }}
                     });
-            const songs = [{name, actor, lyrics}];
+            const songs = [{name, artist, lyrics}];
             dispatch({type: "ADD_CONTENT", payload: songs});
             setName("");
             setLyrics("");
-            setActor("");
+            setArtist("");
         }}>
                 <legend>Add a new song</legend>
                 <div className={'mui-textfield mui-textfield--float-label width-small'}>
                     <input value={name} type="text" name="name" onChange={e => setName(e.target.value)} />
                     <label>Name</label>
                 </div>
                 <div className="mui-textfield mui-textfield--float-label width-small">
-                <input value={actor} type="text" name="actor" onChange={e => setActor(e.target.value)}/>
-                    <label>Singer</label>
+                <input value={artist} type="text" name="artist" onChange={e => setArtist(e.target.value)}/>
+                    <label>Artist</label>
                 </div>
                 <div className="mui-textfield mui-textfield--float-label">
                     <textarea value={lyrics} type="text" name="lyrics" onChange={e => setLyrics(e.target.value)}/>

src/components/Home.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useContext} from "react";
 import {graphql} from "react-apollo";
 import Container from "muicss/lib/react/container";
-import { singleActor } from '../graphql/queries'
+import { singleArtist } from '../graphql/queries'
 import AddSong from './AddSong'
 import Context from '../context'
 
@@ -23,20 +23,9 @@ const Home = ({ data: { loading, error, songs } }) => {
                     <div key={`song-${song.id}`} className={'song-list-item'}>
                         <div className={'text-wrapper'}>
                         <h1>{song.name}</h1>
-                        <h3>{song.actor}</h3>
+                        <h3>{song.artist}</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>
@@ -47,10 +36,10 @@ const Home = ({ data: { loading, error, songs } }) => {
 };
 
 
-export default graphql(singleActor, {
+export default graphql(singleArtist, {
     options: ({ match }) => ({
         variables: {
-            actor: match.params.slug,
+            artist: match.params.slug,
             name: match.params.slug,
             lyrics: match.params.slug
         }

src/graphql/mutations.js

@@ -4,7 +4,7 @@ export const ADD_SONG = gql`
   mutation AddSong($song: SongCreateInput!) {
     createSong(data: $song) {
       name
-      actor
+      artist
       lyrics
     }
   }

src/graphql/queries.js

@@ -1,11 +1,11 @@
 import gql from "graphql-tag";
 
-export const singleActor = gql`
-  query songs($actor: String) {
-    songs(where: { actor: $actor }) {
+export const singleArtist = gql`
+  query songs($artist: String) {
+    songs(where: { artist: $artist }) {
       name
       id
-      actor
+      artist
       lyrics
     }
   }