admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored app.js and index.js to follow hasura examples of managing state. Now using hooks for user auth and only user auth.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-05 21:03:40 -08:00
parent b44714eb59
commit 2842af38b7
23 changed files with 696 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/.env
View File

@@ -1 +0,0 @@
API_URL=https://bodyshop-dev-db.herokuapp.com/v1/graphql

2
client/package.json
View File

@@ -2,7 +2,7 @@
"name": "bodyshop",
"version": "0.1.0",
"private": true,
"license": "Copyright Snapt Software (C) 2019",
"license": "UNLICENSED",
"dependencies": {
"antd": "^3.26.0",
"apollo-boost": "^0.4.4",

1
client/src/.env Normal file
View File

@@ -0,0 +1 @@
REACT_APP_GRAPHQL_ENDPOINT=https://bodyshop-dev-db.herokuapp.com/v1/graphql

91
client/src/App/App.container.jsx
View File

@@ -1,36 +1,73 @@
import React from "react";
import { Mutation, Query } from "react-apollo";
import { gql } from "apollo-boost";
//Baselined on https://blog.hasura.io/authentication-and-authorization-using-hasura-and-firebase/
import React, { useState, useEffect } from "react";
import firebase from "../firebase/firebase.utils";
import App from "./App";
import { Spin } from "antd";
const SET_CURRENT_USER = gql`
mutation SetCurrentUser($user: User!) {
setCurrentUser(user: $user) @client
export default function Auth() {
const [authState, setAuthState] = useState({ status: "loading" });
useEffect(() => {
return firebase.auth().onAuthStateChanged(async user => {
console.log("user", user);
if (user) {
const token = await user.getIdToken();
const idTokenResult = await user.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
if (hasuraClaim) {
setAuthState({ status: "in", user, token });
} else {
// Check if refresh is required.
const metadataRef = firebase
.database()
.ref("metadata/" + user.uid + "/refreshTime");
metadataRef.on("value", async () => {
// Force refresh to pick up the latest custom claims changes.
const token = await user.getIdToken(true);
setAuthState({ status: "in", user, token });
});
}
`;
const GET_CURRENT_USER = gql`
{
currentUser @client
} else {
setAuthState({ status: "out" });
}
`;
});
}, []);
const AppContainer = () => (
<Query query={GET_CURRENT_USER}>
{({ data: { currentUser } }) => (
<Mutation mutation={SET_CURRENT_USER}>
{setCurrentUser => (
<App
currentUser={currentUser}
setCurrentUser={user => {
setCurrentUser({ variables: { user } });
}}
/>
const signOut = async () => {
try {
setAuthState({ status: "loading" });
await firebase.auth().signOut();
setAuthState({ status: "out" });
} catch (error) {
console.log(error);
}
};
let content;
if (authState.status === "loading") {
content = <Spin size="large" />;
} else {
content = (
<>
<div>
{authState.status === "in" ? (
<div>
<h2>Welcome, {authState.user.displayName}</h2>
<button onClick={signOut}>Sign out</button>
</div>
) : (
<div>Sign in</div>
)}
</Mutation>
)}
</Query>
</div>
<App authState={authState} />
</>
);
}
export default AppContainer;
return <div className="auth">{content}</div>;
}

23
client/src/App/App.css
View File

@@ -1,24 +1 @@
@import '~antd/dist/antd.css';
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #09d3ac;
}

96
client/src/App/App.js
View File

@@ -1,88 +1,46 @@
import React from "react";
import { ApolloProvider } from "react-apollo";
import { gql } from "apollo-boost";
import { HttpLink } from "apollo-link-http";
import { getMainDefinition } from "apollo-utilities";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
//Styling imports
import "./App.css";
import { auth, createUserProfileDocument } from "../firebase/firebase.utils";
// import { gql } from "apollo-boost";
import firebase from "../firebase/firebase.utils"
import HeaderAppBar from "../components/header-app-bar/header-app-bar.component";
import SignIn from "../components/sign-in/sign-in.component";
import initialState from "../graphql/initial-state";
// const SET_CURRENT_USER = gql`
// mutation SetCurrentUser($user: User!) {
// setCurrentUser(user: $user) @client
// }
// `;
const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT || "https://bodyshop-dev-db.herokuapp.com/v1/graphql";
// const GET_CURRENT_USER = gql`
// {
// currentUser @client
// }
// `;
export default function App({ authState }) {
console.log("graphqlEndpoint", graphqlEndpoint);
class App extends React.Component {
unsubscribeFromAuth = null;
const isIn = authState.status === "in";
componentDidMount() {
const { setCurrentUser } = this.props;
this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
if (userAuth) {
const token = await userAuth.getIdToken();
console.log("User auth token", token);
const idTokenResult = await userAuth.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
const headers = isIn ? { Authorization: `Bearer ${authState.token}` } : {};
if (hasuraClaim) {
console.log("status should be in1", hasuraClaim);
//setAuthState({ status: "in", user, token });
} else {
// Check if refresh is required.
const metadataRef = firebase
.database()
.ref("metadata/" + userAuth.uid + "/refreshTime");
metadataRef.on("value", async () => {
// Force refresh to pick up the latest custom claims changes.
const token = await userAuth.getIdToken(true);
//setAuthState({ status: "in", user, token });
console.log("status should be in2");
const httpLink = new HttpLink({
uri: graphqlEndpoint,
headers
});
}
} else {
console.log("else statement.")
//setAuthState({ status: "out" });
}
// if (userAuth) {
// const userRef = await createUserProfileDocument(userAuth);
// userRef.onSnapshot(snapShot => {
// setCurrentUser({
// id: snapShot.id,
// ...snapShot.data()
// });
// });
// } else {
// setCurrentUser(userAuth);
// }
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
});
}
componentWillUnmount() {
this.unsubscribeFromAuth();
}
client.writeData({
data: initialState
});
render() {
console.log(client)
return (
<div>
<ApolloProvider client={client}>
<HeaderAppBar />
{this.props.currentUser ? "Logged In!" : <SignIn />}
</div>
<SignIn />
</ApolloProvider>
);
}
}
export default App;

4
client/src/graphql/initial-state.js
View File

@@ -1,5 +1,3 @@
export default {
currentSelectedNavItem: null,
currentUser: null,
token: null
currentSelectedNavItem: "wat",
};

3
client/src/index.js
View File

@@ -8,13 +8,14 @@ import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-boost";
import { typeDefs, resolvers } from "./graphql/resolvers";
import initialState from "./graphql/initial-state";
// require('dotenv').config()
import * as serviceWorker from "./serviceWorker";
import "./index.css";
import { default as App } from "./App/App.container";
require("dotenv").config();
const httpLink = createHttpLink({
uri: "https://bodyshop-dev-db.herokuapp.com/v1/graphql"
});

843
client/yarn.lock
View File

File diff suppressed because it is too large Load Diff

3
hasura/migrations/1575607977672_create_table_public_masterdata/down.yaml Normal file
View File

@@ -0,0 +1,3 @@
- args:
sql: DROP TABLE "public"."masterdata"
type: run_sql

8
hasura/migrations/1575607977672_create_table_public_masterdata/up.yaml Normal file
View File

@@ -0,0 +1,8 @@
- args:
sql: CREATE TABLE "public"."masterdata"("key" text NOT NULL, "value" jsonb NOT
NULL, PRIMARY KEY ("key") , UNIQUE ("key"));
type: run_sql
- args:
name: masterdata
schema: public
type: add_existing_table_or_view

6
hasura/migrations/1575607993362_update_permission_anonymous_public_table_masterdata/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: anonymous
table:
name: masterdata
schema: public
type: drop_insert_permission

14
hasura/migrations/1575607993362_update_permission_anonymous_public_table_masterdata/up.yaml Normal file
View File

@@ -0,0 +1,14 @@
- args:
permission:
allow_upsert: true
check: {}
columns: []
localPresets:
- key: ""
value: ""
set: {}
role: anonymous
table:
name: masterdata
schema: public
type: create_insert_permission

19
hasura/migrations/1575608000977_update_permission_anonymous_public_table_masterdata/down.yaml Normal file
View File

@@ -0,0 +1,19 @@
- args:
role: anonymous
table:
name: masterdata
schema: public
type: drop_insert_permission
- args:
permission:
check: {}
columns: []
localPresets:
- key: ""
value: ""
set: {}
role: anonymous
table:
name: masterdata
schema: public
type: create_insert_permission

21
hasura/migrations/1575608000977_update_permission_anonymous_public_table_masterdata/up.yaml Normal file
View File

@@ -0,0 +1,21 @@
- args:
role: anonymous
table:
name: masterdata
schema: public
type: drop_insert_permission
- args:
permission:
check: {}
columns:
- value
- key
localPresets:
- key: ""
value: ""
set: {}
role: anonymous
table:
name: masterdata
schema: public
type: create_insert_permission

19
hasura/migrations/1575608013056_update_permission_anonymous_public_table_masterdata/down.yaml Normal file
View File

@@ -0,0 +1,19 @@
- args:
role: anonymous
table:
name: masterdata
schema: public
type: drop_insert_permission
- args:
permission:
check: {}
columns: []
localPresets:
- key: ""
value: ""
set: {}
role: anonymous
table:
name: masterdata
schema: public
type: create_insert_permission

19
hasura/migrations/1575608013056_update_permission_anonymous_public_table_masterdata/up.yaml Normal file
View File

@@ -0,0 +1,19 @@
- args:
role: anonymous
table:
name: masterdata
schema: public
type: drop_insert_permission
- args:
permission:
check: {}
columns: []
localPresets:
- key: ""
value: ""
set: {}
role: anonymous
table:
name: masterdata
schema: public
type: create_insert_permission

13
hasura/migrations/1575608025216_delete_permission_anonymous_public_table_masterdata/down.yaml Normal file
View File

@@ -0,0 +1,13 @@
- args:
permission:
check: {}
columns: []
localPresets:
- key: ""
value: ""
set: {}
role: anonymous
table:
name: masterdata
schema: public
type: create_insert_permission

6
hasura/migrations/1575608025216_delete_permission_anonymous_public_table_masterdata/up.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: anonymous
table:
name: masterdata
schema: public
type: drop_insert_permission

6
hasura/migrations/1575608039178_update_permission_user_public_table_masterdata/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: user
table:
name: masterdata
schema: public
type: drop_select_permission

13
hasura/migrations/1575608039178_update_permission_user_public_table_masterdata/up.yaml Normal file
View File

@@ -0,0 +1,13 @@
- args:
permission:
allow_aggregations: false
columns:
- value
- key
filter: {}
limit: null
role: user
table:
name: masterdata
schema: public
type: create_select_permission

6
hasura/migrations/1575608057441_update_permission_anonymous_public_table_masterdata/down.yaml Normal file
View File

@@ -0,0 +1,6 @@
- args:
role: anonymous
table:
name: masterdata
schema: public
type: drop_select_permission

13
hasura/migrations/1575608057441_update_permission_anonymous_public_table_masterdata/up.yaml Normal file
View File

@@ -0,0 +1,13 @@
- args:
permission:
allow_aggregations: false
columns:
- value
- key
filter: {}
limit: null
role: anonymous
table:
name: masterdata
schema: public
type: create_select_permission