Sign upLogin

spherehq/sphere

View on GitHub
Star
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>
)