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

Added querying to sidebar. Fixed initial state.

Browse Source
This commit is contained in:
Patrick Fic
2019-12-09 22:04:42 -08:00
parent 620d2419a3
commit 65cd317b95
6 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,7 +86,7 @@ class AppContainer extends Component {
const { client, loaded } = this.state; const { client, loaded } = this.state;
if (!loaded) { if (!loaded) {
return <div>Loading...</div>; return <Spin />;
} }
return ( return (
<ApolloProvider client={client}> <ApolloProvider client={client}>

24
client/src/components/white-board-left-sider/white-board-left-sider.component.jsx Normal file
View File

@@ -0,0 +1,24 @@
import React from "react";
import { Menu, Icon } from "antd";
export default function WhiteBoardLeftSiderComponent({visible}) {
return (
<Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
<Menu.Item key="1">
<Icon type="user" />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span className="nav-text">nav 3</span>
</Menu.Item>
<Menu.Item key="4">
<Icon type="user" />
<span className="nav-text">nav 4</span>
</Menu.Item>
</Menu>
);
}

18
client/src/components/white-board-left-sider/white-board-left-sider.container.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React from "react";
import { Query, Mutation } from "react-apollo";
import WhiteBoardLeftSiderComponent from './white-board-left-sider.component'
import Spin from "../loading-spinner/loading-spinner.component";
import { GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "../../graphql/local.queries";
export default function WhiteBoardPageContainer() {
return (
<Query query={GET_WHITE_BOARD_LEFT_SIDER_VISIBLE}>
{({ loading, error, data: { whiteBoardLeftSiderVisible} }) => {
if (loading) return <Spin />;
if (error) return error.message;
return <WhiteBoardLeftSiderComponent visible={whiteBoardLeftSiderVisible}/>;
}}
</Query>
);
}

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

@@ -1,9 +1,5 @@
export default { export default {
currentUser: { currentUser: { email: null, displayName: null },
email: null,
displayName: null,
token: null
},
selectedNavItem: "Home", selectedNavItem: "Home",
recentItems: [], recentItems: [],
whiteBoardLeftSiderVisible: true whiteBoardLeftSiderVisible: true

14
client/src/pages/white-board/white-board.page.container.jsx
View File

@@ -1,19 +1,7 @@
import React from "react"; import React from "react";
import { Query, Mutation } from "react-apollo";
import WhiteBoardPage from "./white-board.page"; import WhiteBoardPage from "./white-board.page";
import Spin from "../../components/loading-spinner/loading-spinner.component";
import { GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "../../graphql/local.queries";
export default function WhiteBoardPageContainer() { export default function WhiteBoardPageContainer() {
return ( return <WhiteBoardPage />;
<Query query={GET_WHITE_BOARD_LEFT_SIDER_VISIBLE}>
{({ loading, error, data }) => {
if (loading) return <Spin />;
if (error) return error.message;
console.log('data from getwhiteboardquery', data)
return <WhiteBoardPage />;
}}
</Query>
);
} }

21
client/src/pages/white-board/white-board.page.jsx
View File

@@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import Board from "react-trello"; import Board from "react-trello";
import WhiteBoardCard from "../../components/white-board-card/white-board-card.component"; import WhiteBoardCard from "../../components/white-board-card/white-board-card.component";
import WhiteBoardLeftSiderContainer from "../../components/white-board-left-sider/white-board-left-sider.container";
import { Layout, Icon, Menu } from "antd"; import { Layout, Icon, Menu } from "antd";
export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) { export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) {
@@ -48,25 +49,7 @@ export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) {
//console.log(collapsed, type); //console.log(collapsed, type);
}} }}
> >
<div className="logo" /> <WhiteBoardLeftSiderContainer />
<Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
<Menu.Item key="1">
<Icon type="user" />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span className="nav-text">nav 3</span>
</Menu.Item>
<Menu.Item key="4">
<Icon type="user" />
<span className="nav-text">nav 4</span>
</Menu.Item>
</Menu>
</Sider> </Sider>
<Content> <Content>