Initial commit

client/src/components/App.js

@@ -0,0 +1,35 @@
+// import logo from './../logo.svg';
+// import './../styles/App.css';
+
+import React, { Component } from 'react';
+import LinkList from './LinkList';
+import CreateLink from './CreateLink'
+
+class App extends Component {
+  render() {
+    return <CreateLink />;
+  }
+}
+
+// function App() {
+//   return (
+//     <div className="App">
+//       <header className="App-header">
+//         <img src={logo} className="App-logo" alt="logo" />
+//         <p>
+//           Edit <code>src/App.js</code> and save to reload.
+//         </p>
+//         <a
+//           className="App-link"
+//           href="https://reactjs.org"
+//           target="_blank"
+//           rel="noopener noreferrer"
+//         >
+//           Learn React
+//         </a>
+//       </header>
+//     </div>
+//   );
+// }
+
+export default App;

client/src/components/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

client/src/components/CreateLink.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+
+import { useMutation, gql } from '@apollo/client';
+
+const CREATE_LINK_MUTATION = gql`
+  mutation PostMutation(
+    $description: String!
+    $url: String!
+  ) {
+    post(description: $description, url: $url) {
+      id
+      createdAt
+      url
+      description
+    }
+  }
+`;
+
+const CreateLink = () => {
+    const [formState, setFormState] = useState({
+        description: '',
+        url: ''
+    });
+
+    const [createLink] = useMutation(CREATE_LINK_MUTATION, {
+        variables: {
+            description: formState.description,
+            url: formState.url
+        }
+    });
+
+    return (
+        <div>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    createLink();
+                }}
+            >
+                <div className="flex flex-column mt3">
+                    <input
+                        className="mb2"
+                        value={formState.description}
+                        onChange={(e) =>
+                            setFormState({
+                                ...formState,
+                                description: e.target.value
+                            })
+                        }
+                        type="text"
+                        placeholder="A description for the link"
+                    />
+                    <input
+                        className="mb2"
+                        value={formState.url}
+                        onChange={(e) =>
+                            setFormState({
+                                ...formState,
+                                url: e.target.value
+                            })
+                        }
+                        type="text"
+                        placeholder="The URL for the link"
+                    />
+                </div>
+                <button type="submit">Submit</button>
+            </form>
+        </div>
+    );
+};
+
+export default CreateLink;

client/src/components/Link.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Link = (props) => {
+    const { link } = props;
+    return (
+        <div>
+            <div>
+                {link.id} - {link.description} ({link.url})
+      </div>
+        </div>
+    );
+};
+
+export default Link;

client/src/components/LinkList.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Link from './Link';
+
+import { useQuery, gql } from '@apollo/client';
+
+const FEED_QUERY = gql`
+  {
+    feed {
+      id
+      links {
+        id
+        createdAt
+        url
+        description
+      }
+    }
+  }
+`;
+
+const LinkList = () => {
+    const { data } = useQuery(FEED_QUERY);
+
+    return (
+        <div>
+            {data && (
+                <>
+                    {data.feed.links.map((link) => (
+                        <Link key={link.id} link={link} />
+                    ))}
+                </>
+            )}
+        </div>
+    );
+};
+
+// const LinkList = () => {
+//     const linksToRender = [
+//         {
+//             id: '1',
+//             description:
+//                 'Link first😎',
+//             url: 'https://prisma.io'
+//         },
+//         {
+//             id: '2',
+//             description: 'Link zwei',
+//             url: 'https://www.apollographql.com/docs/react/'
+//         }
+//     ];
+
+//     return (
+//         <div>
+//             {linksToRender.map((link) => (
+//                 <Link key={link.id} link={link} />
+//             ))}
+//         </div>
+//     );
+// };
+
+export default LinkList;