Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Enes Tasbasi
whats-open-web
Commits
76f65841
Commit
76f65841
authored
Mar 01, 2019
by
Andrew Hrdy
Browse files
Added routes
parent
ffedfe28
Changes
11
Expand all
Hide whitespace changes
Inline
Side-by-side
package-lock.json
View file @
76f65841
This diff is collapsed.
Click to expand it.
package.json
View file @
76f65841
...
...
@@ -10,16 +10,20 @@
"
@types/history
"
:
"
^4.7.2
"
,
"
@types/mapbox-gl
"
:
"
^0.51.4
"
,
"
@types/material-ui
"
:
"
^0.21.6
"
,
"
@types/memoize-one
"
:
"
^4.1.0
"
,
"
@types/node
"
:
"
^11.9.4
"
,
"
@types/phone-formatter
"
:
"
0.0.2
"
,
"
@types/react
"
:
"
^16.8.3
"
,
"
@types/react-dom
"
:
"
^16.8.1
"
,
"
@types/react-redux
"
:
"
^7.0.1
"
,
"
@types/react-router
"
:
"
^4.4.4
"
,
"
@types/react-router-dom
"
:
"
^4.3.1
"
,
"
classnames
"
:
"
^2.2.5
"
,
"
connected-react-router
"
:
"
^6.3.1
"
,
"
history
"
:
"
^4.7.2
"
,
"
jss
"
:
"
^9.8.7
"
,
"
mapbox-gl
"
:
"
^0.53.0
"
,
"
memoize-one
"
:
"
^5.0.0
"
,
"
phone-formatter
"
:
"
^0.0.2
"
,
"
promise
"
:
"
8.0.2
"
,
"
react
"
:
"
^16.8.1
"
,
...
...
@@ -28,6 +32,7 @@
"
react-piwik
"
:
"
^1.6.0
"
,
"
react-redux
"
:
"
^6.0.0
"
,
"
react-router
"
:
"
^4.3.1
"
,
"
react-router-dom
"
:
"
^4.3.1
"
,
"
redux
"
:
"
^4.0.1
"
,
"
redux-devtools-extension
"
:
"
^2.13.8
"
,
"
redux-saga
"
:
"
^1.0.1
"
,
...
...
@@ -62,7 +67,7 @@
"
uglifyjs-webpack-plugin
"
:
"
^1.2.6
"
,
"
webpack
"
:
"
^4.4.1
"
,
"
webpack-cli
"
:
"
^2.1.5
"
,
"
webpack-dev-server
"
:
"
^3.
1.4
"
"
webpack-dev-server
"
:
"
^3.
2.0
"
},
"proxy"
:
"http://localhost:3001"
,
"scripts"
:
{
...
...
src/components/Sidebar.tsx
View file @
76f65841
import
*
as
React
from
'
react
'
;
import
*
as
classNames
from
'
classnames
'
;
import
{
removeBrackets
}
from
'
../utils/nameUtils
'
;
import
*
as
phoneFormatter
from
'
phone-formatter
'
;
import
{
IFacility
}
from
'
../models/facility.model
'
;
import
{
trackPiwikEvent
}
from
'
../piwik/piwik
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
TextwTitle
from
'
./TextwTitle
'
;
import
FacilitiesMap
from
'
../containers/FacilitiesMap
'
;
...
...
@@ -15,7 +16,8 @@ import Typography from '@material-ui/core/Typography';
import
Divider
from
'
@material-ui/core/Divider
'
;
import
CloseIcon
from
'
@material-ui/icons/Close
'
;
import
IconButton
from
'
@material-ui/core/IconButton
'
;
import
{
trackPiwikEvent
}
from
'
../piwik/piwik
'
;
import
FacilityDialog
from
'
./FacilityDialog
'
;
import
{
History
}
from
'
history
'
;
class
Sidebar
extends
React
.
Component
<
SidebarProps
,
SidebarState
>
{
...
...
@@ -27,11 +29,6 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
};
}
handleSidebarClose
=
()
=>
{
this
.
props
.
setSelectedFacility
(
null
);
this
.
props
.
setSidebar
(
false
);
}
handleMapDialogClose
=
()
=>
{
trackPiwikEvent
(
'
map-action
'
,
'
close
'
);
...
...
@@ -49,35 +46,40 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
}
render
()
{
const
{
facility
,
isSidebarOpen
,
facilities
}
=
this
.
props
;
const
{
facility
,
facilities
,
history
}
=
this
.
props
;
const
{
mapDialogOpen
}
=
this
.
state
;
return
(
<
div
className
=
{
classNames
([
'
card-container-offset
'
,
(
isSidebarOpen
&&
'
card-container-offset-open
'
),
(
!
isSidebarOpen
&&
'
card-container-offset-closed
'
)])
}
>
<
Paper
className
=
{
classNames
([
'
sidebar-root
'
,
(
isSidebarOpen
&&
'
sidebar-open
'
),
(
!
isSidebarOpen
&&
'
sidebar-closed
'
)])
}
>
<
IconButton
className
=
{
'
sidebar-close-btn
'
}
onClick
=
{
this
.
handleSidebarClose
}
>
<
CloseIcon
/>
</
IconButton
>
<
div
className
=
{
'
sidebar-container
'
}
>
<
Paper
className
=
{
'
sidebar-root
'
}
>
<
Link
to
=
"/"
>
<
IconButton
className
=
{
'
sidebar-close-btn
'
}
>
<
CloseIcon
/>
</
IconButton
>
</
Link
>
<
div
className
=
{
'
sidebar-row1
'
}
>
<
Avatar
className
=
{
'
sidebar-avatar
'
}
src
=
{
facility
.
logo
}
/>
<
div
className
=
{
'
sidebar-title
'
}
>
<
Typography
variant
=
"h4"
>
{
removeBrackets
(
facility
.
facility_name
)
}
</
Typography
>
</
div
>
</
div
>
<
Divider
className
=
{
'
sidebar-divider
'
}
/>
<
div
className
=
{
'
sidebar-scroll
'
}
>
<
div
className
=
{
'
sidebar-label-holder
'
}
>
<
TextwTitle
label
=
"Building"
content
=
{
facility
.
facility_location
&&
facility
.
facility_location
.
building
}
/>
content
=
{
facility
.
facility_location
&&
facility
.
facility_location
.
building
}
/>
<
TextwTitle
label
=
"Address"
content
=
{
facility
.
facility_location
&&
facility
.
facility_location
.
address
}
/>
content
=
{
facility
.
facility_location
&&
facility
.
facility_location
.
address
}
/>
<
TextwTitle
label
=
"Phone Number"
content
=
{
facility
.
phone_number
?
phoneFormatter
.
format
(
facility
.
phone_number
,
'
(NNN) NNN-NNNN
'
)
:
'
Unknown
'
}
/>
content
=
{
facility
.
phone_number
?
phoneFormatter
.
format
(
facility
.
phone_number
,
'
(NNN) NNN-NNNN
'
)
:
'
Unknown
'
}
/>
<
TextwTitle
label
=
"Hours"
content
=
{
<
WeekHours
facility
=
{
facility
}
/>
}
/>
</
div
>
</
div
>
<
div
className
=
{
'
sidebar-row2
'
}
>
<
div
className
=
{
'
sidebar-map-container
'
}
onClick
=
{
this
.
handleMapDialogOpen
}
>
<
FacilitiesMap
...
...
@@ -96,17 +98,17 @@ class Sidebar extends React.Component<SidebarProps, SidebarState> {
/>
</
div
>
</
Paper
>
<
FacilityDialog
facility
=
{
facility
}
facilities
=
{
facilities
}
isOpen
=
{
true
}
onClose
=
{
()
=>
history
.
push
(
'
/
'
)
}
/>
</
div
>
);
}
}
export
interface
SidebarProps
{
history
:
History
;
facility
:
IFacility
;
isSidebarOpen
:
boolean
;
facilities
:
IFacility
[];
setSelectedFacility
:
(
facility
:
IFacility
|
null
)
=>
void
;
setSidebar
:
(
isOpen
:
boolean
)
=>
void
;
}
export
interface
SidebarState
{
...
...
src/containers/FacilityCard.tsx
View file @
76f65841
...
...
@@ -6,13 +6,14 @@ import FacilityUtils from '../utils/facilityUtils';
import
{
IFacility
}
from
'
../models/facility.model
'
;
import
{
ApplicationState
}
from
'
../store
'
;
import
{
Dispatch
}
from
'
redux
'
;
import
{
addFavoriteFacility
,
removeFavoriteFacility
,
setSelectedFacility
,
setSidebarExpansion
}
from
'
../store/ui/ui.actions
'
;
import
{
trackPiwikEvent
}
from
'
../piwik/piwik
'
;
import
{
addFavoriteFacility
,
removeFavoriteFacility
}
from
'
../store/ui/ui.actions
'
;
import
{
NavLink
}
from
'
react-router-dom
'
;
import
{
withRouter
,
RouteComponentProps
}
from
'
react-router
'
;
import
{
Location
}
from
'
history
'
;
import
FacilityStatus
from
'
../components/FacilityStatus
'
;
import
FavoriteButton
from
'
../components/FavoriteButton
'
;
import
FacilityCategory
from
'
../components/FacilityCategory
'
;
import
FacilityDialog
from
'
../components/FacilityDialog
'
;
import
Card
from
'
@material-ui/core/Card
'
;
import
CardContent
from
'
@material-ui/core/CardContent
'
;
...
...
@@ -30,8 +31,10 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
};
}
getSlugFromLocation
=
(
location
:
Location
)
=>
location
.
pathname
.
substring
(
10
);
shouldComponentUpdate
=
(
nextProps
:
FacilityCardProps
)
=>
{
if
(
this
.
isFacilitySelected
()
!==
(
nextProps
.
selectedFacility
.
slug
===
this
.
props
.
facility
.
slug
))
{
if
(
this
.
isFacilitySelected
()
!==
(
this
.
getSlugFromLocation
(
nextProps
.
location
)
===
this
.
props
.
facility
.
slug
))
{
return
true
;
}
...
...
@@ -48,21 +51,10 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
return
false
;
}
isFacilitySelected
=
():
boolean
=>
this
.
props
.
selectedFacility
.
slug
===
this
.
props
.
facility
.
slug
;
handleCardClick
=
()
=>
{
const
newState
=
!
this
.
isFacilitySelected
();
trackPiwikEvent
(
'
card-action
'
,
'
click
'
);
setTimeout
(()
=>
{
this
.
props
.
setSelectedFacility
(
newState
?
this
.
props
.
facility
:
null
);
this
.
props
.
setSidebarExpansion
(
newState
);
},
0
);
}
isFacilitySelected
=
():
boolean
=>
this
.
getSlugFromLocation
(
this
.
props
.
location
)
===
this
.
props
.
facility
.
slug
;
render
()
{
const
{
facility
,
facilities
,
favorites
,
addFavoriteFacility
,
removeFavoriteFacility
}
=
this
.
props
;
const
{
facility
,
favorites
,
addFavoriteFacility
,
removeFavoriteFacility
}
=
this
.
props
;
const
dayOfWeek
=
[
6
,
0
,
1
,
2
,
3
,
4
,
5
][
new
Date
().
getDay
()];
...
...
@@ -87,72 +79,68 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
facility
.
facility_location
.
building
;
return
(
<
Card
onClick
=
{
this
.
handleCardClick
}
className
=
{
classNames
(
'
fc-root
'
,
this
.
isFacilitySelected
()
&&
'
fc-selected
'
)
}
elevation
=
{
3
}
>
<
div
className
=
{
'
fc-logo-container
'
}
>
<
img
className
=
{
'
fc-logo
'
}
alt
=
{
facility
.
slug
}
src
=
{
facility
.
logo
}
/>
</
div
>
<
FavoriteButton
slug
=
{
facility
.
slug
}
initialState
=
{
favorites
.
includes
(
facility
.
slug
)
}
addFavoriteFacility
=
{
addFavoriteFacility
}
removeFavoriteFacility
=
{
removeFavoriteFacility
}
/>
<
CardContent
className
=
{
'
fc-card-content
'
}
>
<
Grid
container
=
{
true
}
alignItems
=
{
'
center
'
}
direction
=
{
'
column
'
}
>
<
Grid
item
=
{
true
}
className
=
{
classNames
(
'
fc-small-grid-item-spacing
'
,
'
fc-ellipsis-container
'
,
'
fc-title-container
'
)
}
>
<
Typography
variant
=
{
'
subtitle1
'
}
align
=
{
'
center
'
}
className
=
{
classNames
(
'
fc-title
'
,
'
fc-one-line-ellipsis
'
)
}
>
{
removeBrackets
(
facility
.
facility_name
)
}
</
Typography
>
<
NavLink
to
=
{
this
.
isFacilitySelected
()
?
'
/
'
:
`/facility/
${
facility
.
slug
}
`
}
style
=
{
{
textDecoration
:
'
none
'
,
color
:
'
black
'
}
}
>
<
Card
className
=
{
classNames
(
'
fc-root
'
,
this
.
isFacilitySelected
()
&&
'
fc-selected
'
)
}
elevation
=
{
3
}
>
<
div
className
=
{
'
fc-logo-container
'
}
>
<
img
className
=
{
'
fc-logo
'
}
alt
=
{
facility
.
slug
}
src
=
{
facility
.
logo
}
/>
</
div
>
<
FavoriteButton
slug
=
{
facility
.
slug
}
initialState
=
{
favorites
.
includes
(
facility
.
slug
)
}
addFavoriteFacility
=
{
addFavoriteFacility
}
removeFavoriteFacility
=
{
removeFavoriteFacility
}
/>
<
CardContent
className
=
{
'
fc-card-content
'
}
>
<
Grid
container
=
{
true
}
alignItems
=
{
'
center
'
}
direction
=
{
'
column
'
}
>
<
Grid
item
=
{
true
}
className
=
{
classNames
(
'
fc-small-grid-item-spacing
'
,
'
fc-ellipsis-container
'
,
'
fc-title-container
'
)
}
>
<
Typography
variant
=
{
'
subtitle1
'
}
align
=
{
'
center
'
}
className
=
{
classNames
(
'
fc-title
'
,
'
fc-one-line-ellipsis
'
)
}
>
{
removeBrackets
(
facility
.
facility_name
)
}
</
Typography
>
</
Grid
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-small-grid-item-spacing
'
}
>
<
FacilityCategory
category
=
{
facility
.
facility_category
}
/>
</
Grid
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-small-grid-item-spacing fc-display-hours
'
}
>
<
Typography
variant
=
{
'
body1
'
}
>
{
`Today:
${
getDisplayHours
()}
`
}
</
Typography
>
</
Grid
>
</
Grid
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-small-grid-item-spacing
'
}
>
<
FacilityCategory
category
=
{
facility
.
facility_category
}
/>
</
Grid
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-small-grid-item-spacing fc-display-hours
'
}
>
<
Typography
variant
=
{
'
body1
'
}
>
{
`Today:
${
getDisplayHours
()}
`
}
</
Typography
>
<
Grid
container
=
{
true
}
justify
=
{
'
space-around
'
}
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-extra-info
'
}
>
<
FacilityStatus
facility
=
{
facility
}
/>
</
Grid
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-extra-info
'
}
>
<
Typography
variant
=
{
'
caption
'
}
>
<
LocationOnIcon
className
=
{
'
fc-card-map-marker-icon
'
}
/>
</
Typography
>
<
Typography
title
=
{
buildingName
}
variant
=
{
'
caption
'
}
align
=
{
'
center
'
}
className
=
{
'
fc-two-line-ellipsis
'
}
>
{
buildingName
}
</
Typography
>
</
Grid
>
</
Grid
>
</
Grid
>
<
Grid
container
=
{
true
}
justify
=
{
'
space-around
'
}
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-extra-info
'
}
>
<
FacilityStatus
facility
=
{
facility
}
/>
</
Grid
>
<
Grid
item
=
{
true
}
className
=
{
'
fc-extra-info
'
}
>
<
Typography
variant
=
{
'
caption
'
}
>
<
LocationOnIcon
className
=
{
'
fc-card-map-marker-icon
'
}
/>
</
Typography
>
<
Typography
title
=
{
buildingName
}
variant
=
{
'
caption
'
}
align
=
{
'
center
'
}
className
=
{
'
fc-two-line-ellipsis
'
}
>
{
buildingName
}
</
Typography
>
</
Grid
>
</
Grid
>
</
CardContent
>
<
FacilityDialog
facility
=
{
facility
}
facilities
=
{
facilities
}
isOpen
=
{
this
.
isFacilitySelected
()
}
onClose
=
{
this
.
handleCardClick
}
/>
</
Card
>
</
CardContent
>
</
Card
>
</
NavLink
>
);
}
}
export
interface
FacilityCardProps
{
export
interface
FacilityCardProps
extends
RouteComponentProps
<
{
slug
:
string
}
>
{
facility
:
IFacility
;
facilities
:
IFacility
[];
favorites
:
string
[];
selectedFacility
:
IFacility
;
setSelectedFacility
:
(
facility
:
IFacility
)
=>
void
;
addFavoriteFacility
:
(
slug
:
string
)
=>
void
;
removeFavoriteFacility
:
(
slug
:
string
)
=>
void
;
setSidebarExpansion
:
(
isOpen
:
boolean
)
=>
void
;
}
export
interface
FacilityCardState
{
...
...
@@ -160,15 +148,12 @@ export interface FacilityCardState {
}
const
mapStateToProps
=
(
state
:
ApplicationState
)
=>
({
favorites
:
state
.
ui
.
favorites
,
selectedFacility
:
state
.
ui
.
selectedFacility
favorites
:
state
.
ui
.
favorites
});
const
mapDispatchToProps
=
(
dispatch
:
Dispatch
)
=>
({
setSelectedFacility
:
(
facility
:
IFacility
)
=>
dispatch
(
setSelectedFacility
(
facility
)),
addFavoriteFacility
:
(
slug
:
string
)
=>
dispatch
(
addFavoriteFacility
(
slug
)),
removeFavoriteFacility
:
(
slug
:
string
)
=>
dispatch
(
removeFavoriteFacility
(
slug
)),
setSidebarExpansion
:
(
isOpen
:
boolean
)
=>
dispatch
(
setSidebarExpansion
(
isOpen
))
removeFavoriteFacility
:
(
slug
:
string
)
=>
dispatch
(
removeFavoriteFacility
(
slug
))
});
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
FacilityCard
);
\ No newline at end of file
export
default
withRouter
(
connect
(
mapStateToProps
,
mapDispatchToProps
)(
FacilityCard
));
\ No newline at end of file
src/containers/Layout.tsx
View file @
76f65841
...
...
@@ -6,7 +6,7 @@ import { ApplicationState } from '../store';
import
{
Dispatch
}
from
'
redux
'
;
import
{
fetchFacilities
}
from
'
../store/facility/facility.actions
'
;
import
{
fetchAlerts
}
from
'
../store/alert/alert.actions
'
;
import
{
setSidebarExpansion
,
setSelectedFacility
}
from
'
../store/ui/ui.actions
'
;
import
{
Route
,
withRouter
,
RouteComponentProps
}
from
'
react-router-dom
'
;
import
CardContainer
from
'
../components/CardContainer
'
;
import
AppBar
from
'
../components/AppBar
'
;
...
...
@@ -23,11 +23,12 @@ class Layout extends React.Component<LayoutProps> {
}
render
()
{
const
{
isSidebarOpen
,
selectedFacility
,
facilities
,
searchTerm
,
campusRegion
,
setSidebarExpansion
,
setSelectedFacilit
y
}
=
this
.
props
;
const
{
facilities
,
searchTerm
,
campusRegion
,
histor
y
}
=
this
.
props
;
return
(
<
div
className
=
{
'
layout-root
'
}
>
<
AppBar
/>
<
div
className
=
{
'
layout-container
'
}
>
<
div
className
=
{
'
layout-main-content
'
}
>
<
div
className
=
{
'
layout-card-container
'
}
>
...
...
@@ -36,26 +37,23 @@ class Layout extends React.Component<LayoutProps> {
</
div
>
</
div
>
<
Sidebar
facilities
=
{
facilities
}
facility
=
{
selectedFacility
}
isSidebarOpen
=
{
isSidebarOpen
}
setSidebar
=
{
setSidebarExpansion
}
setSelectedFacility
=
{
setSelectedFacility
}
/>
<
Route
path
=
"/facility/:slug"
render
=
{
(
props
)
=>
{
return
<
Sidebar
facility
=
{
facilities
.
find
(
facility
=>
facility
.
slug
===
props
.
match
.
params
.
slug
)
}
facilities
=
{
facilities
}
history
=
{
history
}
/>;
}
}
/>
</
div
>
</
div
>
);
}
}
export
interface
LayoutProps
{
export
interface
LayoutProps
extends
RouteComponentProps
{
facilities
:
IFacility
[];
alerts
:
IAlert
[];
favorites
:
string
[];
searchTerm
:
string
;
campusRegion
:
CampusRegion
;
selectedFacility
:
IFacility
;
isSidebarOpen
:
boolean
;
fetchFacilities
:
()
=>
any
;
fetchAlerts
:
()
=>
any
;
setSidebarExpansion
:
(
isOpen
:
boolean
)
=>
any
;
setSelectedFacility
:
(
facility
:
IFacility
)
=>
any
;
}
const
mapStateToProps
=
(
state
:
ApplicationState
)
=>
({
...
...
@@ -63,16 +61,12 @@ const mapStateToProps = (state: ApplicationState) => ({
alerts
:
state
.
alerts
.
alerts
,
favorites
:
state
.
ui
.
favorites
,
searchTerm
:
state
.
ui
.
search
.
searchTerm
,
campusRegion
:
state
.
ui
.
search
.
campusRegion
,
selectedFacility
:
state
.
ui
.
selectedFacility
,
isSidebarOpen
:
state
.
ui
.
sidebar
.
isOpen
campusRegion
:
state
.
ui
.
search
.
campusRegion
});
const
mapDispatchToProps
=
(
dispatch
:
Dispatch
)
=>
({
fetchFacilities
:
()
=>
dispatch
(
fetchFacilities
()),
fetchAlerts
:
()
=>
dispatch
(
fetchAlerts
()),
setSidebarExpansion
:
(
isOpen
:
boolean
)
=>
dispatch
(
setSidebarExpansion
(
isOpen
)),
setSelectedFacility
:
(
facility
:
IFacility
)
=>
dispatch
(
setSelectedFacility
(
facility
))
fetchAlerts
:
()
=>
dispatch
(
fetchAlerts
())
});
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
Layout
);
export
default
withRouter
(
connect
(
mapStateToProps
,
mapDispatchToProps
)(
Layout
)
)
;
src/store/ui/ui.action-types.ts
View file @
76f65841
...
...
@@ -2,8 +2,6 @@ import { IFacility, CampusRegion } from '../../models/facility.model';
import
{
Action
}
from
'
redux
'
;
export
enum
UiActionTypes
{
SET_SIDEBAR_EXPANSION
=
'
SET_SIDEBAR_EXPANSION
'
,
SET_SELECTED_FACILITY
=
'
SET_SELECTED_FACILITY
'
,
SET_SEARCH_TERM
=
'
SET_SEARCH_TERM
'
,
SET_SELECTED_CAMPUS_REGION
=
'
SET_SELECTED_CAMPUS_REGION
'
,
ADD_FAVORITE_FACILITY
=
'
ADD_FAVORITE_FACILITY
'
,
...
...
@@ -11,16 +9,6 @@ export enum UiActionTypes {
SET_FAVORITE_FACILITIES
=
'
SET_FAVORITE_FACILITIES
'
}
export
interface
SetSidebarExpansion
extends
Action
<
UiActionTypes
>
{
type
:
UiActionTypes
.
SET_SIDEBAR_EXPANSION
;
isOpen
:
boolean
;
}
export
interface
SetSelectedFacility
extends
Action
<
UiActionTypes
>
{
type
:
UiActionTypes
.
SET_SELECTED_FACILITY
;
facility
:
IFacility
;
}
export
interface
SetSearchTerm
extends
Action
<
UiActionTypes
>
{
type
:
UiActionTypes
.
SET_SEARCH_TERM
;
searchTerm
:
string
;
...
...
@@ -47,8 +35,6 @@ export interface SetFavoriteFacilities extends Action<UiActionTypes> {
}
export
type
UiAction
=
SetSidebarExpansion
|
SetSelectedFacility
|
SetSearchTerm
|
SetSelectedCampusRegion
|
AddFavoriteFacility
|
...
...
src/store/ui/ui.actions.ts
View file @
76f65841
import
{
SetSidebarExpansion
,
UiActionTypes
,
SetSelectedFacility
,
SetSelectedCampusRegion
,
SetSearchTerm
,
AddFavoriteFacility
,
RemoveFavoriteFacility
,
SetFavoriteFacilities
}
from
'
./ui.action-types
'
;
import
{
IFacility
,
CampusRegion
}
from
'
../../models/facility.model
'
;
export
const
setSidebarExpansion
=
(
isOpen
:
boolean
):
SetSidebarExpansion
=>
({
type
:
UiActionTypes
.
SET_SIDEBAR_EXPANSION
,
isOpen
:
isOpen
});
export
const
setSelectedFacility
=
(
facility
:
IFacility
):
SetSelectedFacility
=>
({
type
:
UiActionTypes
.
SET_SELECTED_FACILITY
,
facility
:
facility
});
import
{
UiActionTypes
,
SetSelectedCampusRegion
,
SetSearchTerm
,
AddFavoriteFacility
,
RemoveFavoriteFacility
,
SetFavoriteFacilities
}
from
'
./ui.action-types
'
;
import
{
CampusRegion
}
from
'
../../models/facility.model
'
;
export
const
setSearchTerm
=
(
searchTerm
:
string
):
SetSearchTerm
=>
({
type
:
UiActionTypes
.
SET_SEARCH_TERM
,
...
...
src/store/ui/ui.reducer.ts
View file @
76f65841
...
...
@@ -7,38 +7,12 @@ export interface SearchBarState {
campusRegion
:
CampusRegion
;
}
export
interface
SidebarState
{
isOpen
:
boolean
;
}
export
interface
UiState
{
selectedFacility
:
IFacility
|
{};
sidebar
:
SidebarState
;
search
:
SearchBarState
;
favorites
:
string
[];
}
const
selectedFacilityReducer
=
(
state
:
IFacility
|
{}
=
{},
action
:
UiAction
):
IFacility
|
{}
=>
{
switch
(
action
.
type
)
{
case
UiActionTypes
.
SET_SELECTED_FACILITY
:
return
action
.
facility
||
{};
default
:
return
state
;
}
};
const
sidebarReducer
=
(
state
:
SidebarState
=
{
isOpen
:
false
},
action
:
UiAction
):
SidebarState
=>
{
switch
(
action
.
type
)
{
case
UiActionTypes
.
SET_SIDEBAR_EXPANSION
:
return
{
...
state
,
isOpen
:
action
.
isOpen
};
default
:
return
state
;
}
};
const
searchReducer
=
(
state
:
SearchBarState
=
{
searchTerm
:
''
,
campusRegion
:
CampusRegion
.
Fairfax
},
action
:
UiAction
):
SearchBarState
=>
{
switch
(
action
.
type
)
{
case
UiActionTypes
.
SET_SEARCH_TERM
:
...
...
@@ -68,8 +42,6 @@ const favoritesReducer = (state: string[] = [], action: UiAction): string[] => {
};
export
const
uiReducer
=
combineReducers
<
UiState
>
({
selectedFacility
:
selectedFacilityReducer
,
sidebar
:
sidebarReducer
,
search
:
searchReducer
,
favorites
:
favoritesReducer
});
\ No newline at end of file
src/styles/components/sidebar.scss
View file @
76f65841
...
...
@@ -14,14 +14,6 @@
margin-bottom
:
16px
;
}
.sidebar-open
{
transform
:
translateX
(
0px
);
}
.sidebar-closed
{
transform
:
translateX
(
400px
);
}
.sidebar-root
{
overflow
:
hidden
;
display
:
block
;
...
...
@@ -47,18 +39,8 @@
display
:
none
;
}
.
c
ar
d
-container
-offset-open
{
.
sideb
ar-container
{
flex
:
1
0
400px
;
}
.card-container-offset-closed
{
flex
:
1
0
0
;
}
.card-container-offset
{
transition-delay
:
100ms
;
}
.sidebar-divider
{
...
...
@@ -116,7 +98,7 @@
display
:
none
!
important
;
}
.
c
ar
d
-container
-offset
{
.
sideb
ar-container
{
display
:
none
!
important
;
}
}
\ No newline at end of file
webpack/paths.js
View file @
76f65841
...
...
@@ -11,5 +11,5 @@ module.exports = {
appBuild
:
resolveApp
(
'
build
'
),
appSrc
:
resolveApp
(
'
src
'
),
appOutputJs
:
'
static/js/bundle.js
'
,
publicPath
:
''
publicPath
:
'
/
'
};
\ No newline at end of file
webpack/webpack.config.dev.js
View file @
76f65841
...
...
@@ -38,6 +38,7 @@ module.exports = {
contentBase
:
paths
.
appBuild
,
hot
:
true
,
port
:
3000
,
compress
:
true
compress
:
true
,
historyApiFallback
:
true
}
};
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment