2020-08-13 13:45:18 +03:00
|
|
|
import React from 'react';
|
|
|
|
import Transition from "../transition.js";
|
|
|
|
|
|
|
|
export default class SiteSwitcher extends React.Component {
|
|
|
|
constructor() {
|
|
|
|
super()
|
|
|
|
this.handleClick = this.handleClick.bind(this)
|
2021-02-23 16:49:56 +03:00
|
|
|
this.handleKeydown = this.handleKeydown.bind(this);
|
|
|
|
this.populateSites = this.populateSites.bind(this);
|
2020-08-13 13:45:18 +03:00
|
|
|
this.state = {
|
|
|
|
open: false,
|
|
|
|
sites: null,
|
|
|
|
error: null,
|
|
|
|
loading: true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2021-02-23 16:49:56 +03:00
|
|
|
this.populateSites();
|
|
|
|
document.addEventListener("keydown", this.handleKeydown);
|
2020-08-13 13:45:18 +03:00
|
|
|
document.addEventListener('mousedown', this.handleClick, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2021-02-23 16:49:56 +03:00
|
|
|
document.removeEventListener("keydown", this.handleKeydown);
|
2020-08-13 13:45:18 +03:00
|
|
|
document.removeEventListener('mousedown', this.handleClick, false);
|
|
|
|
}
|
|
|
|
|
2021-02-23 16:49:56 +03:00
|
|
|
populateSites() {
|
|
|
|
fetch('/api/sites')
|
|
|
|
.then( response => {
|
|
|
|
if (!response.ok) { throw response }
|
|
|
|
return response.json()
|
|
|
|
})
|
|
|
|
.then((sites) => this.setState({loading: false, sites: sites}))
|
|
|
|
.catch((e) => this.setState({loading: false, error: e}))
|
|
|
|
}
|
|
|
|
|
2020-08-13 13:45:18 +03:00
|
|
|
handleClick(e) {
|
|
|
|
if (this.dropDownNode && this.dropDownNode.contains(e.target)) return;
|
|
|
|
if (!this.state.open) return;
|
|
|
|
|
|
|
|
this.setState({open: false})
|
|
|
|
}
|
|
|
|
|
2021-02-23 16:49:56 +03:00
|
|
|
handleKeydown(e) {
|
|
|
|
const { query, history, site } = this.props;
|
|
|
|
const { sites } = this.state;
|
|
|
|
|
|
|
|
if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing || e.keyCode === 229 || !sites) return
|
|
|
|
|
|
|
|
const siteNum = parseInt(e.key)
|
|
|
|
|
2021-03-04 10:50:15 +03:00
|
|
|
if (1 <= siteNum && siteNum <= 9 && siteNum <= sites.length && sites[siteNum-1] !== site.domain) {
|
2021-02-23 16:49:56 +03:00
|
|
|
window.location = `/${encodeURIComponent(sites[siteNum-1])}`
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2020-08-13 13:45:18 +03:00
|
|
|
toggle() {
|
|
|
|
if (!this.props.loggedIn) return;
|
|
|
|
|
|
|
|
this.setState({open: !this.state.open})
|
|
|
|
|
|
|
|
if (!this.state.sites) {
|
2021-02-23 16:49:56 +03:00
|
|
|
this.populateSites();
|
2020-08-13 13:45:18 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-23 16:49:56 +03:00
|
|
|
renderSiteLink(domain, index) {
|
2020-12-29 12:00:41 +03:00
|
|
|
const extraClass = domain === this.props.site.domain ? 'font-medium text-gray-900 dark:text-gray-100 cursor-default font-bold' : 'hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100'
|
2020-08-13 13:45:18 +03:00
|
|
|
return (
|
2021-02-23 16:49:56 +03:00
|
|
|
<a href={domain === this.props.site.domain ? null : `/${encodeURIComponent(domain)}`} key={domain} className={`flex items-center justify-between truncate px-4 py-2 md:text-sm leading-5 text-gray-700 dark:text-gray-300 ${extraClass}`}>
|
|
|
|
<span>
|
|
|
|
<img src={`https://icons.duckduckgo.com/ip3/${domain}.ico`} referrerPolicy="no-referrer" className="inline w-4 mr-2 align-middle" />
|
2021-02-24 10:50:06 +03:00
|
|
|
<span class="truncate inline-block align-middle max-w-3xs pr-2">{domain}</span>
|
2021-02-23 16:49:56 +03:00
|
|
|
</span>
|
|
|
|
{index < 9 && <span>{index+1}</span>}
|
2020-08-13 13:45:18 +03:00
|
|
|
</a>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
renderDropdown() {
|
|
|
|
if (this.state.loading) {
|
|
|
|
return <div className="px-4 py-6"><div className="loading sm mx-auto"><div></div></div></div>
|
|
|
|
} else if (this.state.error) {
|
2020-12-16 12:57:28 +03:00
|
|
|
return <div className="mx-auto px-4 py-6 dark:text-gray-100">Something went wrong, try again</div>
|
2020-08-13 13:45:18 +03:00
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<div className="py-1">
|
2020-12-29 12:00:41 +03:00
|
|
|
<a href={`/${encodeURIComponent(this.props.site.domain)}/settings`} className="group flex items-center px-4 py-2 md:text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100" role="menuitem">
|
2020-12-16 12:57:28 +03:00
|
|
|
<svg viewBox="0 0 20 20" fill="currentColor" className="mr-2 h-4 w-4 text-gray-500 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 group-focus:text-gray-500 dark:group-focus:text-gray-200"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" /></svg>
|
2020-08-13 13:45:18 +03:00
|
|
|
Site settings
|
|
|
|
</a>
|
|
|
|
</div>
|
2020-12-29 12:00:41 +03:00
|
|
|
<div className="border-t border-gray-200 dark:border-gray-500"></div>
|
2020-08-13 13:45:18 +03:00
|
|
|
<div className="py-1">
|
|
|
|
{ this.state.sites.map(this.renderSiteLink.bind(this)) }
|
|
|
|
</div>
|
2021-01-20 16:54:08 +03:00
|
|
|
<div className="border-t border-gray-200 dark:border-gray-500"></div>
|
|
|
|
<div className="py-1">
|
|
|
|
<a href='/sites/new' className="group flex items-center px-4 py-2 md:text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100" role="menuitem">
|
2021-02-23 16:49:56 +03:00
|
|
|
<svg className="mr-2 h-4 w-4 text-gray-500 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 group-focus:text-gray-500 dark:group-focus:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
|
2021-01-20 16:54:08 +03:00
|
|
|
Add Site
|
|
|
|
</a>
|
|
|
|
</div>
|
2020-08-13 13:45:18 +03:00
|
|
|
</React.Fragment>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
renderArrow() {
|
|
|
|
if (this.props.loggedIn) {
|
|
|
|
return (
|
|
|
|
<svg className="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
|
|
|
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
|
|
|
</svg>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2020-12-16 12:57:28 +03:00
|
|
|
const hoverClass = this.props.loggedIn ? 'hover:text-gray-500 dark:hover:text-gray-200 focus:border-blue-300 focus:ring ' : 'cursor-default'
|
2020-08-13 13:45:18 +03:00
|
|
|
|
|
|
|
return (
|
2020-12-29 12:00:41 +03:00
|
|
|
<div className="relative inline-block text-left z-10 mr-4">
|
2020-12-16 12:57:28 +03:00
|
|
|
<button onClick={this.toggle.bind(this)} className={`inline-flex items-center text-lg w-full rounded-md py-2 leading-5 font-bold text-gray-700 dark:text-gray-300 focus:outline-none transition ease-in-out duration-150 ${hoverClass}`}>
|
2020-08-13 13:45:18 +03:00
|
|
|
|
2020-10-13 10:31:32 +03:00
|
|
|
<img src={`https://icons.duckduckgo.com/ip3/${this.props.site.domain}.ico`} referrerPolicy="no-referrer" className="inline w-4 mr-2 align-middle" />
|
2020-08-13 13:45:18 +03:00
|
|
|
{this.props.site.domain}
|
|
|
|
{this.renderArrow()}
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<Transition
|
|
|
|
show={this.state.open}
|
|
|
|
enter="transition ease-out duration-100 transform"
|
|
|
|
enterFrom="opacity-0 scale-95"
|
|
|
|
enterTo="opacity-100 scale-100"
|
|
|
|
leave="transition ease-in duration-75 transform"
|
|
|
|
leaveFrom="opacity-100 scale-100"
|
|
|
|
leaveTo="opacity-0 scale-95"
|
|
|
|
>
|
|
|
|
<div className="origin-top-left absolute left-0 mt-2 w-64 rounded-md shadow-lg" ref={node => this.dropDownNode = node} >
|
2020-12-16 12:57:28 +03:00
|
|
|
<div className="rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
|
2020-08-13 13:45:18 +03:00
|
|
|
{ this.renderDropdown() }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Transition>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|