switch to hooks

package.json

@@ -7,18 +7,26 @@
     "apollo-link-context": "1.0.7",
     "apollo-link-ws": "1.0.7",
     "graphql": "0.13.1",
-    "react": "16.2.0",
+    "react": "16.8.4",
     "react-apollo": "2.1.0",
-    "react-dom": "16.2.0",
+    "react-dom": "16.8.4",
+    "react-hanger": "^1.1.4",
     "react-router": "4.2.0",
     "react-router-dom": "4.2.2",
-    "react-scripts": "1.1.1",
+    "react-scripts": "2.1.8",
+    "react-use-form-state": "^0.9.0",
     "subscriptions-transport-ws": "0.9.7"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

server/prisma/prisma.yml

@@ -1,5 +1,5 @@
 # Specifies the HTTP endpoint of your Prisma API.
-endpoint: ''
+endpoint: 'http://192.168.99.100:4466'
 
 # Defines your models, each model is mapped to the database as a table.
 datamodel: datamodel.prisma
@@ -12,4 +12,7 @@ generate:
 # Ensures Prisma client is re-generated after a datamodel change.
 hooks:
   post-deploy:
-    - prisma generate
+    - prisma generate
+
+seed:
+  run: node ./prisma/seed.js

server/prisma/seed.js

@@ -0,0 +1,70 @@
+const {prisma} = require('../src/generated/prisma-client')
+const bcrypt = require('bcryptjs')
+
+async function main() {
+    const password = await bcrypt.hash('password', 10)
+    await prisma.createUser({
+        email: '[email protected]',
+        name: 'James Franco',
+        password,
+        links: {
+            create: [
+                {
+                    url: 'https://www.google.com',
+                    description: 'Search Engine',
+                },
+                {
+                    url: 'https://www.twitter.com',
+                    description: 'Social Network Twitter',
+                },
+                {
+                    url: 'https://www.facebook.com',
+                    description: 'Social Network Facebook',
+                },
+                {
+                    url: 'https://www.reddit.com',
+                    description: 'Like hacker news reddit',
+                },
+                {
+                    url: 'https://www.news.ycombinator.com',
+                    description: 'Like this website hacker news',
+                },
+                {
+                    url: 'https://www.react.com',
+                    description: 'front end functional - React',
+                },
+            ]
+        }
+    })
+    await prisma.createUser({
+        name: 'Jason Segel',
+        email: "[email protected]",
+        password,
+        links: {
+            create: [
+                {
+                    url: 'https://www.vuejs.org',
+                    description: 'apparently successor to react',
+                },
+                {
+                    url: 'https://elixir-lang.org',
+                    description: 'Elixir',
+                },
+                {
+                    url: 'https://www.elm-lang.org',
+                    description: 'Elm',
+                },
+                {
+                    url: 'https://www.craiglist.org',
+                    description: 'Craigslist',
+                },
+                {
+                    url: 'https://ebay.com',
+                    description: 'Ebay',
+                },
+            ]
+        }
+    })
+}
+
+main()

server/src/generated/prisma-client/index.js

@@ -20,21 +20,6 @@ var models = [
 exports.Prisma = prisma_lib_1.makePrismaClientClass({
   typeDefs,
   models,
-  endpoint: ``,
-  secret: `mysecret123`
+  endpoint: `http://192.168.99.100:4466`
 });
 exports.prisma = new exports.Prisma();
-var models = [
-  {
-    name: "Link",
-    embedded: false
-  },
-  {
-    name: "User",
-    embedded: false
-  },
-  {
-    name: "Vote",
-    embedded: false
-  }
-];

server/src/resolvers/Mutation.js

@@ -6,6 +6,7 @@ function post(parent, args, context) {
   return context.prisma.createLink({
     url: args.url,
     description: args.description,
+    postedBy: { connect: { id: userId } },
   })
 }
 

src/components/App.js

@@ -5,25 +5,24 @@ import Header from './Header'
 import { Switch, Route, Redirect } from 'react-router-dom'
 import Login from './Login'
 import Search from './Search'
+import '../styles/App.css'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="center w85">
-        <Header />
-        <div className="ph3 pv1 background-gray">
-          <Switch>
-            <Route exact path="/" render={() => <Redirect to="/new/1" />} />
-            <Route exact path="/create" component={CreateLink} />
-            <Route exact path="/login" component={Login} />
-            <Route exact path="/search" component={Search} />
-            <Route exact path="/top" component={LinkList} />
-            <Route exact path="/new/:page" component={LinkList} />
-          </Switch>
-        </div>
+function App() {
+  return (
+    <div className="center w85">
+      <Header />
+      <div className="ph3 pv1 background-gray">
+        <Switch>
+          <Route exact path="/" render={() => <Redirect to="/new/1" />} />
+          <Route exact path="/create" component={CreateLink} />
+          <Route exact path="/login" component={Login} />
+          <Route exact path="/search" component={Search} />
+          <Route exact path="/top" component={LinkList} />
+          <Route exact path="/new/:page" component={LinkList} />
+        </Switch>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default App

src/components/CreateLink.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { Mutation } from 'react-apollo'
 import gql from 'graphql-tag'
 import { FEED_QUERY } from './LinkList'
@@ -15,57 +15,52 @@ const POST_MUTATION = gql`
   }
 `
 
-class CreateLink extends Component {
-  state = {
-    description: '',
-    url: '',
-  }
+function CreateLink() {
+  const [description, setDescription] = useState()
+  const [url, setUrl] = useState()
 
-  render() {
-    const { description, url } = this.state
-    return (
-      <div>
-        <div className="flex flex-column mt3">
-          <input
-            className="mb2"
-            value={description}
-            onChange={e => this.setState({ description: e.target.value })}
-            type="text"
-            placeholder="A description for the link"
-          />
-          <input
-            className="mb2"
-            value={url}
-            onChange={e => this.setState({ url: e.target.value })}
-            type="text"
-            placeholder="The URL for the link"
-          />
-        </div>
-        <Mutation
-          mutation={POST_MUTATION}
-          variables={{ description, url }}
-          onCompleted={() => this.props.history.push('/new/1')}
-          update={(store, { data: { post } }) => {
-            const first = LINKS_PER_PAGE
-            const skip = 0
-            const orderBy = 'createdAt_DESC'
-            const data = store.readQuery({
-              query: FEED_QUERY,
-              variables: { first, skip, orderBy },
-            })
-            data.feed.links.unshift(post)
-            store.writeQuery({
-              query: FEED_QUERY,
-              data,
-              variables: { first, skip, orderBy },
-            })
-          }}
-        >
-          {postMutation => <button onClick={postMutation}>Submit</button>}
-        </Mutation>
+  return (
+    <div>
+      <div className="flex flex-column mt3">
+        <input
+          className="mb2"
+          value={description}
+          onChange={e => setDescription(e.target.value)}
+          type="text"
+          placeholder="A description for the link"
+        />
+        <input
+          className="mb2"
+          value={url}
+          onChange={e => setUrl(e.target.value)}
+          type="text"
+          placeholder="The URL for the link"
+        />
       </div>
-    )
-  }
+      <Mutation
+        mutation={POST_MUTATION}
+        variables={{ description, url }}
+        onCompleted={() => this.props.history.push('/new/1')}
+        update={(store, { data: { post } }) => {
+          const first = LINKS_PER_PAGE
+          const skip = 0
+          const orderBy = 'createdAt_DESC'
+          const data = store.readQuery({
+            query: FEED_QUERY,
+            variables: { first, skip, orderBy },
+          })
+          data.feed.links.unshift(post)
+          store.writeQuery({
+            query: FEED_QUERY,
+            data,
+            variables: { first, skip, orderBy },
+          })
+        }}
+      >
+        {postMutation => <button onClick={postMutation}>Submit</button>}
+      </Mutation>
+    </div>
+  )
 }
 
-export default CreateLink
+export default CreateLink