You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.7 KiB
46 lines
1.7 KiB
import React, { FC, useEffect } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
|
|
import { useConfig } from 'src/hooks'
|
|
import { fetchInstallations, setSelectedInstallation } from 'src/actions/composer'
|
|
import { getInstallations, getSelectedInstallation } from 'src/selectors/composer'
|
|
import { AppState, Installation } from 'src/types'
|
|
|
|
const Composer: FC = () => {
|
|
const installations = useSelector<AppState, Installation[]>(getInstallations)
|
|
const selected = useSelector<AppState, Installation | undefined>(getSelectedInstallation)
|
|
const config = useConfig()
|
|
const dispatch = useDispatch()
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchInstallations())
|
|
}, [])
|
|
|
|
const handleClick = (id: string) => {
|
|
if (selected && selected.id === id) {
|
|
dispatch(setSelectedInstallation())
|
|
return
|
|
}
|
|
|
|
dispatch(setSelectedInstallation(id))
|
|
}
|
|
|
|
return (
|
|
<div className="container composer-container">
|
|
<div className="composer composer-empty">
|
|
<p>{selected ? selected.app.name : 'Choose an app.'}</p>
|
|
</div>
|
|
|
|
<div className="installations is-flex">
|
|
{installations.map(installation => (
|
|
<div key={installation.id} className={selected && selected.id === installation.id ? 'selected' : ''} onClick={() => handleClick(installation.id)}>
|
|
<img src={`${config.blobUrl}${installation.app.iconImageUrl}`} alt={installation.app.name} style={{ width: 32 }} />
|
|
<p className="is-size-7 has-text-weight-bold">{installation.app.name}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Composer
|