Skip to content

Commit d480298

Browse files
johnsylvainjohnsylvain
committed
clean up components
1 parent eeb7978 commit d480298

File tree

12 files changed

+55
-55
lines changed

12 files changed

+55
-55
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib"
3+
}

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
"@types/react-helmet": "^5.0.9",
3232
"@types/styled-components": "^4.1.18",
3333
"@types/styled-system": "^5.1.1",
34-
"prettier": "^1.18.2"
34+
"prettier": "^1.18.2",
35+
"typescript": "^3.6.2"
3536
},
3637
"keywords": [
3738
"gatsby",

‎src/components/grid.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import styled from 'styled-components';
2+
3+
export const Grid = styled.div`
4+
display: grid;
5+
grid-template-columns: 1fr 1fr 1fr;
6+
grid-gap: ${props => props.theme.spacing.lg};
7+
padding: ${props => props.theme.spacing.xl} 0;
8+
9+
@media (max-width: ${props => props.theme.breakpoint.md}px) {
10+
grid-template-columns: 1fr;
11+
}
12+
`;

‎src/components/album-feature.tsx renamed to ‎src/components/review-feature.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { Link } from './link';
55
import { Tilt } from './tilt';
66
import Image from 'gatsby-image';
77

8-
type AlbumFeatureProps = {
9-
album: any;
8+
type ReviewFeatureProps = {
9+
review: any;
1010
};
1111

1212
const Container = styled.div`
@@ -38,22 +38,22 @@ const ReviewBadge = styled.div`
3838
justify-content: center;
3939
`;
4040

41-
export const AlbumFeature: React.FC<AlbumFeatureProps> = ({ album }) => {
41+
export const ReviewFeature: React.FC<ReviewFeatureProps> = ({ review }) => {
4242
return (
43-
<Link to={`/${album.slug}`}>
43+
<Link to={`/${review.slug}`}>
4444
<Tilt>
4545
<Container>
46-
<Image fluid={album.coverArt.fluid} />
46+
<Image fluid={review.coverArt.fluid} />
4747
<AlbumDetails>
4848
<div>
4949
<Text bold fontSize={3} mb={1}>
50-
{album.albumName}
50+
{review.albumName}
5151
</Text>
52-
<Text>by {album.artistName}</Text>
52+
<Text>by {review.artistName}</Text>
5353
</div>
5454
<ReviewBadge>
5555
<Text bold fontSize={3}>
56-
{album.rating}
56+
{review.rating}
5757
</Text>
5858
</ReviewBadge>
5959
</AlbumDetails>

‎src/components/album-row.tsx renamed to ‎src/components/review-tile.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Text } from './text';
55
import { Link } from './link';
66
import { Tilt } from './tilt';
77

8-
type AlbumRowProps = {
8+
type ReviewTileProps = {
99
album: any;
1010
};
1111

@@ -33,7 +33,7 @@ const AlbumRowContent = styled.div`
3333
flex-grow: 1;
3434
`;
3535

36-
export const AlbumRow: React.FC<AlbumRowProps> = ({ album }) => {
36+
export const ReviewTile: React.FC<ReviewTileProps> = ({ album }) => {
3737
return (
3838
<Link to={`/${album.slug}`}>
3939
<Tilt>

‎src/components/tilt.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const Tilt: React.FC<TiltProps> = ({ children }) => {
3636
onMouseLeave={() => set({ xys: [0, 0, 1] })}
3737
onMouseDown={() => set({ xys: [0, 0, 0.98] })}
3838
style={{
39+
//@ts-ignore
3940
transform: props.xys.interpolate(trans),
4041
}}
4142
>

‎src/components/typeahead.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,10 @@ export const Typeahead: React.FC<TypeaheadProps> = ({
104104
{filteredOptions.length ? (
105105
filteredOptions.slice(0, 3).map(option => children(option))
106106
) : (
107-
<Text p={3} align="center" color="subtext">
108-
No reviews found.
107+
<Text p={3} align="center" color="subtext">
108+
No reviews found.
109109
</Text>
110-
)}
110+
)}
111111
</TypeaheadDropdown>
112112
)
113113
)}

‎src/pages/about.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { graphql, useStaticQuery } from 'gatsby';
66

77
const query = graphql`
88
query {
9-
allContentfulAuthor {
9+
allContentfulAuthor(sort: { order: ASC, fields: createdAt }) {
1010
edges {
1111
node {
1212
name

‎src/pages/index.tsx

+4-16
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
import * as React from 'react';
2-
import { useStaticQuery, graphql, Link } from 'gatsby';
3-
import styled from 'styled-components';
2+
import { useStaticQuery, graphql } from 'gatsby';
3+
import { Grid } from '../components/grid';
44
import { Layout } from '../components/layout';
55
import { SEO } from '../components/seo';
66
import { Text } from '../components/text';
7-
import { AlbumFeature } from '../components/album-feature';
7+
import { ReviewFeature } from '../components/review-feature';
88
import { ButtonLink } from '../components/button';
9-
import { Tilt } from '../components/tilt';
10-
11-
const Grid = styled.div`
12-
display: grid;
13-
grid-template-columns: 1fr 1fr 1fr;
14-
grid-gap: ${props => props.theme.spacing.lg};
15-
padding: ${props => props.theme.spacing.xl} 0;
16-
17-
@media (max-width: ${props => props.theme.breakpoint.md}px) {
18-
grid-template-columns: 1fr;
19-
}
20-
`;
219

2210
const IndexPage: React.FC = () => {
2311
const data = useStaticQuery(graphql`
@@ -54,7 +42,7 @@ const IndexPage: React.FC = () => {
5442
{data.allContentfulReview.edges.length && (
5543
<Grid>
5644
{data.allContentfulReview.edges.slice(0, 3).map(({ node }) => (
57-
<AlbumFeature album={node} key={node.slug}></AlbumFeature>
45+
<ReviewFeature review={node} key={node.slug}></ReviewFeature>
5846
))}
5947
</Grid>
6048
)}

‎src/pages/reviews.tsx

+3-13
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as React from 'react';
22
import { useStaticQuery, graphql } from 'gatsby';
3-
import styled from 'styled-components';
43
import { Layout } from '../components/layout';
54
import { SEO } from '../components/seo';
6-
import { AlbumRow } from '../components/album-row';
5+
import { ReviewTile } from '../components/review-tile';
76
import { Text } from '../components/text';
7+
import { Grid } from '../components/grid';
88

99
const query = graphql`
1010
query {
@@ -26,16 +26,6 @@ const query = graphql`
2626
}
2727
`;
2828

29-
const Grid = styled.div`
30-
display: grid;
31-
grid-template-columns: 1fr 1fr 1fr;
32-
grid-gap: ${props => props.theme.spacing.md};
33-
34-
@media (max-width: ${props => props.theme.breakpoint.md}px) {
35-
grid-template-columns: 1fr;
36-
}
37-
`;
38-
3929
const Reviews: React.FC = () => {
4030
const data = useStaticQuery(query);
4131

@@ -47,7 +37,7 @@ const Reviews: React.FC = () => {
4737
</Text>
4838
<Grid>
4939
{data.allContentfulReview.edges.map(({ node }) => (
50-
<AlbumRow album={node} key={node.slug}></AlbumRow>
40+
<ReviewTile album={node} key={node.slug}></ReviewTile>
5141
))}
5242
</Grid>
5343
</Layout>

‎src/templates/review.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ const ReviewBadge = styled.div`
3535
justify-content: center;
3636
`;
3737

38-
const FullReview: React.FC<{ album: any }> = ({ album }) => {
38+
const FullReview: React.FC<{ review: any }> = ({ review }) => {
3939
return (
4040
<Card mt={5} p={4} width={1}>
4141
<Flex>
4242
<Box width={[1, 1, 1 / 3]}>
4343
<ImageWrapper>
44-
<Image fluid={album.coverArt.fluid}></Image>
44+
<Image fluid={review.coverArt.fluid}></Image>
4545
</ImageWrapper>
4646
</Box>
4747
<Flex
@@ -53,32 +53,32 @@ const FullReview: React.FC<{ album: any }> = ({ album }) => {
5353
<Flex>
5454
<Box flex="1 1 auto">
5555
<Text fontSize={4} bold mb={1}>
56-
{album.albumName}
56+
{review.albumName}
5757
</Text>
58-
<Text mb={2}>by {album.artistName}</Text>
58+
<Text mb={2}>by {review.artistName}</Text>
5959
</Box>
6060
<ReviewBadge>
61-
<Text bold>{album.rating}</Text>
61+
<Text bold>{review.rating}</Text>
6262
</ReviewBadge>
6363
</Flex>
6464
<Text fontSize={1} color="subtext">
65-
{album.label} <Span mx={1}>-</Span> {album.releaseDate}
65+
{review.label} <Span mx={1}>-</Span> {review.releaseDate}
6666
</Text>
6767
<Box py={3} flex="1 1 auto">
68-
{renderRichText(album.body.json)}
68+
{renderRichText(review.body.json)}
6969
</Box>
7070

7171
<Flex justifyContent="space-between" alignItems="flex-end">
7272
<div>
7373
<Text fontSize={1} color="subtext" mb={1}>
74-
written by {album.author.name}
74+
written by {review.author.name}
7575
</Text>
7676
<Text fontSize={1} color="subtext">
77-
{album.createdAt}
77+
{review.createdAt}
7878
</Text>
7979
</div>
8080
<A
81-
href={album.spotify}
81+
href={review.spotify}
8282
target="_blank"
8383
bold
8484
color="spotify"
@@ -101,7 +101,7 @@ const Review: React.FC<{ data: any }> = ({ data }) => {
101101
description={`Review of ${data.contentfulReview.albumName} by ${data.contentfulReview.artistName}`}
102102
image={'http:' + data.contentfulReview.coverArt.fluid.src}
103103
/>
104-
<FullReview album={data.contentfulReview} />
104+
<FullReview review={data.contentfulReview} />
105105
</Layout>
106106
);
107107
};

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -11811,6 +11811,11 @@ typedarray@^0.0.6:
1181111811
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
1181211812
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
1181311813

11814+
typescript@^3.6.2:
11815+
version "3.6.2"
11816+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.2.tgz#105b0f1934119dde543ac8eb71af3a91009efe54"
11817+
integrity sha512-lmQ4L+J6mnu3xweP8+rOrUwzmN+MRAj7TgtJtDaXE5PMyX2kCrklhg3rvOsOIfNeAWMQWO2F1GPc1kMD2vLAfw==
11818+
1181411819
ua-parser-js@^0.7.18:
1181511820
version "0.7.20"
1181611821
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"

0 commit comments

Comments
 (0)