Finished project with hooks

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .DS_STORE
+.env

README.md

@@ -1,2 +1,16 @@
 # Lyrical-GraphQL
 Starter project from a GraphQL course on Udemy.com
+
+### How to run
+1. Install dependencies
+```
+npm install
+```
+2. Create your database at MongoDB Atlas and copy/paste its `MONGO URI` into a `.env` file in the root folder:
+```
+MONGO_URI = "..."
+```
+3. Run the project
+```
+npm run dev
+```

client/components/Layout.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Layout = ({ children }) => {
+  return <div className="container">{children}</div>;
+};
+
+export default Layout;

client/components/LyricCreate.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { gql, useMutation } from "@apollo/client";
+
+const mutation = gql`
+  mutation AddLyric($id: ID!, $content: String!) {
+    addLyricToSong(songId: $id, content: $content) {
+      id
+      lyrics {
+        id
+        content
+        likes
+      }
+    }
+  }
+`;
+
+const LyricCreate = ({ songId }) => {
+  const [content, setContent] = useState("");
+  const [mutateFunction] = useMutation(mutation);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    mutateFunction({
+      variables: {
+        id: songId,
+        content,
+      },
+    });
+
+    setContent("");
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>Add a lyric:</label>
+      <input
+        type="text"
+        value={content}
+        onChange={(event) => {
+          setContent(event.target.value);
+        }}
+      ></input>
+    </form>
+  );
+};
+
+export default LyricCreate;

client/components/LyricList.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { gql, useMutation } from "@apollo/client";
+
+const mutation = gql`
+  mutation AddLike($id: ID!) {
+    likeLyric(id: $id) {
+      id
+      likes
+    }
+  }
+`;
+
+const LyricList = ({ lyrics }) => {
+  const [mutateFunction] = useMutation(mutation);
+
+  const onLike = (id, currentLikes) => {
+    mutateFunction({
+      variables: {
+        id,
+      },
+      optimisticResponse: {
+        __typename: "Mutation",
+        likeLyric: {
+          id,
+          __typename: "LyricType",
+          likes: currentLikes + 1,
+        },
+      },
+    });
+  };
+
+  const renderLyrics = () => {
+    return (lyrics || []).map(({ id, content, likes }) => {
+      return (
+        <li className="collection-item " key={id}>
+          {`${content} (${likes || 0})`}
+          <i
+            className="material-icons"
+            onClick={() => {
+              onLike(id, likes);
+            }}
+          >
+            thumb_up
+          </i>
+        </li>
+      );
+    });
+  };
+
+  return <ul className="collection">{renderLyrics()}</ul>;
+};
+
+export default LyricList;

client/components/SongCreate.js

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { gql, useMutation } from "@apollo/client";
+import { Link, useHistory } from "react-router-dom";
+import songs from "../queries/songs";
+
+const mutation = gql`
+  mutation AddSong($title: String) {
+    addSong(title: $title) {
+      id
+      title
+    }
+  }
+`;
+
+const SongCreate = () => {
+  const [mutateFunction] = useMutation(mutation);
+  const [title, setTitle] = useState("");
+  const history = useHistory();
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+
+    mutateFunction({
+      variables: {
+        title,
+      },
+      refetchQueries: [
+        {
+          query: songs,
+        },
+      ],
+    }).then(() => {
+      history.push("/");
+    });
+  };
+
+  return (
+    <div>
+      <Link to="/">Back </Link>
+      <h3>Create a new song</h3>
+      <form onSubmit={onSubmit}>
+        <label>Song title:</label>
+        <input
+          type="text"
+          value={title}
+          onChange={(event) => {
+            setTitle(event.target.value);
+          }}
+        ></input>
+      </form>
+    </div>
+  );
+};
+
+export default SongCreate;

client/components/SongDetail.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Link, useParams } from "react-router-dom";
+import LyricCreate from "./LyricCreate";
+import LyricList from "./LyricList";
+import songQuery from "../queries/song";
+import { useQuery } from "@apollo/client";
+
+const SongDetail = () => {
+  const { id } = useParams();
+  const { data, loading } = useQuery(songQuery, {
+    variables: { id },
+  });
+
+  return (
+    <div>
+      <Link to="/">Back </Link>
+      <h3>{loading ? "Loading..." : data.song.title}</h3>
+      {!loading && <LyricList lyrics={data.song.lyrics} />}
+      <LyricCreate songId={id} />
+    </div>
+  );
+};
+
+export default SongDetail;

client/components/SongList.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { useQuery, gql, useMutation } from "@apollo/client";
+import { Link } from "react-router-dom";
+import songs from "../queries/songs";
+
+const mutation = gql`
+  mutation DeleteSong($id: ID) {
+    deleteSong(id: $id) {
+      id
+    }
+  }
+`;
+
+const SongList = () => {
+  const { loading, data, refetch } = useQuery(songs);
+  const [mutateFunction] = useMutation(mutation);
+
+  const onSongDelete = (id) => {
+    mutateFunction({
+      variables: {
+        id,
+      },
+    }).then(() => {
+      refetch();
+    });
+  };
+
+  const renderSongs = () => {
+    return (data.songs || []).map(({ id, title }) => {
+      return (
+        <li className="collection-item " key={id}>
+          <Link to={`/song/${id}`}>{title}</Link>
+          <i
+            className="material-icons"
+            onClick={() => {
+              onSongDelete(id);
+            }}
+          >
+            delete
+          </i>
+        </li>
+      );
+    });
+  };
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <ul className="collection">{renderSongs()}</ul>
+      <Link to="/song/new" className="btn-floating btn-large red right">
+        <i className="material-icons">add</i>
+      </Link>
+    </div>
+  );
+};
+
+export default SongList;

client/index.js

@@ -1,11 +1,44 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+import { Route, Switch, HashRouter } from "react-router-dom";
 
-const Root = () => {
-  return <div>Lyrical</div>
+import Layout from "./components/Layout";
+import SongList from "./components/SongList";
+import SongCreate from "./components/SongCreate";
+import SongDetail from "./components/SongDetail";
+
+import "./style/style.css";
+
+const apolloClient = new ApolloClient({
+  uri: "http://localhost:4000/graphql",
+  dataIdFromObject: (o) => o.id,
+  cache: new InMemoryCache(),
+});
+
+const App = () => {
+  return (
+    <ApolloProvider client={apolloClient}>
+      <Layout>
+        <HashRouter>
+          <Switch>
+            <Route path="/song/new">
+              <SongCreate />
+            </Route>
+            <Route path="/song/:id">
+              <SongDetail />
+            </Route>
+            <Route path="/">
+              <SongList />
+            </Route>
+          </Switch>
+        </HashRouter>
+      </Layout>
+    </ApolloProvider>
+  );
 };
 
-ReactDOM.render(
-  <Root />,
-  document.querySelector('#root')
-);
+const rootEl = document.querySelector("#root");
+const root = ReactDOM.createRoot(rootEl);
+
+root.render(<App />);

client/queries/song.js

@@ -0,0 +1,15 @@
+import { gql } from "@apollo/client";
+
+export default gql`
+  query GetLyricsOfSong($id: ID!) {
+    song(id: $id) {
+      id
+      title
+      lyrics {
+        id
+        content
+        likes
+      }
+    }
+  }
+`;

client/queries/songs.js

@@ -0,0 +1,10 @@
+import { gql } from "@apollo/client";
+
+export default gql`
+  query GetSongs {
+    songs {
+      id
+      title
+    }
+  }
+`;

client/style/style.css

@@ -0,0 +1,8 @@
+.collection-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.material-icons {
+  cursor: pointer;
+}