diff --git a/web/src/components/Availability.js b/web/src/components/Availability.js index d60b3aa..55ccd03 100644 --- a/web/src/components/Availability.js +++ b/web/src/components/Availability.js @@ -1,40 +1,62 @@ -import React from 'react' +import React, { Suspense } from 'react' import styled from 'styled-components' import useFetch from 'fetch-suspense' import { BarLoader } from 'react-spinners' import { ExternalLink } from './Links' -function AvailabilityCell({ +class ErrorBoundary extends React.Component { + constructor(props) { + super(props) + this.state = { hasError: false } + } + + static getDerivedStateFromError(error) { + return { hasError: true, message: error.message } + } + + componentDidCatch(error, info) {} + + render() { + if (this.state.hasError) { + return

{this.state.message}

+ } + return this.props.children + } +} + +const Result = ({ name, availability, link, prefix = '', suffix = '', icon, -}) { - return ( - +}) => ( + + {icon} - + {prefix} - {availability ? ( - {name} - ) : ( - {name} - )} + {name} {suffix} - - - ) -} + + + +) -export const Fallback = () => ( - +const Fallback = () => ( + - + +) + +export const AvailabilityContainer = ({ children }) => ( + + }>{children} + ) export function DedicatedAvailability({ @@ -46,11 +68,13 @@ export function DedicatedAvailability({ icon, }) { const response = useFetch(`/availability/${service}/${name}`) + if (response.error) { throw new Error(`${service}: ${response.error}`) } + return ( - (availability ? 'green' : 'red')}; ` -const Item = styled.span` +const Name = styled.span` margin-left: 6px; + margin-top: -1px; font-family: monospace; font-size: 1rem; diff --git a/web/src/components/Cards.js b/web/src/components/Cards.js index 749090b..2e1c2a8 100644 --- a/web/src/components/Cards.js +++ b/web/src/components/Cards.js @@ -1,32 +1,9 @@ -import React, { Suspense, useState } from 'react' +import React, { useState } from 'react' import styled from 'styled-components' -import { Fallback } from './Availability' +import { AvailabilityContainer } from './Availability' import { mobile } from '../util/css' -class ErrorBoundary extends React.Component { - constructor(props) { - super(props) - this.state = { hasError: false } - } - static getDerivedStateFromError(error) { - return { hasError: true, message: error.message } - } - componentDidCatch(error, info) {} - render() { - if (this.state.hasError) { - return

{this.state.message}

- } - return this.props.children - } -} - -const BoundedSuspense = ({ children }) => ( - - }>{children} - -) - export function Card({ title, nameList, alternativeList = [], children }) { const [revealAlternatives, setRevealAlternatives] = useState(false) @@ -37,33 +14,30 @@ export function Card({ title, nameList, alternativeList = [], children }) { return ( {title} - <> + {nameList.map((name) => ( - {children(name)} + {children(name)} ))} {revealAlternatives && alternativeList.map((name) => ( - {children(name)} + {children(name)} ))} - - {alternativeList.length > 0 && !revealAlternatives ? ( - - show alternatives - - ) : null} + {alternativeList.length > 0 && !revealAlternatives ? ( + + show more + + ) : null} + ) } const CardWrapper = styled.div` - margin-bottom: 20px; + margin-bottom: 40px; padding: 40px; - border-radius: 2px; ${mobile} { - padding: 20px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); - border-radius: 0; + padding: 0px; } ` @@ -71,6 +45,20 @@ const CardTitle = styled.div` font-size: 0.8rem; font-weight: bold; margin-bottom: 15px; + + ${mobile} { + padding-left: 20px; + } +` + +const CardList = styled.div` + border-radius: 2px; + + ${mobile} { + padding: 20px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); + border-radius: 0; + } ` const ShowAlternativesButton = styled.div` diff --git a/web/src/components/cards/DomainCard.js b/web/src/components/cards/DomainCard.js index 72f337c..d8d1819 100644 --- a/web/src/components/cards/DomainCard.js +++ b/web/src/components/cards/DomainCard.js @@ -10,11 +10,12 @@ export default function DomainCard({ name }) { {(name) => ( } /> } />