learn: multiple fixes (#2158)

hasura · May 14, 2019 · 8e0db21 · 8e0db21
1 parent c6f40df
commit 8e0db21
Show file tree

Hide file tree

Showing 33 changed files with 387 additions and 219 deletions.
diff --git a/community/learn/README.md b/community/learn/README.md
@@ -0,0 +1,50 @@
+# learn.hasura.io
+
+Real world GraphQL tutorials for frontend developers with deadlines!
+With these tutorials, you will move from the basics of GraphQL to building a real-time application in 2 hours
+
+There are three different series:
+
+#### Frontend
+
+- [React](https://learn.hasura.io/graphql/react)
+- [Vue](https://learn.hasura.io/graphql/vue)
+- Angular (coming soon)
+- Elm (coming soon)
+- ReasonML (coming soon)
+
+#### Mobile
+
+- [React Native](https://learn.hasura.io/graphql/react-native)
+- [iOS](https://learn.hasura.io/graphql/ios)
+- Android (coming soon)
+- Flutter (coming soon)
+
+#### Backend
+
+- [Introduction to Hasura](https://learn.hasura.io/graphql/hasura)
+- Postgres Basics (coming soon)
+
+## What you will learn
+
+### Frontend
+- GraphQL vs REST 
+- GraphQL Queries, Mutations, Subscriptions
+- Setting up a GraphQL Client with Apollo
+- Integrating GraphQL Queries in the app
+- Integrating GraphQL Mutations with Query Variables
+- Integrating Mutations to update, delete and bulk delete
+- Managing Local Cache after a GraphQL Mutation
+- Optismistic UI updates for responsive user experience
+- Using Subscriptions
+- Realtime feed with notifications
+
+### Backend
+
+- Hasura Basics
+- Postgres Data Modelling
+- Authorization
+- Authentication
+- Custom business logic
+- Remote Schemas, Event Triggers
+
diff --git a/community/learn/graphql-tutorials/README.md b/community/learn/graphql-tutorials/README.md
@@ -2,4 +2,4 @@
 
 Visit [learn.hasura.io](https://learn.hasura.io) to learn how to integrate GraphQL APIs with your favourite web/mobile framework in a real world scenario.
 
-_This directory contains all the source code the powers GraphQL Turtorials_
+_This directory contains all the source code that powers GraphQL Turtorials_
diff --git a/community/learn/graphql-tutorials/backend-services/auth-server/Dockerfile b/community/learn/graphql-tutorials/backend-services/auth-server/Dockerfile
@@ -6,12 +6,12 @@ RUN chown node:node /opt/app
 
 WORKDIR /opt/app
 
-COPY --chown=node:node package.json .
+COPY package.json .
 
 USER node
 
 RUN npm install
 
-COPY --chown=node:node . .
+COPY . .
 
 CMD npm start
diff --git a/community/learn/graphql-tutorials/backend-services/auth-server/controllers/user.js b/community/learn/graphql-tutorials/backend-services/auth-server/controllers/user.js
@@ -28,7 +28,8 @@ exports.postLogin = async (req, res, next) => {
           "x-hasura-user-id": '' + user.id,
           "x-hasura-default-role": "user",
           "x-hasura-role": "user"
-        }
+        },
+        exp: Math.floor(Date.now() / 1000) + (24 * 60 * 60)
       }
 
       handleResponse(res, 200, {

diff --git a/community/learn/graphql-tutorials/backend-services/auth-webhook/Dockerfile b/community/learn/graphql-tutorials/backend-services/auth-webhook/Dockerfile
@@ -6,13 +6,13 @@ RUN chown node:node /opt/app
 
 WORKDIR /opt/app
 
-COPY --chown=node:node package.json .
+COPY package.json .
 
 USER node
 
 RUN npm install
 
-COPY --chown=node:node . .
+COPY . .
 
 RUN curl https://graphql-tutorials.auth0.com/pem > graphql-tutorials.pem
 

diff --git a/community/learn/graphql-tutorials/backend-services/auth-webhook/server.js b/community/learn/graphql-tutorials/backend-services/auth-webhook/server.js
@@ -6,7 +6,6 @@ var app = express();
 var port = process.env.PORT || 8080;
 var jwt = require('jsonwebtoken');
 var fs = require('fs');
-const utf8 = require('utf8');
 
 const AUTH0_JWT_SECRET = process.env.AUTH0_JWT_SECRET ? process.env.AUTH0_JWT_SECRET : fs.readFileSync('./graphql-tutorials.pem');
 const AUTH0_ISSUER = 'https://graphql-tutorials.auth0.com/';

diff --git a/...unity/learn/graphql-tutorials/backend-services/auth0/auth0_post_user_registration_hook.js b/...unity/learn/graphql-tutorials/backend-services/auth0/auth0_post_user_registration_hook.js
@@ -10,7 +10,7 @@ module.exports = function (user, context, cb) {
       query: `
         mutation($userId: String!, $nickname: String) {
           insert_users(
-            objects: [{ auth0_id: $userId, name: $nickname }]
+            objects: [{ id: $userId, name: $nickname }]
             on_conflict: {
               constraint: users_pkey
               update_columns: [last_seen, name]

diff --git a/community/learn/graphql-tutorials/backend-services/auth0/auth0_rule_insert_user.js b/community/learn/graphql-tutorials/backend-services/auth0/auth0_rule_insert_user.js
@@ -1,15 +1,15 @@
 function (user, context, callback) {
-	const userId = user.user_id;
-	const nickname = user.nickname;
-	
-	request.post({
-		headers: {'content-type' : 'application/json', 'x-hasura-admin-secret': ''},
-		url:     'https://learn.hasura.io/graphql',
-		body:    `{\"query\":\"mutation($userId: String!, $nickname: String) {\\n          insert_users(\\n            objects: [{ auth0_id: $userId, name: $nickname }]\\n            on_conflict: {\\n              constraint: users_pkey\\n              update_columns: [last_seen, name]\\n            }\\n          ) {\\n            affected_rows\\n          }\\n        }\",\"variables\":{\"userId\":\"${userId}\",\"nickname\":\"${nickname}\"}}`
-	}, function(error, response, body){
-		console.log(body);
-		callback(null, user, context);
-	});
-	
-	
+  const userId = user.user_id;
+  const nickname = user.nickname;
+  
+  request.post({
+  headers: {'content-type' : 'application/json', 'x-hasura-admin-secret': ''},
+  url:     'https://learn.hasura.io/graphql',
+  body:    `{\"query\":\"mutation($userId: String!, $nickname: String) {\\n          insert_users(\\n            objects: [{ id: $userId, name: $nickname }]\\n            on_conflict: {\\n              constraint: users_pkey\\n              update_columns: [last_seen, name]\\n            }\\n          ) {\\n            affected_rows\\n          }\\n        }\",\"variables\":{\"userId\":\"${userId}\",\"nickname\":\"${nickname}\"}}`
+}, function(error, response, body){
+    console.log(body);
+    callback(null, user, context);
+});
+  
+  
 }
diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js b/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js
@@ -9,20 +9,22 @@ class TopBanner extends React.Component {
       <div className={'headerWrapper blueBgColor'}>
         <nav className="navbar navbar-default navbarDefault">
           <div className="container">
-            <div className="navbar-header">
-              <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <div className="navbar-header navbarHeader">
+              <div className={'logoWrapper'}>
+                <a href="https://hasura.io/" target="_blank" rel="noopener noreferrer"><img className={'img-responsive'} src={logo} alt={'Hasura logo'} /></a>
+              </div>
+              <button type="button" className="navbar-toggle collapsed navbarToggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                 <span className="sr-only">Toggle navigation</span>
                 <span className="icon-bar"></span>
                 <span className="icon-bar"></span>
                 <span className="icon-bar"></span>
               </button>
-              <div className={'logoWrapper'}>
-                <a href="https://hasura.io/" target="_blank" rel="noopener noreferrer"><img className={'img-responsive'} src={logo} alt={'Hasura logo'} /></a>
-              </div>
             </div>
             <div id="navbar" className="navbar-collapse collapse">
               <ul className="nav navbar-nav navbar-right navBarWrapper">
                 <li className="dropdown">
+                  <div className={'upArrow'}>
+                  </div>
                   {/* eslint-disable-next-line */}
                   <a id="frontend" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">FRONTEND</a>
                   <div aria-labelledby="frontend" className="dropdown-menu dropdownMenu">
@@ -46,7 +48,7 @@ class TopBanner extends React.Component {
                             return (
                               <a href={item.url} target={'_blank'}>
                                 <li key={'frontend'+key} className={item.bgClassName}>
-                                  {item.name}
+                                    {item.name}
                                 </li>
                               </a>
                             );
@@ -63,6 +65,8 @@ class TopBanner extends React.Component {
                   </div>
                 </li>
                 <li className="dropdown">
+                  <div className={'upArrow'}>
+                  </div>
                   {/* eslint-disable-next-line */}
                   <a id="mobile" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MOBILE</a>
                   <div aria-labelledby="mobile" className="dropdown-menu dropdownMenu">
@@ -84,9 +88,11 @@ class TopBanner extends React.Component {
                         {mobileTutorial.map((item, key) => {
                           if(!item.comingSoon) {
                             return (
-                              <li key={'mobile'+ key} className={item.bgClassName}>
-                                {item.name}
-                              </li>
+                              <a href={item.url} target={'_blank'}>
+                                <li key={'mobile'+ key} className={item.bgClassName}>
+                                    {item.name}
+                                </li>
+                              </a>
                             );
                           } else {
                             return (
@@ -101,6 +107,8 @@ class TopBanner extends React.Component {
                   </div>
                 </li>
                 <li className="dropdown">
+                  <div className={'upArrow'}>
+                  </div>
                   {/* eslint-disable-next-line */}
                   <a id="backend" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BACKEND</a>
                   <div aria-labelledby="backend" className="dropdown-menu dropdownMenu">
@@ -122,9 +130,11 @@ class TopBanner extends React.Component {
                         {backendTutorial.map((item, key) => {
                           if(!item.comingSoon) {
                             return (
-                              <li key={'backend'+key} className={item.bgClassName}>
-                                {item.name}
-                              </li>
+                              <a href={item.url} target={'_blank'}>
+                                <li key={'backend'+key} className={item.bgClassName}>
+                                    {item.name}
+                                </li>
+                              </a>
                             );
                           } else {
                             return (

diff --git a/...y/learn/graphql-tutorials/backend-services/homepage/src/components/SubscribeNewsletter.js b/...y/learn/graphql-tutorials/backend-services/homepage/src/components/SubscribeNewsletter.js
@@ -26,7 +26,7 @@ const formProps = {
     error: {
       fontSize: '15px',
       paddingTop: '10px',
-      color: 'red'
+      color: '#fff'
     }
   }
 };
@@ -37,28 +37,26 @@ class SubscribeNewsletter extends React.Component {
     return (
       <div className={'gradientBgColor commonSectionWrapper positionRel'}>
         <div className={'container noPadd'}>
-          <div className={'topBannerWrapper'}>
-            <div className={'col-md-12'}>
-              <div className={'col-md-6 col-sm-12 col-xs-12 noPadd'}>
-                <div className={'sectionHeader'}>
-                  Subscribe to the Hasura newsletter
-                </div>
-                <div className={'sectionDescription'}>
-                  Join the community mailing list to receive updates about the product, company and our OSS work.
-                </div>
-                {/*
-                <div className={'notifyWrapper'}>
-                  <div className={'sectionDescription notifyHeader'}>
-                    Subscribe for updates
-                  </div>
-                  <SubscribeFrom className={"notifyForm"} {...formProps}/>
-                </div>
-                */}
+          <div className={'topBannerWrapper col-md-12'}>
+            <div className={'col-md-6 col-sm-12 col-xs-12 noPadd'}>
+              <div className={'sectionHeader'}>
+                Subscribe to the Hasura newsletter
               </div>
-              <div className={'col-md-6 col-sm-12 col-xs-12 noPadd'}>
-                <div className={'notifyWrapper'}>
-                  <SubscribeFrom className={"notifyForm"} {...formProps}/>
+              <div className={'sectionDescription'}>
+                Join the community mailing list to receive updates about the product, company and our OSS work.
+              </div>
+              {/*
+              <div className={'notifyWrapper'}>
+                <div className={'sectionDescription notifyHeader'}>
+                  Subscribe for updates
                 </div>
+                <SubscribeFrom className={"notifyForm"} {...formProps}/>
+              </div>
+              */}
+            </div>
+            <div className={'col-md-6 col-sm-12 col-xs-12 noPadd'}>
+              <div className={'notifyWrapper'}>
+                <SubscribeFrom className={"notifyForm"} {...formProps}/>
               </div>
             </div>
           </div>

diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/components/TopBanner.js b/community/learn/graphql-tutorials/backend-services/homepage/src/components/TopBanner.js
@@ -7,22 +7,20 @@ class TopBanner extends React.Component {
     return (
       <div className={'gradientBgColor commonSectionWrapper positionRel'}>
         <div className={'container noPadd'}>
-          <div className={'topBannerWrapper'}>
-            <div className={'col-md-12'}>
-              <div className={'col-md-6 col-sm-6 col-xs-12 noPadd'}>
-                <div className={'pageHeader'}>
-                  Real world GraphQL tutorials for frontend developers with deadlines!
-                </div>
-                <div className={'whiteLineSeperator'}>
-                </div>
-                <div className={'sectionDescription'}>
-                  With these <a href="https://github.com/hasura/graphql-engine/tree/master/community/learn">open-source</a> tutorials, you will move from the basics of GraphQL to building a real-time application in 2 hours
-                </div>
+          <div className={'topBannerWrapper col-md-12'}>
+            <div className={'col-md-6 col-sm-6 col-xs-12 noPadd'}>
+              <div className={'pageHeader'}>
+                Real world GraphQL tutorials for frontend developers with deadlines!
               </div>
-              <div className={'col-md-6 col-sm-6 col-xs-12 noPadd'}>
-                <div className={'topBannerImg'}>
-                  <img className={'img-responsive'} src={hasuraDumbledore} alt={'Hasura dumbledore'}/>
-                </div>
+              <div className={'whiteLineSeperator'}>
+              </div>
+              <div className={'sectionDescription'}>
+                With these <a href="https://github.com/hasura/graphql-engine/tree/master/community/learn">open-source</a> tutorials, you will move from the basics of GraphQL to building a real-time application in 2 hours
+              </div>
+            </div>
+            <div className={'col-md-6 col-sm-6 col-xs-12 noPadd'}>
+              <div className={'topBannerImg'}>
+                <img className={'img-responsive'} src={hasuraDumbledore} alt={'Hasura dumbledore'}/>
               </div>
             </div>
           </div>

diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/components/WillLearn.js b/community/learn/graphql-tutorials/backend-services/homepage/src/components/WillLearn.js
@@ -46,21 +46,25 @@ class WillLearn extends React.Component {
                 2 hour GraphQL Tutorial Series to teach you what GraphQL is and how to integrate GraphQL APIs with your favourite web/mobile framework.
               </div>
             </div>
-            <div className={'willLearnTutorial wd100'}>
-              <div className={'col-md-8 col-sm-12 col-xs-12'}>
-                <div className={'willLearnList wd100'}>
-                  <div className={'willLearnHeader'}>
-                    Frontend Tutorials (Mobile & Web)
+            <div className={'willLearnTutorial wd100 flexBoxWrapper'}>
+              <div className={'col-md-8 col-sm-12 col-xs-12 flexContainer'}>
+                <div className={'flexList'}>
+                  <div className={'willLearnList wd100 flexAlign'}>
+                    <div className={'willLearnHeader'}>
+                      Frontend Tutorials <span> (Mobile & Web)</span>
+                    </div>
+                    {frontend}
                   </div>
-                  {frontend}
                 </div>
               </div>
-              <div className={'col-md-4 col-sm-12 col-xs-12'}>
-                <div className={'willLearnList wd100'}>
-                  <div className={'willLearnHeader'}>
-                    Backend Tutorials
+              <div className={'col-md-4 col-sm-12 col-xs-12 flexContainer'}>
+                <div className={'flexList'}>
+                  <div className={'willLearnList wd100 flexAlign'}>
+                    <div className={'willLearnHeader'}>
+                      Backend Tutorials
+                    </div>
+                    {backend}
                   </div>
-                  {backend}
                 </div>
               </div>
             </div>

diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/favicon.png b/community/learn/graphql-tutorials/backend-services/homepage/src/favicon.png