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

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>
)
}