Material ui

.gitignore

@@ -27,3 +27,4 @@ graphql.schema.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vscode

.prettierignore

@@ -0,0 +1 @@
+package.json

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "files.exclude": {
+    "__error": "Not found",
+    "dist": true,
+    "node_modules": true,
+    "yarn-error.log": true,
+    "workspace.code-workspace": true,
+    "yarn.lock": true,
+    "build": true,
+    ".vscode": true,
+    "app\\node_modules": true,
+    "server\\yarn.lock": true,
+    "server\\node_modules": true
+  }
+}

Makefile

@@ -0,0 +1,4 @@
+.PHONY: start-everything-local
+start-everything-local:
+	docker-machine start default
+	docker-compose up -d -f server/docker-compose-yml

README.md

@@ -1,91 +0,0 @@
-# React & Apollo Tutorial
-
-This is the sample project that belongs to the [React & Apollo Tutorial](https://www.howtographql.com/react-apollo/0-introduction/) on How to GraphQL.
-
-## How to use
-
-### 1. Clone repository
-
-```sh
-git clone https://github.com/howtographql/react-apollo/
-```
-
-### 2. Install dependencies & Deploy the Prisma database API
-
-To install the Prisma CLI globally with Yarn, use the following command:
-```sh
-yarn global add prisma
-```
-
-Also, run the following commands:
-```sh
-cd react-apollo/server
-yarn install
-prisma deploy
-```
-
-Then, follow these steps in the interactive CLI wizard:
-
-1. Select **Demo server**
-1. **Authenticate** with Prisma Cloud in your browser (if necessary)
-1. Back in your terminal, **confirm all suggested values**
-
-<details>
- <summary>Alternative: Run Prisma locally via Docker</summary>
-
-1. Ensure you have Docker installed on your machine. If not, you can get it from [here](https://store.docker.com/search?offering=community&type=edition).
-1. Create `docker-compose.yml` for MySQL (see [here](https://www.prisma.io/docs/prisma-server/database-connector-POSTGRES-jgfr/) for Postgres):
-    ```yml
-    version: '3'
-    services:
-      prisma:
-        image: prismagraphql/prisma:1.23
-        restart: always
-        ports:
-        - "4466:4466"
-        environment:
-          PRISMA_CONFIG: |
-            port: 4466
-            databases:
-              default:
-                connector: mysql
-                host: mysql
-                port: 3306
-                user: root
-                password: prisma
-                migrations: true
-      mysql:
-        image: mysql:5.7
-        restart: always
-        environment:
-          MYSQL_ROOT_PASSWORD: prisma
-        volumes:
-          - mysql:/var/lib/mysql
-    volumes:
-      mysql:
-    ```
-1. Run `docker-compose up -d`
-1. Run `prisma deploy`
-
-</details>
-
-### 3. Start the server
-
-To start the server, all you need to do is execute the `start` script by running the following command inside the `server` directory:
-
-```sh
-yarn start
-```
-
-> **Note**: If you want to interact with the GraphQL API of the server inside a [GraphQL Playground](https://github.com/prisma/graphql-playground), you can navigate to [http://localhost:4000](http://localhost:4000).
-
-### 4. Run the app
-
-Now that the server is running, you can start the React app as well. The commands need to be run in a new terminal tab/window inside the root directory `react-apollo` (because the current tab is blocked by the process running the server):
-
-```sh
-yarn install
-yarn start
-```
-
-You can now open your browser and use the app on [http://localhost:3000](http://localhost:3000).

package.json

@@ -3,22 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^3.9.3",
+    "@material-ui/icons": "^3.0.2",
     "apollo-boost": "0.1.4",
     "apollo-link-context": "1.0.7",
     "apollo-link-ws": "1.0.7",
+    "classnames": "^2.2.6",
     "graphql": "0.13.1",
-    "react": "16.2.0",
+    "react": "16.8.4",
     "react-apollo": "2.1.0",
-    "react-dom": "16.2.0",
-    "react-router": "4.2.0",
-    "react-router-dom": "4.2.2",
-    "react-scripts": "1.1.1",
+    "react-dom": "16.8.4",
+    "react-hanger": "^1.1.4",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
+    "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"
+  ]
 }

public/index.html

@@ -10,7 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.2.1/css/tachyons.min.css"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

server/package.json

@@ -15,4 +15,4 @@
   "devDependencies": {
     "prisma": "^1.23.0"
   }
-}
+}

server/prisma/docker-compose.yml

@@ -0,0 +1,29 @@
+version: '3'
+services:
+  prisma:
+    image: prismagraphql/prisma:1.20
+    ports:
+      - '4466:4466'
+    environment:
+      PRISMA_CONFIG: |
+        port: 4466
+        # uncomment the next line and provide the env var PRISMA_MANAGEMENT_API_SECRET=my-secret to activate cluster security
+        managementApiSecret: my-secret
+        databases:
+          default:
+            connector: mysql
+            host: mysql
+            port: 3306
+            user: root
+            password: prisma
+            migrations: true
+            rawAccess: true
+  mysql:
+    image: mysql:5.7
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: prisma
+    volumes:
+      - mysql:/var/lib/mysql
+volumes:
+  mysql:

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: 'jamesfranco@gmail.com',
+        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: "jasonsegel@gmail.com",
+        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 } },
   })
 }
 
@@ -21,7 +22,7 @@ async function signup(parent, args, context) {
   }
 }
 
-async function login(parent, args, context) {
+async function signin(parent, args, context) {
   const user = await context.prisma.user({ email: args.email })
   if (!user) {
     throw new Error('No such user found')
@@ -57,6 +58,6 @@ async function vote(parent, args, context) {
 module.exports = {
   post,
   signup,
-  login,
+  signin,
   vote,
 }

server/src/schema.graphql

@@ -22,7 +22,7 @@ type Feed {
 type Mutation {
   post(url: String!, description: String!): Link!
   signup(email: String!, password: String!, name: String!): AuthPayload
-  login(email: String!, password: String!): AuthPayload
+  signin(email: String!, password: String!): AuthPayload
   vote(linkId: ID!): Vote!
 }