spherehq/sphere

View on GitHub
packages/platform/src/pages/index.tsx

Summary

Maintainability
F
1 wk
Test Coverage
File `index.tsx` has 540 lines of code (exceeds 250 allowed). Consider refactoring.
import * as React from 'react'
 
import { styled } from '@spherehq/geometry/Theme'
import { Container } from '@spherehq/geometry/Components/Container'
import { Box } from '@spherehq/geometry/Components/Box'
import { Flex } from '@spherehq/geometry/Components/Flex'
import { Grid } from '@spherehq/geometry/Components/Grid'
import { Avatar } from '@spherehq/geometry/Components/Avatar'
import { ArticleListItem } from '@spherehq/geometry/Components/ArticleListItem'
 
import {
InputField,
FormWrapper,
PrimaryButton,
} from '../components/SubscribeForm'
 
import { Link } from 'gatsby'
import { formatDistanceStrict } from 'date-fns'
 
const StyledContainer = styled(Container)`
padding: 0;
 
${props => props.theme.breakpoints.up('md')} {
padding: 0 32px;
}
`
 
const ImageBackground = styled(Box)`
background-image: url('https://picsum.photos/800/425/?random=2');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 0;
height: 100%;
width: 100%;
 
${props => props.theme.breakpoints.up('lg')} {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 0;
}
`
 
const ImageBox = styled(Box)`
overflow: hidden;
order: 1;
height: 375px;
 
${props => props.theme.breakpoints.up('lg')} {
order: 2;
height: inherit;
}
`
 
const FeaturedArticle = styled(Flex)`
box-shadow: rgba(51, 51, 51, 0.1) 0px 2px 5px;
border: 1px solid ${({ theme }) => theme.colors.palette.purple.lightest};
border-radius: 5px;
height: 450px;
 
position: relative;
overflow: hidden;
 
${props => props.theme.breakpoints.up('lg')} {
border-radius: 3px;
height: 285px;
}
`
 
const ContentBox = styled(Box)`
background-color: white;
border-top-left-radius: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
order: 2;
padding: 16px;
 
${props => props.theme.breakpoints.up('lg')} {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
order: 1;
}
 
h5,
h2,
p {
color: ${({ theme }) => theme.palette.text};
}
 
h5 {
color: ${({ theme }) => theme.colors.palette.purple.base};
}
`
 
Similar blocks of code found in 2 locations. Consider refactoring.
const StyledPublishedAtBox = styled(Box)`
span {
font-size: 12px;
font-weight: 700;
line-height: 15px;
text-transform: uppercase;
color: ${({ theme }) => theme.colors.palette.purple.dark};
}
 
span + span {
font-weight: 400;
text-transform: none;
color: ${({ theme }) => theme.colors.palette.purple.base};
}
`
 
const StyledSignup = styled(Box)`
background-color: rgba(236, 236, 236, 0.9);
box-shadow: none;
color: ${({ theme }) => theme.palette.text};
border-radius: 0;
width: 100vw;
height: fit-content;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 32px;
 
${props => props.theme.breakpoints.up('md')} {
box-shadow: 0px 2px 5px rgba(51, 51, 51, 0.2);
border-radius: 8px;
width: 100%;
margin: 0 0 32px 0;
left: inherit;
right: inherit;
}
 
${props => props.theme.breakpoints.up('lg')} {
box-shadow: 0px 2px 5px rgba(51, 51, 51, 0.2);
border-radius: 8px;
width: 40%;
margin: 0;
left: inherit;
right: inherit;
}
 
h3,
p {
color: ${({ theme }) => theme.palette.text};
}
 
${FormWrapper} {
box-shadow: none;
}
 
${InputField} {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
`
 
const FollowButton = styled.button`
background-color: ${({ theme }) => theme.colors.palette.purple.base};
color: ${({ theme }) => theme.palette.textAlternative};
border-radius: 2px;
border: 2px solid transparent;
padding: 7px 15px;
margin-top: 20px;
 
font-family: 'Titillium Web', sans-serif;
font-size: 14px;
line-height: 14px;
font-style: normal;
font-weight: bold;
text-align: center;
 
outline-offset: 0;
outline: none;
 
&:hover,
&:focus {
background-color: ${({ theme }) => theme.colors.palette.purple.dark};
}
 
&:focus:enabled {
border: 2px solid ${({ theme }) => theme.colors.palette.purple.dark};
}
 
&:active {
background-color: ${({ theme }) => theme.colors.palette.purple.dark};
box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.297554);
}
 
&:disabled {
opacity: 0.3;
}
`
 
const FollowAuthor = () => {
const [isFollowing, setFollowStatus] = React.useState<boolean>(false)
 
return (
<FollowButton
type="button"
onClick={() => {
setFollowStatus(isFollowing ? false : true)
}}
>
{isFollowing ? `Following` : `Follow`}
</FollowButton>
)
}
 
const ArticleList = styled(Flex)`
li {
margin-bottom: 32px;
 
${props => props.theme.breakpoints.up('md')} {
margin-bottom: 48px;
}
 
${props => props.theme.breakpoints.up('xl')} {
margin-bottom: 16px;
}
}
 
li:last-child {
margin-bottom: 0;
}
`
 
const MiniArticleList = styled(Flex)`
li {
margin-bottom: 14px;
}
 
li:last-child {
margin-bottom: 0;
}
`
 
const Author = styled(Flex)`
flex-grow: 2;
 
${props => props.theme.breakpoints.up('md')} {
flex-grow: inherit;
}
`
 
export default () => (
<StyledContainer limitWidth>
<Grid mt={10} pb={{ xs: 2, md: 4, lg: 8 }}>
Similar blocks of code found in 2 locations. Consider refactoring.
<Box
width={{ xs: 1, md: 1, lg: '80%', xl: '70%' }}
pr={{ xs: 0, md: 8, lg: 8 }}
>
<FeaturedArticle
flexDirection={{ xs: 'column', md: 'column', lg: 'row' }}
>
Similar blocks of code found in 4 locations. Consider refactoring.
<ContentBox
width={{ xs: 1, md: 1, lg: '40%' }}
px={{ xs: 6, md: 6, lg: 8 }}
py={{ xs: 6, md: 6, lg: 6 }}
>
<h5 style={{ margin: 0, fontSize: '12px' }}>Featured</h5>
<h2 style={{ fontSize: '24px', lineHeight: '28px', margin: 0 }}>
The Worst Advice I Ever Received Was ā€˜Follow Your Passionā€™
</h2>
<p style={{ fontSize: '14px', lineHeight: '18px' }}>
My first steps into the working world were guided by the advice
that had dogged me since my college graduation: To be happy, I was
told, I needed to follow my passion.
</p>
<Flex alignContent="center" alignItems="center">
<Box pr={6}>
<Avatar
firstName={`Mark`}
lastName={`David`}
withShadow
mini={true}
imageUrl={`https://randomuser.me/api/portraits/men/8.jpg`}
/>
</Box>
<Box>
<StyledPublishedAtBox>
<span>{`${`David`} ${`Hoist`}`}</span>{' '}
<span>
{`wrote this ${formatDistanceStrict(
new Date('2019-07-09 10:00:00'),
new Date(),
{
addSuffix: true,
},
)}`}
</span>
</StyledPublishedAtBox>
</Box>
</Flex>
</ContentBox>
<ImageBox width={{ xs: 1, md: 1, lg: '60%' }}>
<ImageBackground />
</ImageBox>
</FeaturedArticle>
</Box>
Similar blocks of code found in 2 locations. Consider refactoring.
<Box
width={{ xs: 1, md: 1, lg: '20%', xl: '30%' }}
mt={{ xs: 8, md: 8, lg: 0 }}
>
Identical blocks of code found in 2 locations. Consider refactoring.
<MiniArticleList as="ul" flexDirection={`column`}>
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
smallPreview
/>
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
smallPreview
/>
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
smallPreview
/>
</MiniArticleList>
</Box>
</Grid>
<Flex
p={6}
pr={6}
pt={{ xs: 0, md: 6, lg: 6 }}
flexDirection={{ xs: `column`, md: `column`, lg: `row` }}
>
Similar blocks of code found in 4 locations. Consider refactoring.
<Box
width={{ xs: 1, md: 1, lg: '60%' }}
order={{ xs: 2, md: 2, lg: 1 }}
pt={{ xs: 8, md: 0, lg: 0 }}
>
<h2 style={{ fontSize: '22px', marginTop: 0 }}>Featured authors</h2>
<Grid
colGap={{ xs: 8, md: 6, lg: 8 }}
rowGap={{ xs: 8, md: 6, lg: 8 }}
alignItems="flex-start"
flexWrap="wrap"
>
Similar blocks of code found in 6 locations. Consider refactoring.
<Author
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<Avatar
firstName={`Jason`}
lastName={`Brown`}
withShadow
mini={false}
imageUrl={`https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/62594329_10161960235125541_6695466780212592640_n.jpg?_nc_cat=109&_nc_oc=AQk3wyjbSS718_4vRRe5fJiznX264QZmPiloy6VG4VTxGLdn9cTfgRT_7pHQkplIRWI&_nc_ht=scontent-lhr3-1.xx&oh=9ef933443fdaf55926e77cd43c9fd199&oe=5DB28F5E`}
/>
<FollowAuthor />
</Author>
Similar blocks of code found in 6 locations. Consider refactoring.
<Author
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<Avatar
firstName={`Reese`}
lastName={`Moss`}
withShadow
mini={false}
imageUrl={`https://randomuser.me/api/portraits/women/20.jpg`}
/>
<FollowAuthor />
</Author>
Similar blocks of code found in 6 locations. Consider refactoring.
<Author
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<Avatar
firstName={`Mark`}
lastName={`David`}
withShadow
mini={false}
imageUrl={`https://randomuser.me/api/portraits/men/8.jpg`}
/>
<FollowAuthor />
</Author>
Similar blocks of code found in 6 locations. Consider refactoring.
<Author
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<Avatar
firstName={`Tess`}
lastName={`Moon`}
withShadow
mini={false}
imageUrl={`https://randomuser.me/api/portraits/women/2.jpg`}
/>
<FollowAuthor />
</Author>
Similar blocks of code found in 6 locations. Consider refactoring.
<Author
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<Avatar
firstName={`Charlie`}
lastName={`Toon`}
withShadow
mini={false}
imageUrl={`https://randomuser.me/api/portraits/women/94.jpg`}
/>
<FollowAuthor />
</Author>
Similar blocks of code found in 6 locations. Consider refactoring.
<Author
alignItems="center"
justifyContent="center"
flexDirection="column"
>
<Avatar
firstName={`Charlie`}
lastName={`Toon`}
withShadow
mini={false}
imageUrl={`https://randomuser.me/api/portraits/women/91.jpg`}
/>
<FollowAuthor />
</Author>
</Grid>
</Box>
Similar blocks of code found in 2 locations. Consider refactoring.
<StyledSignup px={8} order={{ xs: 1, md: 1, lg: 2 }}>
<h3>Would you like to try it?</h3>
<p style={{ fontSize: '16px' }}>
Weā€™re launching a private beta in <strong>Q2 2019</strong>, free for
anyone interested, with a full release of the platform later in 2019.
</p>
<FormWrapper>
<InputField id="email" type="email" placeholder="Email address" />
<PrimaryButton>Notify me</PrimaryButton>
</FormWrapper>
<p style={{ fontSize: '12px', lineHeight: '18px', opacity: 0.8 }}>
We promise to send you only updates about our launch.
</p>
</StyledSignup>
</Flex>
<Grid flexDirection={`row`}>
Similar blocks of code found in 4 locations. Consider refactoring.
<Box
width={{ xs: 1, md: 1, lg: '50%' }}
mr={{ xs: 0, md: 0, lg: 10 }}
order={{ xs: 2, md: 2, lg: 1 }}
>
<h2>Latest</h2>
<ArticleList as="ul" flexDirection={`column`}>
Identical blocks of code found in 7 locations. Consider refactoring.
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
summary={`Last week I was blogging about simple stuff with Brigade event
driven automation platform. Basically we did nothing similar
to real-lifeā€¦`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
/>
Identical blocks of code found in 7 locations. Consider refactoring.
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
summary={`Last week I was blogging about simple stuff with Brigade event
driven automation platform. Basically we did nothing similar
to real-lifeā€¦`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
/>
Identical blocks of code found in 7 locations. Consider refactoring.
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
summary={`Last week I was blogging about simple stuff with Brigade event
driven automation platform. Basically we did nothing similar
to real-lifeā€¦`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
/>
Identical blocks of code found in 7 locations. Consider refactoring.
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
summary={`Last week I was blogging about simple stuff with Brigade event
driven automation platform. Basically we did nothing similar
to real-lifeā€¦`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
/>
Identical blocks of code found in 7 locations. Consider refactoring.
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
summary={`Last week I was blogging about simple stuff with Brigade event
driven automation platform. Basically we did nothing similar
to real-lifeā€¦`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
/>
Identical blocks of code found in 7 locations. Consider refactoring.
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
summary={`Last week I was blogging about simple stuff with Brigade event
driven automation platform. Basically we did nothing similar
to real-lifeā€¦`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
/>
Identical blocks of code found in 7 locations. Consider refactoring.
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
summary={`Last week I was blogging about simple stuff with Brigade event
driven automation platform. Basically we did nothing similar
to real-lifeā€¦`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
/>
</ArticleList>
</Box>
Similar blocks of code found in 4 locations. Consider refactoring.
<Box
width={{ xs: 1, md: 1, lg: '40%' }}
pt={{ xs: 0, md: 0, lg: 6 }}
order={{ xs: 1, md: 1, lg: 2 }}
>
<h2 style={{ fontSize: '22px' }}>Popular right now</h2>
Identical blocks of code found in 2 locations. Consider refactoring.
<MiniArticleList as="ul" flexDirection={`column`}>
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
smallPreview
/>
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
smallPreview
/>
<ArticleListItem
title={`Scientists Create Airplane That Can Land Itself on Any Runway`}
link={''}
linkAs={Link}
previewImageUrl={`https://picsum.photos/150/150?random=7`}
publishedAt={`2019-07-09 10:00:00`}
author={{ firstName: 'Ryan', lastName: 'Whitwam' }}
smallPreview
/>
</MiniArticleList>
</Box>
</Grid>
</StyledContainer>
)