Commit fbaa10f8 authored by Mattias J Duffy's avatar Mattias J Duffy

data routed to layout and deleted the proxy server

parent 2a3bf3d6
{
"env": {
"browser": true,
"commonjs": true,
"es6": false,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "warn",
"constructor-super": "warn",
"valid-typeof": "warn"
}
}
\ No newline at end of file
......@@ -19,9 +19,9 @@
"devDependencies": {
"react-scripts": "1.0.10"
},
"proxy":"http://localhost:3001",
"proxy": "http://localhost:3001",
"scripts": {
"start": "react-scripts start & node ./proxyServer/index.js",
"start": "react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
......
const express = require('express')
const proxy = require('http-proxy-middleware')
const app = express()
app.use('/api', proxy('/api',{target: 'https://whatsopen.dhaynes.xyz', changeOrigin: true}));
app.listen(3001)
{
"name": "proxyServer",
"version": "1.0.0",
"main": "index.js",
"repository": {},
"author": "mattias duffy",
"license": "MIT",
"dependencies": {
"express": "^4.15.3",
"http-proxy-middleware": "^0.17.4"
}
}
This diff is collapsed.
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
import React, { Component } from 'react';
import './App.css';
import AppBar from './components/AppBar';
class App extends Component {
render() {
return (
<div >
<AppBar/>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
export const TOGGLE_DRAWER = 'TOGGLE_DRAWER';
export const CALL_API = 'CALL_API'
export const SET_FACILITIES = 'SET_FACILITIES'
export const GET_FACILITIES = 'GET_FACILITIES'
\ No newline at end of file
import { CALL_API } from './action-types'
import { CALL_API,SET_FACILITIES,GET_FACILITIES } from './action-types'
export const apiTest = () =>{
return (dispatch) =>{
......@@ -10,3 +10,31 @@ export const apiTest = () =>{
})
}
}
export const getFacilities = () => dispatch => {
// var url = new URL('https://localhost:3000/api/facilities')
// url.searchParams.append('format','json')
dispatch({
type:GET_FACILITIES
})
const request = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/', {
method: 'GET',
})
console.log(request)
return fetch(request).then((res)=>{
if (res.status < 200 || res.status >= 300) {
throw new Error(res.statusText);
}
return res.json()
}).then((json) => {
dispatch(setFacilities(JSON.stringify(json)))
})
}
export const setFacilities = (facilities) => {
localStorage.setItem('facilities',facilities)
return {
type:SET_FACILITIES,
facilities:JSON.parse(facilities)
}
}
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import { withStyles} from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
......@@ -13,16 +13,16 @@ import classNames from 'classnames';
function customAppBar({ classes, handleMenuClick, isOpen}) {
return (
<div className={classNames({[classes.drawerClosed]:!isOpen,[classes.drawerOpen]:isOpen})}>
<AppBar position="static" >
<div >
<AppBar position="absolute" >
<Toolbar>
<IconButton onClick={handleMenuClick} color="contrast" aria-label="Menu">
{/* <IconButton onClick={handleMenuClick} color="contrast" aria-label="Menu">
<MenuIcon />
</IconButton>
</IconButton> */}
<Typography type="title" color="inherit" className={classes.title}>
Title
</Typography>
<Button color="contrast">Login</Button>
{/* <Button color="contrast">Login</Button> */}
</Toolbar>
</AppBar>
</div>
......@@ -34,7 +34,7 @@ customAppBar.propTypes = {
handleMenuClick: PropTypes.func.isRequired,
};
const styleSheet = createStyleSheet('AppBar', {
const styleSheet = {
title: {
marginRight: 'auto',
},
......@@ -48,6 +48,6 @@ const styleSheet = createStyleSheet('AppBar', {
transition: 'padding 255ms cubic-bezier(0, 0, 0.2, 1) 0ms',
height: '100%'
},
});
};
export default compose(withStyles(styleSheet),withTheme)(customAppBar);
import React from 'react';
import {withStyles, createStyleSheet} from 'material-ui/styles';
import { compose } from 'redux';
import Drawer from 'material-ui/Drawer';
import Button from 'material-ui/Button';
import {apiTest} from '../actions/api';
import {connect} from 'react-redux';
// import Paper from 'material-ui/Paper';
function customDrawer({ classes,isOpen,handleLeftClose, apiTest }){
const handleClick = () =>{
apiTest()
}
return (
<Drawer
open={isOpen}
onRequestClose={handleLeftClose}
elevation={16}
docked
onClick={handleLeftClose}
>
<div className={classes.drawer}>
<Button raised onClick={handleClick}>Call API</Button>
</div>
</Drawer>
)
}
const styleSheet = createStyleSheet('Drawer', theme => ({
drawer:{
width:400,
minWidth:400,
height:"100%",
backgroundColor:'white',
}
}));
export default compose(connect(null,{ apiTest }),withStyles(styleSheet))(customDrawer);
import React from 'react';
import {withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper'
import Avatar from 'material-ui/Avatar'
import Typography from 'material-ui/Typography'
import Divider from 'material-ui/Divider';
import TextwTitle from '../components/TextwTitle'
const Sidebar = ({classes}) => {
return(<Paper className={classes.root}>
<div className={classes.row1}>
<Avatar className={classes.avatar} src={require('../images/chipotleLogo.png')} />
<div className={classes.title}>
<Typography type='display1'>Chipotle</Typography>
</div>
</div>
<Divider className={classes.divider}/>
<div className={classes.labelHolder}>
<div className={classes.labelRow}>
<TextwTitle label="Location" content="The Johnson Center" />
<TextwTitle label="Location" content="The Johnson Center" />
</div>
<div className={classes.labelRow}>
<TextwTitle label="Location" content="The Johnson Center" />
<TextwTitle label="Location" content="The Johnson Center asdfasdfasdfasdf asd fas as asd asdfasdfasf " />
</div>
</div>
</Paper>
)
}
const styleSheet = {
labelRow:{
display:'flex',
},
labelHolder:{
margin:16,
},
root:{
flex:'1 0 400px',
display:'block',
boxSizing:'border-box',
margin:16,
},
divider:{
margin:16,
},
row1:{
display:'flex',
padding:8,
},
avatar:{
width:100,
height:100,
},
title:{
height:100,
marginLeft:8,
display:'flex',
alignItems:'center'
},
}
export default withStyles(styleSheet)(Sidebar)
import React from 'react'
import {withStyles } from 'material-ui/styles';
const TextwTitle = ({classes,label,content}) => {
return(<div>
<div className={classes.label}>
{label}
</div>
<div className={classes.content}>
{content}
</div>
</div>)
}
const styleSheet = {
label:{
fontWeight:400,
fontSize:"12px",
color:"rgba(0,0,0,.54)",
},
content:{
fontWeight:400,
fontSize:"14px",
textOverflow: 'ellipsis',
width:176,
whiteSpace:'nowrap',
overflow:'hidden',
}
}
export default withStyles(styleSheet)(TextwTitle)
\ No newline at end of file
import React from 'react';
import {withStyles, createStyleSheet} from 'material-ui/styles';
import {compose, bindActionCreators } from 'redux';
import {withStyles } from 'material-ui/styles';
import {compose} from 'redux';
import {connect} from 'react-redux';
import {toggleDrawer} from '../actions/ui';
import AppBar from '../components/AppBar';
import Drawer from '../components/Drawer';
import Sidebar from '../components/Sidebar';
import {getFacilities, setFacilities} from '../actions/api'
import Button from 'material-ui/Button';
class Layout extends React.Component {
constructor(props){
super(props);
}
componentWillMount = () => {
if(localStorage.getItem('facilities')){
const facilities = localStorage.getItem('facilities')
this.props.setFacilities(facilities)
}
this.props.getFacilities()
}
render() {
const {classes, isDrawerOpen, toggleDrawer} = this.props;
const {classes, isDrawerOpen, toggleDrawer, getFacilities} = this.props;
return (
<div>
<Drawer isOpen={isDrawerOpen} handleLeftClose={toggleDrawer}/>
<div className={classes.root}>
<AppBar isOpen={isDrawerOpen} handleMenuClick={ toggleDrawer }/>
<div className={classes.container}>
<div className={classes.mainContent}>
<Button raised onClick={getFacilities} className={classes.button}>
Default
</Button>
</div>
<Sidebar/>
</div>
</div>
)
}
}
const styleSheet = createStyleSheet('Layout', theme => ({}));
const styleSheet = {
root:{
paddingTop:64,
boxSizing:'border-box',
height:'100%',
},
container:{
width:'100%',
height:'100%',
display:'flex'
},
mainContent:{
boxSizing:'border-box',
flex:'1 1 100%',
height:'100%',
},
}
function mapStateToProps(state) {
return {
isDrawerOpen: state.ui.drawer.isOpen
facilities: state.facilities.data,
isLoading: state.facilities.isLoading
}
}
export default compose(connect(mapStateToProps,{toggleDrawer}), withStyles(styleSheet))(Layout);
export default compose(connect(mapStateToProps,{toggleDrawer,getFacilities,setFacilities}), withStyles(styleSheet))(Layout);
......@@ -8,6 +8,7 @@ height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #fafafa;
}
body>#root{
width:100%;
......
......@@ -25,7 +25,7 @@ const enhance = compose(
const store = createStore(reducers,enhance)
const theme = createMuiTheme({
palette: createPalette({primary:blue,accent:green,warn:amber,error:red,type:'dark'})
palette: {primary:blue,secondary:green,warn:amber,error:red,type:'light'}
});
ReactDOM.render(
......
import { SET_FACILITIES,GET_FACILITIES } from '../actions/action-types'
const defaultState = {
isLoading:false,
data:[]
}
export const facilities = (state = defaultState, action) => {
switch(action.type){
case GET_FACILITIES:
return Object.assign({},state,{
isLoading:true,
})
case SET_FACILITIES:
return {
data:action.facilities,
isLoading:false
}
default:
return state
}
}
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import ui from './ui';
import {facilities} from './api'
const reducers = combineReducers({
router:routerReducer,
ui
ui,
facilities
})
export default reducers;
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment