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

Fixed all firebase login issues. Added private routes. Reconfigured components and reorganized project.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-06 16:51:43 -08:00
parent 1176b62d0b
commit 0de42d3fee
19 changed files with 232 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,16 +3,13 @@
import React, { useState, useEffect } from "react";
import firebase from "../firebase/firebase.utils";
import App from "./App";
import { Spin } from "antd";
import { gql } from "apollo-boost";
import { useMutation } from "@apollo/react-hooks";
import { HttpLink } from "apollo-link-http";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
//import gql from "graphql-tag";
// on_conflict: { constraint: users_pkey, update_columns: [authid] }
import Spin from '../components/loading-spinner/loading-spinner.component'
const UPSERT_USER = gql`
mutation upsert_user($authEmail: String!, $authToken: String!) {
@@ -36,9 +33,6 @@ const client = new ApolloClient({
export default function Auth() {
const [authState, setAuthState] = useState({ status: "loading" });
// const [upsertUser] = useMutation(UPSERT_USER, {
// client
// });
useEffect(() => {
return firebase.auth().onAuthStateChanged(async user => {
@@ -57,7 +51,6 @@ export default function Auth() {
const idTokenResult = await user.getIdTokenResult();
const hasuraClaim =
idTokenResult.claims["https://hasura.io/jwt/claims"];
console.log("idTokenResult", idTokenResult);
if (hasuraClaim) {
setAuthState({ status: "in", user, token });
} else {
@@ -89,25 +82,14 @@ export default function Auth() {
let content;
if (authState.status === "loading") {
content = <Spin size="large" />;
content = <Spin />;
} else {
content = (
<>
<div>
{authState.status === "in" ? (
<div>
<h2>Welcome, {authState.user.displayName}</h2>
<button onClick={signOut}>Sign out</button>
</div>
) : (
<div>Sign in</div>
)}
</div>
<App authState={authState} />
</>
);
}
return <div className="auth">{content}</div>;
return <div className="app-container">{content}</div>;
}

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

@@ -1,19 +1,21 @@
import React from "react";
import { Switch, Route } from "react-router";
import { ApolloProvider } from "react-apollo";
import { HttpLink } from "apollo-link-http";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { resolvers, typeDefs } from "../graphql/resolvers";
import initialState from "../graphql/initial-state";
//Styling imports
import "./App.css";
import HeaderAppBarContainer from "../components/header-app-bar/header-app-bar.container";
import SignIn from "../components/sign-in/sign-in.component";
import initialState from "../graphql/initial-state";
import JobListContainer from "../components/job-list/job-list.container";
//Component Imports
import SignIn from "../components/landing-components/sign-in/sign-in.component";
import LandingPage from "../pages/landing/landing.component";
import Manage from "../pages/manage/manage.component";
import PrivateRoute from "../utils/private-route";
//Todo: Issue with this line. Not sure why.
const graphqlEndpoint = process.env.REACT_APP_GRAPHQL_ENDPOINT;
export default function App({ authState }) {
@@ -30,14 +32,16 @@ export default function App({ authState }) {
typeDefs
});
client.writeData({
data: initialState
data: { ...initialState, authState }
});
return (
<ApolloProvider client={client}>
<HeaderAppBarContainer />
{isIn ? null : <SignIn />}
<JobListContainer />
<Switch>
<Route exact path="/" component={LandingPage} />
<Route exact path="/signin" component={SignIn} />
<PrivateRoute isAuthorized={isIn} path="/manage" component={Manage} />
</Switch>
</ApolloProvider>
);
}

67
client/src/components/header-app-bar/header-app-bar.component.jsx
View File

@@ -1,67 +0,0 @@
import React, { Component } from "react";
import { Menu, Icon } from "antd";
const { SubMenu } = Menu;
class HeaderAppBar extends Component {
handleClick = e => {
console.log("click ", e);
this.setState({
current: e.key
});
};
render() {
const { selectedNavItem, navItems } = this.props;
return (
<Menu
onClick={this.handleClick}
selectedKeys={selectedNavItem}
mode="horizontal"
>
{
navItems.map(navItem => (
<Menu.Item key={navItem.title}>{navItem.title}</Menu.Item>
))
}
</Menu>
// <Menu.Item key="mail">
// <Icon type="mail" />
// Navigation One
// </Menu.Item>
// <Menu.Item key="app" disabled>
// <Icon type="appstore" />
// Navigation Two
// </Menu.Item>
// <SubMenu
// title={
// <span className="submenu-title-wrapper">
// <Icon type="setting" />
// Navigation Three - Submenu
// </span>
// }
// >
// <Menu.ItemGroup title="Item 1">
// <Menu.Item key="setting:1">Option 1</Menu.Item>
// <Menu.Item key="setting:2">Option 2</Menu.Item>
// </Menu.ItemGroup>
// <Menu.ItemGroup title="Item 2">
// <Menu.Item key="setting:3">Option 3</Menu.Item>
// <Menu.Item key="setting:4">Option 4</Menu.Item>
// </Menu.ItemGroup>
// </SubMenu>
// <Menu.Item key="alipay">
// <a
// href="https://ant.design"
// target="_blank"
// rel="noopener noreferrer"
// >
// Navigation Four - Link
// </a>
// </Menu.Item>
// </Menu>
);
}
}
export default HeaderAppBar;

44
client/src/components/header-app-bar/header-app-bar.container.jsx
View File

@@ -1,44 +0,0 @@
import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
import { Spin, Alert } from "antd";
import HeaderAppBar from "./header-app-bar.component";
const GET_NAV_ITEMS = gql`
query nav_items {
masterdata_by_pk(key: "NAV_ITEMS") {
value
}
}
`;
const GET_SELECTED_NAV_ITEM = gql`
query selected_nav_item {
selectedNavItem @client
}
`;
const HeaderAppBarContainer = () => (
<Query query={GET_SELECTED_NAV_ITEM}>
{({ loading, error, data: { selectedNavItem } }) => {
return (
<Query query={GET_NAV_ITEMS}>
{({ loading, error, data }) => {
if (loading) return <Spin size="large" />;
if (error) return <Alert message={error.message} />;
const parsedNavItems = JSON.parse(data.masterdata_by_pk.value)
return (
<HeaderAppBar
selectedNavItem={selectedNavItem}
navItems={parsedNavItems}
/>
);
}}
</Query>
);
}}
</Query>
);
export default HeaderAppBarContainer;

36
client/src/components/header/header.component.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Menu, Icon } from "antd";
import "./header.styles.scss";
class Header extends Component {
handleClick = e => {
console.log("click ", e);
this.setState({
current: e.key
});
};
render() {
const { selectedNavItem, navItems } = this.props;
return (
<Menu
className="header"
onClick={this.handleClick}
selectedKeys={selectedNavItem}
mode="horizontal"
>
{navItems.map(navItem => (
<Menu.Item key={navItem.title}>
<Link to={navItem.path}>
<Icon type={navItem.icontype} />
{navItem.title}
</Link>
</Menu.Item>
))}
</Menu>
);
}
}
export default Header;

43
client/src/components/header/header.container.jsx Normal file
View File

@@ -0,0 +1,43 @@
import React from "react";
import { Query } from "react-apollo";
import { Alert } from "antd";
import Header from "./header.component";
import Spin from "../loading-spinner/loading-spinner.component";
import {
GET_SELECTED_NAV_ITEM,
GET_LANDING_NAV_ITEMS,
GET_NAV_ITEMS
} from "../../graphql/metadata.queries";
const HeaderContainer = ({ landingHeader }) => {
let GET_METADATA;
if (landingHeader) GET_METADATA = GET_LANDING_NAV_ITEMS;
else GET_METADATA = GET_NAV_ITEMS;
return (
<Query query={GET_SELECTED_NAV_ITEM}>
{({ loading, error, data: { selectedNavItem } }) => {
return (
<Query query={GET_METADATA}>
{({ loading, error, data }) => {
if (loading) return <Spin />;
if (error) return <Alert message={error.message} />;
const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
return (
<Header
selectedNavItem={selectedNavItem}
navItems={parsedNavItems}
/>
);
}}
</Query>
);
}}
</Query>
);
};
export default HeaderContainer;

4
client/src/components/header/header.styles.scss Normal file
View File

@@ -0,0 +1,4 @@
.header{
text-align: center;
width: 100%;
}

5
client/src/components/job-list/job-list.container.jsx
View File

@@ -2,8 +2,9 @@ import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
import { Spin, Alert } from "antd";
import { Alert } from "antd";
import Spin from '../loading-spinner/loading-spinner.component'
import JobList from "./job-list.component";
const GET_JOBS = gql`
@@ -17,7 +18,7 @@ const GET_JOBS = gql`
const JobListContainer = () => (
<Query query={GET_JOBS}>
{({ loading, error, data }) => {
if (loading) return <Spin size="large" />;
if (loading) return <Spin />;
if (error) return <Alert message={error.message} />;
console.log("JobListContainer Data:", data);

2
client/src/components/sign-in/sign-in.component.jsx → client/src/components/landing-components/sign-in/sign-in.component.jsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { auth } from "../../firebase/firebase.utils";
import { auth } from "../../../firebase/firebase.utils";
import { Form, Icon, Input, Button, Alert } from "antd";
class SignIn extends React.Component {

7
client/src/components/loading-spinner/loading-spinner.component.jsx Normal file
View File

@@ -0,0 +1,7 @@
import React from "react";
import { Spin } from "antd";
import "./loading-spinner.styles.scss";
export default function LoadingSpinner() {
return <Spin className="spinner" size="large" delay="500" />;
}

3
client/src/components/loading-spinner/loading-spinner.styles.scss Normal file
View File

@@ -0,0 +1,3 @@
.spinner {
text-align: center;
}

10
client/src/components/manage-shop/manage-shop.component.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from "react";
export default function ManageShop() {
return (
<div>
This is the manage shop component.
</div>
);
}

27
client/src/components/manage-shop/manage-shop.container.jsx Normal file
View File

@@ -0,0 +1,27 @@
import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";
import { Alert } from "antd";
import Spin from '../loading-spinner/loading-spinner.component'
import ManageShop from "./manage-shop.component";
const GET_NAV_ITEMS = gql`
query nav_items {
masterdata_by_pk(key: "NAV_ITEMS") {
value
}
}
`;
const ManageShopContainer = () => (
<Query query={GET_NAV_ITEMS}>
{({ loading, error, data }) => {
if (loading) return <Spin />;
if (error) return <Alert message={error.message} />;
return <ManageShop />;
}}
</Query>
);
export default ManageShopContainer;

11
client/src/components/sign-out/sign-out.component.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React, { useState } from 'react'
export default function SignOut() {
return (
<div>
Sign Out
</div>
)
}

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

@@ -1,3 +1,5 @@
export default {
authState: null,
selectedNavItem: "Home",
recentItems: []
};

22
client/src/graphql/metadata.queries.js Normal file
View File

@@ -0,0 +1,22 @@
import { gql } from "apollo-boost";
export const GET_LANDING_NAV_ITEMS = gql`
query nav_items {
masterdata_by_pk(key: "LANDING_NAV_ITEMS") {
value
}
}
`;
export const GET_NAV_ITEMS = gql`
query nav_items {
masterdata_by_pk(key: "NAV_ITEMS") {
value
}
}
`;
export const GET_SELECTED_NAV_ITEM = gql`
query selected_nav_item {
selectedNavItem @client
}
`;

15
client/src/pages/landing/landing.component.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import { Typography } from "antd";
import HeaderContainer from "../../components/header/header.container";
export default function LandingPage() {
return (
<div>
<HeaderContainer landingHeader />
<Typography.Title>
Welcome to bodyshop.app.
</Typography.Title>
</div>
);
}

16
client/src/pages/manage/manage.component.jsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react'
import { Route } from "react-router";
//Component Imports
import ManageShopContainer from '../../components/manage-shop/manage-shop.container';
//This page will handle all routing for the entire application.
export default function Manage({match}) {
console.log('Manage: match ', match)
return (
<div>
<Route exact path={`${match.path}`} component={ManageShopContainer}/>
</div>
)
}

14
client/src/utils/private-route.js Normal file
View File

@@ -0,0 +1,14 @@
import React from "react";
import { Route, Redirect } from "react-router-dom";
export default ({ component: Component, isAuthorized, ...rest }) => (
<Route
{...rest}
render={props =>
isAuthorized === true ? (
<Component {...props} />
) : (
<Redirect to="/signin" />
)
}
/>
);