{song.name}

26 |

{song.artist}

27 |

{song.lyrics}

28 |

29 |

30 | ))} 31 |

32 |

Loading posts...

React App

16 | {(addSong) => ( 17 |

{ 18 | e.preventDefault(); 19 | addSong({ variables: { song: { 20 | name, 21 | artist, 22 | lyrics 23 | }} 24 | }); 25 | const songs = [{name, artist, lyrics}]; 26 | dispatch({type: "ADD_CONTENT", payload: songs}); 27 | setName(""); 28 | setLyrics(""); 29 | setArtist(""); 30 | }}> 31 | Add a new song 32 |

33 | setName(e.target.value)} /> 34 | Name 35 |

36 |

37 | setArtist(e.target.value)}/> 38 | Artist 39 |

40 |

41 |

setLyrics(e.target.value)}/>
42 |                     <label>Lyrics</label>
43 |                 </div>
44 |             <button className={`mui-btn mui-btn--raised mui-btn--primary`} type="submit"> Add Song </button>
45 |         </form>
46 |             )}
47 |         </Mutation>
48 |     )
49 | }
50 | 
51 | export default AddSong

--------------------------------------------------------------------------------
/src/createServiceWorker.js:
--------------------------------------------------------------------------------
 1 | // In production, we register a service worker to serve assets from local cache.
 2 | 
 3 | // This lets the app load faster on subsequent visits in production, and gives
 4 | // it offline capabilities. However, it also means that developers (and users)
 5 | // will only see deployed updates on the "N+1" visit to a page, since previously
 6 | // cached resources are updated in the background.
 7 | 
 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 9 | // This link also includes instructions on opting out of this behavior.
10 | 
11 | export default function register() {
12 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
13 |     window.addEventListener('load', () => {
14 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
15 |       navigator.serviceWorker
16 |         .register(swUrl)
17 |         .then(registration => {
18 |           // eslint-disable-next-line no-param-reassign
19 |           registration.onupdatefound = () => {
20 |             const installingWorker = registration.installing;
21 |             installingWorker.onstatechange = () => {
22 |               if (installingWorker.state === 'installed') {
23 |                 if (navigator.serviceWorker.controller) {
24 |                   // At this point, the old content will have been purged and
25 |                   // the fresh content will have been added to the cache.
26 |                   // It's the perfect time to display a "New content is
27 |                   // available; please refresh." message in your web app.
28 |                   console.log('New content is available; please refresh.'); // eslint-disable-line no-console
29 |                 } else {
30 |                   // At this point, everything has been precached.
31 |                   // It's the perfect time to display a
32 |                   // "Content is cached for offline use." message.
33 |                   console.log('Content is cached for offline use.'); // eslint-disable-line no-console
34 |                 }
35 |               }
36 |             };
37 |           };
38 |         })
39 |         .catch(error => {
40 |           console.error('Error during service worker registration:', error);
41 |         });
42 |     });
43 |   }
44 | }
45 | 
46 | export function unregister() {
47 |   if ('serviceWorker' in navigator) {
48 |     navigator.serviceWorker.ready.then(registration => {
49 |       registration.unregister();
50 |     });
51 |   }
52 | }
53 |

--------------------------------------------------------------------------------