-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathPostcodeInfoLibrary.jsx
More file actions
111 lines (99 loc) · 3.33 KB
/
Copy pathPostcodeInfoLibrary.jsx
File metadata and controls
111 lines (99 loc) · 3.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from 'react'
import { Link } from 'react-router-dom'
import Card from '@mui/material/Card'
import CardActions from '@mui/material/CardActions'
import CardContent from '@mui/material/CardContent'
import Button from '@mui/material/Button'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import ArrowRightIcon from '@mui/icons-material/ArrowRightTwoTone'
import InfoIcon from '@mui/icons-material/InfoOutlined'
import LocationOnIcon from '@mui/icons-material/LocationOnRounded'
import { lighten } from '@mui/material'
import { useSearchStateValue } from './context/searchState'
import { useViewStateValue } from './context/viewState'
import { useApplicationStateValue } from './context/applicationState'
function PostcodeInfoLibrary () {
const [{ searchType, searchPostcode, nearestLibraries }, dispatchSearch] =
useSearchStateValue()
const [{}, dispatchView] = useViewStateValue() //eslint-disable-line
const [{ serviceLookup }] = useApplicationStateValue()
const nearestLibrary = nearestLibraries?.[0]
const viewLibrary = () => {
dispatchSearch({
type: 'SetCurrentLibrary',
currentLibraryId: nearestLibrary.id
})
dispatchView({ type: 'SetLibraryDialog', libraryDialogOpen: true })
}
const viewMap = () => {
dispatchView({
type: 'FlyTo',
mapFlyToPosition: [nearestLibrary.longitude, nearestLibrary.latitude],
mapZoom: 18
})
}
const serviceSystemName =
serviceLookup[nearestLibrary?.localAuthorityCode]?.systemName
return (
<>
{searchType === 'postcode' && searchPostcode && nearestLibrary && (
<Card
elevation={0}
sx={theme => ({
border: 2,
borderColor: lighten(theme.palette.staticLibraries.main, 0.6)
})}
>
<CardContent>
<Typography variant='h5' component='span' color='text.secondary'>
{`${Math.round(
nearestLibrary?.distance / 1609
)} miles from nearest library`}
</Typography>
<Typography
color='staticLibraries.main'
variant='h5'
component='p'
sx={{ fontWeight: 600 }}
>
{`${nearestLibrary?.name}`}
</Typography>
</CardContent>
<CardActions
sx={{
backgroundColor: theme =>
lighten(theme.palette.staticLibraries.main, 0.9),
justifyContent: 'space-between'
}}
>
<Button
color='secondary'
variant='text'
endIcon={<ArrowRightIcon />}
to={`/service/${serviceSystemName}/${nearestLibrary?.systemName} `}
component={Link}
disableElevation
>
Library page
</Button>
<Button
size='small'
endIcon={<LocationOnIcon />}
onClick={viewMap}
component={Link}
to='/map'
color='secondary'
>
On map
</Button>
<IconButton onClick={viewLibrary} color='secondary' size='small'>
<InfoIcon />
</IconButton>
</CardActions>
</Card>
)}
</>
)
}
export default PostcodeInfoLibrary